最終更新日:
公開日:
リファレンス
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>
パターン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>
パターン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>