【入門編】text-underline-offsetによる下線の位置調整 – HTML実践ガイド

こんにちは！Web制作の世界へようこそ。フロントエンドの現場で日々コードを書いていると、ふとした瞬間に「あれ、なんか今のデザイン、ちょっと窮屈かも？」と感じることってありますよね。

特に、Webサイトのリンクや強調したい文字につける「下線（アンダーライン）」。デフォルトの設定だと、文字の足元にピタッとくっつきすぎて、読みづらかったり、なんだか野暮ったく見えたりした経験はありませんか？

今日はそんな「下線の位置」を自由自在に操る、魔法のようなCSSプロパティ`text-underline-offset`について、お話ししていきたいと思います。

—

Webデザインにおいて、下線は「ここをクリックできるよ！」「ここは大事だよ！」とユーザーに伝えるための大切なサインです。でも、デフォルトのブラウザ設定のままだと、下線が文字のディセンダ（「g」や「y」、「j」といった文字の下に突き出す部分）を突き抜けてしまい、文字が潰れて見えることがあります。

これ、例えるなら「背の高い人が、天井の低い部屋で窮屈そうに屈んでいる」ような状態なんです。

そんな時、昔のエンジニアは「下線を消して、`border-bottom`（枠線）で代用しよう」といった涙ぐましい努力をしていました。でも、今は違います。`text-underline-offset`という、とても素直で使いやすいプロパティがあるんです。

`text-underline-offset`は、その名の通り「テキストの下線（underline）を、どれだけオフセット（ずらす）するか」を決めるプロパティです。

使い方はとってもシンプル。基準となる文字のベースラインから、どれくらい下に下線を下げるかを数値で指定するだけ。これだけで、デザインに「余白」という名の深みが生まれます。

以下のコードを、普段使っているCSSファイルにコピーして試してみてください。

.link-style {
/ 下線を表示する設定 /
text-decoration: underline;

/ ここが魔法のプロパティ！下線を3px下にずらす /
text-underline-offset: 3px;

/ 色も変えると、より洗練された印象になります /
text-decoration-color: #ff9900;
}

たったこれだけで、文字の足元に心地よい「ゆとり」が生まれます。

—

このプロパティを使いこなす上で、知っておいてほしい「現場のコツ」が3つあります。

基本は `px` ですが、レスポンシブ（スマホ対応）を意識するなら `em` を使うのも賢い方法です。`0.2em` のように指定すれば、文字サイズが変わっても、その文字の大きさに応じた「程よい距離」を自動で保ってくれます。

実は、マイナスの値（例: `-1px`）を指定して、下線を文字に近づけることも可能です。ただ、基本的には「読みやすくするために広げる」目的で使うことが多いので、まずはプラスの値から試してみてくださいね。

`text-decoration-thickness`（下線の太さ）と一緒に使うのがプロの技です。

.sophisticated-link {
text-decoration: underline;
text-decoration-thickness: 2px; / 下線を少し太く /
text-underline-offset: 4px; / 距離を少し多めに /
}

こうすることで、リンクとしての存在感を出しつつ、文字の視認性を損なわない、上品な仕上がりになります。

—

Web制作を始めたばかりの頃は、どうしても「どうやって動かすか」「どうやって表示させるか」に目が行きがちです。でも、プロがこだわっているのは、実はこうした「文字と線のわずかな距離」のような、ほんの些細な心地よさだったりします。

`text-underline-offset`を調整している時間は、あなたにとって「ユーザーに読みやすさを届けるための、一番優しい時間」になるはずです。

もしコードを書いていて「あれ？うまくいかないな」と思っても大丈夫。それは成長している証拠です。いつでもまた、ここに答えを探しに来てくださいね。

あなたの書くコードが、誰かのWeb体験を少しだけ豊かにしますように。それでは、また次回の記事でお会いしましょう！