【CSS Modules】text-underline-offsetプロパティの使い方

text-underline-offsetプロパティは、テキストのアンダーライン（下線）の垂直方向の位置を調整するための値を保持するプロパティです。このプロパティを使用すると、テキストに引かれる下線の表示位置を、通常の場所から上下にずらすことができます。標準的な下線は、テキストのベースラインに沿って描画されますが、文字のデザインや読みやすさを考慮して、ベースラインから少し離れた位置に表示したい場合に非常に役立ちます。

指定できる値には、auto、長さの単位（例: px, em）、そしてパーセンテージ（%）があります。autoを指定すると、ウェブブラウザが自動的に最適な下線位置を決定します。これは通常、デフォルトの下線位置と同じか、それに近い値になります。長さの単位で値を指定した場合、例えば5pxと設定すると、下線は通常のベースラインから下に5ピクセル移動します。負の値を指定すると、下線は上に移動します。パーセンテージで指定する場合、その値はフォントのemボックスの高さに対する割合として解釈され、下線の位置が相対的に調整されます。

このプロパティは、特に欧文フォントなどで、文字のディセンダー（gやpなどの文字の下に突き出る部分）と下線が重なってしまい、テキストが読みにくくなるのを避ける際に非常に有効です。また、ウェブサイトのデザイン上の理由から、下線をテキストから少し離して表示したい場合にも利用できます。このプロパティは、text-decorationプロパティでunderlineが指定されている場合にのみ効果を発揮します。これにより、テキストの視覚的な快適さやデザインの自由度を高めることができます。

Copy
1text-underline-offset: 3px;

引数なし

引数はありません

戻り値なし

戻り値はありません