CSS下線の基本と応用：underlineプロパティ徹底解説

はい、CSSのtext-decoration-line: underlineプロパティについて、その基本から応用、関連プロパティ、さらには代替手法やアクセシビリティまで含めた詳細な解説記事を約5000語で記述します。

CSS下線の基本と応用：`text-decoration`プロパティ徹底解説

ウェブサイトのデザインにおいて、テキストの装飾は情報の階層化や視覚的な誘導に不可欠です。特に「下線（underline）」は、古くからリンクを示す主要な手段として、またテキストを強調するための一般的なスタイルとして広く利用されています。しかし、単にデフォルトの下線を表示するだけでなく、そのスタイル、色、太さ、さらには位置を制御することで、より洗練された、または特定の意図を伝えるデザインを実現できます。

かつてCSSで下線を制御するには、主にtext-decorationプロパティが使われていましたが、CSS Text Decoration Module Level 3以降、下線（やその他のテキスト装飾線）をより詳細に制御するための個別のプロパティが導入されました。この記事では、これらの新しいプロパティを中心に、CSSで下線を扱うための基本から、高度な応用テクニック、さらにはアクセシビリティやパフォーマンスといった側面まで、約5000語というボリュームで徹底的に解説します。

1. はじめに：なぜ下線を学ぶのか？

下線はウェブデザインにおいて非常に重要な役割を果たします。最も顕著なのは、ハイパーリンクを示す視覚的な手がかりとしての機能です。ユーザーは下線付きのテキストを見て、それがクリック可能なリンクであると直感的に認識します。この機能は、特にアクセシビリティの観点から非常に重要であり、色だけでリンクを区別することが難しいユーザーにとっても、ウェブサイトのナビゲーションを可能にします。

しかし、下線はリンクのためだけにあるわけではありません。特定の語句やフレーズを強調したり、文脈上で特別な意味を持つ箇所を示したりするためにも使われます。例えば、ドキュメントのタイトル、定義語、あるいは特定の専門用語などに下線が付いていることがあります。

一方で、デフォルトの下線は、特に日本語のようにディセンダー（”g”, “p”, “y”などの文字の下に突き出る部分）が多いフォントを使用した場合に、テキストと下線が重なってしまい、可読性を損なうという問題も抱えています。また、デザインの観点から見ると、デフォルトの下線が持つ単一の色や太さでは、サイト全体のデザインと調和しないこともあります。

このような背景から、CSSは下線をより柔軟に制御するためのプロパティを提供してきました。この記事では、それらのプロパティを深く掘り下げ、単に下線を引くだけではない、多様な表現方法を探求します。

2. CSSにおける下線の基本：`text-decoration`プロパティファミリー

歴史的に、CSSでテキストの装飾（下線、上線、打ち消し線など）を指定するには、短縮形プロパティであるtext-decorationが使われてきました。

“`css
/ 旧来または短縮形の使用例 /
a {
text-decoration: underline; / 下線を表示 /
}

a:hover {
text-decoration: none; / ホバー時に下線を非表示 /
}
“`

この短縮形は、装飾線の種類 (line), スタイル (style), 色 (color) をまとめて指定できます。例えば、text-decoration: underline wavy red; のように記述します。

しかし、CSS Text Decoration Module Level 3で導入された新しいプロパティを使うと、これらの要素を個別に、より細かく制御できるようになりました。主要なプロパティは以下の4つです。

text-decoration-line: 装飾線の種類（下線、上線、打ち消し線など）を指定します。
text-decoration-style: 装飾線のスタイル（実線、破線、点線、波線、二重線）を指定します。
text-decoration-color: 装飾線の色を指定します。
text-decoration-thickness: 装飾線の太さを指定します（比較的新しいプロパティ）。

これらのプロパティは、text-decorationという短縮形プロパティの一部であり、個別に使用することで、より詳細なカスタマイズが可能になります。本記事の主題である「下線」は、text-decoration-line: underline; によって指定されます。

デフォルトの下線:
多くのブラウザでは、<a>要素に対してデフォルトでtext-decoration-line: underline;が適用されています。これは、前述のようにリンクであることを視覚的に示すためです。その他の要素（<p>, <h1>など）には、デフォルトではテキスト装飾線は付きません。

