HTMLとCSSで下線（アンダーバー）を自在に装飾・制御する方法

HTMLとCSSで下線（アンダーバー）を自在に装飾・制御する方法 – 完全ガイド

Webデザインにおいて、テキストの下線（アンダーバー）は非常に身近な存在です。特にリンクテキストには、デフォルトで下線が表示されることが一般的です。しかし、そのデフォルトの下線は、デザインの自由度が低く、時にはテキストの可読性を損なうこともあります。

Webサイトの表現力を高め、洗練されたデザインを実現するためには、下線を自在に装飾・制御する技術が不可欠です。単に色を変えるだけでなく、太さ、スタイル、位置、さらにはテキストとの重なり方まで、細かくコントロールできるようになれば、デザインの幅は大きく広がります。また、デザイン性だけでなく、アクセシビリティの観点からも、下線の適切な使用と制御は重要です。

この記事では、HTMLとCSSを使って下線を自在に操るためのあらゆるテクニックを、基本的なデフォルトの下線から、最新のCSSプロパティ、さらには様々な代替手法まで、網羅的かつ詳細に解説します。約5000語にわたる解説と豊富なコード例を通じて、あなたは下線を思い通りにデザインし、Webサイトの表現力を格段に向上させることができるようになるでしょう。

1. はじめに：なぜ下線をカスタマイズする必要があるのか

Webにおける下線の主な役割は以下の通りです。

リンクの識別: 最も一般的で重要な役割です。リンクに下線をつけることで、ユーザーはそのテキストがクリック可能であることを直感的に理解できます。特に装飾が少ないプレーンなテキスト内でリンクを明確にするためには、下線が有効です。
強調: 特定の語句や文を強調するために使用されることがあります。ただし、リンクとの混同を避けるため、リンクとは異なるデザイン（色、スタイルなど）にすることが推奨されます。
デザイン要素: テキストの装飾として、あるいは区切り線としてデザインの一部に取り入れられることがあります。

HTMLの<a>要素にデフォルトで適用される下線は、ユーザーエージェント（ブラウザ）のスタイルシートによって制御されています。このデフォルトの下線は、ほとんどの場合、テキストのベースラインに密着し、単一の色と太さを持つ実線です。

“`html

これはデフォルトのリンクテキストの例です。

“`

css /* デフォルトのスタイル（ブラウザによる） */ a { text-decoration: underline; /* これがデフォルトでかかっていることが多い */ color: blue; /* これもブラウザによる */ }

デフォルトの下線には、いくつかの制限や問題点があります。

デザインの単調さ: 太さ、色、スタイル（点線や破線など）を自由に設定できません。
位置の問題: テキストのベースラインに近すぎるため、特にディセンダー（g, j, p, q, yなどの下に伸びる部分）を持つ文字と重なり、テキストの可読性を損なうことがあります。
制御の難しさ: 下線とテキストの距離、下線の太さ、スタイルなどを細かく制御できません。
重ね書きの問題: 複数のテキスト装飾を同時に適用した場合の挙動が予測しにくいことがあります。

これらの問題を解決し、よりリッチで、かつアクセシビリティにも配慮したWebデザインを実現するためには、CSSを用いて下線をカスタマイズする技術が必要です。この記事では、そのための様々な方法を段階的に見ていきます。

2. デフォルトの下線と `text-decoration` プロパティの基本

CSSでテキストの装飾を指定する最も基本的なプロパティは text-decoration です。これはショートハンドプロパティであり、複数の装飾関連プロパティをまとめて指定できます。

2.1. `text-decoration` の基本的な使い方

text-decoration プロパティの最も一般的な値は以下の通りです。

none: テキスト装飾をすべて解除します。リンクのデフォルトの下線を消すためによく使われます。
underline: 下線を表示します。
overline: 上線を表示します。
line-through: 打ち消し線を表示します。

これらの値を組み合わせて指定することも可能です（例: underline overline）。

“`css
.no-underline {
text-decoration: none; / 下線を消す /
}

.underline {
text-decoration: underline; / 下線をつける /
}

.line-through {
text-decoration: line-through; / 打ち消し線 /
}

.underline-overline {
text-decoration: underline overline; / 下線と上線 /
}
“`

“`html

このテキストには下線がありません。

このテキストには下線があります。

このテキストには打ち消し線があります。

このテキストには下線と上線があります。

“`

2.2. デフォルトの下線の限界を再確認

text-decoration: underline; で表示される下線は、前述の通り非常に基本的なものです。太さ、色、スタイルを変更するには、かつては border-bottom などの代替手法に頼る必要がありました。これは text-decoration プロパティが、長い間、装飾の種類 (underline, line-through など) しか指定できなかったためです。

しかし、CSS Text Decoration Module Level 3の登場により、text-decoration プロパティとその関連プロパティは大きく進化しました。これにより、デフォルトの下線に近い、テキストコンテンツの流れに沿った自然な下線を、より詳細に制御できるようになりました。

3. `text-decoration` プロパティの進化：より詳細な制御

CSS Text Decoration Module Level 3では、text-decoration のショートハンドプロパティが、以下の個別プロパティをまとめる形で再定義されました。

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness

これらのプロパティを使うことで、デフォルトの下線を自在に装飾することが可能になりました。

3.1. `text-decoration-line`：下線の種類

これは古い text-decoration プロパティで指定できた下線の種類そのものです。

値：none | underline | overline | line-through | blink (blinkは非推奨)

複数の値を指定して、複数の線を同時に表示することも可能です。

“`css
.underline-only {
text-decoration-line: underline; / 下線のみ /
}

.underline-line-through {
text-decoration-line: underline line-through; / 下線と打ち消し線 /
}
“`

3.2. `text-decoration-color`：下線の色

下線の色を指定できます。テキストの color プロパティとは独立して設定可能です。

値：<color>

“`css
.red-underline {
text-decoration-line: underline;
text-decoration-color: red; / 下線を赤色に /
color: black; / テキストの色は黒のまま /
}

.currentColor-underline {
text-decoration-line: underline;
text-decoration-color: currentColor; / 下線をテキストと同じ色に /
color: green;
}
“`

currentColor という値を使うと、要素の color プロパティで指定されている色を下線の色として使用できます。これは、テキストの色と下線の色を常に一致させたい場合に便利です。

3.3. `text-decoration-style`：下線のスタイル

下線の見た目を実線以外に変更できます。

値：solid | double | dotted | dashed | wavy

“`css
.dotted-underline {
text-decoration-line: underline;
text-decoration-style: dotted; / 点線 /
}

.dashed-underline {
text-decoration-line: underline;
text-decoration-style: dashed; / 破線 /
}

.wavy-underline {
text-decoration-line: underline;
text-decoration-style: wavy; / 波線 /
text-decoration-color: blue;
}
“`

3.4. `text-decoration-thickness`：下線の太さ

下線の太さを指定できます。

値：<length> | <percentage> | auto | from-font

<length>: px, em, rem などの具体的な長さで指定します。
<percentage>: 要素の line-height に対する割合で指定します（MDNなどの情報では、要素のemボックスの高さに対する割合とも記載されており、ブラウザ実装によって異なる可能性があります。長さ単位の方が予測しやすいでしょう）。
auto: ブラウザが自動的に適切な太さを計算します。多くの場合、1pxや2px程度の細い線になります。
from-font: フォントファイルに含まれる下線情報の太さを参照します。フォントによってはこの情報が含まれていない場合があり、その場合は auto のように振る舞うことがあります。

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

.em-thick-underline {
text-decoration-line: underline;
text-decoration-thickness: 0.1em; / 下線を0.1em幅に /
}

.auto-underline {
text-decoration-line: underline;
text-decoration-thickness: auto; / ブラウザにお任せ /
}
“`

auto や from-font は、異なるフォントやフォントサイズでもバランスの取れた太さを維持しやすいというメリットがあります。一方、ピクセル単位などで具体的に指定すると、デザイン上の意図を正確に反映できます。

3.5. `text-decoration` ショートハンドの完全な形式

text-decoration ショートハンドプロパティは、これら4つの個別プロパティをまとめて指定できます。書式は以下の通りです。

text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>

値の順序は問われませんが、各種類の値は一度だけ指定できます。

“`css
.custom-underline {
/ line style color thickness の順で指定することも可能 /
text-decoration: underline wavy red 2px;
}

/ または順不同 /
.another-custom-underline {
text-decoration: red underline 2px wavy;
}
“`

このように、CSS Text Decoration Module Level 3で導入されたプロパティ群を使うことで、下線の基本的な見た目（種類、色、スタイル、太さ）をかなり自由に制御できるようになりました。これは、text-decoration: underline; というデフォルトの下線を拡張する最もセマンティックで推奨される方法です。

ただし、これらの新しいプロパティ（特に text-decoration-thickness や text-decoration-style の一部）は、比較的新しいため、古いブラウザではサポートされていない場合があります。ブラウザサポート状況を確認し、必要に応じてフォールバック戦略を考慮する必要があります。caniuse.com のようなサイトで最新のサポート状況を確認できます。

4. `text-underline-offset` プロパティ：下線の位置調整

デフォルトの下線が抱える大きな問題の一つは、テキストのベースラインに近すぎて、ディセンダー（g, j, p, q, yなど）と重なってしまい、可読性を損なう場合があることです。

gpqyj ----- (デフォルトの下線イメージ)

この問題を解決するために導入されたのが text-underline-offset プロパティです。このプロパティを使うと、下線をベースラインから垂直方向にどれだけ離すかを指定できます。

値：<length> | <percentage> | auto

<length>: px, em, rem などの具体的な長さで、ベースラインからの距離を指定します。正の値を指定すると下線が下に移動し、負の値を指定すると上に移動します（ただし、上に移動させるユースケースは稀でしょう）。
<percentage>: 要素の line-height に対する割合で距離を指定します。
auto: ブラウザがフォントのメトリクスに基づいて、適切な距離を自動的に計算します。これは通常、ディセンダーと重ならないように下線を調整します。

“`css
.offset-underline-px {
text-decoration: underline;
text-underline-offset: 2px; / ベースラインから2px下に /
}

.offset-underline-em {
text-decoration: underline;
text-underline-offset: 0.15em; / ベースラインから0.15em下に /
}

.offset-underline-auto {
text-decoration: underline;
text-underline-offset: auto; / ブラウザにお任せ /
}
“`

text-underline-offset を使用すると、以下のように下線をディセンダーから離すことができます。

gpqyj (ディセンダー) ----- (位置調整された下線イメージ)

auto の値は、フォントやフォントサイズが変わっても自動で調整されるため便利ですが、ブラウザによってその具体的なオフセット量が異なる可能性があります。デザイン上の正確な距離を指定したい場合は、<length> 単位を使用するのが良いでしょう。em 単位はフォントサイズに依存するため、レスポンシブなデザインで下線とテキストのバランスを保つのに適しています。

text-underline-offset は比較的新しいプロパティですが、主要なブラウザではかなり広くサポートされています。それでも古いブラウザへの対応が必要な場合は、他の代替手法を検討するか、フォールバックとしてデフォルトの下線を受け入れることになります。

5. `text-decoration-skip-ink` プロパティ：文字の「飛び越し」

もう一つ、デフォルトの下線が抱えるタイポグラフィ的な問題として、下線がディセンダー（またはオーバーラインの場合はアセンダー）を突き抜けて描画されることがあります。これにより、文字の形が損なわれ、可読性が低下する可能性があります。

gpqyj ----- (突き抜けているイメージ)

この問題を解決し、下線が文字の形状を「飛び越える」ように描画させるのが text-decoration-skip-ink プロパティです。

値：auto | none | all | bounding-box | objects

auto: ブラウザがフォントのメトリクスに基づいて、インク（文字の一部）を避けるべきか、避ける場合はどのように避けるかを自動的に判断します。多くの主要なフォントでは、これがデフォルトでディセンダーを避ける挙動になります。
none: インクを避けずに、文字の上や下を直線で描画します。これが古いブラウザやデフォルトの挙動に近いものです。
all, bounding-box, objects: これらの値はより複雑な制御を提供しますが、ブラウザサポートはまだ限定的であったり、ユースケースが特殊であったりします。現状では auto と none の違いを理解することが最も重要です。

“`css
.skip-ink-auto {
text-decoration: underline;
text-decoration-skip-ink: auto; / ディセンダーを避ける (デフォルトのことが多い) /
}

