text-decoration プロパティ
text-decoration プロパティは、テキストに下線、上線、取り消し線、2重線などを指定する CSS プロパティです。 色や線種(スタイル)も指定することができます。
text-decoration: underline red wavy;
text-decorationの例です。
CSS では、text-decoration プロパティはテキストへの装飾という扱いです。 テキストに赤い下線を付けるといったことができます。
text-decoration プロパティは以下のプロパティの一括指定ができます。
text-decoration-line プロパティの値は必ず指定する必要があります。
マーカーのような線を加えるにはbackgroundプロパティにlinear-gradient()関数を使います。
ページ内 Index
- ad -
構文(Syntax)
CSS
text-decoration: [ text-decoration-line text-decoration-color text-decoration-style ] | initial | inherit;
DOM ( JavaScript )
String = object.style.textDecoration;
object.style.textDecoration="[ text-decoration-line text-decoration-color text-decoration-style ] | initial | inherit";
値(Values)
Value | 摘要 |
---|---|
text-decoration-line | 下線、上線、取り消し線、2重線など |
text-decoration-color | 線の色、CSS Colorを参照のこと |
text-decoration-style | 線の種類、点線、破線など |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | none currentcolor solid |
継承(Inherited) | No |
CSS Animation | No |
Example
text-decorationの例です。テキストに赤い下線を付けるといったことに便利です。
- ad -
関連プロパティ
フォントやテキストを装飾するには、以下のような関連するプロパティがあります。
background:linear-gradient(); | マーカー |
font-size/line-height | 大きさ/行間 |
font-weight | 太字 |
text-decoration | 下線、上線、取り消し線、2重線など |
text-decoration-color | text-decorationの色 |
text-decoration-line | 下線、上線、取り消し線、2重線 |
text-decoration-style | 無地、波状、点線、破線、二重 |
text-shadow | テキストに影を付ける |
text-transform | 大文字、小文字、全角文字の表記 |
text-underline-position | 下線の位置の指定 |