リンクのアンダーライン、まだ「デフォルトのまま」で放置していませんか？
フロントエンドエンジニアの皆さん、お疲れ様です。CSSのプロパティの中でも、`text-decoration`ほど「なんとなく」使われているものはありません。
「リンクに下線を引きたい？ `text-decoration: underline;` でいいでしょ」
確かに間違いではありません。しかし、モダンなWebサイトにおいて、ブラウザデフォルトのアンダーラインはあまりに無骨すぎます。文字に食い込み、可読性を下げ、デザインの洗練度を根こそぎ奪ってしまうからです。
今回は、CSSのショートハンドの先にある「真の制御」について。`text-decoration`の各プロパティを分解し、現場で使える「美しい装飾」の極意を伝授します。
—
1. なぜ「ショートハンド」だけでは不十分なのか
まず、基本の復習です。`text-decoration`は、以下の4つのプロパティをまとめたショートハンドです。
- `text-decoration-line` (underline, overline, line-throughなど)
- `text-decoration-color` (線の色)
- `text-decoration-style` (solid, wavy, dottedなど)
- `text-decoration-thickness` (線の太さ)
これらを一括指定するのも良いですが、実務でコンポーネントを設計する際は、「状態に応じた細かな制御」が求められます。例えば、ホバー時に色を変える、あるいは太さを変えるといったインタラクションです。
ブラウザの裏側で起きていること
ブラウザは`text-decoration`を文字のレンダリングに合わせて描画しています。興味深いのは、`text-underline-offset`プロパティとの組み合わせです。これを使うことで、文字と線の間に「余白」を生み出し、タイポグラフィの美しさを損なわずに線を引くことが可能になります。これが、アマチュアとプロの境界線です。
—
2. 実務で即戦力になる「モダン・アンダーライン」
では、現場でそのまま使える、洗練されたアンダーラインのレシピを紹介します。
.link-modern {
/ 1. デフォルトの下線を消す /
text-decoration: none;
/ 2. 相対的な位置指定で、テキストとの距離を確保 /
text-underline-offset: 4px;
/ 3. ショートハンドで基本を定義 /
/ line color style thickness の順で指定可能 /
text-decoration: underline #cbd5e0 solid 1px;
/ トランジションを加えて、ホバー時に優雅に変化させる /
transition: all 0.2s ease-in-out;
}
.link-modern:hover {
/ ホバー時は色を濃くし、線を少し太くして視認性を高める /
text-decoration-color: #3182ce;
text-decoration-thickness: 2px;
}
なぜこの設定が「良い」のか
- `text-underline-offset`: これを設定しないと、日本語の「g」や「y」のようなディセンダー（下にはみ出す部分）に線が重なってしまいます。これを数ピクセル浮かせるだけで、タイポグラフィは格段に読みやすくなります。
- `text-decoration-thickness`: 1pxだと細すぎて頼りない、しかし標準設定だと太すぎる。2pxや1.5pxといった細かい調整が、ブランドの繊細さを表現します。
—
3. 応用編：波線（wavy）をアクセントに
最近のUIトレンドとして、特定の強調箇所に「波線（wavy）」を使うケースが増えています。しかし、これをやりすぎると品がなくなります。あくまで「ここをクリックできる」「ここに注釈がある」という文脈に限定しましょう。
.link-attention {
text-decoration: underline wavy #f6ad55 1.5px;
text-underline-offset: 3px;
cursor: help;
}
—
4. エンジニアとして心に留めておくべきこと
最後に、チームのメンバーによく伝えていることがあります。それは、「アクセシビリティを犠牲にしない」ということです。
`text-decoration: none;` を多用しすぎると、視覚に障害を持つ方や、色の判別が難しいユーザーにとって「どこがリンクなのか」が分からなくなるリスクがあります。
- コントラスト比: `text-decoration-color` は背景色に対して十分なコントラストを確保してください。
- 状態の明示: ホバー時だけでなく、キーボードフォーカス時（`:focus-visible`）にも同様に装飾が適用されるよう、セレクタを共通化しておくのがベストプラクティスです。
/ ベストプラクティス：hoverとfocusをまとめる /
.link-modern:hover,
.link-modern:focus-visible {
text-decoration-color: #3182ce;
text-decoration-thickness: 2px;
}
—
まとめ：装飾は「引き算」である
技術的に高度なことができるからといって、すべてを盛り込む必要はありません。`text-decoration`の各プロパティを理解し、適切に制御することは、ユーザー体験を洗練させるための強力な武器になります。
「なんとなく」指定していたアンダーラインを、明日から「意図を持ったデザイン」に変えてみませんか？その小さな積み重ねが、あなたの書くコードの価値を、そしてプロダクトのクオリティを確実に引き上げてくれるはずです。
それでは、良いフロントエンド開発を！
コメント