なぜ、デフォルトの `text-decoration` は「ダサい」のか？
フロントエンドの現場で、デザイナーから「リンクの下線、もう少し下に下げてくれない？」と言われて、頭を抱えた経験はありませんか？
CSSの `text-decoration: underline` は、正直に言って「機械的」です。ブラウザのレンダリングエンジンは、フォントのベースラインやディセンダー（g, j, p, q, y などの下に突き出す部分）を考慮するものの、その結果は往々にしてテキストに近すぎたり、時には文字の一部を突き抜けてしまったりして、タイポグラフィとしては非常に野暮ったい見た目になります。
かつて我々は、この問題を解決するために `border-bottom` を使ったり、`background-image` でグラデーションを引いたりと、ハック的な実装で凌いできました。しかし、今は違います。`text-underline-offset` という、我々を救うための非常にエレガントなプロパティが存在するのです。
—
`text-underline-offset` の正体とブラウザの裏側
`text-underline-offset` は、その名の通り「下線とテキストの距離をオフセットする」ためのCSSプロパティです。
ブラウザのレンダリングエンジン（BlinkやWebKitなど）において、デフォルトの下線は `text-decoration-thickness` やフォントのメトリクスに基づいて自動計算されます。しかし、このプロパティを一行加えるだけで、その計算値に「上書き」ではなく「追加」の物理的な距離を指定できるわけです。
特筆すべきは、これがインライン要素のレイアウトを崩さないという点です。`border-bottom` を使うと、要素の高さ（box model）が変わってしまうため、隣接する行間（line-height）に影響を与えてレイアウトが崩れることがありますが、`text-underline-offset` は純粋に「テキストの装飾」レイヤーで処理されるため、CSSのボックスモデルを汚染しません。これこそ、我々が喉から手が出るほど欲しかった挙動です。
—
実務で差がつく！「美しい下線」の実装パターン
ただ数値を指定するだけでは、結局「適当な距離」になってしまいます。プロとして、タイポグラフィの美しさを最大化するためのベストプラクティスを紹介します。
1. 基本の「読みやすい」リンク装飾
単に下線を下げるだけでなく、`text-decoration-thickness` と組み合わせるのがコツです。太さを少し細めにし、オフセットを適度にとることで、洗練された印象になります。
.link-refined {
/ 下線の太さを少し細く設定 /
text-decoration-thickness: 1px;
/ 文字から下線をわずかに離す（0.2em程度が黄金比に近い） /
text-underline-offset: 0.2em;
/ 色も真っ黒ではなく、少し薄い色にすると上品になる /
text-decoration-color: rgba(0, 0, 0, 0.3);
transition: text-decoration-color 0.2s ease;
}
.link-refined:hover {
/ ホバー時は少し色を濃くしてフィードバックを返す /
text-decoration-color: rgba(0, 0, 0, 0.8);
}
2. インタラクションを重視した「強調」装飾
`strong` や `em` と組み合わせる際、下線を強調の手段として使うケースも多いでしょう。この場合は、オフセットをあえて大きくとり、太めのラインを引くことでデザインのアクセントにします。
.accent-underline {
text-decoration: underline;
text-decoration-style: solid;
/ 太めの線を強調として使う /
text-decoration-thickness: 3px;
/ 文字から大きく離すことで、可読性を損なわずに視覚的インパクトを出す /
text-underline-offset: 4px;
/ 下線の色をテーマカラーにする /
text-decoration-color: #ffcc00;
}
—
注意点：プロとしての心得
ここまで万能に見える `text-underline-offset` ですが、一点だけ注意が必要です。それは「フォントの種類による影響」です。
フォントによって、ディセンダーの深さは異なります。特に欧文フォントや個性的なフォントを使う場合、`em` 単位で指定しても「思ったより離れすぎている」あるいは「まだ重なっている」というケースが発生します。
- 解決策: 基本は `em` で指定し、デザインの要件が厳しい箇所のみ `px` や `rem` で微調整する。
- 検証: チームで開発する際は、必ず「日本語（ひらがな・カタカナ）」と「英数字」の両方でテストしてください。特に日本語の場合、`g` や `y` といった突き出しがないため、英数字混じりの文章では下線の距離が不自然に見えることがあります。
まとめ：UIのクオリティは「余白」に宿る
フロントエンドの仕事は、ピクセル単位の戦いです。デフォルトのUIをただ実装するだけなら、誰にでもできます。しかし、デザイナーが意図した「空気感」や「可読性」を、ブラウザの制約の中で最大化するのが我々プロフェッショナルの仕事です。
`text-underline-offset` は、単なるCSSの機能ではありません。あなたのタイポグラフィへのこだわりを表現するための強力なツールです。ぜひ、今日からあなたのプロダクトの「リンク」を見直してみてください。たった0.2emの調整が、プロダクト全体の質を一段階引き上げてくれるはずです。
何か分からないことや、「こんなケースはどうする？」という悩みがあれば、いつでも相談してください。現場の泥臭い議論、大歓迎です。
コメント