概要

CSSのtext-underline-positionプロパティは、テキストの下線の位置を調整するために使用されます。このプロパティを使用することで、テキストと下線の重なり具合を制御し、より美しいタイポグラフィを実現できます。特に、ルビ（ふりがな）やアセンダー・ディセンダーのあるフォントで下線が文字にかかってしまう場合に、text-underline-positionを使うとデザインが向上します。

text-underline-positionの基本的な使い方

text-underline-positionプロパティを使うと、下線の位置を細かく調整できます。デフォルトでは下線はテキストの下に引かれますが、このプロパティを使用することで、テキストの重なり具合を調整して下線が文字に干渉しないように配置できます。

.underline-auto {
    text-underline-position: auto; /* デフォルトの下線位置 */
}
.underline-under {
    text-underline-position: under; /* 下線をテキストの下に配置 */
}
.underline-left {
    text-underline-position: left; /* 縦書きのテキストで下線を左側に配置 */
}
.underline-right {
    text-underline-position: right; /* 縦書きのテキストで下線を右側に配置 */
}

この例では、異なる下線位置の調整方法を示しています。それぞれのクラスで下線の位置が異なります。

text-underline-positionの値

text-underline-positionにはいくつかの値があります。それぞれの値がどのように下線の位置に影響を与えるかを説明します。

auto

autoはデフォルトの設定で、下線の位置はブラウザが自動的に決定します。ほとんどの場合、テキストのすぐ下に下線が引かれます。

.underline-auto {
    text-underline-position: auto;
}

under

underは、下線をテキストのアセンダー（文字の上に突き出た部分）やルビに干渉しない位置に配置します。テキストのデザインを崩さずに、読みやすい下線を実現できます。

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

left

leftは縦書きのテキストで、下線をテキストの左側に配置します。縦書きの文書や特定のデザインスタイルで使用されます。

.underline-left {
    text-underline-position: left;
}

right

rightも縦書きのテキストで使用され、下線をテキストの右側に配置します。左書きと右書きのスタイルに応じて調整が可能です。

.underline-right {
    text-underline-position: right;
}

above

aboveは横書きで下線をテキストの上に配置しますが、あまり一般的ではなく、特定のタイポグラフィや特殊なデザインに使用されることがあります。

.underline-above {
    text-underline-position: above;
}

使用例

ルビと下線の重なりを防ぐ

日本語のテキストでルビを使用する際、text-underline-positionを設定することで、下線がルビと干渉しないように配置できます。

<ruby class="underline-under">
    漢字<rt>かんじ</rt>
</ruby>
<style>
.underline-under {
    text-underline-position: under; /* 下線がルビに干渉しない位置に設定 */
    text-decoration: underline;
}
</style>

この例では、underを使用してルビと下線が重ならないように設定しているため、読みやすく整った表示になります。

縦書きテキストに対する下線位置の調整

縦書きのテキストに対して下線の位置を調整する例です。leftとrightを使って、縦書きのテキストに対する下線の位置を調整できます。

<div class="vertical-text">
    <p class="underline-left">縦書きのテキストに左側に下線</p>
    <p class="underline-right">縦書きのテキストに右側に下線</p>
</div>
<style>
.vertical-text {
    writing-mode: vertical-rl; /* 縦書きのレイアウト */
}
.underline-left {
    text-underline-position: left;
    text-decoration: underline;
}
.underline-right {
    text-underline-position: right;
    text-decoration: underline;
}
</style>

この例では、縦書きのテキストに対して、leftやrightを使って下線の位置を左右に配置することで、タイポグラフィに合わせたデザインを実現しています。

注意点

• text-underline-positionは、ブラウザによってサポート状況が異なるため、古いブラウザでは意図通りに動作しない場合があります。最新のブラウザでの動作確認を行うことを推奨します。
• auto設定の際は、フォントやブラウザのレンダリングエンジンによって下線の位置が異なる場合があります。細かいデザイン調整が必要な場合は、明示的にunderやleftなどの値を指定しましょう。
• 特殊な書体やデザインに応じて下線の位置が意図しない場所に引かれることがあります。視認性を考慮しながら設定することが大切です。

まとめ

text-underline-positionプロパティは、テキストと下線の位置関係を細かく制御できる強力なツールです。ルビや縦書きテキストなどの特殊なレイアウトで、下線が文字に干渉しないようにするために役立ちます。デザインの美しさと視認性を高めるために、下線の位置を自由にカスタマイズし、魅力的なタイポグラフィを実現しましょう。