このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

text-decoration-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.

text-decoration-color はCSS のプロパティで、text-decoration-line でテキストに追加された装飾の色を設定します。

色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。

試してみましょう

text-decoration-color: red;

text-decoration-color: #21ff21;

text-decoration-color: rgb(255 90 255);

text-decoration-color: hsl(70 100% 40%);

text-decoration-color: currentColor;

<section>  <p>    I'd far rather be    <span>happy than right</span>    any day.  </p></section>

p {  font: 1.5em sans-serif;}#example-element {  text-decoration-line: underline;}

CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に (text-decoration-line プロパティで) 異なる線種を適用し、 (text-decoration-color で) 線の色を指定することで実現できます。

構文

css

/* <color> 値 */text-decoration-color: currentColor;text-decoration-color: red;text-decoration-color: #00ff00;text-decoration-color: rgb(255 128 128 / 50%);text-decoration-color: transparent;/* グローバル値 */text-decoration-color: inherit;text-decoration-color: initial;text-decoration-color: revert;text-decoration-color: revert-layer;text-decoration-color: unset;

値

<color>: 装飾線の色です。

アクセシビリティ

テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。

色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。

公式定義

初期値	`currentcolor`
適用対象	すべての要素。`::first-letter`および`::first-line` にも適用されます。
継承	なし
計算値	色の計算値
アニメーションの種類	色

形式文法

text-decoration-color =
<color>

例

基本的な例

html

<p>  この段落の中には、注意を喚起したい<s>誤ったテキスト</s>があります。</p>

css

p {  text-decoration-line: underline;  text-decoration-color: cyan;}s {  text-decoration-line: line-through;  text-decoration-color: red;  text-decoration-style: wavy;}

仕様書

Specification
CSS Text Decoration Module Level 3 # text-decoration-color-property

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on2025年11月15日 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換