こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
リンクの下線って、デザインの中で地味だけど意外と目立つ存在。
特に「g」や「y」、「p」のように下に飛び出す文字が入ると、下線が文字に被ってちょっと野暮ったく見えることありませんか？
そこで登場するのがCSSプロパティのひとつ、text-decoration-skip-ink。
これを使えば、文字の形に応じて自動的に下線がスキップ（回避）され、読みやすく、見た目も洗練されたリンクが完成します。
text-decoration-skip-inkとは？
text-decoration-skip-ink は、CSSの装飾用プロパティで、
下線がディセンダ（g, j, yなど）にかぶらないよう回避処理をしてくれる機能です。
実際に比較してみましょう。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- 通常の text-decoration: underline だと、文字の下部に線が通ってしまう
- text-decoration-skip-ink: auto; を加えると、自動でスキップしてくれる
つまり、リンクの視認性・可読性・デザイン性を1行で底上げできる便利なプロパティなんです。
実装例
a {
text-decoration: underline;
text-decoration-skip-ink: auto;
} とてもシンプルですよね。
auto は現在、最も一般的な値で、自動的に下線が避けるべき文字を判定して処理してくれます。
ビフォーアフターで見る見た目の差
- text-decoration-skip-ink: auto; → 下部のパーツがある文字（g, y, p, q など）を避ける
同じフォント、同じ行間でも、見た目に洗練された印象が生まれるので、特に本文中のリンクでおすすめです。
対応ブラウザ
2025年現在、主要ブラウザはすでに対応済みです。
- Chrome 64+
- Firefox 70+
- Edge 79+
- Safari 12.1+
Internet Explorerでは対応していませんが、IE向けのデザインを除外できるなら、安心して使ってOK。
応用：ボタンやメニューでも活用しよう
リンクだけでなく、テキスト装飾されたボタンやナビゲーションの下線演出にも便利です。
UI全体が引き締まり、タイポグラフィにこだわった印象を与えることができます。
まとめ
1行でリンクの質を上げよう！
text-decoration-skip-ink: auto; を使うことで、リンク下線が自然な見た目に整います。
デザイン性と可読性を両立し、かつ追加コストゼロ。
小さなこだわりが、サイト全体の印象を引き上げてくれる。
そんなCSSプロパティ、ぜひ活用してみてください！
satokotadesignキャンペーン実施中！
