CSSのtext-underline-offsetで下線の位置を調整する方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-underline-offsetプロパティは、テキストの下線の位置を調整するために使用します。このプロパティを使うことで、下線がテキストからどの程度の距離にあるかをコントロールできます。

スポンサーリンク

text-underline-offsetの値とその効果の一覧

  • 2px: 下線がテキストから2ピクセル離れた位置に表示されます。
  • 5px: 下線がテキストから5ピクセル離れた位置に表示されます。
  • auto: ブラウザが自動で適切な下線の位置を計算して表示します。

注意点と関連情報

text-underline-offsetプロパティを使うと、テキストと下線の間の距離を指定することができます。数値で指定する場合は、pxやemなどの単位を使ってください。また、autoを指定すると、ブラウザが適切な距離を自動で計算して表示します。フォントによっては、デフォルトの距離が見やすくなるように調整されます。

text-underline-offsetが効かない時の原因と対策

text-decorationが設定されていない

text-underline-offsetは、テキストの下線のオフセット（ずらし幅）を制御するプロパティですが、text-decoration: underline;が設定されていないと効果がありません。下線がない状態では、オフセットの設定が無効になります。

対策: まず、text-decoration: underline;を設定します。例えば、text-decoration: underline; text-underline-offset: 3px;のように指定します。下線が正しく表示されているか確認してみてください。

インライン要素に適用していない

text-underline-offsetは、インライン要素やインライン要素を含むブロック要素に対してのみ効果を発揮します。ブロック要素には直接適用されても効果がわかりにくい場合があります。

対策: インライン要素（例: <span>, <a>）やその中に含まれるテキストにtext-underline-offsetを適用します。例えば、<span style="text-decoration: underline; text-underline-offset: 5px;">のように指定します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
}

.css-sample-text {
  font-size: 20px;
  border: 1px solid #999;
  padding: 10px;
  background-color: white;
  text-decoration: underline;
}

text-underline-offset: 2px

テキストの下線が2ピクセル離れた位置に表示される例です。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-underline-offset-2px">
    これは2pxのオフセットで表示された下線です。
  </div>
</div>

CSSコード

.css-sample-text-underline-offset-2px {
  text-underline-offset: 2px;
}

表示結果

これは2pxのオフセットで表示された下線です。

text-underline-offset: 5px

下線が5ピクセル離れて表示される例です。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-underline-offset-5px">
    これは5pxのオフセットで表示された下線です。
  </div>
</div>

CSSコード

.css-sample-text-underline-offset-5px {
  text-underline-offset: 5px;
}

表示結果

これは5pxのオフセットで表示された下線です。

text-underline-offset: auto

ブラウザが自動的に下線の位置を計算する例です。フォントに応じて自動調整されます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-underline-offset-auto">
    これはautoのオフセットで表示された下線です。
  </div>
</div>

CSSコード

.css-sample-text-underline-offset-auto {
  text-underline-offset: auto;
}

表示結果

これはautoのオフセットで表示された下線です。

まとめ

  • text-underline-offsetプロパティは、テキストと下線の距離を指定するために使用します。
  • 数値を使ってピクセル単位で指定するか、autoでブラウザに自動計算を任せることができます。
  • フォントによっては、下線の位置が見やすくなるように自動調整される場合があります。
スポンサーリンク