【text-decoration】文字の下線・上線・取り消し線の設定

文字の下線・上線・取り消し線の設定

下線・上線・取り消し線の設定をするプロパティは、下記の4つです。

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration

text-decoration-line

text-decoration-lineプロパティは、テキストに下線・上線・取り消し線の装飾設定をするプロパティです。
text-decoration-lineプロパティには、下記のキーワードを指定できます。

text-decoration-color

text-decoration-colorプロパティは、テキスト装飾の線の色を設定するプロパティです。

text-decoration-colorプロパティには、16進数やrgbなどで色を指定します。
※text-decoration-lineプロパティで、装飾を指定しないと変化が起こりません。

CSSの色の指定方法CSSの色の指定方法をザックリとまとめました。...

text-decoration-style

text-decoration-styleプロパティは、テキスト装飾の線種を設定するプロパティです。

text-decoration-styleプロパティには、下記のキーワードを指定できます。
※text-decoration-lineプロパティで、装飾を指定しないと変化が起こりません。

text-decoration

text-decorationプロパティはtext-decoration関連のプロパティを、一括で設定することが出来るプロパティです。
複数指定する場合は、半角スペースで区切って指定します。

text-decoration: solid line-through red;

文字の下線・上線・取り消し線のまとめ

今回は文字の下線・上線・取り消し線の設定についてまとめました。
下線、取り消し線は使いどころがありそうですが、上線ってどういうところに使うのでしょうか。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。