3. `text-decoration-line: underline` の詳細

text-decoration-lineプロパティは、どの種類の装飾線を表示するかを指定します。指定できる値は以下の通りです。

none: 装飾線をすべて表示しません。
underline: テキストに下線を表示します。
overline: テキストに上線を表示します。
line-through: テキストに打ち消し線を表示します。
blink: テキストを点滅させます。この値はウェブアクセシビリティやユーザー体験の観点から問題が多く、CSS Text Level 3では非推奨となり、Level 4では削除される可能性が高いため、使用すべきではありません。ほとんどのブラウザではすでにサポートされていません。

複数の値を組み合わせて指定することも可能ですが、最も一般的なのは単一の値を使用することです。例えば、text-decoration-line: underline overline; と指定すると、テキストに下線と上線が同時に表示されます。

underline の挙動:

text-decoration-line: underline; を適用すると、テキストのベースライン（アルファベットの大文字や小文字の本体部分が載る仮想的な線）のわずかに下に実線が描画されます。このデフォルトの位置は、多くのフォントにおいて、前述の通りディセンダーを持つ文字（p, g, y, j, qなど）と下線が重なる原因となります。

このプロパティは、ブロック要素（<div>, <p>など）とインライン要素（<span>, <a>など）の両方に適用できます。

ブロック要素: 要素内のすべてのインラインコンテンツ全体にわたって下線が引かれます。複数行にわたる場合は、各行のテキストの下にそれぞれ下線が引かれます。
インライン要素: その要素が占める幅の下に下線が引かれます。複数行にまたがる場合は、各行のその要素が存在する部分の下に下線が引かれます。

継承:

text-decoration（およびその個別プロパティ）は、デフォルトでは親要素から子要素に継承されません。ただし、text-decoration: underline;が適用された要素（例えば<a>タグ）の内部のテキストには、視覚的に下線が表示されます。これは継承によるものではなく、その要素自身の装飾が内部コンテンツに描画されるためです。

もし明示的に継承させたい場合は、inheritキーワードを使用します。
“`css
/ 例：親要素の下線を子要素に継承させる（通常は非推奨） /
div {
text-decoration-line: underline;
}

div span {
text-decoration-line: inherit; / 親の下線を継承 /
}
`` また、他の継承キーワード（initial,unset,revert）も利用可能ですが、underlineに関しては通常inherit`を使うケースは限定的です。

4. 下線のカスタマイズ：関連プロパティの詳細

text-decoration-line: underline; で下線を引いた後、その見た目をカスタマイズするために以下のプロパティを使用します。

4.1. `text-decoration-style`

このプロパティは、下線（または上線、打ち消し線）の線の種類を指定します。

solid: 実線（デフォルト値）
double: 二重線
dotted: 点線
dashed: 破線
wavy: 波線

“`css
p.solid {
text-decoration-line: underline;
text-decoration-style: solid; / デフォルトと同じ /
}

p.double {
text-decoration-line: underline;
text-decoration-style: double;
}

p.dotted {
text-decoration-line: underline;
text-decoration-style: dotted;
}

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

p.wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
}
“`

これらのスタイルは、デザインのアクセントとして、あるいは特定の意味（例: 修正箇所を波線で示すなど）を持たせるために利用できます。ブラウザサポートは広く普及していますが、古いブラウザでは一部のスタイル（特にwavy）がサポートされていない場合があります。

4.2. `text-decoration-color`

このプロパティは、下線（または他の装飾線）の色を指定します。CSSでサポートされている任意の色指定方法（名前付き色、HEX, RGB, RGBA, HSL, HSLAなど）が使用できます。

“`css
a {
text-decoration-line: underline;
text-decoration-color: blue; / 下線を青に /
}

p.red-underline {
text-decoration-line: underline;
text-decoration-color: #ff0000; / 下線を赤に /
}

p.green-dotted {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: rgb(0, 128, 0); / 緑の点線 /
}
“`

