下線は「ただ引く」時代じゃない。text-underline-offset と text-decoration-thickness で実現するタイポグラフィの美学
フロントエンドの現場で、「リンクの下線がダサい」とデザイナーから突き返された経験、一度はありますよね。
ブラウザのデフォルトで引かれる下線（`text-decoration: underline`）は、残念ながらあまりに無骨です。文字のベースラインを突き抜け、ディセンダー（g, j, p, q, y などの下に突き出す部分）を容赦なく分断するあのライン。あれをそのまま放置するのは、タイポグラフィを愛するエンジニアとして少し美学に欠けるかもしれません。
今回は、CSSの `text-underline-offset` と `text-decoration-thickness` を駆使して、リンクの下線を「機能」から「デザイン」へと昇華させるための実践的な知見を共有します。
—
なぜデフォルトの下線は「汚い」のか？
ブラウザのレンダリングエンジン（BlinkやWebKitなど）が下線を引くとき、基本的にはフォントのメトリクスに基づいた機械的な計算が行われます。
1. 位置の固定: 多くのブラウザは、ベースラインに対して一定のオフセットで下線を配置します。しかし、フォントによってグリフの重心は異なります。
2. 太さの無視: デフォルトでは、文字の太さ（`font-weight`）やサイズに関わらず、下線の太さは固定されがちです。
結果として、読みやすいはずのテキストが視覚的なノイズで濁ってしまう。これを解決するのが、モダンCSSの力です。
—
武器を揃える：プロパティの解剖学
text-decoration-thickness
下線の「太さ」を制御します。`px` だけでなく `em` を使うのがプロの流儀です。`0.1em` 程度に設定することで、フォントサイズに合わせて自動的に適正な太さを維持できます。
text-underline-offset
下線とテキストの「距離」を調整します。これが革命的でした。これまで `border-bottom` で代用していたハックは、もう必要ありません。`border` を使うと、折り返し時に意図しない余白が生まれたり、`inline-block` が必要だったりと弊害が多かったからです。
—
実務で使える「洗練されたリンク」のコード例
現場で「とりあえずこれを使え」と言える、汎用性が高く美しいリンクスタイルです。
.refined-link {
/ 下線の太さをフォントサイズに対して相対的に指定 /
text-decoration-thickness: 0.12em;
/ ベースラインからの距離を調整（文字のディセンダーを避ける） /
text-underline-offset: 0.25em;
/ ホバー時に太さを強調してインタラクションを高める /
transition: text-decoration-thickness 0.2s ease, text-underline-offset 0.2s ease;
/ 色を文字色と少し変えることで、より上品な印象に /
text-decoration-color: rgba(0, 0, 0, 0.3);
}
.refined-link:hover {
/ ホバーで少し太くし、浮き上がるような演出 /
text-decoration-thickness: 0.2em;
text-underline-offset: 0.35em;
text-decoration-color: rgba(0, 0, 0, 0.8);
}
なぜこの設定なのか？（現場の勘どころ）
- `0.12em` のマジック: `0.1em` だと細すぎて、高解像度ディスプレイでかすれて見えることがあります。`0.12em` 前後が、可読性とデザイン性を両立する黄金比です。
- `text-decoration-color` の活用: 下線を純粋な黒（`#000`）にすると、文字と混ざって視認性が落ちます。少し透明度（`rgba`）を加えるか、あるいは文字色よりも少し薄い色に設定することで、テキストの可読性を保ちつつ、リンクであることを明示できます。
—
注意すべき落とし穴
どれほど便利なプロパティでも、盲信は禁物です。以下の点には注意を払ってください。
1. マルチデバイスでの視認性: あまりに細い下線や、透明度を上げすぎた下線は、屋外のスマホ画面では「消えた」ように見えることがあります。必ず実機で確認しましょう。
2. アクセシビリティ: 下線はリンクの証です。デザイン性を追求するあまり、リンクかどうかの判別が困難になっては本末転倒です。`text-decoration-style: wavy` で装飾しすぎるのも、時と場合を選びます。
—
結論：細部へのこだわりが、プロダクトの質を決める
「下線なんてブラウザ任せでいい」——そう思っていた時期が、私にもありました。しかし、`text-underline-offset` を使い始めると、今までいかに自分のデザインが雑だったのかを痛感させられます。
数ピクセルの調整。ほんのわずかな色の差。そうした細部への執着こそが、エンジニアとしての「プロダクトへの愛」であり、ユーザー体験を一段上のステージへ引き上げる鍵となります。
さあ、今日からコードを見直して、あなたのサイトのリンクを「少しだけ」美しくしてみませんか？
コメント