CSS3入門道場

色と透過色

currentColor

要素に割り当てられた現在のcolorプロパティの値を示す便利なプロパティです。サンプルで見てみましょう。

borderの色の指定で、currentColorを指定しました。これは、その要素のcolorの値を意味します。つまり、個々のspanに割り当てたcolorの値となりますので、赤なら赤、青なら青ということになります。こうすることで、個別にborder色を指定しなくて済むようになります。しかし、誠に残念ながら、イエローだけが読めなくなってしまいました…。

実践サンプル

1つサンプルを見ておきましょう。色に(不)透明度を設定できるということは、色々な可能性を持っています(色だけに)。下記のサンプルでは、親要素の色を変えると、子要素の色も変わるというサンプルです。

下記は、親の背景色を赤や青に変更した時のイメージです。

実際のサンプル

地味と言えば地味かも知れませんが、親要素に応じて子要素の色も変わるというのは、何かと便利です。ここで背景色にグラデーションを書けると、更に格好良くなるのですが、それはグラデーションの章で少し形を変えて、改めて見てみます。

Copyright 2015 CSS3入門道場 All Rights Reserved.