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

ところが、英語のアルファベットには「ディセンダ（descender）」と呼ばれる、ベースラインより下に突き出す部分があります。具体的には `g, j, p, q, y` といった文字たちですね。

標準的なブラウザの設定だと、下線はこの「足」を容赦なく貫通してしまいます。まるで、きれいな花壇をズカズカと踏み荒らされているような……ちょっと心が痛む見た目になってしまうんです。

救世主『text-underline-position』の登場

この問題を解決するのが、`text-underline-position` というプロパティです。これを使うと、下線を「文字の足の下」に逃がしたり、あるいは「文字の左側」に移動させたりと、位置を調整できるようになります。

特に日本語の文章の中に英単語が混ざる場合、このプロパティをうまく使うだけで、デザインのクオリティがグッと引き締まります。

基本の書き方を見てみよう

まずは、一番よく使う設定から試してみましょう。`under` という値を指定すると、ブラウザは「よし、文字の足（ディセンダ）に被らないように、下線を少し下に押し下げよう」と判断してくれます。

/ リンクの下線を少し下にずらして、文字と重ならないようにする /
a {
text-decoration: underline;
/ ここが魔法の言葉です！ /
text-underline-position: under;
}

これだけで、`p` や `y` の足と下線が重ならず、スッキリと読みやすくなります。お洋服の裾上げをして、靴に引きずらないようにするようなイメージですね。

もう少しこだわりたい人へ： `from-font` という選択肢

最近のモダンなブラウザでは、さらに賢い選択肢があります。それが `from-font` です。

a {
text-decoration: underline;
/ フォントが持っている「適切な下線の位置」を自動で採用する /
text-underline-position: from-font;
}

これを使うと、ブラウザの勝手な判断ではなく、そのフォントのデザイナーさんが「このフォントならこの位置に下線があるのが一番美しいよ！」と決めた場所に線が引かれます。プロのこだわりをそのまま拝借できる、非常に贅沢で素敵な設定なんです。

注意点：焦らなくても大丈夫！

ここで一つだけ注意点。`text-underline-position` は、ブラウザの種類によっては「完全には対応していないよ」というケースも過去にはありました。

でも、安心してください。もし対応していないブラウザで見られたとしても、ただ「普通の下線」が表示されるだけです。Webサイトが壊れるわけではありません。

「完璧に直さないと！」と肩肘を張る必要はありません。まずは「こんな機能があるんだな」と知っておいて、デザインの仕上げの時に「ちょっとここ、重なってて気になるな」と思ったら、そっとこのプロパティを添えてあげてください。

—

まとめ：小さな気遣いが、プロの仕上がりを作る

Web制作は、こうした「小さな調整」の積み重ねです。派手なアニメーションも素敵ですが、テキストが読みやすく、下線が文字と喧嘩していないような「心地よい空間」を作れる人こそ、本当に頼りになるエンジニアだと私は思います。

まずは自分のエディタで、以下のコードを試してみてください。