元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

CSS入門(色の指定方法)

CSSでは色の指定方法がいくつかあります。その方法について書きます。

キーワード

キーワードで定義された色を指定する方法です。キーワードは、色名やカラーネームと言われます。例えば、プロパティの値に「red」、「green」、「blue」などを指定します。

例として、id名がboxの要素に色を指定します。

<h1 id="box">Hello</h1>
#box{
  color: red;  /* 文字色を赤 */
  background-color: green;  /* 背景色を緑 */
  border:solid 4px blue;  /* ボーダーの色を青 */
}

カラーコード(16進数)

カラーコード(16進数)で色を指定する方法です。16進数とは、数字を「0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F」の16個の英数字で表現する方法です。

#box{
  color: #ff0000;  /* 赤 */
  background-color: #00ff00;  /* 緑 */
  border:solid 4px #0000ff;  /* 青 */
}

解説

16進数で色を指定するときは、プロパティ名: #RRGGBB;のように記述します。「#」は必ず付けます。

6桁の数字を左から2桁ずつに分けて考えます。2桁の数字は、左から「赤=Red」、「緑=Green」、「青=Blue」に対応します。それぞれ「00」~「FF」までの256(=16×16)段階で色を指定します。つまり、赤の256色、緑の256色、青の256色の組み合わせで色を表現します。表現できる色の数は、16,777,216(=256×256×256)色です。

RGBカラーモデル

RGBカラーモデルで指定する方法です。rgb(0, 0, 0)または、rgb(0%, 0%, 0%)で指定します。R(r)=Red、G(g)=Green、B(b)=Blueです。括弧内の数字は、左からr、g、bに対応します。指定できる値の範囲は、「0~255」または、「0%~100%」です。

#box{
  color: rgb(255, 0, 0);  /* 0~255で指定 */
  background-color: rgb(0%, 100%, 0%);  /* 0%~100%で指定 */
}

RGBAカラーモデル

RGBAカラーモデルで指定する方法です。RGBカラーモデルにA(Alpha)が加わります。Alphaとは、不透明度のことです。alphaの指定できる値の範囲は、「0~1」または、「0%~100%」です。

#box{
  background-color: rgba(0, 255, 0, 0.5);  /* または、rgba(0, 255, 0, 50%)*/
}

HSL

HSLで指定する方法です。H=Hue(色相)、S=Saturation(彩度)、L=Lightness(輝度)の3要素で色を指定します。hsl(色相, 彩度, 輝度)のように記述します。

Hue(色相)

色相とは、赤や緑といった色合いのことです。

hの指定できる値の範囲は、「0~360°」です。色相環の角度を指定します。色相環とは、色を環状に配置したものです。120°が緑、240°が青になります。0°と360°は赤です。360より大きい数字の場合は、その値から-360した値になります。マイナスの数字の場合は、その値に+360した値になります。

Saturation(彩度)

彩度とは、色の鮮やかさの度合いことです。

sの指定できる値の範囲は、「0%~100%」です。0%で灰色、100%で純色です。

Lightness(輝度)

輝度は、明るさのことです。

lの指定できる値の範囲は、「0%~100%」です。0%で黒、50%で純色、100%で白です。

#box{
  background-color: hsl(180, 100%, 50%);
}

HSLA

HSLにA(Alpha)が加わります。alphaの指定できる値の範囲は、「0~1」または、「0%~100%」です。

#box{
  background-color: hsla(180, 100%, 50%, 0.5);
}

参考サイト