.skip-ink-none {
text-decoration: underline;
text-decoration-skip-ink: none; / ディセンダーを避けない /
}
“`

現代のブラウザの多くは、text-decoration-skip-ink: auto; がデフォルトになっているため、意識せずとも下線がディセンダーを避けて表示されることが多いです。しかし、明示的に制御したい場合や、古いブラウザとの互換性を確認したい場合にこのプロパティを使用します。

下線がインクを避ける挙動は、特に欧文フォントにおいて、より自然で読みやすいテキスト表現につながります。和文においても、特定の文字の形状（例: 「り」の右下の払いなど）との干渉を避けるのに役立つ場合があります。

text-underline-offset と text-decoration-skip-ink は、どちらも text-decoration で描画される下線の位置や描画方法に関連しますが、役割は異なります。text-underline-offset は下線全体のベースラインからの距離を調整するのに対し、text-decoration-skip-ink は下線が文字と交差する箇所で「途切れる」挙動を制御します。これらを組み合わせることで、デフォルトの下線をタイポグラフィ的に最適化できます。

6. `border-bottom` を利用した下線の代替方法

text-decoration プロパティが進化する以前、下線を詳細に制御する最も一般的な方法は、要素に border-bottom を適用することでした。これは現在でも有効なテクニックであり、text-decoration では実現しにくい表現や、特定の状況で便利な場合があります。

6.1. `border-bottom` の基本的な使い方

border-bottom プロパティは、要素の下側の境界線（ボーダー）を指定します。ボーダーはボックスモデルの一部として描画されます。

css .border-underline { border-bottom: 1px solid black; /* 下に境界線を引く */ padding-bottom: 2px; /* テキストと境界線の間に隙間を作る */ }

“`html

このテキストにはborder-bottomで下線が引かれています。

