text-decoration-line

文字へ引く装飾線の、位置や種類を選ぶプロパティ。下線・上線・取り消し線を切り替え、複数の線を組み合わせる書き方も確かめます。

CSSの`text-decoration-line`とは？

none・underline・overline・line-throughと複数の線をライブプレビューで切り替えながら、初期値、組み合わせ、使い方を初学者向けに解説します。

遊んでみよう

見てわかるCSS

線の形・色・太さは固定。位置だけが変わります

下線：文字の下へ線を引きます

CSS

.element text-decoration-line: underline;

値のパターン

装飾線の位置 text-decoration-line

text-decoration-lineの構成要素

01none

装飾線を表示しない

text-decoration-lineの初期値です。祖先から描かれている装飾線まで消す値ではありません。

02underline / overline

文字の下または上へ線を引く

underlineは各行の下、overlineは各行の上へ装飾線を引きます。

03line-through

文字の中央へ線を引く

各行の文字を横切る線を引きます。削除の意味はdel要素などのHTMLでも表します。

04underline overline

複数の線を組み合わせる

none以外のキーワードは空白で区切り、下線・上線・取り消し線を同時に指定できます。

早見表

初期値はnoneです。基本の4値と、空白で区切る複数指定を先に覚えます。

01none装飾線を表示しない初期値

02underline文字の下へ線を引く下線

03overline文字の上へ線を引く上線

04line-through文字の中央へ線を引く取り消し線

05underline overline文字の上下へ線を引く複数指定

06underline overline line-through3種類の線を同時に引く複数指定

07spelling-errorブラウザーの誤字表示を使う対応状況に注意

08grammar-errorブラウザーの文法エラー表示を使う対応状況に注意

よくある使い方

本文中のリンクへ下線を引く

リンクを色だけに頼らず見分けられるよう、underlineで文字の下へ線を残します。

a { text-decoration-line: underline; }

古い価格へ取り消し線を引く

del要素で削除された内容だと伝え、line-throughで見た目にも変化を加えます。

del { text-decoration-line: line-through; }

短い見出しを上下の線で囲む

underlineとoverlineを組み合わせ、文字の上下へ同時に装飾線を引きます。

.heading { text-decoration-line: underline overline; }

ポイント

線の位置と、線の見た目を分けて考える。

text-decoration-lineは装飾線の位置や種類だけを指定します。線の形・色・太さはtext-decoration-style・text-decoration-color・text-decoration-thicknessで調整するか、text-decoration一括指定へまとめます。初期値はnoneで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。ただし祖先が描いた装飾線は子孫の文字にも続くため、子孫へnoneを指定しても祖先の線は消えません。値の変化は離散的です。blinkは非推奨であり、通常は点滅しないため使いません。spelling-errorとgrammar-errorは対応状況を確認して使い、色や線種を自由に指定できる装飾線としては扱いません。