【入門編】text-decoration-skip-inkによる可読性向上 – HTML実践ガイド

Webサイトを作っていると、リンクに下線（アンダーライン）を引く場面は避けて通れませんよね。

「なんか……文字と線が重なって、すごく読みづらくない？」

そうなんです。特に `g, j, p, q, y` といった、下に突き出した部分（専門用語で「ディセンダー」と呼びます）があるアルファベットは、下線とぶつかってしまい、まるで文字が線に串刺しにされているように見えることがあります。

今日は、そんな小さな「読みづらさ」をCSSの一行で魔法のように解決してくれる `text-decoration-skip-ink` というプロパティについてお話しします。

—

想像してみてください。美しいカリグラフィーの練習帳に、定規を当てて真っ直ぐな線を引くとします。ペン先が文字の突き出し部分を容赦なく横切ってしまったら、せっかくの綺麗な文字も台無しですよね。

Webの初期設定では、下線は「文字の形なんてお構いなしに、ただの棒」として描画されます。これが、私たちの目が「読みづらい！」と感じる正体です。

そこで登場するのが `text-decoration-skip-ink` です。このプロパティを「有効」にすると、ブラウザは気を利かせて「おっと、ここは文字の突き出し部分だから、線を通さないようにしよう！」と、線を回避（スキップ）してくれるようになるんです。

まるで、障害物を避けてスイスイ泳ぐ魚のような、賢い動きをしてくれるようになります。

—

使い方はとてもシンプルです。対象となる要素（`a` タグなど）に、以下のCSSを記述するだけ。これだけで、あなたのWebサイトの「読み心地」が一段と洗練されます。

/ リンクの下線を賢く避ける設定 /
a {
/ 下線を表示する /
text-decoration: underline;

/ 文字の突き出し部分を避けて線を描く設定 /
/ ‘auto’ はブラウザの賢い判断にお任せするモードです /
text-decoration-skip-ink: auto;
}

たったこれだけです！

もし「やっぱり線の途切れがない方が好みだな」という場合は、`text-decoration-skip-ink: none;` と書けば、昔ながらの「串刺しスタイル」に戻すこともできます。選択肢があるのは嬉しいことですよね。

—

「これって、ちゃんと全部のブラウザで動くの？」と不安になりますよね。大丈夫です！

現在、私たちが普段使っている Google Chrome、Safari、Firefox、Edge といった主要なブラウザは、すべてこの `text-decoration-skip-ink` をサポートしています。

昔のInternet Explorerのような、気難しいブラウザを相手にしていた頃の苦労はもう必要ありません。「あえて動かないようにする」ほうが難しいくらい、現代のWeb標準としてしっかり定着しています。

—

Web制作を始めたばかりの頃は、「機能が動けばそれでいい」と思いがちです。でも、こうして「文字が線と重なって読みづらくないかな？」という細かな点に気づき、それを解決する手段を知っていること。

その「小さなこだわり」の積み重ねこそが、あなたが作るサイトを「誰にでも優しく、美しい」ものに変えていくんです。

今日学んだ `text-decoration-skip-ink` は、ほんの小さなテクニックかもしれません。でも、この視点を持っているあなたは、すでに一歩、プロフェッショナルの階段を登っています。

ぜひ、今作っているプロジェクトのリンクタグに、この魔法をかけてみてくださいね。きっと、今までよりも少しだけ、文字が軽やかに見えるはずですよ！