概要
CSSプロパティの「text-decoration」は、テキストに下線、上線、取り消し線などの装飾を定義することができます。また複数の値を指定することが可能なので、下線と取り消し線を組み合わせて使用することもできます。
ただ注意点として、テキスト装飾をブロック要素で定義した場合は、その中の子孫要素にも適用されます。このふるまいについては、サンプルを使って説明していきます。
値
| 値 | 説明 |
|---|---|
| none | 装飾なし |
| line-through | テキストに打ち消し線 |
| underline | テキストに下線 |
| underline red | テキストに赤色の下線 |
| wavy red | テキストに赤色の波状下線 |
実用における注意点
適用範囲について
親ブロックで定義した場合、その中の子孫要素にも適用されますが、子孫要素で適用された効果を打ち消すことはできませんので注意が必要です。
<p class="parent">テキストに<span class="children">下線</span>が引かれますが、打ち消すことはできません。</p>
<p class="parent">テキストに<span class="children2">下線</span>が引かれ、さらに打ち消し線が追加されました。</p>
<style>
p {
background-color: #def;
margin-bottom: 10px;
}
/* 親要素で下線装飾をします */
.parent {
text-decoration: underline;
}
/* 子孫要素で打ち消すことはできない */
.children1 {
text-decoration: none;
}
/* 子孫要素で追加することはできる */
.children2 {
text-decoration: line-through;
}
</style>使用例
<p class="underline">テキストに下線が引かれます</p>
<p class="line-through">テキストに打ち消し線が引かれます</p>
<p class="line-through-red">テキストに赤色の打ち消し線が引かれます</p>
<p class="line-through-underline">テキストに打ち消し線と下線が引かれます</p>
<style>
p {
background-color: #def;
margin-bottom: 10px;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.line-through-red {
text-decoration: line-through red;
}
.line-through-underline {
text-decoration: line-through underline;
}
</style>