“`

6.2. `border-bottom` を下線として使うメリット

高いカスタマイズ性: border-width, border-style, border-color の各プロパティやショートハンドを使って、太さ、スタイル、色を完全に自由に指定できます。点線 (dotted)、破線 (dashed)、二重線 (double)、さらには複雑なスタイルも可能です。
位置調整の容易さ: padding-bottom プロパティを使って、テキストコンテンツと下線の間に簡単に隙間を作ることができます。これにより、下線とテキストの距離を正確に制御でき、ディセンダーとの重なりを避けることが容易です。
アニメーションの容易さ: border-bottom の太さや色、スタイルはCSSアニメーションの対象になりやすいため、ホバーエフェクトなどで下線を動的に変化させたい場合に便利です。

6.3. `border-bottom` を下線として使うデメリット

border-bottom はボックスモデルに基づくため、text-decoration とは異なる挙動をします。特にインライン要素（<a>, <span> など）に使用した場合に顕著な問題が発生します。

改行時の分断: インライン要素が複数行にわたって改行される場合、border-bottom は各行の終わりで途切れてしまい、連続した下線になりません。これはデザイン意図と異なることが多いです。

html <p><span class="border-underline-inline">これはインライン要素にborder-bottomを使った例です。長いテキストなので途中で改行されます。</span></p>

css .border-underline-inline { border-bottom: 1px solid blue; padding-bottom: 2px; /* display: inline; がデフォルト */ }
（ブラウザで表示すると、改行箇所で下線が途切れる）
要素全体への適用: border-bottom はテキストコンテンツ自体ではなく、要素（ボックス）の下側に描画されます。要素の横幅いっぱいに線が引かれるため、テキストの一部にだけ下線を引きたい場合には適していません。

html <p>段落全体に<span class="border-underline-inline">下線</span>を引く場合、これはうまく機能しますが、一部だけに引く場合は意図しない結果になります。</p>

css .border-underline-inline { border-bottom: 2px solid green; padding-bottom: 2px; /* このspan要素の下に線が引かれる */ }
（「下線」という単語だけでなく、span要素の幅全体に下線が引かれる）
ディセンダーとの位置関係: border-bottom は常に要素のボックスの下端に描画されるため、テキストのベースラインやディセンダーとは直接的な関係がありません。padding-bottom で距離を調整することはできますが、text-decoration の text-underline-offset: auto のように、フォントメトリクスに合わせて自動調整する機能はありません。
背景色との干渉: border-bottom は要素の背景色や他のボーダーの上に描画されます。

6.4. `border-bottom` 改行問題への対処法 (限定的)

インライン要素の改行時に下線が途切れる問題を回避する方法はいくつかありますが、それぞれに制約があります。

display: inline-block; の使用: 要素を display: inline-block; にすると、各要素が独立したボックスとして扱われます。これにより、border-bottom が要素ごとに適用されますが、改行しても下線は途切れず、要素の幅いっぱいに引かれます。ただし、これはテキストの流れや配置に影響を与える可能性があります。

css .border-underline-inline-block { display: inline-block; /* インラインブロックに */ border-bottom: 1px solid purple; padding-bottom: 2px; }
（改行しても下線は途切れないが、各要素の幅いっぱいに引かれる）
box-decoration-break: clone; の使用: このプロパティは、インライン要素が改行される際に、ボックスのプロパティ（ボーダー、パディング、マージン、背景など）をどのように分割するかを制御します。clone を指定すると、各断片（行）に対してボーダーなどが独立して適用され、あたかもそれぞれの行にボーダーがあるかのように見えます。これにより、インライン要素の改行時の border-bottom が連続しているように見えます。

css .border-underline-clone { border-bottom: 1px solid orange; padding-bottom: 2px; box-decoration-break: clone; /* 各行にボーダーを複製して適用 */ -webkit-box-decoration-break: clone; /* Safari対応 */ }
（改行箇所で下線が途切れているように見えない）

しかし、box-decoration-break プロパティはサポート状況が限定的であり、特にIEや古いEdgeなどでは利用できません。また、使用するブラウザやバージョンによって挙動に違いが見られることもあります。

6.5. `border-bottom` はどんな場合に適しているか？

段落や見出しなど、ブロックレベル要素全体に下線を引きたい場合。
リンク以外の特定の要素に、テキストの幅に関わらず固定幅または親要素幅の下線を引きたい場合。
下線に凝ったスタイル（太い線、二重線など）やアニメーションを適用したい場合。
text-decoration の新しいプロパティが利用できない古いブラウザへのフォールバックとして。

border-bottom は柔軟性が高い反面、インライン要素での扱いに注意が必要です。インライン要素のテキストコンテンツに正確に沿った下線が必要な場合は、他の方法を検討するか、text-decoration プロパティの進化系を使うのが望ましいでしょう。

7. `background` プロパティを利用した下線の代替方法

CSSの background プロパティ、特に background-image と linear-gradient を活用することで、非常に柔軟な下線を表現できます。これはテキストの背後に描画されるため、テキストコンテンツの見た目（特にディセンダー）に影響を与えにくいという特徴があります。

7.1. `linear-gradient` による下線の基本

linear-gradient は、指定した方向へのグラデーション画像を生成するCSS関数です。これを使って、特定の位置に固定色の「線」を生成し、それを背景画像として利用します。

例えば、要素の下部に1pxの赤い下線を引くには、以下のようにします。

css .gradient-underline { background-image: linear-gradient(to bottom, transparent 0%, transparent 95%, red 95%, red 100%); /* 下から5%の範囲を赤色に */ background-size: 100% 100%; /* 背景画像のサイズを要素全体に */ background-repeat: no-repeat; /* 繰り返しなし */ background-position: 0 100%; /* 背景画像を要素の下端に配置 */ }

この例では、グラデーションを上から下 (to bottom) に作成し、上から0%から95%までを透明 (transparent)、95%から100%までを赤色 (red) にしています。これにより、要素の下端に要素の高さの5%分の太さの赤い線が生成されます。

より太さや位置をコントロールしやすくするため、background-size で背景画像の高さを下線の太さとして指定し、background-position で位置を調整する方法が一般的です。

“`css
.gradient-underline-v2 {
background-image: linear-gradient(red, red); / 単色の線 /
background-size: 100% 2px; / 背景画像の幅100%, 高さ2px /
background-repeat: no-repeat;
background-position: 0 100%; / 背景画像を要素の下端に配置 (x=0, y=100%) /
/ background-position: left bottom; と同じ /

/ padding-bottom などでテキストからの距離を調整可能 /
}
“`

この方法では、background-size の高さを下線の太さ (2px)、background-position のY座標を下線の位置 (100% で下端) として指定します。

7.2. `background` を下線として使うメリット

高いデザイン自由度: linear-gradient だけでなく、radial-gradient や、複数の背景画像を組み合わせることで、単色にとどまらないグラデーションや複雑なパターンの下線を実現できます。
テキストコンテンツとの非干渉: 背景画像はテキストの背後に描画されるため、ディセンダーとの重なりを気にすることなく、下線の位置や太さを指定できます。
アニメーション: background-position や background-size をアニメーションさせることで、下線を動的に変化させることができます。ホバー時に下線が伸びる、色が変化するなど、様々なエフェクトが可能です。
インライン要素の改行への対応 (工夫が必要): border-bottom のように改行で途切れる問題は、box-decoration-break: clone; を使うか、後述する background-clip: text; と組み合わせることで、ある程度回避できます。

7.3. `background` を下線として使うデメリット

実装の複雑さ: background-image, background-size, background-position, background-repeat など、複数のプロパティを組み合わせて使う必要があり、他の方法に比べてコードが複雑になりがちです。
アクセシビリティへの影響: 背景画像として描画されるため、スクリーンリーダーなどの支援技術が下線を認識しない可能性があります。下線がリンクの識別のために必須である場合は、この方法だけでは不十分な場合があります。
他の背景設定との競合: 要素に既に背景色や他の背景画像が設定されている場合、それらの設定と競合する可能性があります。複数の背景を設定するテクニック（カンマ区切りでの複数指定）が必要になる場合があります。
テキスト幅への追従 (工夫が必要): デフォルトでは要素の幅いっぱいに背景画像が配置されます。テキストコンテンツの幅に合わせて下線の長さを調整するには、display: inline-block; を使うか、JavaScriptでテキスト幅を計測するなどの工夫が必要です。

7.4. `background-clip: text;` と組み合わせた応用

background-clip: text; プロパティ（ベンダープレフィックスが必要な場合が多い）を使うと、背景画像をテキストの形状に合わせて切り抜くことができます。これを応用して、背景画像で下線を作成し、その下線をテキストの形状に沿って表示するテクニックがあります。

“`css
.clip-underline {
/ 下線の背景画像を作成 /
background-image: linear-gradient(yellow, yellow); / 例: 黄色い下線 /
background-size: 100% 5px; / 下線の太さ /
background-repeat: no-repeat;
background-position: 0 100%; / 下線位置 /

/ 背景画像をテキスト形状で切り抜き、テキスト色を透明に /
background-clip: text;
-webkit-background-clip: text; / Safari, Chrome /
color: transparent; / テキスト色を透明に /
-webkit-text-fill-color: transparent; / Safari /

/ 元のテキスト色を再現するため、再度 background を設定 /
/ background: linear-gradient(to right, black, black), linear-gradient(yellow, yellow); / テキスト色と下線の背景を両方指定 /
/ background-size: 100% 100%, 100% 5px; / / テキストの背景、下線の背景 /
/ background-position: 0 0, 0 100%; / / テキストの背景位置、下線の背景位置 /
/ background-repeat: no-repeat; /
/ -webkit-background-clip: text, border-box; /
/ background-clip: text, border-box; /
/ -webkit-text-fill-color: transparent; */
}
“`

この方法は、背景画像で下線を作成し、その背景画像を background-clip: text; でテキストの形状に合わせて切り抜くことで、あたかもテキストそのものに下線が描画されているかのように見せるテクニックです。テキストの色を透明にする必要があります。

より高度な実装としては、テキスト自体の背景画像と下線の背景画像を複数の background レイヤーとして指定し、background-clip や background-origin を調整することで、テキストの色と下線の両方を背景画像で表現することも可能です。

このテクニックは非常に強力で、複雑なデザインの下線を実現できますが、コードがさらに複雑になり、ブラウザサポートの確認がより重要になります。特に background-clip: text のサポートは完全ではありません（IE非対応など）。

background を利用した下線は、特にアニメーションや複雑な見た目の下線を実現したい場合に有効な手段です。しかし、コードの複雑さやアクセシビリティへの配慮が必要となります。

8. 疑似要素 (`::before` / `::after`) を利用した下線の代替方法

CSSの疑似要素 (::before および ::after) を使用して、要素に装飾的なコンテンツを挿入することができます。この特性を利用して、疑似要素を下線として描画するテクニックも広く用いられています。これは、text-decoration や border-bottom では実現が難しい、より高度な表現やアニメーションに適しています。

8.1. 疑似要素による下線の基本的な考え方

下線を引きたい要素に position: relative; を指定します。これにより、疑似要素をその要素に対する絶対位置で配置できるようになります。
::before または ::after 疑似要素を生成します。
疑似要素に content: ""; を指定します（内容が空でも、要素として描画するために必要です）。
疑似要素に position: absolute; を指定し、親要素（下線を引きたい要素）を基準に位置を決めます。
疑似要素の width と height を指定して、下線のサイズを決めます。あるいは、height を小さくして border-bottom を使っても構いません。
bottom プロパティで、親要素の下端からの距離を指定して、下線の垂直位置を決めます。
left プロパティや transform: translateX() などで、下線の水平位置を調整します。
background-color や border-bottom で下線の色やスタイルを指定します。

8.2. 基本的な疑似要素下線

“`css
.pseudo-underline {
position: relative; / 疑似要素の基準位置 /
display: inline-block; / または inline-flex など。インライン要素の場合はボックスモデルが必要 /
padding-bottom: 3px; / 疑似要素のためのスペース /
/ テキストと下線の距離をpaddingで確保することも、bottomで調整することも可能 /
}

