text-decoration-style

テキストデコレーションスタイル（テキストとフォント）

意味テキストの装飾線のスタイル

text-decoration-styleとは？

text-decoration-styleプロパティは、テキストに適用される装飾線（下線、上線、打ち消し線など）のスタイルを指定するために使用します。このプロパティによって、線の種類を実線、二重線、点線、破線などに設定することができます。

text-decoration-styleの具体的な使い方

波線の下線を引く例

<style>
    p {
        text-decoration-line: underline;
        text-decoration-style: wavy;
    }
</style>

<p>このテキストは波線の下線が引かれています。</p>

段落（p要素）に下線を引き、そのスタイルを波線（wavy）に設定しています。

点線の下線を引く例

<style>
    .dotted {
        text-decoration: underline;
        text-decoration-style: dotted;
    }
</style>

<span class="dotted">点線の下線付きテキスト</span>

テキストに点線の下線を適用しています。

text-decoration-styleに関するよくある質問

Q. 利用可能なスタイルは？

A. text-decoration-styleで使用できる主なスタイルには、solid（実線）、double（二重線）、dotted（点線）、dashed（破線）、wavy（波線）があります。

Q. ブラウザ対応は大丈夫？

A. 多くの最新のブラウザでサポートされていますが、一部の古いブラウザでは対応していない場合があります。クロスブラウザ対応が必要な場合は、使用前に対象ブラウザの対応状況を確認することをおすすめします。

text-decoration-styleが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのtext-decoration-styleやline-height、color、text-shadow、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。