なぜその「下線」は読みづらいのか？CSS `text-decoration` の深淵に触れる
フロントエンドの現場で、「デザインカンプ通りに下線を引いたのに、なぜか文字と重なって汚く見える」という経験はありませんか？
デザイナーがこだわったタイポグラフィも、ブラウザのデフォルト挙動に丸投げすれば、特に日本語環境では「文字のディセンダー（gやy、あるいはひらがなの『り』や『め』など）と下線が衝突する」という視認性の低下を招きます。
今日は、単なる装飾プロパティだと思われがちな `text-decoration` を、プロとしてどう制御し、美学を持って実装すべきか。その「裏側の仕組み」と「現場で生きるテクニック」を深掘りしていきましょう。
—
1. text-decoration は「一括指定」の皮を被った強力な属性
多くのエンジニアが `text-decoration: underline;` とだけ書いて満足していますが、実はこれはショートハンドです。実務では以下の個別のプロパティを理解しておく必要があります。
- `text-decoration-line`: 線を引く場所（underline, overline, line-through, none）
- `text-decoration-color`: 線の色。文字色と分けるのが「こなれたUI」の秘訣です。
- `text-decoration-style`: 線種（solid, double, dotted, dashed, wavy）。
- `text-decoration-thickness`: 線の太さ。
特に `thickness` は重要です。デフォルトの線は往々にして太すぎます。細めのフォントには `0.05em` 程度まで絞るのが、今どきのミニマルなデザインでは鉄則です。
—
2. 実務の救世主：`text-decoration-skip-ink` の真価
ここからが本題です。「下線と文字が重なって読みづらい」問題を一発で解決するのが `text-decoration-skip-ink` プロパティです。
ブラウザのレンダリングエンジン（BlinkやWebKitなど）は、このプロパティが有効（デフォルト値は `auto`）である場合、下線が文字のディセンダー（文字の下にはみ出す部分）と交差する場所で、自動的に線を「避けて」描画します。
もし、意図的に「線は絶対に途切れさせたくない（例えばデザイン上の理由で）」という場合以外は、基本的にはこのプロパティを無効化せず、ブラウザの賢い判断に任せるのがベストプラクティスです。
—
3. 実践：現場で使える「洗練されたリンク装飾」
ただの下線ではなく、ホバー時に少しだけ変化する、上品なエフェクトを実装してみましょう。コードをそのままエディタに貼り付けて試してみてください。
/ 現場でよく使う「上品なリンク装飾」の例 /
.link-refined {
/ 下線の設定を一括指定 /
/ 色を少し薄くして、文字とのコントラストを調整するのがプロの技 /
text-decoration: underline 0.08em rgba(0, 0, 0, 0.3);
/ 文字のディセンダーを避けて描画（デフォルトですが明示すると安心） /
text-decoration-skip-ink: auto;
/ 下線と文字の距離を微調整 /
text-underline-offset: 0.15em;
transition: all 0.2s ease;
}
.link-refined:hover {
/ ホバー時は線を濃くし、距離を詰めることで「クリックできる感」を演出 /
text-decoration-color: rgba(0, 0, 0, 0.8);
text-underline-offset: 0.1em;
}
ポイント解説
- `text-underline-offset`: これを使うと、文字と下線の距離を自由に操れます。デフォルトの「文字に張り付きすぎ」な状態から解放されるだけで、一気にUIの質が向上します。
- `rgba` の活用: 線の色を `color: currentColor` に依存させず、あえて透明度を持たせることで、文字の可読性を損なわずに「装飾としての存在感」をコントロールできます。
—
4. なぜ `border-bottom` ではなく `text-decoration` なのか？
後輩から「`border-bottom` で代用すればいいのでは？」と質問されることがよくあります。
確かに、`border-bottom` を使えば線種や位置を細かく制御できます。しかし、`border-bottom` は「要素のボックス」の下端に付くため、複数行にまたがった時、折り返しの箇所で線が繋がらないという致命的な弱点があります。
一方で `text-decoration` はテキストの行（インラインボックス）に合わせて描画されるため、折り返しにも完璧に対応します。「複数行になる可能性があるテキスト」には、迷わず `text-decoration` を選択してください。 これが、メンテナンス性を考慮したフロントエンド設計の基本です。
—
最後に：完璧を追い求めすぎない勇気
もちろん、CSSだけで解決できない複雑なデザイン（例えば、背景色と文字の間に線を配置したい場合など）も存在します。その時は `box-shadow` を活用するなどのハックが必要になることもあります。
しかし、まずは「ブラウザの標準仕様をどれだけ使いこなせているか」を自問自答してみてください。CSSは進化しています。数年前にはJSで頑張っていたことが、今では1行のプロパティで完結するのです。
皆さんの書くコードが、美しく、そして誰にとっても読みやすいものであることを願っています。また次回の記事でお会いしましょう！
コメント