概要
コンテナーのテキストの下線・上線・取り消し線の種類・スタイル・色を指定する。blinkも指定できるが殆どのブラウザーで機能しない。
書式
text-decoration [種類](, [スタイル])(, [色])
text-decoration-line [種類]
text-decoration-style [スタイル]
text-decoration-color [色]
値
種類
- none
- テキストに対する線の装飾を無効にする。アンカー要素でデフォルト指定されている下線も表示されなくなる。
- underline
- 下線（テキストの下）
- overline
- 上線（テキストの上）
- line-through
- 取り消し線（テキストの縦中央）
style
- solid
- 実線。
- dotted
- 点線。
- dasshed
- 破線。
- double
- 二重線。
- wavy
- 波線。
動作確認
線の種類
|
1 2 3 4 |
<p style="text-decoration: none;">noneを指定</p> <p style="text-decoration: underline;">underlineを指定</p> <p style="text-decoration: overline;">overlineを指定</p> <p style="text-decoration: line-through;">line-throughを指定</p> |
noneを指定
underlineを指定
overlineを指定
line-throughを指定
線のスタイル
|
1 2 3 4 5 |
<p style="text-decoration: underline solid;">underline solidを指定</p> <p style="text-decoration: underline dotted;">underline dottedを指定</p> <p style="text-decoration: underline dashed;">underline dashedを指定</p> <p style="text-decoration: underline double;">underline doubleを指定</p> <p style="text-decoration: underline wavy;">underline wavyを指定</p> |
underline solidを指定
underline dottedを指定
underline dashedを指定
underline doubleを指定
underline wavyを指定
アンカー要素の下線を消す
|
1 2 |
<p><a href="#top">通常のアンカー要素</a></p> <p><a href="#top" style="text-decoration: none;">アンカー要素にnoneを指定</a></p> |