text-decoration

text-decorationは、文字の装飾線に関するスタイルを一括して指定するスタイルです。

解説

リスト項目に関するスタイルをまとめて指定する時に使用します。
指定できるスタイルは以下３つです。

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

値と値の間は半角スペースで区切って指定します。
値の順番に決まりはありません。
３つ全ての値を指定しなくてもOKですが、text-decoration-lineの値だけは必須です。

構文

構文は以下になります。

値の順番はこの通りでなくとも構いません。

値

text-decorationに指定できる値は、下記それぞれのページをご覧ください。

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

サンプル

テキストに「青色、下線、破線」の装飾を引く

.sample01 {
  text-decoration:blue underline wavy;
}

<div class="sample01">青色、下線、破線</div>

テキストに「赤色、中央線、二重線」の装飾を引く

.sample02 {
  text-decoration:red line-through double;
}

<div class="sample02">赤色、中央線、二重線</div>

備考

• text-decoration-lineの値は必須です。

関連項目

• text-decoration-line：テキストに引く装飾線の位置を指定する
• text-decoration-style：テキストに引く装飾線のスタイルを指定する
• text-decoration-color：テキストに引く装飾線の色を指定する
• text-decoration：テキストに引くの装飾線に関するスタイルを一括して指定する

Tweet