.pseudo-underline::after {
content: “”; / 疑似要素に内容を与える /
position: absolute; / 親要素を基準に配置 /
left: 0; / 親要素の左端に合わせる /
bottom: 0; / 親要素の下端に合わせる /
width: 100%; / 親要素と同じ幅 /
height: 2px; / 下線の太さ /
background-color: blue; / 下線の色 /
}
“`

“`html

このテキストには疑似要素で下線が引かれています。

“`

この方法では、<span> 要素に display: inline-block; を指定しています。これにより、<span> がブロック要素のように幅と高さを持つため、その下に疑似要素を配置しやすくなります。padding-bottom を使うか、疑似要素の bottom プロパティでテキストからの距離を調整します。

8.3. 疑似要素下線のメリット

最高のデザイン自由度: 疑似要素自体が独立したボックスとして扱えるため、形状、サイズ、色、グラデーション、影など、CSSで表現できるほとんど全ての装飾を適用できます。複数の疑似要素を組み合わせて複雑なデザインも可能です。
アニメーションの柔軟性: width, height, left, bottom, background-color, transform, opacity など、様々なプロパティをCSSアニメーションの対象にできるため、非常にリッチなホバーエフェクトやインタラクションを実現できます。ホバー時に下線が左から右へ伸びる、中央から広がる、色が滑らかに変化するなど、多様なアニメーションが可能です。
テキストコンテンツからの分離: 下線は疑似要素として描画されるため、テキストコンテンツの見た目や構造に影響を与えません。ディセンダーとの重なりを気にせず、下線の位置を正確に指定できます。
インライン要素の改行への対応 (要工夫): border-bottom と同様にインライン要素の改行で問題が生じやすいですが、display: inline-block を使うか、テキストの各行をラップするJavaScriptなどの工夫で回避できます。ただし、テキストの幅に正確に追従する下線を疑似要素で実現するのは、要素が複数行にわたる場合は特に複雑になります。単一行の要素や、display: block の要素には比較的容易に適用できます。

8.4. 疑似要素下線のデメリット

コードの複雑さ: position プロパティを使った位置決めや、::before/::after の生成など、他の方法に比べてCSSの記述が複雑になります。
HTML構造への影響 (非表示): 疑似要素はDOMツリーには直接現れませんが、CSS Box Model的には要素として扱われるため、レイアウトに影響を与える可能性があります。また、スクリーンリーダーなどの支援技術は通常、疑似要素を読み上げません。アクセシビリティの観点からは、装飾目的以外での使用には注意が必要です。
複数行テキストへの対応の難しさ: 前述の通り、インライン要素が複数行にわたる場合に、テキストの各行に沿った連続した下線を疑似要素で正確に描画するのは非常に困難です。各行を個別の要素で囲むなどのHTML側の変更が必要になる場合があります。

8.5. 疑似要素によるアニメーション下線の例

疑似要素の最大の利点は、アニメーションによる表現力です。ホバー時に下線がアニメーションする例を見てみましょう。

“`css
.animated-underline {
position: relative;
display: inline-block;
color: #333; / テキスト色 /
text-decoration: none; / デフォルトの下線を消す /
}

.animated-underline::after {
content: “”;
position: absolute;
left: 0;
bottom: 0;
width: 0; / 最初は幅0 /
height: 2px;
background-color: hotpink; / 下線の色 /
transition: width 0.3s ease-out; / widthプロパティを0.3秒かけてアニメーション /
}

.animated-underline:hover::after {
width: 100%; / ホバー時に幅100%にする /
}
“`

“`html

ホバーすると下線が伸びるアニメーションリンクの例。

“`

この例では、疑似要素の初期状態の width を 0 にしておき、ホバー時に width を 100% にすることで、下線が左から右へ伸びるアニメーションを実現しています。transition プロパティを使うことで、この変化にアニメーション効果が加わります。

疑似要素を使うことで、このようにインタラクティブで魅力的な下線表現が可能になります。複雑なアニメーションや特殊な形状の下線が必要な場合に、疑似要素は非常に強力なツールとなります。ただし、複数行のテキストやアクセシビリティの要件によっては、他の方法の方が適している場合もあります。

9. SVGを利用した下線の代替方法

SVG（Scalable Vector Graphics）を下線として使用することも可能です。これは主に、手書き風の線や、波線、複雑な曲線など、CSSの border-style や background プロパティだけでは表現が難しい、よりグラフィカルな下線を実現したい場合に検討される方法です。

SVGを下線として使用するには、いくつかの方法があります。

インラインSVG: HTML内に <svg> 要素を直接記述し、その中に下線として機能する <line> や <path> 要素を描画します。
SVGファイルを背景画像として使用: 作成したSVGファイルを background-image プロパティで読み込みます。
SVGフィルターの利用: テキスト自体にCSSで下線を引き、その要素にSVGフィルターを適用して下線を装飾します（例: ぼかし、ノイズなど）。

9.1. インラインSVGによる下線の例（概念）

“`html

このテキストにSVGで下線を引く。

“`

この例は単純化したもので、実際のテキストのベースラインに正確に合わせるには計算が必要になります。SVGを下線としてインラインで使用する場合、テキスト要素とSVG要素の位置関係をCSSで制御する必要があります。テキストコンテンツの幅に合わせてSVGの幅を調整したり、複数行のテキストに対応させたりするには、さらに複雑なJavaScriptによる処理が必要になることもあります。

9.2. SVGを背景画像として使用

SVGファイルを背景画像として使用する方法は、CSSの background プロパティを使った方法と似ています。SVGファイル内で下線のパスやスタイルを定義し、それを背景画像として読み込みます。

例えば、簡単な波線下線のSVGファイル (wavy-underline.svg) を作成し、それを背景画像として適用します。

svg <svg xmlns="http://www.w3.org/2000/svg" width="100" height="10"> <path d="M0 5 Q 25 0 50 5 T 100 5" stroke="blue" fill="none" stroke-width="2"/> </svg>
（これは単純な例です。繰り返される波線にするには、パターンやより複雑なパスが必要です。）

css .svg-underline { background-image: url(wavy-underline.svg); background-size: 100% auto; /* 幅100%で縦横比を維持 */ background-repeat: no-repeat; background-position: 0 100%; }

9.3. SVGを利用するメリット

複雑なグラフィック表現: CSSだけでは難しい、自由な形状や複雑なパターンの下線を実現できます（手書き風、二重波線など）。
スケーラビリティ: SVGはベクターグラフィックスなので、拡大縮小しても劣化しません。
アニメーション: SVG自体にアニメーションを組み込む（SMIL）か、CSS/JavaScriptでSVG要素を操作してアニメーションさせることも可能です。

9.4. SVGを利用するデメリット

実装の複雑さ: HTML/CSSだけでなく、SVGの知識が必要になります。テキストコンテンツとの連携（位置合わせ、テキスト幅への追従、複数行対応）が難しくなりがちです。
パフォーマンス: 複雑なSVGや多数のSVG要素は、パフォーマンスに影響を与える可能性があります。
アクセシビリティ: SVGによる装飾は、スクリーンリーダーなどの支援技術に認識されない可能性が高いです。

SVGを下線として使う方法は、特定のニッチなデザイン要件（例: アート性の高い下線）を満たすのに適していますが、汎用的な下線装飾には他の方法（text-decoration の拡張プロパティや疑似要素）の方が一般的に推奨されます。

10. JavaScriptによる制御

CSSだけでは表現が難しい、あるいは要素の動的な変化（テキストコンテンツの変更、リサイズ、スクロール位置など）に応じて下線を調整したい場合は、JavaScriptを併用する必要があります。

JavaScriptを使う主なシナリオ：

テキスト幅に正確に追従する下線: インライン要素が複数行にわたる場合、テキストの各行の幅や位置を取得し、その情報に基づいて疑似要素や背景画像の下線を動的に描画・調整する。
複雑なアニメーション: CSSアニメーションだけでは難しい、外部要因（ユーザー入力、スクロール位置など）に連動したインタラクティブな下線アニメーション。
動的に生成されるコンテンツへの適用: テンプレートやJavaScriptで後から追加されるテキストコンテンツに対して、自動的にカスタム下線を適用する処理。

例：テキストコンテンツの幅を取得し、疑似要素の幅をその幅に設定する（単一行要素の場合の単純な例）

javascript const targetElement = document.querySelector('.target-text'); const textWidth = targetElement.offsetWidth; /* または getBoundingClientRect().width */ targetElement.style.setProperty('--underline-width', `${textWidth}px`);

“`css
.target-text {
position: relative;
display: inline-block; / テキスト幅に合わせて要素幅が決まるように /
/ –underline-width というカスタムプロパティをJSから設定 /
}

