CSS3入門道場

色と透過色

CSS3では色に関する機能が強化されました。特に透過色は、是非使いこなしたい機能です。

メニュー

参考リンク

ブラウザサポート

本章でのCSS3は、どのブラウザでもサポートしています。なお、CSS Color Module Level 3は、既にW3Cの勧告となっています。

参照:Can I use
CSS3 Colors
CSS currentColor value

復習

CSS2.1までの色の指定方法を復習してみましょう。以下のように書けました。

CSS3では、これらに加えて、幾つかの方式が追加されました。大きな利点は、透過色が指定できるようになったことです。

アルファチャンネル

rgba()

アルファチャンネルと呼ばれる情報を追加することで、透過色(不透明度)を指定することができます。まずは具体例で見てみましょう。下記では、DIV要素の中に「■四角■」という文字を配置し、フォント色を赤の透過色にしています。違いが分かるように背景画像を設定しています。

DIV要素の中に「■文字■」という文字を配置し、また背景画像も設定しています。colorのプロパティでは、rgba(255, 0, 0, 0.4); と指定しています。rgb()ではなく、rgba()となっています。最初の3つの引数は、rgb()の時と同じですが、最後の引数で、不透明度を指定します。 不透明度は、0.0~1.0の間で指定します。透明度ではなく、不透明度と表現していますが、要は0に近づけば近づくほど透明人間になって行きます。0になれば完全に姿を消して、代わりにその背後にあるものがくっきり見えるようになります。文法的には以下のようになります。

上記では、colorプロパティで使用しましたが、何もcolorプロパティ限定ではありません。色を表現する箇所で使用できます。例えば、text-shadowで利用すれば、以下のように

影が透過となります。

さてここで確認しておきたいのは、このアルファチャンネルは、「色」に対して指定していることです。 不透明度の指定と言えば、opacityと言うのもありましたが、opacityの場合は、要素に対するものでした。rgbaを使わず、要素にopacityを適用した場合はどうなるでしょうか?以下のようになります。

赤文字のみならずに、背景画像も透明になってしまいました。もし仮にこのDIVに子要素があったとしても、その子要素も親の影響を受けて、透過が設定されることになります。親に透過が設定してある以上、子はそれより不透過(透明人間から脱出すること)になることはできません(更に透過になることは可能としても)。

では、この例において、「■文字■」という文字には透過を掛けたくない場合、どうすれば良いでしょうか?幾つかやり方は考えられますが、昔ながらの方法は、テキスト用のブロック要素を別途設け、そのブロック要素をposition: relative; などを利用して、背景画像に被せるように表示させればできますね。 別の方法は、背景画像を複数利用できることと透過色を設定したグラデーション(後の章で見ます)を組み合わせれば、簡単にできます。

色を変えれば、簡易版セピア色の背景画像もできそうですね。

Copyright 2015 CSS3入門道場 All Rights Reserved.