モダンCSSでアンダーラインを「デザイン」する：text-decorationの深淵
フロントエンドの現場で、「リンクのアンダーラインをもう少し細く、色を薄くしたい」というデザイナーからの要望に、`border-bottom`を使って四苦八苦した経験はないだろうか？
かつて、僕らフロントエンドエンジニアはアンダーラインを制御するために、`border-bottom`を使い、`padding-bottom`で位置を微調整し、さらには`display: inline-block`で高さのズレと格闘するのが「お作法」だった。しかし、モダンブラウザの世界はもうそんな泥臭い回避策を必要としていない。
今日は、`text-decoration`の高度な制御プロパティを使いこなし、標準仕様の恩恵を最大限に受けるための「プロの作法」を共有したい。
—
なぜ「border-bottom」ではなく「text-decoration」なのか？
`border-bottom`による擬似的なアンダーラインは、マルチライン（複数行）になった瞬間に崩壊する。行を跨いで描画されないからだ。一方で、`text-decoration`系プロパティは「テキストの装飾」としてブラウザがレンダリングエンジンレベルで制御している。
ブラウザはテキストのベースラインやフォントの特性を理解した上で線を描く。つまり、`text-decoration`を使えば、複数行にまたがっても綺麗に追従し、フォントサイズが変わっても適切な位置を保ってくれる。これが、保守性の高いコードを書く第一歩だ。
使いこなすべき4つのプロパティ
CSSの`text-decoration`は、実は以下のショートハンドの集合体だ。個別に指定することで、従来の「ただの線」から脱却できる。
1. `text-decoration-line`: 装飾の種類（underline, overline, line-throughなど）
2. `text-decoration-color`: 線の色
3. `text-decoration-style`: 線の種類（solid, wavy, dotted, dashed, double）
4. `text-decoration-thickness`: 線の太さ（px指定だけでなく`from-font`も使える）
実践：洗練されたリンクスタイルを作る
現場でよく使う、「主張しすぎないけれど上品なリンク」を実装してみよう。
.smart-link {
/ 1. 標準の線をあえて制御下に置く /
text-decoration-line: underline;
/ 2. 色をテキストと分ける（ブランドカラーよりも少し薄くするのがコツ） /
text-decoration-color: rgba(0, 100, 255, 0.4);
/ 3. 線の太さを指定。最近は細めがトレンド /
text-decoration-thickness: 1px;
/ 4. ベースラインからの距離を調整（重要！） /
text-underline-offset: 4px;
/ ホバー時のインタラクションも忘れずに /
transition: text-decoration-color 0.3s ease;
}
.smart-link:hover {
text-decoration-color: rgba(0, 100, 255, 1);
text-decoration-thickness: 2px;
}
ブラウザが裏側でやっていること
少し専門的な話をしよう。`text-decoration`は、実はOSやフォントのメトリクスと密接に関わっている。`text-underline-offset`を指定しない場合、ブラウザはフォントデザイナーが定義した「このフォントならこの位置に下線を引くのが美しい」という情報を読み取って線を引く。
`from-font`という値を`text-decoration-thickness`に指定すると、フォント自体が持つ「適切な太さ」を自動で適用してくれる。これは、Webフォントを多用する現代のUIデザインにおいて、非常に強力な武器になる。
実務で「もう一つ上」を目指すためのヒント
最後に、現場で後輩によくアドバイスしているTipsを2つ紹介する。
- `text-decoration-skip-ink`を制する:
`text-decoration-skip-ink: auto;`（デフォルト値だが明示すると安心）を設定すると、小文字の「g」や「y」などのディセンダー（ベースラインより下に突き出す部分）を避けて線が描画される。可読性を損なわないためのプロの配慮だ。
- Wavy（波線）の使い所:
`text-decoration-style: wavy;`は、スペルミスや強調表現に最適だが、`text-decoration-thickness`と組み合わせることで、「揺れ」の強さを調整できる。やりすぎると安っぽくなるので、あくまでアクセントとして使うのが吉だ。
まとめ
CSSの標準機能は、日々進化している。過去の「苦肉の策」を捨て、モダンなプロパティに置き換えていくことは、コードの行数を減らすだけでなく、将来的なバグや表示崩れを未然に防ぐことにも直結する。
まずは、今書いているプロジェクトの`border-bottom`を、`text-decoration`の個別指定に書き換えてみてほしい。それだけで、君の書くCSSはぐっと「シニア」のレベルに近づくはずだ。
技術は常にアップデートされる。公式ドキュメントを眺めるだけでなく、ブラウザという「レンダリングエンジン」がどう動いているかを想像しながらコーディングする。それが、一流のフロントエンドエンジニアへの近道だ。
コメント