CSS の text-decoration-color プロパティは、 text-decoration-line で指定された文字列に対する装飾、つまり下線、上線、打消し線、それに (例えば) スペルミスのコンテンツを示すのによく使われるような波線などの色を設定します。設定された色は、プロパティ値のスコープにあるすべての装飾戦に適用されます。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に (text-decoration-line プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。
線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の text-decoration プロパティを使用したほうが便利かもしれません。
構文
/* <color> 値 */ text-decoration-color: currentColor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; /* グローバル値 */ text-decoration-color: inherit; text-decoration-color: initial; text-decoration-color: unset;
値
<color>- 装飾線の色です。
形式文法
<color>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
例
<p>This paragraph has <s>some erroneous text</s>
inside it that I want to call attention to.</p>
p {
text-decoration-line: underline;
text-decoration-color: cyan;
}
s {
text-decoration-line: line-through;
text-decoration-color: red;
text-decoration-style: wavy;
}
仕様策定状況
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Text Decoration Module Level 3 text-decoration-color の定義 |
勧告候補 | 初回定義。 text-decoration プロパティが複数の関連するプロパティを定義する一括指定になりました。 |
| 初期値 | currentcolor |
|---|---|
| 適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
| 継承 | なし |
| メディア | 視覚 |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 色 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome 完全対応 57 | Edge ? | Firefox
完全対応
36
| IE 未対応 なし | Opera 完全対応 44 | Safari
完全対応
あり
| WebView Android 完全対応 57 | Chrome Android 完全対応 57 | Edge Mobile ? | Firefox Android
完全対応
36
| Opera Android 完全対応 44 | Safari iOS
完全対応
8
| Samsung Internet Android 完全対応 7.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の
text-decorationプロパティを使った方が便利かもしれません。 <color>データ型- 色に関する他のプロパティ:
background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color,column-rule-color - CSS を使用した HTML 要素への色の適用