HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト デコレーション スタイル

text-decoration-styleプロパティ

テキストの上下に引く「線」のスタイルを指定するプロパティです。

  • 初期値

    solid

  • 継承

    不可

  • 適用できる要素

    全要素

次の値を指定することができます。
2016年8月現在、Chrome、Opera、InternetExploereには対応していません。
Safariに適用する場合はベンダープレフィックス「-webkit-」を付ける必要があります。

  • solid – 線(初期値)
  • double – 二重線
  • dotted – 点線
  • dashed– 点線(dottedより粗め)
  • wavy – 波線

値の設定例

それぞれの値を指定した例です。

CSSコード例

<style type="text/css">
.text1 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-style: solid;
	-webkit-text-decoration-style: solid;
}
.text2 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-style: double;
	-webkit-text-decoration-style: double;
}
.text3 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-style: dotted;
	-webkit-text-decoration-style: dotted;
}
.text4 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-style: dashed;
	-webkit-text-decoration-style: dashed;
}
.text5 {
	text-decoration-line: underline;
	-webkit-text-decoration-line: underline;
	text-decoration-style: wavy;
	-webkit-text-decoration-style: wavy;
}
</style>
<p class="text1">プロパティのテスト</p>
<p class="text2">プロパティのテスト</p>
<p class="text3">プロパティのテスト</p>
<p class="text4">プロパティのテスト</p>
<p class="text5">プロパティのテスト</p>

表示例: