CSS text-decoration-style 属性详解：テキスト装飾線のスタイルをカスタマイズ

CSS プロパティ text-decoration-style

この文章では、CSSの`text-decoration-style`属性について詳しく解説します。`text-decoration-style`属性を使うことで、波線、点線、二重線などのスタイルを駆使して、Webページのテキスト装飾線を思い通りにカスタマイズすることができます。これにより、Webデザインの視覚的な魅力をさらに高めることができます。

1. `text-decoration-style` 属性とは？

`text-decoration-style`属性は、テキスト装飾線のスタイルを指定するために使用されます。テキストに下線、上線、取り消し線を適用する際に、線の種類を細かく設定することができます。

`text-decoration-style`属性には、以下の値を設定することができます。

値	説明
`solid`	実線（デフォルト値）
`double`	二重線
`dotted`	点線
`dashed`	破線
`wavy`	波線

`text-decoration-style`属性は、単独では機能しません。必ず`text-decoration`属性と組み合わせて使用します。`text-decoration`属性で装飾の種類（下線、上線、取り消し線）を指定し、`text-decoration-style`属性で線のスタイルを指定します。


<!DOCTYPE html>
<html>
<head>
<style>
.solid {
  text-decoration: underline solid;
}
.double {
  text-decoration: underline double;
}
.dotted {
  text-decoration: underline dotted;
}
.dashed {
  text-decoration: underline dashed;
}
.wavy {
  text-decoration: underline wavy;
}
</style>
</head>
<body>

<p class="solid">実線の下線です。</p>
<p class="double">二重線の下線です。</p>
<p class="dotted">点線の下線です。</p>
<p class="dashed">破線の下線です。</p>
<p class="wavy">波線の下線です。</p>

</body>
</html>

2. ブラウザの対応状況

`text-decoration-style`属性は、主要なブラウザで広くサポートされています。ただし、一部の古いブラウザでは、サポートされていない場合があります。最新のブラウザの対応状況については、caniuse.com を参照してください。

3. 使用シーン

`text-decoration-style`属性は、Webデザインにおいて、さまざまな場面で活用することができます。例えば、以下のような例が挙げられます。

重要なテキストを強調表示する
独自のリンクスタイルを作成する
クリエイティブなタイポグラフィ効果をデザインする


<!DOCTYPE html>
<html>
<head>
<style>
.important {
  text-decoration: underline wavy red; /* 赤色の波線で下線を引く */
}

a {
  text-decoration: none; /* デフォルトのリンクの下線を消す */
  border-bottom: 1px dashed #ccc; /* 破線のアンダーラインを追加 */
}
</style>
</head>
<body>

<p>これは、<span class="important">重要なテキスト</span>です。</p>

<a href="#">カスタムスタイルのリンク</a>

</body>
</html>

4. まとめ

`text-decoration-style`属性は、テキスト装飾線のスタイルを細かく制御することができる便利な属性です。この記事で紹介した内容を参考に、ぜひWebページのデザインに活用してみてください。

CSS text-decoration-style 属性详解：テキスト装飾線のスタイルをカスタマイズ

1. `text-decoration-style` 属性とは？

2. ブラウザの対応状況

3. 使用シーン

4. まとめ

関連Q&A