なぜあなたの引いた「下線」は、文字を切り刻んでしまうのか？
Web制作の現場で、デザインカンプに忠実なコーディングを求められたとき、誰もが一度は「リンクの下線（text-decoration）」と「ディセンダ（文字のベースラインからはみ出る部分）」の衝突に悩まされたことがあるはずです。
`g`, `j`, `p`, `q`, `y` といった小文字。これらが下線と重なり、まるで文字が断頭台にかけられたかのように汚く見える。この「些細だが看過できないノイズ」を、現代のCSSはどう解決すべきか。
今日は、小手先の回避策である `border-bottom` や `background-image` による擬似的な下線から卒業し、CSS標準の `text-underline-position` を使いこなすための知見を共有します。
—
なぜ「下線」と「ディセンダ」は衝突するのか
そもそも、なぜデフォルトの `text-decoration` はあんなにも無神経に文字を突き抜けるのでしょうか。
ブラウザのレンダリングエンジンは、歴史的に「下線はベースラインの直下に引くもの」という厳格なルールを守ってきました。しかし、日本語フォントや英字フォントの形状は多種多様です。特にデザイン性の高いWebフォントを導入した際、意図せず下線が文字の足元（ディセンダ）を突き刺すのは、ブラウザ側の「フォント情報の解釈」と「描画の優先順位」がズレていることに起因します。
これを根本から解決するのが、CSS Text Decoration Module Level 3で策定された `text-underline-position` プロパティです。
—
text-underline-position：下線の「居場所」を制御する
このプロパティは、ブラウザに対して「下線をどこに引くか」を指示します。実務で使う値は主に以下の3つです。
- `auto`（デフォルト）：ブラウザ任せ。結果として、ディセンダと衝突しやすい。
- `under`：これが本命。 下線をベースラインよりも下、ディセンダが干渉しない位置に押し下げます。
- `left` / `right`：縦書きの際に使用（横書きでは基本的に無視されます）。
実務で使えるベストプラクティス
現場で最も安全かつ美しいのは、`text-underline-position: under;` をベースにしつつ、必要に応じて `text-underline-offset` で微調整する方法です。
/
- 現場で即戦力となるリンク装飾のスタイル例
/
.link-refined {
/ 標準の下線装飾を有効にする /
text-decoration: underline;
/ ディセンダとの衝突を回避するため、下線をベースラインの下へ移動 /
text-underline-position: under;
/
- 下線が少し文字に近すぎると感じた場合、
- text-underline-offset で数ピクセル離すと格段に上品になります。
/
text-underline-offset: 0.15em;
/ 視認性を考慮した色と太さの調整（オプション） /
text-decoration-color: rgba(0, 0, 0, 0.3);
text-decoration-thickness: 1px;
}
.link-refined:hover {
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
}
—
なぜ `border-bottom` を使ってはいけないのか
たまに、「`text-decoration` を `none` にして、`border-bottom` を使えば解決する」という意見を聞きます。しかし、それはお勧めしません。理由は3つあります。
1. アクセシビリティの低下: `text-decoration` はブラウザのデフォルトのスタイルとして、ユーザーエージェントに「これがリンクである」ことを明示する重要な意味を持ちます。
2. インライン改行への追従: `border-bottom` を使うと、文章が途中で改行された際に、行間まで突き抜けて境界線が描画されることがあり、制御が非常に面倒です。
3. text-underline-offsetの万能性: 近年のブラウザは、`text-underline-offset` を使えば、`text-decoration` の位置を柔軟にコントロールできます。わざわざ擬似的な線を描くために `padding` や `display: inline-block` を駆使する必要はもうありません。
—
シニアからのアドバイス：実装の際の注意点
`text-underline-position: under;` は非常に強力ですが、一点だけ注意が必要です。
それは「フォントの種類によって、適切なオフセット量が異なる」という点です。例えば、Helveticaのようにディセンダが深いフォントと、日本語のヒラギノフォントでは、`under` を適用した際の「見栄えの良い距離」が微妙に変わります。
もしプロジェクト全体で一貫した美しさを求めるなら、以下のように設計してみてください。
- 基本は `text-underline-position: under;`
- `text-underline-offset` は `0.1em` 〜 `0.2em` あたりで微調整する
- それでも重なる場合は、フォントのline-heightを見直す（行間が詰まりすぎていると、下線が下の行と干渉するため）
些細な下線の位置ひとつで、Webサイトの「品質」は決まります。誰でもできるコーディングの先にある、こうした「細部へのこだわり」こそが、フロントエンドエンジニアとしてのあなたの価値を証明してくれるはずです。
さあ、明日の実装から、`text-underline-position` をぜひ試してみてください。あなたの手で、文字を断頭台から救い出してあげましょう。
コメント