CSS

色の指定方法（単位）

　CSSで色を指定するには、RGB値で指定する方法の他に、XHTMLで定義されている 16色のキーワードで指定する方法、ユーザーの GUI環境で使用されている色をキーワードで指定する方法の 3種類があります。

RGB 値で指定する方法

　RGB値で色を指定する書式には、以下の 4種類があります。書式はいずれも赤色を指定する場合の例で示しています。

RGB値（16進数、6桁）

　記号「#」に続けて、RGB（赤、緑、青）の各値を 2桁づつの 6桁の 16進数（0～f）で指定します。

RGB値（16進数、6桁）の記述例


body {
	color: #ff0000;
}

RGB値（16進数、3桁）

　記号「#」に続けて、RGB（赤、緑、青）の各値を 1桁づつの 3桁の 16進数（0～f）で指定する書式です。

RGB値（16進数、3桁）の記述例


body {
	color: #f00;
}

　この場合、3桁の 16進数は、指定された R値、G値、B値それぞれを二度繰り返した 6桁の 16進数に変換されて色が表現されます。たとえば、ここで使った「#f00」は、「#ff0000」と等しいことになり、「#ff0000」の色で表現されることになります。

RGB値（10進数）

　rgb(赤, 緑, 青)の形式で、RGB値の各値を 10進数の整数（0～255）を半角カンマ（,）区切りで指定します。16進数の「ff」は 10進数の「255」に相等します。

RGB値（10進数）の記述例


body {
	color: rgb(255, 0, 0);
}

　なお、各値に 0～255 の範囲外の数値が指定された場合は、最小値または最大値に等しいと解釈されます。たとえば「500」と指定しても「255」と解釈されることになります。

RGB値（パーセンテージ値）

　rgb(赤, 緑, 青)の形式で、RGB値の各値をパーセンテージ値（0%～100%）を半角カンマ（,）区切りで指定します。「100%」は 10進数の「255」、16進数の「ff」に相等します。

RGB値（パーセンテージ値）の記述例


body {
	color: rgb(100%, 0, 0);
}

　なお、各値に 0%～100%の範囲外が指定された場合、最小値または最大値に等しいと解釈されます。たとえば「300%」と指定しても「100%」と解釈されることになります。

16色のキーワード（固有のカラー名）

　CSSで指定できるキーワードには、HTML4.01などでも定義されている 16色の「標準デフォルトカラー」（standard default colors）で指定することができます。なお、CSS2.1勧告候補では「 orange 」（#ffa500）が追加され、17色とされている。

16色のキーワード（固有のカラー名）の記述例


body {
	color: red;
}

標準デフォルトカラー 16色+1(orange)

キーワード: 色情報の取得元; Sample

Sample
black: #000000; black

black
gray: #808080; gray

gray
silver: #c0c0c0; silver

silver
white: #ffffff; white

white
navy: #000080; navy

navy
blue: #0000ff; blue

blue
green: #008000; green

green
teal: #008080; teal

teal
lime: #00ff00; lime

lime
aqua: #00ffff; aqua

aqua
maroon: #800000; maroon

maroon
purple: #800080; purple

purple
olive: #808000; olive

olive
red: #ff0000; red

red
fuchsia: #ff00ff; fuchsia

fuchsia
yellow: #ffff00; yellow

yellow
orange: #ffa500; orange

orange

GUIの色のキーワード

　ユーザーが利用している OS の GUI環境で使用されている 28種の「システムカラー」（system colors）をキーワードとして指定することもできます。

システムカラー 28種

キーワード: 色情報の取得元; Sample

Sample
ActiveBorder: アクティブウインドウの枠線; ActiveBorder

ActiveBorder
ActiveCaption: アクティブウインドウのキャプション（タイトル）; ActiveCaption

ActiveCaption
AppWorkspace: MDI（Multiple Document Interface）の背景; AppWorkspace

AppWorkspace
Background: デスクトップの背景; Background

Background
ButtonFace: ボタンの表面; ButtonFace

ButtonFace
ButtonHighlight: ボタンのハイライト; ButtonHighlight

ButtonHighlight
ButtonShadow: ボタンの影; ButtonShadow

ButtonShadow
ButtonText: ボタンのテキスト; ButtonText

ButtonText
CaptionText: キャプション（タイトル）のテキスト; CaptionText

CaptionText
GrayText: 選択不能なテキスト; GrayText

GrayText
Highlight: 選択された項目; Highlight

Highlight
HighlightText: 選択された項目のテキスト; HighlightText

HighlightText
InactiveBorder: 非アクティブウインドウの枠線; InactiveBorder

InactiveBorder
InactiveCaption: 非アクティブウインドウのキャプション（タイトル）; InactiveCaption

InactiveCaption
InactiveCaptionText: 非アクティブウインドウのテキスト; InactiveCaptionText

InactiveCaptionText
InfoBackground: ツールチップの背景; InfoBackground

InfoBackground
InfoText: ツールチップの文字; InfoText

InfoText
Menu: メニューの背景; Menu

Menu
MenuText: メニューのテキスト; MenuText

MenuText
Scrollbar: スクロールバー; Scrollbar

Scrollbar
ThreeDDarkShadow: ディスプレイ上の立体表現の中の暗い影; ThreeDDarkShadow

ThreeDDarkShadow
ThreeDFace: ディスプレイ上の立体表現の中の表面; ThreeDFace

ThreeDFace
ThreeDHighlight: ディスプレイ上の立体表現の中のハイライト; ThreeDHighlight

ThreeDHighlight
ThreeDLightShadow: ディスプレイ上の立体表現の中の明るい影; ThreeDLightShadow

ThreeDLightShadow
ThreeDShadow: ディスプレイ上の立体表現の影; ThreeDShadow

ThreeDShadow
Window: ウインドウの背景; Window

Window
WindowFrame: ウインドウの枠; WindowFrame

WindowFrame
WindowText: ウインドウのテキスト; WindowText

WindowText

Home
HTML
CSS
JavaScript
API
PHP