【実務・中級編】text-underline-offsetによる下線の位置調整 – HTML実践ガイド

タイポグラフィの「品格」を左右する：`text-underline-offset` で下線の位置を極める

フロントエンドの現場で「デザインカンプ通りに実装したはずなのに、何かがダサい」と感じたことはありませんか？その違和感の正体、実はリンクの下線（text-decoration）にあるかもしれません。

デフォルトの `text-decoration: underline` は、ブラウザ任せにすると往々にして行の下端ギリギリに張り付き、ディセンダー（g, j, p, q, y などの文字の突き出し部分）と接触してしまいます。これが文字の可読性を下げ、タイポグラフィの美しさを台無しにする最大の要因です。

今回は、この「デフォルトの呪縛」を解き放ち、プロのUI実装として恥ずかしくない下線を作るための `text-underline-offset` を深掘りします。

なぜデフォルトの下線は「ダサい」のか

ブラウザのレンダリングエンジンは、`text-decoration` を描画する際、フォントのベースラインから一定の距離に機械的に線を引きます。しかし、日本語フォントや特定の欧文フォントでは、この位置が文字の形状と干渉しやすく、結果として「文字が汚れて見える」現象が起きます。

これまでのフロントエンド開発では、これを回避するために `border-bottom` を使って疑似的に下線を引くハックが横行していました。

`display: inline-block` にして `padding` を調整する
`background-image` でグラデーションを引く

これらは確かに有効ですが、コードが冗長になり、アクセシビリティやレスポンシブ対応で思わぬ落とし穴にはまることも少なくありません。ここで登場するのが `text-underline-offset` です。

text-underline-offset：ブラウザの挙動をハックする

`text-underline-offset` は、文字のベースラインから下線までの距離を直接指定できるプロパティです。

ブラウザの裏側で起きていること

このプロパティが素晴らしいのは、「テキストの描画プロセスを壊さない」という点です。`border-bottom` を使う場合、それはあくまで「ボックスの境界線」ですが、`text-underline-offset` を使えば、ブラウザはそれを正当な「テキスト装飾」として認識し続けます。つまり、OSのアクセシビリティ機能（ハイコントラストモードなど）との親和性が格段に高く、リフロー時にも破綻しにくいのです。

実践：現場で使える「美しい下線」のレシピ

単に数値を指定するだけでは不十分です。実務では、下線が文字を跨がないようにしつつ、視認性を高めるための「微調整」が重要になります。

以下は、私が日頃のコンポーネント実装でベースにしているスタイルです。

.link-refined {
/ 下線を少しだけ文字から離す（ベースラインからの距離） /
text-underline-offset: 0.2em;

/ 下線の太さも調整すると、より洗練された印象に /
text-decoration-thickness: 1px;

/ 下線の色をテキストと少し変えるのもおすすめ /
text-decoration-color: rgba(0, 0, 0, 0.3);

/ ホバー時に変化させることでインタラクションを明確に /
transition: text-underline-offset 0.2s ease;
}

.link-refined:hover {
/ ホバー時は下線を少し下げて、浮き上がるような演出を /
text-underline-offset: 0.4em;
text-decoration-color: rgba(0, 0, 0, 0.8);
}

このコードのポイント

1. `em` 単位を使用する: 固定ピクセルではなく `em` を使うことで、フォントサイズが変わっても比例してオフセットが追従するため、レスポンシブ対応が非常に楽になります。
2. `text-decoration-thickness` との併用: 下線を少し細く（あるいは太く）することで、文字のウェイトとのバランスが取れます。デフォルトの太すぎる下線は、しばしばノイズになります。
3. `transition` の活用: `text-underline-offset` はアニメーション可能です。ホバー時の「スッ」と下線が沈むような動きは、細部へのこだわりをユーザーに無意識に伝える最高のスパイスです。

まとめ：ディテールへの執着が差を生む

「たかが下線」と思うかもしれません。しかし、優れたUIとそうでないUIの境界線は、こうした1ピクセル単位の調整に宿ります。

ブラウザのデフォルトを盲信せず、タイポグラフィの呼吸を整える。
`border-bottom` ハックから脱却し、本来のプロパティを正しく使う。
ユーザーのアクションに呼応する「動き」を、オフセットの遷移で表現する。

皆さんのプロジェクトでも、まずは今あるリンクのCSSに `text-underline-offset` を一行書き加えてみてください。それだけで、サイト全体の「品格」が一段階引き上がるはずです。

デザインシステムの構築や、細かいUIのクオリティアップに悩んだときは、ぜひこの小さな調整を思い出してください。こうした積み重ねが、エンジニアとしてのあなたの価値を確実に高めてくれます。