CSSで下線の位置の間隔を設定する

text-decoration プロパティで設定された下線（underline）の位置と間隔を設定する方法について解説します。

ウェブスタイルにおいて、テキストに下線を引くことは非常によくあることです。単純に text-decoration: underline 指定するだけでも下線を描画できますが、より精巧に下線の位置や間隔を調整することも可能です。

CSSでは、下線の位置と間隔を調整できる2つのプロパティを提供しています。

これら2つのプロパティは、それぞれ下線の位置と間隔を担当しており、併用することでより洗練された視認性の高い下線スタイルを作成できます。
それでは、これら2つのプロパティの定義と使用方法について解説します。

text-underline-position：下線が描画される精巧な位置を指定する

CSSで下線が描画される位置、つまりテキストを基準にどこを基準点として描画するかを設定できます。単にテキストの下に描画されると考えるだけではなく、より精巧に設定することが可能です。

まさに text-underline-position プロパティで指定することができます。
次のライブデモの例を通して確認してみましょう。

CSSライブデモ：text-underline-position デモボタンをクリックしてみてください！

私たちが一般的に目にする下線の位置は、特別な設定がなければ、おそらく text-underline-position で設定された下線の位置でしょう。

しかし、text-underline-position プロパティがサポートする値を通じて、好みの位置を設定することができます。

サポートする値とその効果

text-underline-positionプロパティ値
auto ブラウザは独自のアルゴリズムを使用して、アルファベットのベースライン（baseline）またはベースラインよりも下に線を配置します。
from-font フォントファイルに推奨される位置に関する情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、ブラウザが適切な位置を選択した状態で、自動的に設定されたかのように動作します。
under 要素のテキストコンテンツの下端に配置されます。
添え字を多用する化学式や数学公式の視認性を確保するのに役立ちます。
left 縦書きモードでは下線の基準位置は under と同様になりますが、テキストの左側に配置されます。
横書きモードでは auto 値と同じになります。
right 縦書きモードでは下線の基準位置は under と同様になりますが、テキストの右側に配置されます。
横書きモードでは auto 値と同じになります。

基本例

CSS 
.underline-under {
    text-decoration: underline;
    text-underline-position: under;
}

より詳細な内容と例については、CSS text-underline-positionプロパティ：underlineの基準となる位置の指定を参照してください。

text-underline-offset ：下線の位置基準から間隔を調整する

text-underline-offset プロパティは、text-underline-position で設定された基準位置をベースに、具体的な間隔を指定します。

このプロパティを使用すると、下線の基準となる元の位置から間隔を広げたり狭めたりすることができます。
次のライブデモの例を通して確認してみましょう。

CSSライブデモ：text-underline-offset デモボタンをクリックしてみてください！

値が正（プラス）の場合、下線は元の位置を基準にテキストの外側に向けて間隔が調整され、負（マイナス）の場合は内側に向けて間隔が調整されます。

基本例

CSS 
.underline-offset {
    text-decoration: underline;
    text-underline-offset: 5px;
}

より詳細な内容と例については、CSS text-underline-offsetプロパティ：underlineの元の位置からの間隔調整を参照してください。

併用する：より精緻な制御

text-underline-position と text-underline-offset プロパティは独立して使用することもできますが、組み合わせて使用することで、より精緻な下線スタイルを実現できます。

例えば、下線がアルファベットの g、j、p、q、y のように、文字の基準線（baseline）を侵食しないように設定（text-underline-position: under）した上で、必要な分だけ微細に間隔を調節（text-underline-offset: 2px）することで、最適な可読性と視覚的バランスを見つけることができます。

例を通して確認してみましょう。

HTML 
<h4>一般的な下線</h4>
<p>ABC ghij あえい 1234</p>

<h4>精緻な位置と間隔を持つ下線</h4>
<p class="custom-underline">ABC ghij あえい 1234</p>
CSS 
p {
    text-decoration: underline;
}
.custom-underline{
    text-underline-position: under;
    text-underline-offset: 2px;
}
実際の適用例

これら2つのプロパティを理解して活用することで、ウェブページのテキストに、より洗練され機能的な下線を適用することができます。

ブラウザ互換性

text-underline-position と text-underline-offset プロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
text-underline-position 33 12 74 12.1
text-underline-offset 87 87 70 12.1

参考資料

関連項目