文字のアンダーラインが文字に重なったり、離れすぎて見栄えが悪かったりすることはよくあります。特にフォントによっては文字の「降りる部分」（ディセンダー）がアンダーラインにかぶることもあり、読みづらさの原因になります。ここでは、CSSを使って「アンダーライン位置」を自由に調整し、視認性とデザイン性を両立させる方法を丁寧に解説します。初心者から上級者まで使える具体例や注意点も交えながら紹介しますので、ぜひ日々のスタイルシートに活かしてください。
目次
CSS 文字 アンダーライン 位置を調整する基本プロパティ
アンダーラインの位置を自由に設定できるCSSプロパティがいくつかあります。ここでは、それぞれの役割と基本的な使い方を具体的に確認します。
text-underline-offset プロパティとは何か
「text-underline-offset」は、アンダーライン（text-decoration: underline）がテキストのベースラインからどれだけ離れるか（あるいは近づくか）を設定するプロパティです。auto／長さ（px／emなど）／パーセンテージを指定可能で、ブラウザが自動で選ぶ位置より上または下に動かすことができます。テキストの装飾のガイドライン仕様で提案されているもので、現在多くのモダンブラウザで対応しています。
例えば、モダンなリンクテキストで降りる部分にかぶらないようにアンダーラインを少し下げたり、デザイン上ラインを文字の近くに寄せたりする時に使われます。指定を省略すると「auto」が適用され、ブラウザ任せのデフォルト位置となります。
text-decoration-thickness や text-decoration-style との組み合わせ
アンダーラインの位置だけでなく、「太さ（thickness）」や「スタイル（例：solid／dotted／wavy）」を同時に調整することで、よりデザインに統一感を持たせられます。「text-decoration-thickness」は線の太さを設定するもので、「text-decoration-style」は線の種類を制御します。位置を変更した場合、線の太さによって視覚的印象が大きく変わるため、両方をセットで考えることが重要です。
例えば、細い線を少し上げたら目立たないと感じることもあります。そのような時は太さを増したり、スタイルをはっきりさせたりしてラインが文字から離れていても見えやすくすることができます。
text-underline-position や旧ブラウザ対応
過去には「text-underline-position」というプロパティもあり、ラインを文字の下に置く（under）などの簡単な指定が可能でした。現在は新しい仕様である text-underline-offset が推奨されていますが、古いブラウザとの互換性を考慮する場面ではこのプロパティやフォールバック機能を使うことがあります。
また、display を inline ブロックにしたり、span 要素でラップしたりして装飾を分ける方法も古くから使われてきました。モバイルでの環境やテーマによって text-underline-offset が対応していない場合、これらの古い手法が役立ちます。
CSS 文字 アンダーライン 位置 の実践的な調整例と使い方
基本プロパティを理解したところで、具体的にどう調整するかを例を交えて紹介します。見やすく整えるためのポイントと共に実践的なコード例を確認していきます。
行間と文字サイズを考慮して offset を設定する
文字サイズ（フォントサイズ）が変わるとアンダーラインの位置感覚も変わります。特に小さい文字ではラインが文字の降りる部分と重なりやすくなり、大きい文字では空間が広すぎて不自然になることがあります。ですので text-underline-offset を em 単位や percentage 指定にして文字サイズに応じてスケーラブルに設定するのが効果的です。
例として、段落（p 要素）の文字サイズが 16px の場合、0.1em や 0.2em 程度で微調整すると自然なライン位置になります。フォントによっては降りる部分の幅が違うので、いくつか試して最適値を見つけることが大切です。
リンク（a 要素）の下線位置を整えるテクニック
リンクは通常 hover や visited 状態もあるため、アンダーライン位置だけでなく色・太さの変化も含めて考える必要があります。text-underline-offset を使ってリンク文字の下側スペースを確保し、hover 状態で太さを上げることでアクセントをつけるといった工夫が有効です。
実際の例では、リンクを inline-block にして padding を下側に加えるケースもありますが、text-underline-offset を使うとより簡潔に実装できます。例えば hover で offset を増やす、通常時は少し offset を小さめにするなどの切り替えが考えられます。
バッチリ整える見出しやナビゲーションの装飾
見出し（h1～h3 など）やナビゲーションのメニューリンクはサイト全体のデザインの印象を左右します。これらの重要部分ではアンダーライン位置を統一して使い回すことが視覚的一貫性につながります。text-underline-offset と text-decoration-thickness をルート変数にして全体で使うようにすると調整が簡単になります。
また、見出しのフォントファミリーやウェイトが変わると降りる部分の形が異なるため、それぞれの見出しに異なる offset を設定することもあります。例えば太字の見出しではラインを少し下げて、通常本文では近づけるといった使い分けが可能です。
ブラウザ対応と注意点 CSS 文字 アンダーライン 位置 における落とし穴
最新のプロパティを使う際にはブラウザ対応状況や仕様のバグにも気をつけなければなりません。ここではその注意点と互換性のためのフォールバックを解説します。
主要ブラウザでの対応状況
text-underline-offset は Chrome・Edge・Firefox・Safari 等のモダンなブラウザで対応しており、比較的安心して使用できます。具体的には Chrome 87 以降、Firefox 70 以降、Safari 最新のバージョンなどでサポートされています。
ただし、古いバージョンを意識するなら、text-underline-position や border-bottom を代替手段とすることが検討されます。古い Android や IE などでは、新しい仕様が未完全なことがあります。
細部デザインにおけるバグや視認性の問題
一部のブラウザでは、text-underline-offset を指定してもラインが文字の降りる部分（ディセンダー）にかぶる、意図した高さに到達しないなどの問題が報告されています。また、太すぎるアンダーラインとオフセットの組み合わせで文字とラインの間が離れすぎて浮いた印象になることもあるため、調整は慎重に行う必要があります。
さらに、ラインのスタイルを wavy や dashed にした場合、offset の微小な変更でラインの形状が文字の影響を強く受けることがあるため、サンプルを複数のフォント・サイズで確認することが重要です。
フォールバックとしての border-bottom や疑似要素活用
text-underline-offset が使えない環境やテーマでは、代替として border-bottom を用いた下線や、疑似要素（::after など）で擬似的なアンダーラインを作る方法があります。これにより offset や位置を自由に制御できますが、文字とラインの間隔調整や行間への影響に注意が必要です。
具体的には span 要素を使ってリンクテキストをラップし、display を inline-block にして border-bottom による線を引く。その際 padding-bottom を調整することで下線の位置を細かくコントロールできます。ただしこれはセマンティクスに影響を与えたり、画面リーダーの読み上げに影響する可能性もあり、アクセシビリティには気をつけること。
CSS 文字 アンダーライン 位置 の応用パターン例とサンプルコード
実際の現場で使われる応用パターンを紹介します。デザイン制作やウェブサイト運営ですぐ使えるサンプルコードと、その特徴を比較して理解を深めましょう。
装飾リンクのデザイン統一パターン
ナビゲーションリンクやサイドバーの重要リンクなど、複数のリンクに統一感を持たせたい場合、次のような CSS を共通化すると良いです。変数を使うことで、後から調整しやすくなります。
例：
html { –underline-offset: 0.2em; –underline-thickness: 0.05em; }
a.decorated {
text-decoration: underline solid currentColor;
text-underline-offset: var(–underline-offset);
text-decoration-thickness: var(–underline-thickness);
}
このパターンでは、変数により offset と thickness を一括管理できます。デザイン全体でアンダーラインの高さが揃い、後からデザイン変更する時に効率的です。
見出しスタイルの応用例
見出し（例 h2 や h3）の際はフォントが大きくなることを見越して、offset を大きめに取ると見栄えが良くなります。またデザインとして線の太さも少し増やすことで視覚的に目立たせることができます。
サンプルコード：
h2 {
font-size:2rem;
text-decoration: underline solid #333;
text-underline-offset: 0.3em;
text-decoration-thickness: 0.08em;
}
こうすることで見出し下線が「見出しの重さ」に見合ったものとなり、本文との区別がはっきりします。
レスポンシブ対応のパターン例
モバイル画面では文字サイズや画面幅が変化するため、offset や thickness も画面幅に応じて変えたい場合があります。メディアクエリを使うとこの調整が可能です。
サンプルコード：
@media (max-width:600px) {
h2 {
text-underline-offset: 0.2em;
text-decoration-thickness: 0.06em;
}
} @media (min-width:601px) {
h2 {
text-underline-offset: 0.3em;
text-decoration-thickness: 0.08em;
}
}
これにより、画面サイズに応じて下線が文字に近すぎず遠すぎず、バランスよく保てます。
まとめ
文字のアンダーライン位置を調整するには、text-underline-offset を中心に、thickness や style を組み合わせて使うことが鍵です。フォントの大小・太さ・スタイルが違う要素では、それぞれの調整が必要です。
ブラウザ対応もかなり改善されてきており、モダンな環境では安心して使えます。とはいえ、古いブラウザや未知のテーマではフォールバックとして border-bottom や疑似要素を使う選択肢も覚えておくと良いでしょう。
応用例や変数・レスポンシブ設計を取り入れれば、アンダーライン位置に統一感とデザイン性が生まれます。実際に手を動かしてサンプルを試しながら、自分のサイトに最適な数値を見つけていただければと思います。
コメント