

プロパティについて
概要
初期値 | “text-decoration-style: solid;” |
適用対象 | すべての要素 |
継承 | No |
パーセント値 | パーセント値は指定できません |
計算値 | 指定したキーワード |
アニメーション | 離散 |
“text-decoration-style”プロパティは“text-decoration-line”プロパティでテキストに引く下線、上線、打ち消し線の見た目を指定するプロパティです。
“text-decoration-style”プロパティは子要素に継承されませんが、それでも下線や上線、取り消し線は子孫のものも含むすべてのテキストに設定が反映されます。子孫要素に別途“text-decoration”プロパティや“text-decoration-style”プロパティを適用したとしても設定を上書きすることはできません。
ただし、インライン・ブロック(“display: inline-block;”)などのアトミック・インラインやフロー外の子孫に含まれるテキストには影響しません。
ライン装飾の適用について詳しくはこちら。
テキスト装飾|“CSS Text Decoration Module”
テキストに引く線の種類や色、見た目をまとめて指定するには“text-decoration”プロパティを使用します。
サンプルコード
span { text-decoration-style: wavy;}
値
値 | 説明 |
---|---|
solid | 実線 |
double | 二重線 |
dotted | 点線 |
dashed | 破線 |
wavy | 波線 |
共通キーワード |
値は一つだけ指定できます。“text-decoration-line”プロパティで複数の線をテキストに引いている場合はすべての線に同じ値が適用されます。
仕様書
CSS Text Decoration Module Level 3
Line Decoration: Underline, Overline, and Strike-Through|Text Decoration Style: the text-decoration-style property
CSS Text Decoration Module Level 4
Line Decoration: Underline, Overline, and Strike-Through|Text Decoration Style: the text-decoration-style property
定義されている仕様書
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | |
text-decoration-style | ![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() ![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | |
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;
}
彼女は「猫は上のかぎり黒くてことはみな白き」と記していた。つまり彼女はおなかが白くて背中が黒い猫が好きだったのだ。