text-decoration-line線を引く位置を選ぶ
none・underline・overline・line-throughから選び、underlineとoverlineのように複数も組み合わせられます。
text-decoration
文字へ引く線の位置・形・色・太さを、1つの宣言にまとめて指定するプロパティ。装飾線の4つの構成要素を選び、見た目とCSSを同時に比べます。
CSSのtext-decorationとは？
下線・上線・取り消し線と、線の形・色・太さをライブプレビューで組み合わせながら、一括指定の構文とリンクでの注意点を初学者向けに解説します。
遊んでみよう
見てわかるCSS
文字色は固定。装飾線だけが変わりますCSS
.element text-decoration: underline solid #7258e8 3px;
値のパターン
text-decorationの構成要素
text-decoration-style線の形を選ぶ
solid・double・dotted・dashed・wavyから、装飾線の形を選びます。
text-decoration-color線の色を決める
CSSで使える色値を指定します。初期値のcurrentColorは、要素の文字色を使います。
text-decoration-thickness線の太さを決める
auto・from-fontまたは0以上の長さや割合で指定します。太くしすぎて文字を隠さないようにします。
早見表
値は順不同で組み合わせられます。仕様上の初期値はtext-decoration-lineがnone、text-decoration-styleがsolid、text-decoration-colorがcurrentColor、text-decoration-thicknessがautoです。
01
none装飾線を表示しない初期のline02
underline文字の下へ線を引く下線03
overline文字の上へ線を引く上線04
line-through文字の中央へ線を引く取り消し線05
underline wavy #d9472b 3px色つきの波線を引く4要素06
underline overline double文字の上下へ2本線を引く複数のline07
underline currentColor from-font文字色と書体の推奨太さを使う書体に合わせるよくある使い方
01
リンクの下線を見やすく整える
下線の色や太さを調整して、本文中のリンクを色だけに頼らず見分けられるようにします。
a { text-decoration: underline solid currentColor 2px; }02
削除された価格へ取り消し線を引く
del要素で削除の意味を示し、line-throughで旧価格を視覚的にも区別します。
del { text-decoration: line-through solid #d9472b 2px; }03
短い注記を波線で強調する
短い範囲へ波線を使い、通常の下線と異なる注記であることを線の形でも示します。
.note { text-decoration: underline wavy #7258e8 2px; }ポイント
リンクの下線を消すなら、別の手掛かりを残す。
text-decorationはtext-decoration-line・text-decoration-style・text-decoration-color・text-decoration-thicknessの一括指定で、省略した構成要素は初期値へ戻ります。すべての要素と::first-letter・::first-lineに適用でき、各構成要素は子要素へ継承されません。ただし、親要素から描かれた装飾線は子孫の文字にも続くため、子要素へtext-decoration: noneを指定しても親の線だけを消すことはできません。リンクの下線を外す場合は、色以外にも太字・背景・枠線・アイコンなど、リンクだと分かる手掛かりと十分なコントラストを用意します。text-decoration-lineとtext-decoration-styleは離散的に、text-decoration-colorとtext-decoration-thicknessは対応する値の型に応じて変化します。
関連するCSSも見てみよう。
text-decoration と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。