【47-2】テキストのライン装飾の色を決める text-decoration-color

text-decoration-colorプロパティは、そのまんま「テキストをデコレーションするためのラインの色」を指定します。

例えば、<a>要素には、ブラウザのデフォルトで「下線」が付き、色は文字色（<a>のcolor）と同じですが、これを「文字色とは別の色」に変えたい時に使います。

text-decoration-colorプロパティは、Chrome, Firefox, Opera は対応。
Safari（iOS Safari も含む）は、ベンダープレフィックス「-webkit-」付きで対応。
IE, Edge は、CSS 2 での text-decorationプロパティ（ショートハンドになる前）に対応しており、text-decoration-colorプロパティには未対応です。
（参考：Can I use　2019年3月記）

テキスト デコレーション関連のプロパティは、text-decoration ショートハンドプロパティで まとめて指定することができます。今回も含めて数回テキスト デコレーション関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【47-1】テキストのライン装飾の種類を決める text-decoration-line

【47-2】テキストのライン装飾の色を決める text-decoration-color　←今日はココ

【47-3】テキストのライン装飾を波線にもできる text-decoration-style

【47-4】text-decorationショートハンドプロパティでまとめて指定

参考：
・CSS Text Decoration Module Level 3 | W3C Candidate Recommendation
・text-decoration-color - CSS | MDN

text-decoration-colorプロパティの値

text-decoration-colorプロパティは、CSS の「色指定のルール」で指定するだけ。すごく簡単です。
デフォルト色（テキストの色 = colorプロパティの色）が currentColor というキーワードだということだけ覚えておこう。
ラインの色をデフォルトに戻したい時はこのキーワードを使います。

CSS の色指定については、
[14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）をご覧ください。

text-decoration-colorプロパティの値
CSSの色指定	キーワード currentColor（文字色 =colorプロパティの値）がデフォルト値。 CSSの色指定のルールで指定します。
グローバル値	text-decoration-color: inherit; 親の値を継承（コレ書かなくても継承するけど） text-decoration-color: initial; 継承した親の値を解消しデフォルト値に戻す text-decoration-color: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない ただし「継承」ではなく ボックスツリーによる 「伝播（propagated）」はします。 親要素に指定すれば、子要素にも装飾は付きます。	適用できる要素	すべての要素

text-decoration-colorプロパティの指定サンプル

text-decoration-colorプロパティを使ってみます。
ブラウザデフォルトで テキスト デコレーション が付く <a>、<ins>、<del>要素に使ってみます。

<a>要素のブラウザデフォルトスタイル

<a>要素の underline の色変更

<ins>要素のブラウザデフォルトスタイル

<ins>要素の underline の色変更

<del>要素のブラウザデフォルトスタイル

<del>要素の line-through の色変更

サンプルのソースコードはこちら。

<div class="mihon">
<p><a href="#pt2">&lt;a&gt;要素のブラウザデフォルトスタイル</a></p>
<p><a href="#pt2" class="sample1">&lt;a&gt;要素の underline の色変更</a></p>

<p><ins>&lt;ins&gt;要素のブラウザデフォルトスタイル</ins></p>
<p><ins class="sample2">&lt;ins&gt;要素の underline の色変更</ins></p>

<p><del>&lt;del&gt;要素のブラウザデフォルトスタイル</del></p>
<p><del class="sample3">&lt;del&gt;要素の underline の色変更</del></p>
</div>

<style>
.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em 1.4em;
	}
.mihon p {
	font-size:1rem;
	line-height:2.8;
	margin:0}
a.sample1 {
	-webkit-text-decoration-color:rgb(255,0,255);
	text-decoration-color:rgb(255,0,255)}
ins.sample2 {
	-webkit-text-decoration-color:#0ff;
	text-decoration-color:#0ff}
del.sample3 {
	-webkit-text-decoration-color:red;
	text-decoration-color:red}
</style>

次回予告

次回は、text-decoration-styleプロパティを使おう。
これは、text-decoration のラインの「スタイル」を「二重線」「点線」「波線」などに指定できます。