CSS3スタイル虎の巻

text-decoration-style

text-decoration-styleは、テキストの装飾線のスタイルを指定するCSSです。

解説

テキストの装飾線のスタイルを指定します。
スタイルは１本線、二重線、点線、破線、波線から選べます。

構文

構文は以下になります。

text-decoration-style: 値;

値

text-decoration-styleには以下の値が指定できます。

値説明
solid１本線を指定する
（例）text-decoration-style:solid;
double二重線を指定する
（例）text-decoration-style:double;
dotted点線を指定する
（例）text-decoration-style:dotted;
dashed破線を指定する
（例）text-decoration-style:dashed;
wavy波線を指定する
（例）text-decoration-style:wavy;

太字の値は初期値です。

サンプル

１本線をテキストの下に引く


.sample01 {
  text-decoration-line:underline;
  text-decoration-style:solid;
}


<div class="sample01">１本線です</div>
１本線です

二重線をテキストの下に引く


.sample02 {
  text-decoration-line:underline;
  text-decoration-style:double;
}


<div class="sample02">二重線です</div>
二重線です

点線をテキストの下に引く


.sample03 {
  text-decoration-line:underline;
  text-decoration-style:dotted;
}


<div class="sample03">点線です</div>
点線です

破線をテキストの下に引く


.sample04 {
  text-decoration-line:underline;
  text-decoration-style:dashed;
}


<div class="sample04">破線です</div>
破線です

波線をテキストの下に引く


.sample05 {
  text-decoration-line:underline;
  text-decoration-style:wavy;
}


<div class="sample05">波線です</div>
波線です

備考

  • solid（１本線）がデフォルト値なので、１本線の場合はtext-decoration-styleを明示的に指定する必要はありません。

関連項目