.target-text::after {
content: “”;
position: absolute;
left: 0;
bottom: 0;
width: var(–underline-width, 100%); / JSで設定された幅を使用、未設定なら100% /
height: 2px;
background-color: orange;
}
“`

この例では、JavaScriptで要素の幅を取得し、CSSカスタムプロパティ（変数）にその値を設定しています。CSS側ではその変数を使って疑似要素の幅を決めています。これにより、JavaScriptで要素の幅が変更された際に、下線の幅も追従するようになります。

複数行のテキストの場合、各行のgetBoundingClientRect()を取得するなど、さらに複雑な処理が必要になります。このようなライブラリ（例: underline.jsなど）も存在しますが、導入コストやメンテナンス性を考慮する必要があります。

JavaScriptによる制御は非常に強力ですが、実装コストが高く、パフォーマンスに影響を与える可能性もあります。CSSだけで実現できることはCSSで、どうしても動的な制御が必要な場合にのみJavaScriptの利用を検討するのが良いでしょう。

11. アクセシビリティとセマンティクス

下線のカスタマイズを考える上で、アクセシビリティとセマンティクスは非常に重要な考慮事項です。

11.1. リンクの下線

リンクテキストの下線は、そのテキストがリンクであることを視覚的に示す最も一般的な手がかりです。特にキーボード操作やスクリーンリーダーを使用しないユーザーにとって、下線はクリック可能な要素を見つける上で重要な役割を果たします。

重要なポイント:

リンクからデフォルトの下線を削除することの是非: text-decoration: none; を使ってリンクのデフォルトの下線を消すことはよく行われますが、これには注意が必要です。リンクであることが色だけでしか判断できない場合、色覚異常を持つユーザーはリンクを識別できない可能性があります。
下線を消す場合の代替手段: リンクの下線を消す場合は、ホバーやフォーカス時に明確な視覚的変化（例: 背景色の変更、太字化、異なるスタイルの下線を表示）を加えるなど、リンクであることがユーザーに伝わる代替手段を必ず提供する必要があります。また、本文中のリンクであれば、色と下線の両方を使うのが最もアクセシビリティが高いとされています。ナビゲーションメニューなど、リンクであることが文脈上明らかな場所では、下線を省略することも許容される場合がありますが、それでも何らかのインタラクション時のフィードバックは必須です。
装飾目的の下線との区別: 装飾目的でテキストに下線を引く場合は、リンクと混同されないよう、リンクの下線とは異なる色、スタイル、太さを使用するのが良いでしょう。

11.2. 下線「だけ」を情報伝達に使用しない

色覚異常を持つユーザーだけでなく、様々な認知特性を持つユーザーがいます。下線「だけ」を唯一の情報伝達手段（例: 「下線のついた単語をクリックしてください」）として使用するのは避けるべきです。色、下線、太字、アイコンなど、複数の視覚的な手がかりを組み合わせることで、より多くのユーザーに情報が正確に伝わります。

11.3. スクリーンリーダーへの影響

text-decoration プロパティで表示される下線は、ブラウザのレンダリング機能の一部として扱われるため、通常はスクリーンリーダーの読み上げ内容に影響しません（「下線付きテキスト」のように読み上げる設定がある場合もありますが、デフォルトではありません）。

しかし、border-bottom、background-image、疑似要素、SVGなどで描画された下線は、テキストコンテンツとは別の要素として扱われたり、背景的な装飾と見なされたりするため、スクリーンリーダーには存在が認識されない可能性が高いです。下線がデザイン要素としてのみ機能しているのであれば問題ありませんが、もし下線がコンテンツの意味や構造（例: 強調や用語解説へのリンクなど）と強く結びついている場合は、他のセマンティックなマークアップ（例: <strong>, <dfn>) やARIA属性（例: aria-describedby で補足情報を関連付ける）と併用することを検討する必要があります。

アクセシブルな下線デザインの原則は、以下の通りです。

リンクの下線は、特別な理由がない限り維持するか、明確な代替手段を提供する。
下線がリンクであることを示す場合は、色覚に頼らない他の視覚的要素（スタイル、太さなど）も考慮する。
装飾目的の下線とリンクの下線は明確に区別する。
下線に頼りすぎず、他の視覚的要素やセマンティクスと組み合わせて情報を伝える。
可能な限り、ネイティブな text-decoration プロパティとその拡張機能を使用する。

12. パフォーマンスへの考慮

下線のカスタマイズは表現力を高めますが、実装方法によってはパフォーマンスに影響を与える可能性があります。

複雑なCSS: 疑似要素を多数使用したり、複雑な背景画像（グラデーション）やフィルターを適用したりすると、レンダリングの負荷が増加する可能性があります。特に、多数の要素にアニメーション付きの下線を適用する場合に注意が必要です。
JavaScript: JavaScriptによる下線の動的な計算や調整は、特に要素の数が多い場合や、スクロールイベントなどに連動させる場合に処理コストが高くなることがあります。可能な限り、CSSのみで完結するソリューションを選択するのが望ましいです。
SVG: 非常に複雑なSVGパスやフィルターは、描画に時間がかかることがあります。

パフォーマンスへの影響を最小限に抑えるためには、以下の点に注意してください。

必要最低限のCSSで実現する。
アニメーションは、opacity, transform など、GPUアクセラレーションが効きやすいプロパティを中心に利用する。
JavaScriptは、高頻度で実行されるイベント（scroll, resize など）内で重い処理を行わないようにする。
多数の要素に同じスタイルを適用する場合は、共通のクラスやCSS変数を利用してコードを効率化する。
ブラウザの開発者ツール（Performanceタブなど）を使用して、スタイルやスクリプトがパフォーマンスボトルネックになっていないか確認する。

ほとんどの場合、テキストの下線のような比較的小さな装飾が深刻なパフォーマンス問題を引き起こすことは稀ですが、大規模なアプリケーションや多数の要素に複雑なエフェクトを適用する場合は、意識しておくと良いでしょう。

13. ブラウザ互換性とフォールバック戦略

新しいCSSプロパティ（text-decoration-thickness, text-underline-offset, text-decoration-skip-ink など）は、古いブラウザではサポートされていない場合があります。これらのプロパティを使用する際は、対象とするユーザー層が使用するブラウザのサポート状況を確認することが重要です。caniuse.com などのサイトで最新のサポート情報を確認できます。

サポートされていないブラウザでもデザインが崩れないように、フォールバック戦略を検討する必要があります。

デフォルトの text-decoration: underline; をフォールバックとする: 最も簡単な方法は、これらの新しいプロパティをサポートしないブラウザではデフォルトの下線が表示されるようにすることです。CSSの記述順序により、新しいプロパティがサポートされない場合は古い text-decoration の指定が有効になります。

css .modern-underline { text-decoration: underline; /* フォールバック */ /* サポートされているブラウザで上書きされる */ text-decoration-line: underline; text-decoration-color: purple; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-skip-ink: auto; }
@supports アットルールを使用する: @supports アットルールを使うと、特定のCSSプロパティや値がブラウザでサポートされているかどうかに応じてスタイルを適用できます。これにより、新しいプロパティをサポートするブラウザとしないブラウザで、完全に異なる下線のスタイルを指定することが可能です。

“`css
.fancy-underline {
/ フォールバックとしてのborder-bottom /
border-bottom: 1px solid black;
padding-bottom: 2px;
text-decoration: none; / デフォルトの下線を消す /
}

