装飾線の形状を設定する

CSS - text-decoration-style

概要

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二本線が表示されます
dotted1列にならんだドット模様が表示されます
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>

仕様書

 

関連CSSプロパティ