概要
CSSプロパティ｢text-decoration-style｣は、text-decoration-line などで指定した線の装飾に対して、どのような線の形状にするかを指定することができます。線の種類については、直線や点線、波線などいくつか用意されています。
またこのプロパティの他、text-decoration-color、text-decoration-line があり、それらをまとめて指定するショートハンドプロパティとして text-decoration があります。
<p>今日の天候は<span>晴れ</span>です</p>
<style>
span {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: dotted;
}
</style>取りうる値
適用させたい線の形状を用意されているキーワードから指定します。
{ text-decoration-style: キーワード; }指定可能なキーワードと説明です。
| 値 | キーワード |
|---|---|
| solid | 一本線が表示されます |
| double | 二本線が表示されます |
| dotted | １列にならんだドット模様が表示されます |
| dashed | 破線が表示されます |
| wavy | 波状の線が表示されます |
text-decoration-lineが複数指定されている場合
このプロパティは、一つの要素に複数の値が指定されている場合は、その全ての装飾線に同じ値が適用されます。
<p>今日の天候は<span>晴れ</span>です</p>
<style>
span {
text-decoration-color: red;
text-decoration-line: underline line-through overline;
text-decoration-style: dashed;
}
</style>使用例
用意されている各キーワードを指定したので、表示の違いを確認してみてください。
<p>今日の天候は<span class="solid">晴れ</span>です</></p>
<p>今日の天候は<span class="double">曇り</span>です</p>
<p>今日の天候は<span class="dotted">雨</span>です</p>
<p>今日の天候は<span class="dashed">雪</span>です</p>
<p>今日の天候は<span class="wavy">雷雨</span>です</p>
<style>
span {
text-decoration-color: red;
text-decoration-line: underline;
}
.solid {
text-decoration-style: solid;
}
.double {
text-decoration-style: double;
}
.dotted {
text-decoration-style: dotted;
}
.dashed {
text-decoration-style: dashed;
}
.wavy {
text-decoration-style: wavy;
}
</style>仕様書