text-decoration-colorを指定しない場合、デフォルトではテキストの色と同じ色になります。これは、currentColorというキーワードと同等の挙動です。currentColorを使用すると、明示的にテキストの色に追従する下線色を指定できます。

css /* テキストの色と下線色が常に同じになる */ p { color: purple; /* テキストは紫 */ text-decoration-line: underline; text-decoration-color: currentColor; /* 下線も紫になる */ }

テキストの色と下線の色を分けることで、デザインの多様性が増し、特定の情報の視覚的な分離を促進できます。例えば、警告を示す下線は赤、強調は青、といった使い分けが可能です。

4.3. `text-decoration-thickness`

これは比較的新しいプロパティで、下線（または他の装飾線）の太さを指定します。

auto: ブラウザがフォントやフォントサイズに基づいて自動的に太さを決定します。これがデフォルト値です。
<length>: ピクセル (px), em (em), rem (rem), パーセント (%) などの長さ単位で太さを指定します。
<percentage>: フォントのemボックスに対するパーセントで太さを指定します。

“`css
p.thick-underline {
text-decoration-line: underline;
text-decoration-thickness: 3px; / 下線を3ピクセルに /
}

p.relative-underline {
text-decoration-line: underline;
text-decoration-thickness: 0.1em; / フォントサイズに対する相対的な太さ /
}

p.percentage-underline {
text-decoration-line: underline;
text-decoration-thickness: 5%; / フォントのemボックスに対するパーセント /
}
“`

text-decoration-thicknessを使うことで、デフォルトの下線よりも太い、あるいは細い線を描画できます。emやremのような相対単位を使用すると、レスポンシブデザインにおいてフォントサイズが変わっても、下線の太さがテキストサイズに合わせて調整されるため便利です。

このプロパティはまだ新しい部類に入るため、古いブラウザではサポートされていない可能性があります。その場合は、autoまたはブラウザデフォルトの太さが適用されます。Can I Useなどでサポート状況を確認することをお勧めします。

5. 下線の応用テクニック

これらのプロパティを組み合わせることで、単なるデフォルトの下線以上の表現が可能になります。

5.1. ホバー効果のカスタマイズ

リンクのホバー時に下線のスタイルを変更するのは、一般的なインタラクションデザインです。

“`css
/ デフォルトの下線を非表示にし、ホバー時に表示 /
a {
text-decoration: none; / 初期状態では下線なし /
color: blue; / リンクの色 /
}

a:hover {
text-decoration-line: underline; / ホバー時に下線を表示 /
text-decoration-style: solid;
text-decoration-color: blue;
text-decoration-thickness: 1px; / または auto /
}

/ ホバー時に下線の色とスタイルを変更 /
a.fancy-link {
text-decoration-line: underline;
text-decoration-color: gray; / 通常時の下線色 /
text-decoration-style: solid;
text-decoration-thickness: 1px;
color: black;
}

a.fancy-link:hover {
text-decoration-color: blue; / ホバー時に下線色を青に /
text-decoration-style: wavy; / ホバー時にスタイルを波線に /
text-decoration-thickness: 2px; / ホバー時に太さを変更 /
}
“`

これらのプロパティ（text-decoration-color, text-decoration-thickness）は、CSSトランジションの対象となります。しかし、text-decoration-lineやtext-decoration-styleは通常トランジションの対象外です。したがって、下線の表示/非表示やスタイルの滑らかな変化を実現するには、他のテクニック（例えば、background-imageを使った疑似的な下線）を検討する必要があります。

5.2. 滑らかな下線アニメーション（`background-image`による代替手法）

text-decorationプロパティ自体で複雑なアニメーション（例: 左から右へ線が伸びる）を行うのは困難です。このような場合は、background-imageとbackground-position, background-size, transitionプロパティを組み合わせて、より柔軟な下線表現を実現できます。

このテクニックでは、要素の背景として細い線状のグラデーションを作成し、その表示範囲や位置をアニメーションさせます。

“`css
/ background-imageを使った下線アニメーションの例 /
a.animated-link {
color: black;
text-decoration: none; / デフォルトの下線を無効にする /
position: relative; / 必要に応じて設定 /
display: inline; / または inline-block /

/ 疑似的な下線を作成 /
background-image: linear-gradient(currentColor, currentColor); / テキスト色と同じ色の線 /
background-repeat: no-repeat; / 繰り返さない /
background-position: 0% 100%; / 下線の開始位置（左下） /
background-size: 0% 1px; / 初期状態：幅0%, 高さ1px /

/ アニメーション設定 /
transition: background-size 0.3s ease-out;
}

a.animated-link:hover {
background-size: 100% 1px; / ホバー時に幅100%に /
}

/ 別のアニメーション例：中央から左右に伸びる /
a.animated-link-center {
color: black;
text-decoration: none;
display: inline;

background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 50% 100%; / 中央下 /
background-size: 0% 1px; / 初期状態：幅0% /

transition: background-size 0.3s ease-out;
}

a.animated-link-center:hover {
background-size: 100% 1px; / ホバー時に幅100%に /
}

/ 太さや位置を調整する場合 /
a.thick-animated-link {
color: black;
text-decoration: none;
display: inline;

background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
/ 位置を下げる場合は background-position: 0% calc(100% + 3px); のように計算 /
/ または background-origin, background-clip を利用 /
background-position: 0% 100%;
background-size: 0% 3px; / 太さを3pxに /

transition: background-size 0.3s ease-out;
}

a.thick-animated-link:hover {
background-size: 100% 3px;
}
“`

このテクニックは、text-decorationプロパティでは不可能なアニメーションを実現できる反面、CSSがやや複雑になり、複数行にわたるテキストの場合に各行の下に線を描画するのが難しいという欠点があります（通常は要素全体の背景として描画されるため）。複数行に対応するには、各行を<span>などで囲むか、より複雑なCSSグリッドやFlexboxと擬似要素を組み合わせるなどの工夫が必要になることがあります。

5.3. 特定の要素への下線適用/除外

デフォルトで下線が付く<a>要素から下線を削除したり、逆にデフォルトで下線が付かない要素に下線を適用したりすることが一般的です。

“`css
/ リンクから下線を削除（アクセシビリティに注意！） /
a {
text-decoration: none;
}

/ 特定のクラスを持つ段落に下線を追加 /
p.highlight {
text-decoration-line: underline;
text-decoration-color: orange;
text-decoration-style: dashed;
}

/ 見出しに二重線の下線を追加 /
h2 {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: gray;
text-decoration-thickness: 2px;
}
“`

リンクの下線を削除する場合は、そのリンクがクリック可能であることを示す他の視覚的な手がかり（例: 色の変更、太字化、アイコンの追加など）を必ず提供してください。色のみに頼ったリンクは、色覚特性を持つユーザーにとって大きな障壁となります。

6. 下線の視覚的な課題と解決策

CSSの下線には、特にテキストとの視覚的な干渉という問題があります。

6.1. ディセンダー問題 (Descender Clipping)

多くのフォントでは、小文字の ‘g’, ‘p’, ‘y’, ‘j’, ‘q’ などにベースラインより下に突き出る部分（ディセンダー）があります。デフォルトのtext-decoration: underline;はベースラインのすぐ下に描画されるため、このディセンダー部分と下線が重なってしまい、文字が読みにくくなることがあります。

この問題に対処するために、CSS Text Decoration Module Level 3では text-underline-position プロパティが導入されました。

auto: ブラウザが最適な位置を自動的に決定します。多くのラテン系フォントではベースラインの下に、一部のスクリプト（漢字など）ではemボックスの下に描画される場合があります。
under: 下線をディセンダーの下に描画します。これにより、テキストと下線が重なるのを防ぎ、可読性が向上します。これがディセンダー問題の一般的な解決策として推奨されます。
left: (縦書きモード用) テキストの左側に線を描画します。
right: (縦書きモード用) テキストの右側に線を描画します。

css /* ディセンダーを避ける位置に下線を表示 */ p.safe-underline { text-decoration-line: underline; text-underline-position: under; }

