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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

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);
}

参考サイト

» HTML入門のまとめはこちらです。