- キーワードによる指定
- red blue cyan green silver black whiteなど英単語で色を指定する方法です。
ブラウザによって色の解釈が微妙に違う場合があるのでこのような抽象的なキーワードによる指定はあまりおすすめできません。
p { color: red; }
- 数値による指定
- RGBカラーを16進数に置き換えて指定します。基本的に#のあとに6桁ですが、各色の2桁が同じ場合は以下のように略せます。
p { color: #ff0000; }
p { color: #f00; }
- 10進数による指定
- CSS3からはRGBを10進数で行うことができます。
p { color: rgb( 255, 0, 0 ); }
- RGBAで透過度も指定
- RGBAはRGBに加えアルファ値(透過度)も指定できます。CSS3以降の仕様です。
1=100%です。
p { color: rgba( 255, 0, 0, 0.5 ); }
- HSLによる指定
- HSLは色相、彩度、明度で指定する値です。
CSS3以降の仕様です。
p { color: hsl( 0, 100%, 50% ); }
- HSLAで透過度も指定
- RGBAと同様にHSL+アルファ値で透過度も指定することができます。
p { color: hsla( 120, 100%, 50%, 0.5 ); }
- opacityプロパティで透過度を指定
- opacityで透過度を指定できます。1=100%です。
a:hover img { opacity: 0.5; }
- transparentプロパティで透明化
- 透明にするにはtransparentという値を使います。CSS3からColor Moduleに組み込まれ、カラー値が指定できるプロパティ全てで有効になりました。
background-color: transparent;
- 関連記事
-
↑