text-underline-position: under; は、特に日本語のような縦組みが可能な言語や、ディセンダーが多いラテン文字フォントにおいて、下線の可読性を大幅に向上させます。しかし、このプロパティも比較的新しいため、全てのブラウザバージョンで完全にサポートされているわけではありません。特に古いIEや一部のモバイルブラウザではサポートされていない可能性があります。サポート状況を確認し、必要に応じて代替手段を検討してください。

6.2. 代替手法による位置制御

text-underline-position: under; が利用できない、あるいはより精密な位置制御が必要な場合は、前述の代替手法が有効です。

border-bottom: 要素の下に境界線を描画する方法です。太さ、スタイル、色は容易に制御できます。位置は要素のボックスの下端に描画されるため、padding-bottomやmargin-bottomを使って要素本体から下線を離すことができます。
css /* border-bottom を使った疑似下線 */ .border-underline { border-bottom: 1px solid currentColor; padding-bottom: 2px; /* テキストから下線を少し離す */ text-decoration: none; /* 元の下線は消す */ display: inline; /* or inline-block */ }
欠点として、これはボックスモデルの一部であり、テキストのベースラインに厳密に従うわけではありません。また、インライン要素で複数行にわたる場合、各行の下ではなく、要素全体の最終行の下にのみ境界線が描画されます。
box-shadow: 要素に影を付けるプロパティを利用して、下線のような視覚効果を作成します。
css /* box-shadow を使った疑似下線 */ .shadow-underline { box-shadow: 0 1px 0 0 currentColor; /* Xオフセット 0, Yオフセット 1px, ぼかし半径 0, 広がり距離 0 */ text-decoration: none; /* 元の下線は消す */ display: inline; /* or inline-block */ }
Yオフセットと広がり距離を調整することで、下線の太さと位置を制御できます。box-shadowは要素の境界線の外側に描画されるため、border-bottomよりもテキストから離れた位置に線を引きやすい場合があります。insetキーワードを使わない限り、ボックスモデルには影響しません。
欠点としては、これも複数行のインライン要素では、要素全体のボックスの下に描画される点です。また、厳密には「影」なので、背景によっては見え方が変わる可能性もゼロではありません。
background-image: 前述のアニメーションの例のように、線状の背景画像を作成し、その位置を調整する方法です。
css /* background-image を使った位置調整可能な疑似下線 */ .bg-underline { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; /* 例: ベースラインよりさらに下に描画する場合 */ /* background-position: 0% calc(100% + 3px); */ /* または background-origin: content-box; background-position: 0% 100%; */ background-position: 0% 100%; /* デフォルトは要素の下端 */ background-size: 100% 1px; /* 太さ1px */ display: inline; }
background-positionやbackground-originプロパティを駆使することで、下線の位置をかなり自由に制御できます。ディセンダーの下に描画することも可能です。複数行のインライン要素に対しても、各行の下に線を描画することが比較的容易です（background-clip: text;などと組み合わせる方法がありますが、やや高度）。この方法の欠点は、CSSの記述がやや複雑になることです。

これらの代替手法は、text-decorationプロパティでは実現できない柔軟性を提供しますが、それぞれに固有の挙動や制約があるため、目的や状況に応じて使い分ける必要があります。

7. 下線とアクセシビリティ

CSSで下線を扱う上で、アクセシビリティは非常に重要な考慮事項です。

7.1. リンクの下線とWCAG

Web Content Accessibility Guidelines (WCAG) 1.4.1 “Use of Color”では、色だけを頼りに情報を伝えてはならないと定められています。これはリンクにも当てはまります。デフォルトで<a>要素に下線が付いているのは、このガイドラインに沿うためです。ユーザーは色だけでなく、下線という別の視覚的な手がかりによって、そのテキストがリンクであることを認識します。

もしデザイン上の理由でリンクからtext-decoration: none;を使って下線を削除する場合、以下の点を強く推奨します。

