CSSで色を指定する形式メモ
投稿日：2016年07月25日
最終更新日：
もくじ
- 16進数カラーコード
- RGBa形式
- HSLa形式
16進数カラーコード
16進数の6桁で色を指定します。赤(Red)、緑(Green)、青(Blue)の3色の強さをそれぞれ16進数2桁(10進数で0～255の256段階)で指定し、これを並べて6桁のカラーコードとします。なお、この形式の場合は先頭にハッシュ記号(#)を付けます。 [CSS] /* 使い方の例 hoge要素の背景色を黄色(#FFFF00)にする */ hoge { background: #FFFF00; } [/CSS] この形式はHTML内で一部分の文字の色を指定するときなどにも使用可能であり、また古くから使われている方式なので、閲覧者が古いブラウザを使用していても対応可能です。但し、透明度の指定には非対応です。
RGBa形式
こちらは透明度の指定にも対応している方式です。赤(Red)、緑(Green)、青(Blue)の3色の強さをそれぞれ10進数1桁～3桁(0～255の256段階)で指定し、さらに透明を0(完全に透明)～1(完全に不透明)の数値で指定します。 [CSS] rgba(赤色成分, 緑色成分, 青色成分, 透明度) /* 完全に不透明な青色を指定 */ rgba(0, 0, 255, 1) /* 半透明(透明度0.5)の黄色を指定 */ rgba(255, 255, 0, 0.5) /* 使い方の例 hoge要素の背景色を半透明(透明0.5)の黄色にする */ hoge { background: rgba(255, 255, 0, 0.5); } [/CSS]
HSLa形式
この形式では、色相(Hue)、彩度(Saturation)、明度(Lightness)、そして透明度を指定します。色相は10進数で0～360の数値を指定し、サイド・明度は百分率(0%～100%)で指定します。透明はRGBaと同様に、0(完全に透明)～1(完全に不透明)の数値で指定します。HSLa形式による色指定はCSS3で実装されたので、古いブラウザではこの形式に非対応な場合があります。 [CSS] hsla(色相, 彩度, 明度, 透明) /* 完全に不透明な赤色を指定 */ hsla(0, 100%, 50%, 1) /* 透明に近い(透明0.3)紫色を指定 */ hsla(300, 100%, 50%, 0.3) /* 使い方の例 hoge要素の背景色を透明に近い(透明0.3)紫色にする */ hoge { background: hsla(300, 100%, 50%, 0.3); } [/CSS]
参考リンク
