CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

The text-underline-offset property in CSS specifies how far to shift a text underline from its default position, allowing flexible adjustments for readability and design.

text-underline-offset

　text-underline-offset は、テキストに設定された下線（underline）を基準位置からどの程度ずらして表示するか（オフセット）を指定する CSS のプロパティです。

text-underline-offset とは

下線の位置調整: 通常、テキストの下線はフォントの設定やブラウザの描画ルールによって自動的に描画位置が決まります。しかし、フォントや文字サイズによっては下線が文字に近すぎたり遠すぎたりすることがあります。text-underline-offset を使うことで、この下線の位置を微調整できます。
CSS Text Decoration Module Level 4: このプロパティは、CSS Text Decoration Module Level 4 で定義されています。同モジュールで追加された text-decoration-thickness などのプロパティとも組み合わせると、下線のスタイリングをより柔軟にコントロールできます。

Syntax （文法）

HTML

text-underline-offset: <length> | <percentage> | auto

<length>: px や em、rem などの長さ単位を使って下線を基準位置からずらす量を指定します。たとえば 2px と書くと、標準の描画位置から 2px 分下へ(あるいは上へ)移動するイメージとなります（ブラウザ実装では下方向が多い）。
<percentage>: フォントサイズや行の高さに対してパーセントで指定できます。たとえば 0.1em と同様、10% のような指定方法で調整することが可能です。
auto: ブラウザがフォントなどに合わせて自動的に調整します。ブラウザごとに挙動が多少異なる可能性がありますが、ほとんどの場合デフォルトの下線描画と同等か、それより少し離した位置になります。

よくある疑問や注意点

下線が文字に重なってしまう場合の対処法

太い下線（text-decoration-thickness などで指定）を使ったときに、下線が文字にかぶって読みにくいことがあります。そういった場合は text-underline-offset を大きめに設定して下線を離すと良いでしょう。

auto と他の値の違い

auto はブラウザが自動で最適なオフセットを計算するため、表示するフォントに合わせてある程度適切に配置されます。しかしフォントによっては下線の位置にばらつきが出る場合もあるため、デザインとして明確に位置を定めたいときは具体的な値を使う方が安定します。

アクセシビリティ面での考慮

下線の色や太さ、文字との距離を調整することは、文字の可読性や視認性に直結します。カラーコントラストの確保とあわせて、視覚的に区別しやすい下線をデザインすることが重要です。

その他関連プロパティとの併用

text-decoration-line: 下線か取り消し線（ラインスルー）かなどを指定
text-decoration-color: 下線の色指定
text-decoration-style: 実線や点線など下線のスタイル
text-decoration-thickness: 下線の太さ
text-decoration-skip-ink: 子音の下端やアセンダー/ディセンダーに下線が被らないようにスキップする

Browser support

　text-underline-offset は比較的新しいプロパティですが、モダンブラウザ（Chrome、Firefox、Safari、Edge など）の最新バージョンでは概ねサポートされています。

　一方で、古いバージョンのブラウザや一部の環境では未実装の場合があります。もしサポートされていないブラウザが利用想定にある場合は、下線のオフセット調整を諦めるか、フォントサイズ・行の高さ・line-height などを調整してある程度見た目を制御する工夫が必要です。

Data on support for the mdn-css__properties__text-underline-offset feature across the major browsers from caniuse.com

Sample

単純な例

この文章は下線が文字に重ならないよう、text-underline-offset: 3px を指定しています。

CSS

p {
	text-decoration: underline;
	text-underline-offset: 3px;
}

　上記の例では、段落要素に下線を引いたうえで、その下線を 3px 下にずらします。

下線の太さ (text-decoration-thickness) と合わせて使用

この文章は下線が文字に重ならないよう、text-underline-offset: 3px を指定しています。

CSS

p {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

　text-decoration-thickness を指定している場合、下線が太くなると文字と線が近くなりやすいため、text-underline-offset で適切にオフセットを調整すると見やすくなります。

相対値（em）やパーセントを使う例

この文章は下線が文字に重ならないよう、text-underline-offset: 3px を指定しています。

CSS

p {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

　フォントサイズに応じて相対的にスペースを確保できるため、レスポンシブなデザインにはこちらの方が便利なことがあります。