CSSのtext-decoration-lineでテキストに下線・上線・取り消し線を設定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-decoration-lineプロパティは、テキストに適用される装飾の種類を指定します。このプロパティにより、下線、上線、取り消し線、またはこれらを組み合わせて表示することができます。

スポンサーリンク

text-decoration-lineの値とその効果の一覧

  • underline: テキストの下に下線を表示します。
  • overline: テキストの上に上線を表示します。
  • line-through: テキストの上に取り消し線を表示します。
  • underline overline: 下線と上線を同時に表示します。

注意点と関連情報

text-decoration-lineプロパティは、テキストの装飾を制御するためのプロパティであり、下線、上線、取り消し線を個別または複数同時に適用することができます。複数の装飾を同時に指定する場合、スペースで区切ります。

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

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

text-decoration-lineは、インライン要素やインライン要素を含むブロックレベル要素に対して適用されます。ブロックレベル要素のみでは効果が現れないことがあります。

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

親要素のスタイルが子要素に影響している

親要素のtext-decoration-lineが子要素に継承されている場合、子要素に設定したスタイルが上書きされ、意図通りに表示されないことがあります。

対策: 親要素のスタイルが子要素に影響を与えていないか確認し、必要に応じて子要素に直接text-decoration-lineを設定します。必要な場合は!importantを使って親要素のスタイルを上書きします。

共通する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-line: underline

テキストの下に下線を表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-underline">
    これは下線が付いたテキストです。
  </div>
</div>

CSSコード

.css-sample-text-underline {
  text-decoration-line: underline;
}

表示結果

これは下線が付いたテキストです。

text-decoration-line: overline

テキストの上に上線を表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-overline">
    これは上線が付いたテキストです。
  </div>
</div>

CSSコード

.css-sample-text-overline {
  text-decoration-line: overline;
}

表示結果

これは上線が付いたテキストです。

text-decoration-line: line-through

テキストの上に取り消し線を表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-line-through">
    これは取り消し線が付いたテキストです。
  </div>
</div>

CSSコード

.css-sample-text-line-through {
  text-decoration-line: line-through;
}

表示結果

これは取り消し線が付いたテキストです。

text-decoration-line: underline overline

テキストの上下に下線と上線を同時に表示します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-multiple">
    これは上下に線が付いたテキストです。
  </div>
</div>

CSSコード

.css-sample-text-multiple {
  text-decoration-line: underline overline;
}

表示結果

これは上下に線が付いたテキストです。

まとめ

  • text-decoration-lineプロパティは、テキストの装飾として、下線、上線、取り消し線を個別または同時に適用できます。
  • 複数の装飾を同時に適用する場合は、スペースで区切って指定します。
  • スタイルの効果を適用するテキストに対して、さまざまなデザイン要素を追加できます。
スポンサーリンク