text-decoration-style

文字へ引いた装飾線の、形を選ぶプロパティ。実線・2本線・点線・破線・波線を切り替え、同じ下線がどう変わるか比べます。

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

solid・double・dotted・dashed・wavyをライブプレビューで切り替えながら、初期値、使い方、注意点を初学者向けに解説します。

遊んでみよう

見てわかるCSS

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

実線：1本の連続した線で描きます

CSS

.element text-decoration-style: solid;

値のパターン

装飾線の形 text-decoration-style

text-decoration-styleの構成要素

01solid / double

連続した線で描く

solidは1本の実線、doubleは平行な2本線で装飾します。solidが初期値です。

02dotted / dashed

点や短い線で区切る

dottedは点の並び、dashedは短い線の並びとして装飾線を描きます。

03wavy

波打つ線で描く

上下へ波打つ線を描きます。強い印象になるため、短い注記など範囲を絞って使います。

04text-decoration-line

先に線を表示する

線の形だけでは位置は決まりません。underlineなどの装飾線を別に指定します。

早見表

初期値はsolidです。どの値も、text-decoration-lineで指定したすべての装飾線へ同じ形を適用します。

01solid1本の実線で描く初期値

02double平行な2本線で描く2本線

03dotted点の並びで描く点線

04dashed短い線の並びで描く破線

05wavy上下へ波打つ線で描く波線

よくある使い方

リンクの下線を点線へ変える

underlineを残したまま線の形だけを変え、本文中のリンクを色以外でも見分けられるようにします。

a { text-decoration-line: underline; text-decoration-style: dotted; }

短い注記へ波線を引く

注記の範囲へ波線を引きます。誤字表示と混同しないよう、説明や色など別の手掛かりも添えます。

.note { text-decoration-line: underline; text-decoration-style: wavy; }

見出しの上下を破線で囲む

underlineとoverlineを組み合わせると、上下の両方へ同じ破線スタイルが適用されます。

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

ポイント

線の位置を指定してから、形を変える。

text-decoration-styleは装飾線の形だけを指定するため、text-decoration-lineがnoneのままでは変化が見えません。初期値はsolidで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。値は離散的に切り替わります。underlineとoverlineのように複数の線を引いても、線ごとに異なるstyleを指定することはできず、すべてへ同じ形が適用されます。削除などの意味を表す場合は見た目だけに頼らず、delやsなど適切なHTML要素も使います。形・位置・色・太さをまとめたいときはtext-decoration一括指定を使えます。