Appendix 単位や色など

単位 CSSで使える単位。

CSSで使える単位は以下のものがある

相対単位
単位 説明
em 適用要素の font-size を「1」とした倍率
(font-size プロパティに em を使用する場合は 親要素の font-size に対する倍率)
ex 適用要素の小文字の「x」の高さ (x-height)を「1」とした倍率
ch 適用要素の「0」の幅を「1」とした倍率 CSS3　新
rem ルート要素 (html要素)の font-size を「1」とした倍率
(ルート要素の font-size で使うと初期値対する倍率) CSS3　新
vh ビューポートの高さ (ブラウザの高さ)の 1/100を「1」とした倍率 CSS3　新
vw ビューポートの幅 (ブラウザの幅) の 1/100を「1」とした倍率 CSS3　新
vmin ビューポートの高さ、または幅の小さい方の 1/100を「1」とした倍率 CSS3　新
vmax ビューポートの高さ、または幅の大きい方の 1/100を「1」とした倍率 CSS3　新
絶対単位
単位 説明
px ディスプレイの 1 デバイスピクセル
(表示しているデバイスによって異なる)
mm 1 ミリメートル
ch 適用要素の「0」の幅を「1」とした倍率 CSS3　新
cm 1 センチメートル (10 ミリメートル)
q 1 ミリメートルの 4 分の 1 (1 センチメートル の 1/40) CSS3　新
in 1 インチ (2.54 センチメートル)
pt 1 ポイント (1 インチの 1/72)
pc 1 パイカ (12 ポイント)
パーセンテージ値
単位 説明
% パーセンテージ (%) による割合 (基準値はプロパティによって異なる)

色コード CSSで使える色のコード。

CSSで使える色のコードは以下のようなものがある。

色名
主な値 説明 実動例
black #00000 と同等
silver #c0c0c0 と同等
gray #808080 と同等
white #ffffff と同等
maroon #800000 と同等
red #ff0000 と同等
purple #800080 と同等
fuchsia #ff00ff と同等
green #008000 と同等
lime #00ff00 と同等
yellow #808000 と同等
navy #000080 と同等
blue #0000ff と同等
teal #008080 と同等
aqua #00ffff と同等
orange #ffa500 と同等
キーワード
主な値 説明
transparent 透明
currentcolor 要素のcolor の値と同等 CSS3 新
RGB値とRGBA値
主な値 説明
16進数記法 #RRGGBB 「#」に続く6個の16進数文字(赤2桁、緑2桁、青2桁)を記述
(例： #ffcc00)
関数記法 rgb(R, G, B) 「rgb」に続く3個の整数値(0 ~ 255)、
または、パーセンテージを半角カンマ区切りで記述
(例： #rgb(255, 110, 0))
16進数記法 #RRGGBBAA 「#」に続く8個の16進数文字(赤2桁、緑2桁、青2桁と透明度2桁)を記述 CSS3 新
(例： #ffcc0080)
関数記法 rgb(R, G, B, A) 「rgba」に続く4個の整数値(0 ~ 255)、
または、パーセンテージを半角カンマ区切りで記述 CSS3 新
(例： #rgba(255, 110, 0, 0.5))
HSL値とHSLA値
主な値 説明
関数記法 hsl(H, S, L) 「hsl」に続く3個(色相、再度、明度)を角度の整数値(0 ~ 360)、
または、パーセンテージを半角カンマ区切りで記述 CSS3 新
(例： #hsl(160, 40, 240))
関数記法 hsla(H, S, L, A) 「hsl」に続く3個(色相、再度、明度)を角度の整数値(0 ~ 360)、
または、パーセンテージを半角カンマ区切りで指定し、
最後に透明度(0 ~ 1) CSS3 新
(例： #hsla(160, 40, 240, 0.5))

全プロパティで使える値 どのプロパティでも使える。

親要素の値を継承させる値がある。

値 説明
inherit 親要素の値を継承する