caption-sideプロパティの使い方・サンプルコード
Sara
Code for Fun
text-decoration-styleプロパティは、text-decoration-line で指定した線のスタイルを指定します。
線の種類は text-decoration-lineプロパティ、線の色は text-decoration-color プロパティを使用します。
線の種類・スタイル・色をまとめて指定する場合は text-decorationプロパティを使うことができます。
セレクタ {
text-decoration-style: ここに値を指定;
}
値 | 表示サンプル | |
---|---|---|
solid | 1本 | あいうえお |
double | 2本 | あいうえお |
dotted | 点線 | あいうえお |
dashed | 破線 | あいうえお |
wavy | 波線 | あいうえお |
HTML
<p>あいうえお<span class="spelling">かくきけこ</span>さしすせそ</p>
CSS
.spelling {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
実行結果
HTML
<p>ここに<span class="lineblue">青い二重線</span>を引きます。</p>
CSS
.lineblue {
text-decoration-line: line-through;
text-decoration-style: double;
text-decoration-color: blue;
}
実行結果