text-decorationプロパティ
text-decoration : 値1 値2 値3 |
text-decorationプロパティは、文字に引く線を指定します。
引数は3つあり、線の位置、線の種類、線の色を指定します。
値1 | 説明 |
---|---|
none | 線は引きません。(初期値) |
line-through | 取り消し線を引きます。 |
underline | 下線を引きます。 |
overline | 上線を引きます。 |
値2 | 説明 |
---|---|
solid | 一重の線 (初期値) |
double | 二重線 |
dotted | 点線 |
dashed | 破線 |
wavy | 波状の線 |
値3 | 説明 |
---|---|
色 | 色を指定します。 |
値を継承しない |
- decorationは、飾りという意味です。
- 以下はMDNのtext-decorationプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration
文字に引く線を指定するサンプルです。
線なし (none)
<style>
#p1 {
text-decoration: none;
}
</style>
<p id="p1">あいうえお abcde</p>
取り消し線 (line-through)
<style>
#p1 {
text-decoration: line-through;
}
</style>
<p id="p1">あいうえお abcde</p>
下線 (underline)
<style>
#p1 {
text-decoration: underline;
}
</style>
<p id="p1">あいうえお abcde</p>
上線 (overline)
<style>
#p1 {
text-decoration: overline;
}
</style>
<p id="p1">あいうえお abcde</p>
二重線 (double)
<style>
#p1 {
text-decoration: underline double red;
}
</style>
<p id="p1">あいうえお abcde</p>
点線 (dotted)
<style>
#p1 {
text-decoration: underline dotted red;
}
</style>
<p id="p1">あいうえお abcde</p>
破線 (dashed)
<style>
#p1 {
text-decoration: underline dashed red;
}
</style>
<p id="p1">あいうえお abcde</p>
波状の線 (wavy)
<style>
#p1 {
text-decoration: underline wavy red;
}
</style>
<p id="p1">あいうえお abcde</p>
関連の記事
CSS letter-spacing 文字の間隔を指定する
CSS word-spaceing 単語の間隔を指定する
CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow はみ出た部分を表示する/しない