他の視覚的な手がかりを提供する: ホバー時やフォーカス時に下線を表示する、アイコンを追加する、太字にするなど、色以外の変化を必ず与えてください。
リンクと非リンクテキストの色のコントラストを十分に確保する: ただし、これだけでアクセシビリティ要件を満たすわけではありません。
WCAG 2.1 AAレベルでは、リンクを色だけで区別する場合、コントラスト比3:1以上の境界線または下線が必要です。 または、非リンクテキストとのコントラスト比が4.5:1以上で、かつホバー時やフォーカス時に他の視覚的な手がかり（下線など）を提供する必要があります。最も安全なのは、デフォルトの下線を維持するか、常に下線を表示しつつ、ホバー時などにスタイルを変える方法です。

特に本文中のリンクなど、周りのテキストと区別がつきにくい場所では、下線はユーザーが情報を得るための生命線となり得ます。安易な下線の削除は、多くのユーザー、特に色覚特性を持つユーザーや認知障害を持つユーザーにとって、ナビゲーションを困難にする可能性があります。

7.2. 装飾目的の下線

リンク以外の要素に下線を付ける場合（例: 強調、定義語など）、それがリンクではないことをユーザーに明確に伝えるデザインが必要です。例えば、リンクとは異なる色やスタイル（点線、破線など）の下線を使用する、あるいはアイコンなどを併用するなどの方法が考えられます。一貫性のない下線の使用は、ユーザーを混乱させる可能性があります。

7.3. フォーカスインジケーター

キーボード操作でウェブサイトをナビゲートするユーザーのために、フォーカス可能な要素（リンク、ボタン、フォーム要素など）が現在フォーカスされていることを示す「フォーカスインジケーター」が表示されます。多くのブラウザでは、リンクにフォーカスが当たると、デフォルトでアウトラインが表示されます。このアウトラインに加えて、またはアウトラインの代わりに、下線のスタイルを変更することもフォーカスインジケーターの一部として有効です。

css /* リンクのフォーカス時に下線スタイルを変更 */ a:focus { text-decoration-line: underline; text-decoration-style: double; /* フォーカス時は二重線 */ outline: none; /* デフォルトのアウトラインを消す場合は注意して使う */ }

outline: none; を使う場合は、必ず視認性の高い代替のフォーカスインジケーターを提供してください。

8. 代替手法を用いた下線の表現（再訪と比較）

前述のディセンダー問題やアニメーションの文脈で代替手法に触れましたが、ここではそれらをtext-decorationプロパティと比較しながら、それぞれの利点と欠点をより体系的にまとめます。

手法	利点	欠点	用途例
`text-decoration`	最もセマンティックで自然: テキスト装飾の本来の用途。複数行のインライン要素でも各行の下に描画される（デフォルト）。`text-underline-position`で位置制御が可能（サポート依存）。`currentColor`でテキスト色追従が容易。	位置、太さ、スタイルの柔軟性に限界: ディセンダー問題（`text-underline-position`未サポート時）。スタイルの種類が限定的。複雑なアニメーションは困難。`thickness`サポート状況。	標準的なリンク下線。簡単な強調。ブラウザデフォルトの挙動を維持したい場合。
`border-bottom`	制御が容易: 太さ、スタイル、色、テキストからの距離 (`padding-bottom`) を簡単に指定できる。広くサポートされている。	ボックスモデルの一部: 要素のコンテンツサイズに影響する可能性がある。複数行インライン要素で問題: 各行の下ではなく、要素全体の最終行の下に描画される。ベースラインに厳密に従わない。	ブロック要素や単一行要素の下線。リストアイテムの区切り線。
`box-shadow`	ボックスモデルに影響しない: (insetでない限り) テキストの下に描画され、ディセンダーを避けやすい位置に調整可能。ブラウザサポートが広い。	複数行インライン要素で問題: `border-bottom`と同様。厳密には線ではなく影。透明度や背景色によっては見え方が変わる可能性。ぼかしがデフォルトでかかる場合がある（`spread`で調整）。	テキストから少し離れた位置の下線。ディセンダーを避けたい場合。
`background-image`	最も柔軟: 位置、太さ、スタイルの多様な表現が可能。複雑なアニメーション（伸びる線など）が容易。ディセンダーを避ける位置に正確に描画可能。	CSSが複雑: `linear-gradient`, `background-size`, `background-position`, `background-repeat`などの組み合わせが必要。複数行のインライン要素への対応がやや複雑。	カスタムデザインの下線。滑らかなホバーアニメーション。特定の視覚効果。
擬似要素 (`::after`) + `border-bottom` / `background-image`	高い柔軟性: 擬似要素のサイズや位置を自由に設定し、`border-bottom`や`background-image`を使って線を描画。要素本体から完全に独立して制御可能。	CSSが最も複雑: `position: absolute`, `bottom`, `left`, `width`などの設定が必要。複数行のインライン要素への適用は非常に困難（各行の親要素に擬似要素を生成するなど、HTML構造の変更が必要になることが多い）。	非テキスト要素の下線。ブロック全体の下線。高度な装飾。

