CSS

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

みいと

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

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

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

text-decoration-line

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

underline 下線 サンプル
overline 上線 サンプル
line-through 取り消し線 サンプル
none 装飾なし

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プロパティで、装飾を指定しないと変化が起こりません。

solid 実線 サンプル
double 二重線 サンプル
dotted 点線 サンプル
dashed 破線 サンプル
wavy 波線 サンプル

text-decoration

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

text-decoration: solid line-through red;

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

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

まとめ

  • テキストには下線・上線・取り消し線を付けることができる
  • text-decorationを使うと、装飾、色、線種をまとめて設定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました