text-decoration-lineプロパティの使い方・サンプルコード
Sara
目次
text-decoration-line
text-decoration-lineプロパティは、上線・下線などテキストに引く線の種類を指定します。
線のスタイルは text-decoration-style プロパティ、線の色は text-decoration-color プロパティを使用します。
線の種類・スタイル・色をまとめて指定する場合は text-decorationプロパティを使うことができます。
使用できる値
セレクタ {
text-decoration-line: ここに値を指定;
}
値 | 表示スタイル | |
---|---|---|
normal | 標準 | あいうえお |
underline | 下線 | あいうえお |
overline | 上線 | あいうえお |
line-through | 中央線 | あいうえお |
値の間に半角スペースを入れて複数の値を指定することもできます。(例③参照)
使用例
例① テキストの下に赤い波線を引く
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;
}
実行結果
ここに青い二重線を引きます。
例③ 上下中央に線を引く
HTML
<p><span class="line-three">上下中央</span>に線を引きます。</p>
CSS
.line-three {
text-decoration-line:underline overline line-through;
}
実行結果
上下中央に線を引きます。
対応ブラウザ
関連するHTML要素
関連するCSSプロパティ
- text-decoration:テキストに線を引く
- text-decoration-color:テキストに引く線の色を指定
- text-decoration-style:テキストに引く線のスタイルを指定
Subscribe
0 Comments
古い順
ABOUT ME