CSSの『currentColor』を知っていますか。
今回は『currentColor』とは何なのかということからその使い方、使用例について詳しく解説していきます。
結論：currentColorは色(color)を指定する変数のように使える値
『currentColor』は色(color)を指定するための変数のように使える値になります。
変数ということで、currentColorは値の1つですが、特にcolorを指定する際に必要な値になります。
具体的に『currentColor』は同じ要素の中で指定されているcolorと同じcolorを指定できたり、親要素で指定されているcolorと同じcolorを指定できたりします。
currentColorはcolorの値の1つなので、colorだけではなく、borderやbackgroundといったプロパティでも使用することが出来ます。
それでは具体的にどのように『currentColor』を使っていくのかを使用例と共に解説していきます。
使用例1：テキストとボーダーの色を合わせる場合
まず1つ目の『currentColor』の使用例として、テキストとボーダーの色を合わせる方法があります。
下記のコードを見てください。
<span>
サンプル
</span>span {
color: red;
border-bottom: 1px solid currentColor;
}
HTMLファイルにはspanタグを使い、『サンプル』というテキストを用意しました。
CSSファイルにはspanタグをセレクタとして、プロパティ『color』で値として『red』を指定し、それに加え、『border-bottom: 1px solid currentColor;』を記述しました。
上記の画像を見ての通り、border-bottomのcolorの値はcurrentColorと記述されていますが、反映されている色は『red』になっています。
このことから分かるように、同じセレクタで先に指定されているcolorの値と同じ値が『currentColor』では指定できるようになります。
テキストとボーダーの色を合わせたい場合には『currentColor』で指定してみましょう。
使用例2：親要素と子要素で同じ色を指定する場合
2つ目の使用例として、親要素と子要素で同じ色を指定する方法があります。
下記のコードを見てください。
<p>
これは<span>サンプル</span>です。
</p>p {
color: red;
}
span {
color: currentColor;
}
HTMLファイルでは親要素としてpタグでテキストを記述し、『サンプル』という部分をspanタグで囲むことで、spanタグを子要素とする構成のテキストを用意しました。
CSSファイルではpタグをセレクタとして、プロパティ『color』で値として『red』を指定し、spanタグをセレクタとした場合は、プロパティ『color』で値として『currentColor』を指定しました。
上記の画像を見ての通り、子要素のspanタグのcolorの値はcurrentColorと記述されていますが、反映されている色は『red』になっています。
このことから分かるように、親要素で指定したcolorの値と同じ値を子要素で『currentColor』と記述すると、反映させることが出来ます。
親要素と子要素のcolorの値を合わせたい場合は『currentColor』を指定してみて下さい。
今回はCSSの『currentColor』とは何なのか、その使い方について具体例を交えながら解説していきました。
普段のcolorを指定する方法と少し変わっていたことはあると思いますが、決して難しいことではありません。是非、『currentColor』を活用してみて下さい。
