【CSS】text-decoration-style - テキストの装飾（線の様式）

CSSのtext-decoration-styleプロパティについて解説します。

検証環境

CSS

macOS

14.1

text-decoration-style

text-decoration-styleは“テキストの装飾線のスタイル”のプロパティです。

基本構文

text-decoration-style: 値;

値

代表的な値は次の通りです。

値	意味
solid	直線
double	二重線
dotted	点線
dashed	破線
wavy	波線

サンプル

直線

テキストの装飾線を直線に設定するサンプルです。

sample.html

<style>
p {
    text-decoration-line: underline;
    ___ih_hl_start
    text-decoration-style: solid;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

二重線

テキストの装飾線を二重線に設定するサンプルです。

sample.html

<style>
p {
    text-decoration-line: underline;
    ___ih_hl_start
    text-decoration-style: double;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

点線

テキストの装飾線を点線に設定するサンプルです。

sample.html

<style>
p {
    text-decoration-line: underline;
    ___ih_hl_start
    text-decoration-style: dotted;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

破線

テキストの装飾線を破線に設定するサンプルです。

sample.html

<style>
p {
    text-decoration-line: underline;
    ___ih_hl_start
    text-decoration-style: dashed;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

波線

テキストの装飾線を波線に設定するサンプルです。

sample.html

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

<p>CSS : Cascading Style Sheets</p>

プレビュー