CSSのtext-decoration-skip-inkで下線や上線が文字の一部を避ける方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-decoration-skip-inkプロパティは、下線が文字や記号と重なるかどうかを制御するプロパティです。通常、下線は文字を避けるように描画されますが、このプロパティでその動作を調整できます。

スポンサーリンク

text-decoration-skip-inkの値とその効果の一覧

  • auto: デフォルトの動作で、文字や記号を避けて下線が引かれます。
  • none: 文字や記号を避けずに、常に下線が引かれます。

注意点と関連情報

text-decoration-skip-inkプロパティは、ユーザビリティとデザインの観点から、読みやすさを考慮して使用されます。例えば、記号や特殊文字に対しても下線を引くか、もしくは避けるかを設定することができます。

text-decoration-skip-inkが効かない時の原因と対策

ブロックレベル要素に適用されていない

text-decoration-skip-inkはインライン要素や、インライン要素を含むブロックレベル要素に対してのみ効果があります。ブロック要素には効果がありません。

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

共通するCSSコード

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

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

text-decoration-skip-ink: auto

デフォルトの動作で、文字や記号を避けて下線が引かれます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-auto">
    これは下線が文字を避けるテキストです！She plays guiter
  </div>
</div>

CSSコード

.css-sample-text-auto {
  text-decoration-skip-ink: auto;
}

表示結果

これは下線が文字を避けるテキストです！She plays guiter

text-decoration-skip-ink: none

文字や記号を避けずに、常に下線が引かれます。gやyの上に線が引かれます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-none">
    これは下線が文字を避けないテキストです！She plays guiter
  </div>
</div>

CSSコード

.css-sample-text-none {
  text-decoration-skip-ink: none;
}

表示結果

これは下線が文字を避けないテキストです！She plays guiter

まとめ

  • text-decoration-skip-inkは、下線が文字や記号を避けるかどうかを制御します。
  • auto はデフォルトの動作で、下線は文字や記号を避けます。
  • none は下線が文字や記号を避けず、常に直線的に描画されます。
  • ユーザビリティやデザインのバランスを考慮して使うことが推奨されます。
スポンサーリンク