text-decoration-color

下線・上線・取り消し線など、文字へ引いた線の色を変えるプロパティ。文字色は固定したまま、装飾線だけの色を切り替えて違いを確かめます。

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

下線などの装飾線の色をライブプレビューで変えながら、currentColor、初期値、文字色との違い、使い方を初学者向けに解説します。

遊んでみよう

見てわかるCSS

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

#7258e8：装飾線だけを紫にします

CSS

.element text-decoration-color: #7258e8;

値のパターン

装飾線の色 text-decoration-color

text-decoration-colorの構成要素

01<color>

CSSの色値で指定する

16進数・キーワード・rgb()・hsl()など、CSSで使える色値を1つ指定します。

02currentColor

文字色と同じ色を使う

currentColorはその要素のcolorの計算値を参照します。text-decoration-colorの初期値です。

03text-decoration-line

先に装飾線を表示する

色だけでは線は現れません。underlineなど、表示する装飾線を別に指定します。

04color

文字色とは分けて考える

colorは文字の色、text-decoration-colorは装飾線の色を指定します。別々の色にもできます。

早見表

初期値はcurrentColorです。下線などが表示されている要素へ色値を1つ指定し、装飾線の色だけを変えます。

01currentColorその要素の文字色を使う初期値

02#7258e816進数で紫を指定するHEX

03coral色キーワードで指定するキーワード

04rgb(15 115 95)RGBの成分で指定するrgb()

05hsl(252 75% 63%)色相・彩度・明度で指定するhsl()

06transparent装飾線を透明にする透明

よくある使い方

リンクの下線へアクセント色を使う

文字色を読みやすく保ったまま、下線へサイトのアクセント色を使ってリンクを区別します。

a { text-decoration-line: underline; text-decoration-color: #7258e8; }

削除済みの価格へ赤い線を引く

del要素で削除の意味を示し、取り消し線の色だけを変えて旧価格を見分けやすくします。

del { text-decoration-color: #d9472b; }

文字色に連動する下線をつくる

currentColorを使うと、テーマなどでcolorが変わったときに装飾線も同じ色へ追従します。

.label { color: #0f735f; text-decoration-line: underline; text-decoration-color: currentColor; }

ポイント

線を見せたまま、文字とのコントラストを確かめる。

text-decoration-colorは装飾線の色だけを指定するため、text-decoration-lineがnoneのままでは見た目に変化がありません。初期値はcurrentColorで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。計算値は色の計算値で、色としてなめらかにアニメーションできます。ただし、祖先が引いた装飾線は子孫の文字にも続き、子要素からその祖先由来の線色だけを変えることはできません。リンクや状態の違いを伝えるときは色だけに頼らず、下線の有無・線種・文言・適切なHTML要素など別の手掛かりも用意し、装飾線と背景のコントラストも確認します。