なぜ「その下線」、ディセンダーを突き抜けてしまうのか？
Web制作の現場で、デザイナーから「リンクの下線が文字と重なって読みづらいから調整して」と指摘を受けたことはありませんか？特にフォントサイズを大きくしたり、行間を詰めたデザインでは、下線が `g`, `j`, `p`, `q`, `y` といった文字の「ディセンダー（ベースラインより下に突き出る部分）」を容赦なく貫通してしまい、視認性を著しく損なうことがあります。
かつては `border-bottom` を使い、`padding` で位置を微調整するという「ハック」が常識でしたが、今はそんな泥臭いことをする必要はありません。CSSの `text-decoration-skip-ink` プロパティが、その悩みをスマートに解決してくれます。
—
text-decoration-skip-ink が描く「美しい余白」
`text-decoration-skip-ink` は、ブラウザに対し「下線を引く際、文字のディセンダー部分を避けて描画せよ」と指示するプロパティです。
仕組みは非常にシンプルです。ブラウザのレンダリングエンジンは、フォントが持つメトリクス情報を元に、「どこが文字の描画領域で、どこがディセンダーか」を計算しています。このプロパティを `auto` に設定すると、下線が文字のストロークと交差する地点で、数ピクセルだけ下線の描画を中断（スキップ）してくれます。
これだけで、デザインの品格が一段階上がります。特に可読性が重要なブログやメディアサイトにおいて、この「ほんの少しの気遣い」が、ユーザーの読書体験を大きく変えるのです。
—
実装は一行、効果は絶大
このプロパティは、もはや現代のWeb開発における「標準装備」と言っても過言ではありません。使い方は至って簡単です。
/ 実務でそのまま使えるベストプラクティス /
a {
/ 下線を表示 /
text-decoration: underline;
/ ディセンダーを避ける設定（これが本題） /
text-decoration-skip-ink: auto;
/ 下線の太さやオフセットを調整するとさらに綺麗になる /
text-underline-offset: 0.15em;
text-decoration-thickness: 0.05em;
}
/
- 補足:
- text-underline-offset を組み合わせることで、
- 文字と下線の間に適度な距離を作ることができ、
- さらに視認性が向上します。
/
—
ブラウザの裏側とサポート状況
現時点（2024年）において、`text-decoration-skip-ink` は主要ブラウザ（Chrome, Firefox, Safari, Edge）で標準サポートされており、実務で安心して採用できるプロパティです。
ただし、一点だけ注意が必要です。もしあなたのプロジェクトが非常に古いブラウザ（IE11など）をサポート対象に含んでいる場合は、このプロパティは無視されます。しかし、それは「下線が文字と重なる」という昔ながらの状態に戻るだけなので、レイアウト崩れのような致命的なリスクはありません。 プログレッシブ・エンハンスメントの観点からも、積極的に導入すべき機能です。
プロからのアドバイス：なぜこれを使うべきなのか
私が若手エンジニアによく話すのは、「CSSは単なる装飾の道具ではなく、タイポグラフィの美学を再現するツールである」ということです。
`text-decoration-skip-ink` を使わない下線は、どこか機械的で、文字と線が干渉し合って「汚いノイズ」に見えることがあります。特に日本語フォントと英数字が混在する環境では、このプロパティがあるかないかで、コンテンツの「信頼性」まで左右されると私は考えています。
「仕様だから仕方ない」と諦めるのではなく、CSSが提供する細かい制御を使いこなして、デザイナーが意図した「美しい余白」をWebブラウザ上で再現する。それこそが、私たちが目指すべきエンジニアリングの姿ではないでしょうか。
今日からあなたのプロジェクトの `a` タグに、ぜひこの一行を加えてみてください。その小さな差が、サイトのクオリティを決定づけるはずです。
コメント