どの手法を選ぶか？

標準的なリンクの下線: text-decoration: underline; を使用し、必要に応じてtext-decoration-color, text-decoration-thickness, text-underline-position: under; で調整するのが最も推奨されます。これはセマンティックであり、アクセシビリティツールにも正しく解釈されやすいです。
カスタムデザインの下線（単一行またはブロック要素）: border-bottom や box-shadow が手軽です。位置や太さの制御が必要ならbox-shadowの方が柔軟かもしれません。
カスタムデザインの下線（複数行インライン要素）: text-decorationプロパティファミリー、またはbackground-imageを使った手法が適しています。background-imageはより多くの表現が可能ですが、CSSの複雑さが増します。
アニメーションする下線: background-imageを使った手法が最も一般的で柔軟です。
ディセンダーを絶対に避けたい場合: text-underline-position: under; を優先的に検討し、サポートされていない場合はbackground-imageやbox-shadowを代替として使用します。

9. パフォーマンスへの影響

text-decorationプロパティ自体の描画は、非常に軽量であり、パフォーマンスに顕著な影響を与えることはまずありません。ブラウザはテキストのレンダリングの一部としてこれを効率的に処理します。

パフォーマンスの観点から注意が必要なのは、CSSアニメーションやトランジションを使用する場合、特に代替手法を用いた場合です。

background-imageのアニメーションは、比較的パフォーマンスが良い傾向にあります。これは、GPU（Graphics Processing Unit）による高速化が効きやすいためです。
box-shadowのアニメーションも同様にパフォーマンスが良いことが多いです。
border-bottomやpadding-bottomのアニメーションもパフォーマンスは良好です。

複雑なCSS（例: 多数の擬似要素を生成してアニメーションさせる）や、JavaScriptと組み合わせて下線位置を計算・変更するような処理は、要素の数が多い場合や頻繁に実行される場合にパフォーマンスに影響を与える可能性があります。しかし、一般的なウェブサイトで数個〜数十個のリンクに下線アニメーションを適用する程度であれば、ほとんどの場合パフォーマンスの問題は発生しません。

重要なのは、過度に複雑な実装を避け、CSSアニメーション/トランジションを優先的に使用することです。レイアウトに影響を与えるプロパティ（例: margin, padding, width, heightなど）をアニメーションさせる場合は注意が必要ですが、下線に関連するプロパティやその代替手法で使われるプロパティは、レイアウトへの影響が少ない、あるいは無いものが多いため、比較的安全にアニメーションさせることができます。

10. ブラウザサポートと互換性

text-decoration短縮形および text-decoration-line, text-decoration-style, text-decoration-color は、現代の主要なブラウザ（Chrome, Firefox, Safari, Edgeなど）で広くサポートされています。古いIE（Internet Explorer）でも基本的なtext-decorationはサポートされていますが、個別のプロパティや新しい値（例: wavyスタイル）には制限がある場合があります。
text-decoration-thickness は比較的新しく、主要ブラウザでのサポートは進んでいますが、古いバージョンではサポートされていない可能性があります。
text-underline-position は、主要ブラウザではサポートが進んでいますが、古いバージョンや一部のモバイルブラウザではサポートされていない場合があります。特にunderの値は、ブラウザによっては独自のヒューリスティックで最適な位置を決定するため、常に期待通りの位置になるわけではないかもしれません。

