text-decorationプロパティの概要
| 文字にアンダーライン、打消し線、点線を引くCSS | ||
| text-decoration | ||
| 目的 | アンダーライン（下線）などを引いて文字を強調した表示にする。 | |
| 使用 | <span> <mark> <a> | |
| 関連 | text-underline-position linear-gradient | |
| 初期 | text-decoration : none solid current-color auto | |
第三代徳川将軍は徳川家光です。 | ||
第三代徳川将軍は<span style="text-decoration: underline solid #ff42ad 5px;">徳川家光</span>です。 | ||
値
text-decoration : 線の位置 スタイル 色 太さ
未指定の場合、初期値である橙色の値が選択される
線の位置
- none
- 線を表示しない
<span style="text-decoration: none solid #ff0000 auto;">線を表示しない</span>
- underline
- 下線 / アンダーラインを引く
<span style="text-decoration: underline solid #ff0000 auto;">下線 / アンダーラインを引く</span>
- overline
- 上線 / オーバーラインを引く
<span style="text-decoration: overline solid #ff0000 auto;">上線 / オーバーラインを引く</span>
- line-through
- 中線 / センターラインを引く
<span style="text-decoration: line-through solid #ff0000 auto;">中線 / センターラインを引く</span>
スタイル
- solid
- 1本の線を引く
<span style="text-decoration: underline solid #ff0000 auto;">1本の線を引く</span>
- double
- 2本の線を引く
<span style="text-decoration: underline double #ff0000 auto;">2本の線を引く</span>
- dotted
- 点線を引く
<span style="text-decoration: underline dotted #ff0000 auto;">点線を引く</span>
- dashed
- 破線を引く
<span style="text-decoration: underline dashed #ff0000 auto;">破線を引く</span>
- wavy
- 波線を引く
<span style="text-decoration: underline wavy #ff0000 auto;">波線を引く</span>
色
- 無指定
- current-color 現在の色
<span style="text-decoration: underline solid auto;">cueewnr-color現在の色</span>
- #ff0000
- 4pxの赤い線
<span style="text-decoration: underline solid #ff0000 auto;">赤い線</span>
- #0000ff
- 4pxの青い線
<span style="text-decoration: underline solid #0000ff auto;">青い線</span>
太さ
- auto
- 適切な太さ設定される
<span style="text-decoration: underline solid #ff0000 auto;">適切な太さに設定される</span>
- from-font
- フォントの設定に従う。設定がなければauto
<span style="text-decoration: underline solid #ff0000 from-font;">フォントの設定に従う。設定がなければauto</span>
- 4px
- 4pxの赤い線
<span style="text-decoration: underline solid #ff0000 4px;">4pxの赤い線</span>
CSSデザイン
mark 背景色を消しアンダーラインを引く コピペで使えるHTML+CSS
mark要素のプロパティであるtext-decorationを修正してアンダーラインを引くようにし、蛍光マーカーを引いたようなデザインを実現します。ピンク、イエロー、ブルー、グリーンの蛍光マーカーを再現します。
programming-cafe.com
del 打消し線の色、太さ、種類を変更 コピペで使えるHTML+CSS
多くのブラウザにおいてdelは文字の中央に打消し線が表示されます。CSSのtext-decorationプロパティを修正することによってその太さや、打消し線を破線や直線などの線の種類を変更します。
programming-cafe.com
s 打消し線の太さと色を変更 コピペで使えるHTML+CSS
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
programming-cafe.com
a リンクのアンダーラインを消す コピペで使えるHTML+CSS
リンクアンカーのa要素について、text-decorationを修正してアンダーラインを消し、文字色を変更します。
programming-cafe.com