/ text-underline-offsetがサポートされていれば、より洗練された下線を適用 /
@supports (text-underline-offset: 1px) {
.fancy-underline {
border-bottom: none; / border-bottomを解除 /
padding-bottom: 0; / paddingも解除 /
text-decoration-line: underline;
text-decoration-color: darkblue;
text-decoration-thickness: 1.5px;
text-underline-offset: 0.1em;
text-decoration-skip-ink: auto;
}
}
`` この例では、text-underline-offsetをサポートしないブラウザではborder-bottomによる下線が表示され、サポートするブラウザではtext-decoration` によるより洗練された下線が表示されます。
JavaScriptによる検出: より複雑なフォールバックが必要な場合は、JavaScriptでCSSプロパティのサポートを検出し、要素にクラスを追加するなどしてスタイルを切り替えることも可能です。

現実的なWebサイトでは、すべてのユーザーが最新のブラウザを使用しているとは限りません。特に公共性の高いサイトや、特定の環境で広く利用されるサイトでは、幅広いブラウザ互換性を考慮したフォールバック戦略が不可欠です。text-decoration の新しいプロパティ群は素晴らしい機能ですが、必要に応じて border-bottom やその他の代替手法をフォールバックとして用意することが、堅牢なWebデザインのためには重要です。

14. 実践的な応用例

これまでに見てきた様々な下線制御のテクニックは、Webサイトの様々な場所で応用できます。

ナビゲーションメニュー: アクティブなメニュー項目やホバー中の項目に、アニメーションする下線や太い下線を表示して、ユーザーの現在地やインタラクションを分かりやすく示す。疑似要素や background プロパティを使ったアニメーションが効果的です。
見出しやセクションタイトル: 見出しの下に装飾的な下線（点線、破線、波線、グラデーションなど）を引いて、コンテンツの区切りを明確にし、デザイン性を高める。border-bottom や疑似要素が適しています。
コンテンツ内の強調: 本文中の重要な語句に、リンクと区別できる独自の下線（異なる色、太さ、スタイル）を引いて強調する。text-decoration の拡張プロパティや border-bottom、background が使えます。
ブログ記事内のリンク: デフォルトの下線がデザインに合わない場合、text-decoration の拡張プロパティで色や太さを調整したり、text-underline-offset や text-decoration-skip-ink で可読性を向上させたりする。
フッターのリンク: 目立たせすぎたくないフッターのリンクの下線を、text-decoration: none; で消し、ホバー時にのみ控えめなスタイル（例: 細い点線や色変更のみ）にする。

これらの応用例では、単に見た目を飾るだけでなく、下線が持つ「識別」や「強調」といったセマンティクスを意識し、ユーザーにとって分かりやすく、かつデザイン性の高い表現を目指すことが重要です。

15. まとめ：最適な下線カスタマイズ手法の選択

HTMLとCSSで下線を装飾・制御する方法は、基本的な text-decoration から始まり、その拡張プロパティ、そして border-bottom、background、疑似要素、SVGといった様々な代替手法に及びます。それぞれにメリットとデメリットがあり、どの方法を選択するかは、実現したいデザイン、対象ブラウザ、要素の種類（インラインかブロックか）、アクセシビリティ要件などによって異なります。

デフォルトの下線を拡張したい場合: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness, text-underline-offset, text-decoration-skip-ink といった新しい text-decoration 関連プロパティが最もセマンティックで推奨される方法です。テキストコンテンツの流れに沿った自然な下線を実現しやすく、アクセシビリティの観点からも有利です。ただし、古いブラウザサポートに注意が必要です。
要素全体に下線を引きたい場合や、太さ・スタイルの自由度を求める場合: border-bottom が手軽で強力です。位置調整も padding-bottom で容易に行えます。ただし、インライン要素の改行には注意が必要です。
複雑なデザイン（グラデーション、複数色）やアニメーションをテキストの背後に描画したい場合: background プロパティ（特に linear-gradient）が有効です。background-clip: text; と組み合わせることで、より高度な表現も可能になります。実装はやや複雑になります。
リッチなアニメーションや、CSSで表現できるあらゆる装飾を下線として適用したい場合: 疑似要素 (::before / ::after) が最も柔軟性が高い方法です。ホバーアニメーションなどで非常に強力な表現が可能です。複数行のテキスト対応が課題となる場合があります。
手書き風や自由な形状など、CSSだけでは難しいグラフィック的な下線が必要な場合: SVGの利用を検討します。

どの方法を選ぶにしても、以下の点を常に意識することが重要です。

アクセシビリティ: 特にリンクの下線や、下線が情報伝達に関わる場合は、すべてのユーザーにとって理解しやすいデザインになっているか確認する。色だけに頼らない、インタラクション時のフィードバックを提供する。
ブラウザ互換性: 対象とするブラウザで意図した通りに表示されるか確認し、必要に応じてフォールバックを用意する。@supports クエリが役立ちます。
パフォーマンス: 過度に複雑な実装や、不必要な動的処理はパフォーマンスに影響を与える可能性があることを理解する。
メンテナンス性: コードが複雑になりすぎないように、分かりやすい記述を心がける。CSS変数などを活用する。

下線のカスタマイズは、Webサイトのデザイン品質とユーザーエクスペリエンスを向上させるための強力な手段です。この記事で解説した様々なテクニックを理解し、それぞれの特性を踏まえた上で適切に使い分けることで、あなたのWebデザインはさらに洗練されたものになるでしょう。ぜひ、これらの知識を活かして、思い描く下線表現を実現してください。