CSSで文字のアンダーラインの位置を調整するには？おしゃれな装飾

文字にアンダーラインを引くとき、どの位置に線がくるか気になったことはありませんか。既定の線は文字のベースライン付近ですが、字体によっては文字が線にかぶさって読みにくくなることがあります。このページでは「CSS 文字 アンダーライン 位置」をテーマに、線の位置・種類・距離などを自在に調整する方法を詳しく解説します。手軽に実装できるコード例も多数紹介しますので、実際の現場で即使える内容です。

CSS 文字 アンダーライン 位置 を制御するためのプロパティ

文字のアンダーラインの位置を制御するためには主に二つのCSSプロパティを使います。ひとつは線の基準となる位置を決めるプロパティ、もうひとつは線と文字との間隔を調整するプロパティです。これにより既定の状態から見た目を大きく変えることが可能です。

text-underline-position

このプロパティはアンダーラインの位置の基準を定めます。例えば「under」を指定すれば文字のdescender（g, p, yなどの文字の下部）がある場合でも線がそれを避けて配置され、「auto」が既定でブラウザやフォントのメトリクスに基づいた位置となります。縦書きレイアウトでは「left」「right」を使って線がどちら側に来るかを制御します。

text-underline-offset

アンダーラインの位置基準を決めただけでは線と文字との間隔が不充分なことがあります。そこでtext-underline-offsetを使うと線を文字から上または下にどれだけ離すか（または近づけるか）を数値で指定できます。単位はpx, em, %などが使え、文字サイズに応じて変えるならemが便利です。

併用する意義

これら二つのプロパティを組み合わせることで、アンダーラインの「位置」と「距離」を細かく制御でき、文字のデザインが格段に向上します。文字の形状やフォントの特徴に合わせて調整することで可読性が向上し、デザインも洗練されます。特にリンクテキストや見出し、強調テキストなどで差が出ます。

CSS 文字 アンダーライン 位置 を調整する実践テクニック

実際にCSSでアンダーラインの位置を調整する方法をコード例とともに紹介します。ここではウェブブラウザの動作傾向や注意点も含めて、最新のやり方が理解できるようになります。

基本的なコード例

まずは最もシンプルなものを試してみましょう。テキストにアンダーラインを引き、位置の基準を「under」、距離を0.2emに設定する例です。
text-decoration: underline;
text-underline-position: under;
text-underline-offset: 0.2em;
このように記述することで、文字の下部が被ることなく線が配置され、距離も見た目に自然になります。調整する際は文字サイズとline-heightにも注意してください。

装飾スタイルと線の太さ（thickness）の調整

単に線の位置を変えるだけではなく、線の種類（実線・破線・波線など）や線の太さを変えることでさらに印象が変わります。「text-decoration-style」、「text-decoration-thickness」と組み合わせると効果的です。例えば太めの線を使うときはオフセット距離を少し大きめに設定すると線が文字に近づき過ぎず見やすくなります。

縦書き文字との組み合わせ

縦書きモードを使う場合には「writing-mode」プロパティと併用し、「text-underline-position」に「left」または「right」を指定することで線をどちら側に表示するか制御できます。日本語などの縦書きで読みやすさを保つためにはこの指定が重要です。

ブラウザ対応とfallback方法

これらのプロパティは多くのモダンブラウザでサポートされていますが、古いバージョンでは動作しないケースがあります。未対応の環境では「border-bottom」や疑似要素を使って代替する方法があります。多くのプロジェクトではこれらを使ったフォールバックを準備しておくと安心です。

CSS 文字 アンダーライン 位置 を理解するための用語と仕組み

アンダーラインの位置調整に関わる基本用語と、その仕組みを正しく理解することで、どのようにプロパティが働くか予測しやすくなります。

ベースラインとデセンダーの意味

ベースラインとは文字が並ぶ際の基本となる線のことです。デセンダーとは、そのベースラインより下に突出する部分（例：g, j, p, q, yなど）。デフォルトでアンダーラインはベースライン付近に引かれますが、文字によってはデセンダーとぶつかるため、読みやすさを考慮して線を下げる調整を行う必要があります。

フォントメトリクスとの関係

フォントにはあらかじめ線を引くための推奨位置や線の太さなどの情報が含まれているものがあります。その情報を使う指定が「from-font」です。この指定を使うとフォントに備わったアンダーラインの位置が使われ、指定がない場合はブラウザ側で自動的に位置が決定されます。

unit（em / px / percentage）の選び方

オフセットや距離の指定には単位が必要です。emを使うと文字サイズに依存するためレスポンシブ対応がしやすくなります。pxは固定になりますがピクセル単位で厳密なデザインをしたいときに便利です。%は1emに対する割合で指定でき、emと似た動きになります。

よくある悩みと解決例

実際にデザインを行うときに直面しやすい問題例とその解決方法を紹介します。これを参考にすれば、自分のケースでも応用できる対応策がすぐ取れます。

