text-decoration-color
は CSS のプロパティで、 text-decoration-line
でテキストに追加された装飾の色を設定します。
色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。
CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に (text-decoration-line
プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。
構文
/* <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;
}
アクセシビリティの考慮事項
テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。
色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Text Decoration Module Level 3 text-decoration-color の定義 |
勧告候補 | 初回定義。 text-decoration プロパティが複数の関連するプロパティを定義する一括指定になりました。 |
初期値 | currentcolor |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | なし |
計算値 | 色の計算値 |
アニメーションの種類 | 色 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の
text-decoration
プロパティを使った方が便利かもしれません。 <color>
データ型- 色に関する他のプロパティ:
background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
,column-rule-color
- CSS を使用した HTML 要素への色の適用