CSSの概略ー色の指定方法

03/06/2020

CSS入門アイキャッチ

CSSのことを大まかに理解するための概略です。色の指定方法についてです。

色の指定方法

CSSで色を指定するには、以下の8つの方法があります。

16進数で指定する【#RRGGBB形式】

「#」に続けて、RGB(Red, Green, Blue)の各値を2桁ずつの16進数で示します。たとえば、赤を指定する場合には「#ff0000」となります。

見出しの背景を赤に指定するときの例

h1 { background-color: #ff0000; }

16進数で指定する【#RGB形式】

上記の方法に似ていますが、RGBの各値をそれぞれ1桁ずつの16進数で表します。この値は、指定したRGBの各1桁の値を2つ続けて並べた数値として解釈されて表示されます。

たとえば、「#f36」と指定した場合には、「#ff3366」を指定したのと同じ結果になります。赤を指定する場合には「#f00」となります。

見出しの背景を赤に指定するときの例

h1 { background-color: #f00; }

10進法で指定する【rgb(n,n,n)形式】

rgbに続く()の中にRとGとBの10進数の値をそれぞれ「,」で区切って示します。RGBの各値は0~255の範囲で指定することができます。

たとえば、赤を指定する場合には「rgb(255,0,0)」となります。

見出しの背景を赤に指定するときの例

h1 { background-color: rgb(255,0,0); }

%で指定する【rgb(n%,n%,n%)形式】

rgbに続く()の中にRとGとBのパーセントの値をそれぞれ「,」で区切って示します。RGBの各値は0%~100%の範囲で指定することができます。

たとえば、赤を指定する場合には「rgb(100%,0%,0%)」となります。

見出しの背景を赤に指定するときの例

h1 { background-color: rgb(100%,0%,0%); }

10進数+透明度で指定する【rgba(n,n,n,a)形式】

rgb(n,n,n)形式に透明度(a=alpha)を加えた形式です。4つ目の値として0~1の範囲が指定でき、0は、完全に透明、1は完全に不透明となります。

たとえば、半透明の赤を指定する場合は「rgba(255,0,0,0.5)」となります。

見出しの背景を赤に指定するときの例

h1 { background-color: rgba(255,0,0,0.5); }

色相・彩度・明度で指定する【hsl(n,n%,n%)形式】

Hue(色相)・Saturation(彩度)・Lightness(明度)で色を指定する形式です。色相はカラーサークル(色相環)における角度(単位なし)で、彩度と明度は%で指定します。

色相-Wikipedia

たとえば、赤を指定する場合は「hsl(0,100%,50%)」となります。

見出しの背景を赤に指定するときの例

h1 { background-color: hsl(0,100%,50%); }

色相・彩度・明度+透明度で指定する【hsla(n,n%,n%,a)形式】

hsl(n,n%,n%)形式に透明度(a=alpha)を加えた形式です。4つ目の値として0~1の範囲の値が指定でき、0は完全に透明、1は完全に不透明となります。

たとえば、半透明の赤を指定する場合は「hsl(0,100%,50%,0.5)」となります。

見出しの背景を赤に指定するときの例

h1 { background-color: hsl(0,100%,50%,0.5); }

色の名前で指定する

CSS3の仕様書で定義されている16の基本色名(HTML4.01で定義されていた16色と同じもの)のほか、約150種類の拡張色名も指定できます。

見出しの背景を赤に指定するときの例

h1 { background-color: red; }

Posted by kiri