文字の下部と線が重なる

デフォルトのアンダーラインが文字のデセンダーとぶつかって文字が読みにくくなるケースがあります。こうした状況では「text-underline-position: under」を使って線を文字のデセンダーより下に下げ、「text-underline-offset」で少し余裕をとれば問題が解消します。

リンクテキストや見出しで線の間隔が狭すぎる

リンクや見出しは文字サイズが大きくなるため、線の既定の位置だと文字と線が近くて見た目が圧迫されます。こういう場合はオフセットをプラス方向に調整し、線の太さを見出しに合わせて設定することで見やすい装飾になります。

古いブラウザでの非対応時の代替方法

最新のプロパティが機能しないブラウザがある場合、「border-bottom」を使う方法がポピュラーです。対象要素にborder-bottomを設定し、text-decorationをnoneにすることでアンダーラインのような見た目を作れます。ただし、改行や文字列が複数行になると調整が難しくなることがあります。

複数行テキストでの線のずれ

テキストが複数行になると、行間やline-heightの影響でアンダーラインが各行で異なる見え方をすることがあります。line-heightを適切に設定し、オフセットを各行で調整するか、疑似要素を使って統一した線を表現する方法が有効です。

CSS 文字 アンダーライン 位置 をプロジェクトで使うスタイルガイド作成のポイント

デザインプロジェクトやウェブサイトの管理で、アンダーライン調整を統一するためにスタイルガイドを作ることをおすすめします。ここではそのときに押さえておきたいポイントをまとめます。

共通クラスの定義

複数のページやコンポーネントでアンダーライン装飾を使う場合、「.underline-custom」などの共通クラスを定義しておくと便利です。その中でtext-decoration・text-underline-position・text-underline-offset・text-decoration-thicknessなどを設定し、必要な調整をクラスでまとめます。

デザイン言語との整合性

アンダーラインの位置や距離は、フォントサイズ・行間・テキストの種類（本文・見出し・リンク）などと整合性を取ることが重要です。同じ見出し系列やリンク系列で線の距離が異なるとデザインがバラバラに見えてしまいます。デザインシステムを設けて基準を決めておくとよいです。

アクセシビリティへの配慮

アンダーラインはリンクの識別や強調表示に使われることが多く、読みやすさに直結します。文字と線との距離が狭すぎて読み取れない文字があるとユーザーに負担をかけます。コントラスト・フォント・線の種類を含めてテストし、すべての端末で見え方を確認してください。

レスポンシブ調整

スマートフォンやタブレットなど画面サイズが小さいデバイスでは文字サイズが小さくなるため、線と文字の間隔も見過ぎると余白が狭くなりすぎたり線がぼやけて見えることがあります。メディアクエリでオフセットや太さを調整するスタイルを用意しておくと、どの画面でも見やすくなります。

ブラウザ対応状況の確認と注意点

新しいプロパティを使う際は、対応状況を確認することが不可欠です。ここでは2026年時点での対応の現状とよくある落とし穴を整理します。デザインに影響する部分なので必ず確認してください。

主要ブラウザでの対応状況

“text-underline-offset”は多くの最新ブラウザでサポートされています。代表的にはChrome、Firefox、Safari、Edgeなどです。特にChrome 87以降、Firefox 70以降、Safari 12.1以降で十分な対応があります。
一方“text-underline-position”も最新ブラウザで使えますが、縦書きモードを含む一部機能は古いバージョンで無視されることがあります。

フォントによる違い

フォントによってはアンダーラインのメトリクスが未定義のものがあります。こうしたフォントでは“from-font”指定が無視され、自動設定にフォールバックされることがあります。また単純なフォントでも文字間隔やサイズが大きいと線の位置が微妙に異なって見えることがあります。

アクセシビリティに関する注意点

テキストに装飾を加えるときは視認性や読みやすさに十分配慮する必要があります。線が濃すぎたり文字から近すぎたりする場合は識別がしづらくなります。コントラストやカラー、太さ、オフセットを調整して、色弱などのユーザーにも配慮しましょう。

フォールバックの実装例

対応しないブラウザのためにfallbackを設けることが重要です。例えば“text-decoration”は無しにして“border-bottom”を使う方法があります。また疑似要素を使って自分で線を描画し、位置を細かく制御する方法もあります。プロジェクトによって複数の方法を組み合わせて使うと安心です。

まとめ

「CSS 文字 アンダーライン 位置」を自在にコントロールすることでデザインの質が大きく向上します。text-underline-positionで線の基準を決め、text-underline-offsetで文字からの距離を調整すれば、文字が線に被ることを防ぎ、読みやすくおしゃれな装飾が可能になります。フォントやブラウザによる違い、アクセシビリティも考慮しつつ、共通ルールやスタイルガイドを準備して統一感を持たせましょう。