From 51d95fb2f14edba4c414578e75140eee6e8c87e0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Aug 2021 09:59:05 +0900 Subject: Web/CSS/text-decoration-color を更新 (#2018) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/06/29 時点の英語版に同期 --- files/ja/web/css/text-decoration-color/index.html | 93 +++++++++++------------ 1 file changed, 43 insertions(+), 50 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html index 7b0322e9d0..f41da12a5c 100644 --- a/files/ja/web/css/text-decoration-color/index.html +++ b/files/ja/web/css/text-decoration-color/index.html @@ -3,14 +3,18 @@ title: text-decoration-color slug: Web/CSS/text-decoration-color tags: - CSS - - CSS テキスト - - CSS テキスト装飾 - - CSS プロパティ - - HTML スタイル - - HTML 色 + - CSS Property + - CSS Text + - CSS Text Decoration + - HTML Colors + - HTML Styles - Reference - - text-decoration-color - - 色 + - Styling HTML + - Styling text + - color + - colors + - 'recipe:css-property' +browser-compat: css.properties.text-decoration-color translation_of: Web/CSS/text-decoration-color ---
{{ CSSRef }}
@@ -21,14 +25,13 @@ translation_of: Web/CSS/text-decoration-color
{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}
-

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

-

構文

+

構文

/* <color> 値 */
-text-decoration-color: currentColor;
+text-decoration-color: currentcolor;
 text-decoration-color: red;
 text-decoration-color: #00ff00;
 text-decoration-color: rgba(255, 128, 128, 0.5);
@@ -37,21 +40,40 @@ text-decoration-color: transparent;
 /* グローバル値 */
 text-decoration-color: inherit;
 text-decoration-color: initial;
+text-decoration-color: revert;
 text-decoration-color: unset;
-

値

+

値

-
{{cssxref("<color>")}}
-
装飾線の色です。
+
{{cssxref("<color>")}}
+
装飾線の色です。
-

形式文法

+

アクセシビリティの考慮

+ +

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

+ +

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

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

{{csssyntax}} -

例

+

例

+ +

基本的な例

<p>This paragraph has <s>some erroneous text</s>
     inside it that I want to call attention to.</p>
@@ -62,51 +84,22 @@ text-decoration-color: unset; } s { - text-decoration-line: line-through; + text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; }

{{ EmbedLiveSample('Examples') }}

-

アクセシビリティの考慮事項

- -

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

- -

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

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}{{ Spec2('CSS3 Text Decoration') }}初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。
+

仕様書

-

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

+

ブラウザーの互換性

-

{{Compat("css.properties.text-decoration-color")}}

+

{{Compat}}

-

関連情報

+

関連情報