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

なぜ、デフォルトの下線は「ダサい」のか？ ― `text-underline-offset` でタイポグラフィを極める

フロントエンドの現場で、デザインカンプを忠実に再現しようとするとき、多くのエンジニアが一度は絶望するポイントがあります。それが「リンクの下線（`text-decoration: underline`）」です。

ブラウザのデフォルト挙動に身を任せると、下線は文字のディセンダー（`g`, `j`, `p`, `q`, `y` などの下に突き出る部分）を容赦なく貫通し、視認性を著しく損ないます。一昔前までは、これを避けるために `border-bottom` を使って位置をずらすという「ハック」が横行していましたが、現代のWeb開発においてその手法はもう過去の遺物です。

今回は、CSSのプロパティ `text-underline-offset` を使いこなし、タイポグラフィの品格を一段階引き上げるための実践的な知見を共有します。

—

1. `text-underline-offset` とは何か：仕組みとブラウザの裏側

`text-underline-offset` は、その名の通り「テキストの下線とベースラインの距離」を指定するためのプロパティです。

ブラウザが裏側で行っていること

CSSの `text-decoration` が描画される際、ブラウザはフォントのメトリクス（フォント固有の設計図）を参照し、標準的な位置に線を引きます。しかし、ここには「フォントの個性」までは考慮されないという落とし穴があります。

`text-underline-offset` を指定すると、ブラウザは標準位置からのオフセット値を計算し、レンダリングエンジン側で描画のレイヤーを微調整します。以前は `border-bottom` による疑似的な下線が主流でしたが、あれは「行の高さ（line-height）」に影響を与えたり、折り返し時の挙動が汚くなるというデメリットがありました。これに対し、`text-underline-offset` は `text-decoration` の本来の描画処理を直接操作するため、パフォーマンス的にも、意味論的（セマンティック）にも非常に優秀です。

—

2. 実践：現場で使える「洗練されたリンク」のコード

単に距離を離すだけでは、かえって間の抜けた印象になります。プロの現場では、下線の太さ（`text-decoration-thickness`）と色（`text-decoration-color`）をセットで調整するのが「鉄則」です。

以下のコードは、可読性を最大化しつつ、UIの洗練度を上げるためのベストプラクティスです。

/ リンクに適用するスタイルの決定版 /
.link-refined {
/ 1. 下線の太さを調整（細すぎず、強調しすぎない適度なバランス） /
text-decoration-thickness: 1px;

/ 2. ベースラインから下線を適切な距離まで引き離す /
text-underline-offset: 0.25em;

/ 3. 下線の色をテキスト色より少し薄くし、ノイズを減らす /
text-decoration-color: rgba(0, 0, 0, 0.3);

/ 4. ホバー時のインタラクションを滑らかに /
transition: text-underline-offset 0.2s ease, text-decoration-color 0.2s ease;
}

/ ホバー時に下線が浮き上がるようなアニメーション /
.link-refined:hover {
text-underline-offset: 0.4em;
text-decoration-color: rgba(0, 0, 0, 0.8);
}

なぜ `px` ではなく `em` を使うのか？

`text-underline-offset` に `em` を使う最大の理由は、「フォントサイズが変わっても、その比率を維持できるから」です。レスポンシブ対応でフォントサイズが変動するモダンなサイトにおいて、固定値の `px` はメンテナンスコストを増大させるリスクがあります。`0.25em` 前後の指定であれば、大抵のフォントでディセンダーと被らない「絶妙な余白」を作れます。

—

3. シニアからのアドバイス：実装時の注意点

このプロパティを扱う上で、一つだけ注意すべきことがあります。それは「行間（line-height）との兼ね合い」です。

`text-underline-offset` で下線を下げすぎると、マルチライン（複数行）のリンクにおいて、下の行のテキストと線が衝突してしまう可能性があります。デザインによっては、リンク全体に `padding-bottom` を設定して行間を調整するなどのケアが必要になることもあります。

「とりあえず値を大きくすればいい」というわけではなく、「文字のディセンダーに重ならず、かつ次の行のテキストに干渉しない境界線」を探る。この微調整を厭わない姿勢こそが、フロントエンド・スペシャリストとしての矜持です。

—

まとめ

`text-underline-offset` は、単なる装飾プロパティではありません。それは、Webにおける「文字を読む体験」をデザインする、非常に強力なツールです。

`text-decoration-thickness` で線の太さを制御し、
`text-underline-offset` で余白をコントロールし、
`text-decoration-color` で視覚的なノイズを削ぎ落とす。

この3つを組み合わせるだけで、あなたの実装するUIは確実に「一段上の品質」へと到達します。ぜひ、次回のプロジェクトで試してみてください。細部へのこだわりこそが、プロダクト全体の信頼感に直結します。