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

2024.09.15
スポンサーリンク

text-underline-positionプロパティは、テキストの下線の位置を指定するために使用されます。通常、下線はテキストの下に描かれますが、このプロパティを使用することで、特定の位置にカスタマイズすることができます。

スポンサーリンク

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

  • under: 下線が通常通りテキストの下に表示されます。
  • left: 下線がテキストの左側に表示されます（縦書きの場合に使用）。
  • right: 下線がテキストの右側に表示されます（縦書きの場合に使用）。

注意点と関連情報

text-underline-positionプロパティは、通常の横書きテキストではあまり変化が見られませんが、縦書きテキストで有効になります。特に、テキストが左から右、または右から左に書かれる場合に、下線の位置を左右に移動させることができます。縦書きにはwriting-mode: vertical-rl;を用います。

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

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

text-underline-positionは、テキストの下線の位置を制御するプロパティですが、text-decoration: underline;が設定されていないと効果を発揮しません。下線がない状態では、text-underline-positionの設定は無効になります。

対策: まず、text-decoration: underline;を設定します。例えば、text-decoration: underline; text-underline-position: under;のように指定します。これにより、下線の位置が指定されていることを確認できます。

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

text-underline-positionは、インライン要素やインライン要素を含むブロックレベル要素に対してのみ効果を発揮します。ブロック要素に適用すると、効果が期待通りに現れない場合があります。

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

共通する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-position: under

下線が通常通りテキストの下に表示される例です。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-underline-position-under">
    これはunderの下線位置です。
  </div>
</div>

CSSコード

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

表示結果

これはunderの下線位置です。

text-underline-position: left

縦書きテキストにおいて、下線がテキストの左側に表示される例です。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-underline-position-left">
    これはleftの下線位置です。
  </div>
</div>

CSSコード

.css-sample-text-underline-position-left {
  text-underline-position: left;
  writing-mode: vertical-rl;
}

表示結果

これはleftの下線位置です。

text-underline-position: right

縦書きテキストにおいて、下線がテキストの右側に表示される例です。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-underline-position-right">
    これはrightの下線位置です。
  </div>
</div>

CSSコード

.css-sample-text-underline-position-right {
  text-underline-position: right;
  writing-mode: vertical-rl;
}

表示結果

これはrightの下線位置です。

まとめ

  • text-underline-positionプロパティは、テキストの下線の位置を指定します。
  • 通常の横書きテキストではunderが一般的に使用されますが、縦書きではleftやrightが有効です。
  • 縦書きのスタイルを持つテキストにおいて、下線をテキストの左側や右側に配置できます。
スポンサーリンク