目次 | text-decorationとは |
線なし(none) / 取り消し線(line-through) / 下線(underline) | |
上線(overline) / 二重線(double) / 点線(dotted) | |
破線(dashed) / 波状の線(wavy) |
text-decorationとは
text-decorationは、文字に線を引きます。
書き方 | text-decoration : 線の位置 線の種類 線の色 |
線の位置 | none・・・線は引きません。 |
line-through・・・取り消し線を引きます。 | |
underline・・・下線を引きます。 | |
overline・・・上線を引きます。 | |
線の種類 | solid・・・一重の線 |
double・・・二重線 | |
dotted・・・点線 | |
dashed・・・破線 | |
wavy・・・波状の線 | |
線の色 | 色を指定します。 |
初期値 | none,solid |
継承 | なし |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration |
線なし (none)
<style>
.p1 {
text-decoration: none;
}
</style>
<p class="p1">あいうえお abcde</p>
取り消し線 (line-through)
<style>
.p1 {
text-decoration: line-through;
}
</style>
<p class="p1">あいうえお abcde</p>
下線 (underline)
<style>
.p1 {
text-decoration: underline;
}
</style>
<p class="p1">あいうえお abcde</p>
上線 (overline)
<style>
.p1 {
text-decoration: overline;
}
</style>
<p class="p1">あいうえお abcde</p>
二重線 (double)
<style>
.p1 {
text-decoration: underline double red;
}
</style>
<p class="p1">あいうえお abcde</p>
点線 (dotted)
<style>
.p1 {
text-decoration: underline dotted red;
}
</style>
<p class="p1">あいうえお abcde</p>
破線 (dashed)
<style>
.p1 {
text-decoration: underline dashed red;
}
</style>
<p class="p1">あいうえお abcde</p>
波状の線 (wavy)
<style>
.p1 {
text-decoration: underline wavy red;
}
</style>
<p class="p1">あいうえお abcde</p>
関連の記事
CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示領域を超えた時の改行
CSS overflow はみ出し部分を表示する/しない