通常の指定方法は?
色の名前や、カラーコードで指定することが一般的。
/* 色の名前で指定 */h1{color:pink;}/* カラーコードで指定 */h1{color:#ccc;}
rgbaプロパティ
色・透明度を指定するすることが出来るプロパティ。
赤・緑・青には0 ~ 255までの数値を指定し、透明度には0 ~ 1までの数値を指定します。透明度は0が0%、0.5が50%、1が100%で数字が小さいほど透明度が高いです。
rgbaジェネレーターを使うことで、10段階で比べてくれるので好きな色を選択できます。
h1{/* color: rgba(赤 , 緑 , 青 , 透明度) */color:rgba(255,0,0,1.0);}h1{/* 透明度が1.0(100%)の場合は省略できる */color:rgba(255,0,0);}
hslaプロパティ
色の他に、彩度や輝度、透明度を指定できる。
値を指定する時の覚え方としては、「Hue(色相)」,「Saturation(彩度)」,「Luminance(輝度)」,「Alpha(透明度)」と、とhslaの頭文字を取った順番になっていると覚えればよい。
色相は0~360の値で指定する。
彩度は、0%が無彩色、100%が純色となります。
輝度は、一番暗い0%から100%に向かって明るくなります。
透明度は、0〜1の間で指定します。70%の場合は0.7という具合です。
h1{/* color: hsla(色相, 彩度, 輝度, 透明度) */color:hsl(180,100%,50%,1);}h1{/* 透明度が1.0(100%)の場合は省略できる */color:hsl(180,100%,50%);}