autoブラウザーへ太さを任せる
ブラウザーが装飾線に合う太さを選びます。text-decoration-thicknessの初期値です。
text-decoration-thickness
下線・上線・取り消し線など、文字へ引いた線の太さを変えるプロパティ。線の位置・形・色は固定したまま、太さだけを切り替えて違いを確かめます。
CSSのtext-decoration-thicknessとは？
下線などの太さをauto・from-font・長さ・割合で切り替えながら、初期値、使い方、文字との重なりを初学者向けに解説します。
遊んでみよう
見てわかるCSS
文字色・線の位置・形・色は固定。装飾線の太さだけが変わりますCSS
.element text-decoration-thickness: auto;
値のパターン
text-decoration-thicknessの構成要素
from-font書体の推奨値を使う
フォントに推奨する線の太さがあれば使い、情報がなければautoと同じように表示します。
<length>長さで太さを固定する
1px・0.1emなど、0以上の長さで装飾線の太さを具体的に指定します。
<percentage>文字サイズを基準にする
10%のように、要素自身のフォントサイズ1emに対する割合で太さを指定します。
早見表
初期値はautoです。書体に合わせるキーワードか、0以上の長さ、フォントサイズを基準にした割合を指定します。
01
autoブラウザーが適切な太さを選ぶ初期値02
from-fontフォントの推奨値を使う書体に合わせる03
1px1ピクセルの細い線にする固定長04
0.12em現在の文字サイズに合わせる相対長05
10%1emの10%を太さにする割合06
00でも最小1デバイスピクセルで描く非表示にはならないよくある使い方
01
本文リンクの下線を読みやすくする
細すぎる下線を少し太くし、本文の文字を隠さない範囲でリンクを見分けやすくします。
a { text-decoration-line: underline; text-decoration-thickness: 2px; }02
見出しの下線を文字サイズへ合わせる
割合を使い、見出しのフォントサイズを変えたときも線の太さが一緒に変わるようにします。
h2 { text-decoration-line: underline; text-decoration-thickness: 10%; }03
書体が持つ下線の太さを使う
from-fontを使い、対応するフォントでは書体の設計に沿った装飾線を表示します。
.book-title { text-decoration-line: underline; text-decoration-thickness: from-font; }ポイント
先に線を表示し、文字を隠さない太さを選ぶ。
text-decoration-thicknessは装飾線の太さだけを指定するため、text-decoration-lineがnoneのままでは見た目に変化がありません。初期値はautoで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。割合は要素自身のフォントサイズ1emを基準にし、指定した要素のボックス内では子孫の文字サイズが変わっても同じ太さで描かれます。値は計算値の型に応じてアニメーションできます。実際の太さは最低1デバイスピクセルに丸められるため、0を指定しても線は消えません。装飾線を非表示にする場合はtext-decoration-line: noneを使います。ただし、祖先が引いた装飾線は子孫の文字にも続き、子要素からその祖先由来の線の太さだけを変えることはできません。太い線は文字と重なって読みにくくなるため、text-underline-offsetや線の色も含めて読みやすさを確認します。
関連するCSSも見てみよう。
text-decoration-thickness と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。