このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

text-decoration-style”プロパティ:テキストに引く線の見た目CSS3で追加

記事Dec. 12th,2020
テキストに引く下線、上線、打ち消し線の見た目を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 text-decoration-style: solid;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 指定したキーワード
アニメーション 離散

text-decoration-style”プロパティはtext-decoration-line”プロパティでテキストに引く下線、上線、打ち消し線の見た目を指定するプロパティです。

text-decoration-style”プロパティは子要素に継承されませんが、それでも下線や上線、取り消し線は子孫のものも含むすべてのテキストに設定が反映されます。子孫要素に別途text-decoration”プロパティtext-decoration-style”プロパティを適用したとしても設定を上書きすることはできません。

サンプルコード

span { text-decoration-style: wavy;}

説明
solid 実線
double 二重線
dotted 点線
dashed 破線
wavy 波線
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
text-decoration-style
定義なし

定義なし

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告候補(CR) 作業草稿(WD)
solid
定義なし

定義なし

定義あり

定義あり
double
定義なし

定義なし

定義あり

定義あり
dotted
定義なし

定義なし

定義あり

定義あり
dashed
定義なし

定義なし

定義あり

定義あり
wavy
定義なし

定義なし

定義あり

定義あり

使用例

テキストに引く線の見た目を指定する

<p>
彼女は「<span>猫は上のかぎり黒くてことはみな白き</span>」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。
</p>
span {
text-decoration-line: underline;
text-decoration-style: solid;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

span {
text-decoration-line: underline;
text-decoration-style: double;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

span {
text-decoration-line: underline;
text-decoration-style: dotted;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

span {
text-decoration-line: underline;
text-decoration-style: dashed;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

span {
text-decoration-line: underline;
text-decoration-style: wavy;
}

彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク