脱・デフォルトの下線。CSSで魅せる「洗練された」テキスト装飾の極意
フロントエンド開発の現場で、デザイナーから「リンクの下線をもう少し上品にしたい」「テキストと下線の隙間を調整して」といった要望を受け、頭を抱えた経験はないだろうか。
昔なら `border-bottom` を使って `padding-bottom` で距離を調整する……というのが定番のハックだった。しかし、今は違う。CSSの仕様は進化し、`text-decoration` プロパティ群を使いこなすだけで、ブラウザのデフォルトに依存しない、極めて精緻な装飾が可能になっている。
今日は、中級エンジニアなら押さえておくべき `text-decoration` の高度な制御と、現場で「おっ、分かってるね」と思われるための実装テクニックを共有しよう。
—
なぜ `border-bottom` ではなく `text-decoration` なのか
まず前提として、なぜ無理やり `border` で装飾するのをやめるべきか。それは「アクセシビリティ」と「レンダリング」の観点からだ。
`text-decoration` は、単なる視覚効果ではない。ブラウザはこれを「テキストの一部」として認識する。例えば、`text-decoration-skip-ink: auto` を設定しておけば、`g` や `y` のようなディセンダー（ベースラインより下に突き出る部分）を、ブラウザが自動的に避けて下線を描画してくれる。`border` で実装した場合、この挙動を再現するのは困難だ。
現場で即戦力となるプロパティ群
CSSの `text-decoration` は、ショートハンドだけでなく、個別プロパティを組み合わせることで真価を発揮する。
- `text-decoration-line`: 下線だけでなく、上線（overline）や取り消し線（line-through）も指定できる。
- `text-decoration-thickness`: 線幅をピクセルや `em` で指定。太すぎず細すぎない「0.05em」程度の指定が上品に見える鍵だ。
- `text-decoration-offset`: これが最も重要。ベースラインからの距離を調整できる。デフォルトのブラウザ挙動は少し近すぎることが多いので、微調整して余白を持たせるだけで、デザインのクオリティは劇的に上がる。
—
実践：モダンなリンク装飾の実装例
以下は、僕が実際のプロダクトでも頻繁に使う、読みやすさと美しさを両立したリンクのスタイルだ。
.refined-link {
/ 1. まずは基本の下線を設定 /
text-decoration-line: underline;
/ 2. 線幅を少し細めに設定（emを使うとフォントサイズ追従で破綻しない） /
text-decoration-thickness: 0.06em;
/ 3. 下線とテキストの距離を少し離す（ここが一番のこだわりポイント） /
text-decoration-underline-offset: 0.25em;
/ 4. 色をテキストと同色ではなく、少し薄いグレーなどで馴染ませる /
text-decoration-color: rgba(0, 0, 0, 0.3);
/ 5. ディセンダーを避ける設定（これを入れないと文字と線が被る） /
text-decoration-skip-ink: auto;
transition: all 0.2s ease;
}
.refined-link:hover {
/ ホバー時は線幅を太くし、色を濃くしてインタラクティブな反応を示す /
text-decoration-thickness: 0.15em;
text-decoration-color: rgba(0, 0, 0, 0.8);
}
—
ブラウザが裏側でどう処理しているか
少し技術的な深掘りをしよう。ブラウザのレンダリングエンジン（BlinkやWebKit）にとって、下線はテキストフォントのメトリクス（フォントの高さやベースラインの位置）と密接に関連している。
`text-decoration-underline-offset` を指定すると、ブラウザは「現在のフォントのベースラインからどれだけオフセットするか」を計算し、GPUで描画を行う。`border` と異なり、これらはレイアウト再計算（リフロー）の負荷を最小限に抑えつつ描画されるため、パフォーマンス的にも非常に優秀だ。
最後に：エンジニアとしてのこだわり
「たかが下線」と思うかもしれない。しかし、ユーザーがWebサイトを閲覧する際、最も頻繁に視線が止まるのはリンクだ。そのリンクの装飾が雑であれば、サービス全体への信頼感はどこか薄れてしまう。
僕らエンジニアが細かいCSSのプロパティにこだわるのは、単なる自己満足ではない。その微細な「こだわり」の積み重ねが、プロダクト全体の「洗練」という名のユーザー体験を作り上げるんだ。
次のチケットでテキスト装飾をいじる機会があれば、ぜひデフォルトの `text-decoration` に立ち返り、この設定を試してみてほしい。きっと、その繊細な仕上がりに驚くはずだ。
コメント