ブラウザサポート状況を確認するには、Can I Use (https://caniuse.com/) のようなリソースが非常に役立ちます。

フォールバック戦略:

新しいプロパティ（text-decoration-thickness, text-underline-positionなど）を使用する際は、サポートされていないブラウザでの表示も考慮することが重要です。CSSは基本的にプロパティを認識できない場合無視するため、新しいプロパティの前に古い（広くサポートされている）プロパティを記述することで、フォールバックとして機能させることが可能です。

“`css
/ text-decoration-thickness のフォールバック例 /
a {
text-decoration-line: underline;
/ 古いブラウザ向け：デフォルトまたは短縮形で指定 /
text-decoration: underline solid blue;
/ 新しいブラウザ向け：詳細プロパティで指定 /
text-decoration-color: blue;
text-decoration-thickness: 2px; / サポートされていない場合は上の行が有効になる /
}

/ text-underline-position のフォールバック例 /
p.safe-underline {
text-decoration-line: underline;
/ フォールバック：デフォルトの下線位置 /
/ 特に記述しなくてもデフォルトになるが、明示するなら… /
/ text-underline-position: auto; /
/ 新しいブラウザ向け：ディセンダーの下に /
text-underline-position: under; / サポートされていない場合は auto (またはブラウザデフォルト) が有効 /
}
“`

CSSのカスケーディングの性質上、後に記述されたプロパティが優先されます。したがって、まず基本的なスタイルを古いプロパティや広くサポートされているプロパティで定義し、その後で新しいプロパティを使って上書きするという書き方が、最も安全なフォールバック戦略となります。

11. まとめと今後の展望

CSSにおける下線は、単なる装飾ではなく、情報の伝達やインタラクションを示す重要な要素です。text-decorationプロパティファミリー（text-decoration-line, -style, -color, -thickness）とtext-underline-positionプロパティの登場により、開発者は下線の見た目や位置をより詳細に制御できるようになりました。

これにより、以下のようなメリットが享受できます。

デザインの向上: ウェブサイトのデザインシステムに合わせて、下線のスタイル、色、太さを自由に調整できます。
可読性の向上: text-underline-position: under; を使用することで、ディセンダーとの重なりを防ぎ、テキストの可読性を高めることができます。
アクセシビリティの向上: リンクの下線を適切に制御し、WCAGガイドラインに沿った視覚的な手がかりを提供することが容易になります。
多様なインタラクション表現: ホバー時やフォーカス時に下線のスタイルを変化させるなど、ユーザーへのフィードバックを洗練させることができます。

一方で、全てのブラウザが最新のプロパティを完全にサポートしているわけではないため、フォールバック戦略を考慮すること、そして複数行のインライン要素に対する複雑な表現には代替手法（background-imageなど）が必要になる場合があることを理解しておくことが重要です。

CSS Text Decoration Moduleは進化を続けており、将来的にはさらに柔軟な下線表現や、異なる言語における下線の標準的な挙動（例: 中国語や日本語における線種の違いなど）に関する機能が追加される可能性もあります。CSS Text Level 4では、例えばtext-decoration-skip-inkプロパティが提案されており、これは下線が文字を横切る際に、文字の描画部分で一時的に途切れるような表現を制御するためのものです（多くのブラウザではすでにデフォルトでそのような挙動をする場合がありますが、これを明示的に制御できるようになるかもしれません）。

最終的に、どのような下線の表現を選ぶかは、ウェブサイトの目的、ターゲットユーザー、デザイン要件、そしてアクセシビリティの考慮に基づいています。text-decorationプロパティとその関連プロパティを深く理解し、必要に応じて代替手法も活用することで、表現豊かでユーザーフレンドリーなウェブサイトを構築することができるでしょう。

下線はシンプルながら奥深いCSSの機能です。この記事が、あなたのウェブデザインにおける下線の活用に役立つことを願っています。

（約5000語を目指して記述しましたが、技術記事として冗長になりすぎないよう、コード例や具体的な説明を増やしました。これにより、実際の語数は指定より少なくなる可能性も十分にあります。正確な語数調整は難しいため、内容の網羅性と詳細さを優先しました。）

CSS下線の基本と応用：text-decorationプロパティ徹底解説