HTML & CSS

リファレンス

CSS

テキスト デコレーション

text-decorationプロパティ

text-decoration-lineプロパティtext-decoration-styleプロパティtext-decoration-colorプロパティを一括指定するプロパティです。

  • 初期値

    各プロパティに準ずる

  • 継承

    不可

  • 適用できる要素

    全要素

指定できる値の種類については各プロパティを参照してください。
2016年8月現在、text-decoration-lineプロパティの値を1つだけ指定する場合は全ブラウザでサポートしています。
複数の値を指定、またはスタイルと色の指定はChrome、Opera、InternetExploereでは対応していません。
また、Safariに適用する場合はベンダープレフィックス「-webkit-」を付ける必要があります。


パターン1

text-decoration-lineプロパティのみを指定する例です。

CSSコード例

<style type="text/css">
.text {
	text-decoration: underline;
}
</style>
<p class="text">プロパティのテスト</p>

表示例:

lineのみ指定

パターン2

text-decoration-lineプロパティtext-decoration-colorプロパティを指定した例です。

CSSコード例

<style type="text/css">
.text {
	text-decoration: underline red;
	-webkit-text-decoration: underline red;
}
</style>
<p class="text">プロパティのテスト</p>

表示例:

line&colorを指定

パターン3

text-decoration-lineプロパティtext-decoration-colorプロパティtext-decoration-styleプロパティをそれぞれ指定した例です。

CSSコード例

<style type="text/css">
.text {
	text-decoration: underline wavy blue;
	-webkit-text-decoration: underline wavy blue;
}
</style>
<p class="text">プロパティのテスト</p>

表示例:

3つのプロパティを指定

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。