「とりあえず下線」は卒業しよう。text-decorationの真価と、現場で使えるプロの装飾術
フロントエンドの世界に入ってしばらく経つと、`text-decoration: underline;` を書くことに何の疑問も抱かなくなる時期が必ず来ます。しかし、デザインカンプで「この下線、文字と少し距離を空けたい」「色を変えたい」「波線にしたい」といった要望が出た瞬間、多くのエンジニアが `border-bottom` での擬似的な再現という「逃げ」のテクニックに走りがちです。
もちろん、それも一つの手段ですが、CSSの仕様を正しく理解すれば、もっとスマートに、かつアクセシビリティを損なわずに実現できる方法があります。今日は、`text-decoration` の知られざる詳細プロパティと、現場で「おっ、こいつ分かってるな」と思われるレベルの装飾術を伝授します。
text-decorationは「一括指定」の罠に落ちるな
皆さんが普段使っている `text-decoration: underline;` は、実はショートハンド（一括指定）です。本来、このプロパティは以下の詳細プロパティの集合体であることを忘れてはいけません。
- `text-decoration-line`: 線をどこに引くか（underline, overline, line-through, none）
- `text-decoration-style`: 線の種類（solid, double, dotted, dashed, wavy）
- `text-decoration-color`: 線の色
- `text-decoration-thickness`: 線の太さ
- `text-underline-offset`: 下線と文字の距離（これが重要！）
なぜborder-bottomではなくtext-decorationを使うべきか
最大の理由は「レイアウトとの干渉」と「アクセシビリティ」です。`border-bottom` はボックスモデルの一部なので、要素の高さやインライン要素の改行時に挙動が予測しづらいことがあります。対して、`text-decoration` はブラウザのレンダリングエンジン側で「テキスト装飾」として最適化されているため、インライン要素として自然に振る舞い、スクリーンリーダー等の支援技術との親和性も高いのです。
実践：現場で即戦力となる「モダンなリンク」のコード
例えば、テキストの下線を少しだけ薄く、かつ文字から少し離した「洗練されたリンク」を作りたい場合、以下のコードがベストプラクティスです。
.modern-link {
/ 下線を定義 /
text-decoration-line: underline;
/ 線の太さを細くして上品に /
text-decoration-thickness: 1px;
/ 文字との距離を適度に開ける（ここが重要） /
text-underline-offset: 4px;
/ 線の色を文字より薄くして、ノイズを減らす /
text-decoration-color: rgba(0, 0, 0, 0.3);
/ ホバー時は色を濃くするインタラクション /
transition: text-decoration-color 0.2s ease;
}
.modern-link:hover {
text-decoration-color: rgba(0, 0, 0, 0.8);
}
ブラウザの「裏側」で起きていること
少し深掘りしましょう。ブラウザは `text-decoration` を描画する際、文字のベースライン（文字の底辺）を基準に計算を行います。`text-underline-offset` を指定すると、ブラウザはその計算結果からどれだけオフセットするかを即座に再計算します。
もしあなたが `border-bottom` でこれをやろうとすると、親要素の `line-height` が変わるたびにマージンを調整しなければならないという「泥沼」にはまります。ネイティブプロパティを使うということは、ブラウザの描画エンジンに「あとはよしなにやっておいてくれ」と任せることであり、それが結果的にコードのメンテナンス性を極限まで高めることにつながるのです。
応用編：強調テキストに「波線」を使う
`em` や `strong` タグ、あるいは特定のクラスに対して、単なる下線ではなく「重要度」を視覚的に伝えるために波線（wavy）を使うテクニックも有効です。
.highlight-wavy {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #ff9900;
text-decoration-thickness: 2px;
/ 波線が文字に被らないよう余裕を持たせる /
text-underline-offset: 3px;
}
この「波線」も、かつてはSVGや背景画像をループさせるという非常に面倒な実装が必要でしたが、今やCSSの一行で完結します。
最後に：職人気質を持つということ
フロントエンド開発において、最新のフレームワークを使いこなすことは重要です。しかし、CSSのこうした「枯れた技術」を深く理解しているエンジニアこそ、結局は最も安定した、バグの少ないUIを作れると僕は確信しています。
「とりあえず動けばいい」ではなく、「ブラウザの挙動をコントロールする」という意識を持ってコードを書く。その小さな積み重ねが、あなたの書くCSSを、そしてプロダクトのUIを、間違いなく一段上のレベルへ引き上げます。
まずは今日のコードを、プロジェクトのリンクスタイルに適用してみてください。その微細な変化が、プロダクト全体の「高級感」を支えるはずです。
コメント