10月 102011
 

フォントサイズの単位や各パーツの幅・高さ等の単位、画像サイズの単位等、ホームページでは色々な所で「サイズの単位」(大きさ、長さの単位)が使われています。そのサイズの単位についてをまとめて解説します。

Web上でのサイズの種類

Web上で使われるサイズ単位の種類は大きく分けて2つあります。
相対単位絶対単位です。
では、それぞれについて簡単に見ていきましょう。

相対単位

相対単位とは、その要素のフォントサイズやディスプレイ解像度等によって影響を受ける単位。
具体的には、以下の3つがあります。

em
要素のフォントサイズに対する相対的なサイズ値
ex
要素のx(小文字エックス)のフォントサイズの高さに対する相対的なサイズ値
px
ピクセル。ディスプレイの画素数。 何個分のピクセルを使って表示するかを指定します。

[補足1]
emとexの違い(赤の高さがem、青の高さがex)
emとexの違い

[補足2]
自分のパソコン画面がどのくらいのピクセル数を表示できるかは、「デスクトップ右クリック→プロパティ→設定タブ→画面の解像度」を見れば分かります。 (800×600ピクセル、1024×768ピクセル等と書いてあるはず)

絶対単位

絶対単位とは、ものさしで測れる単位。なはずなのですが、論理解像度の違い等により環境により微妙に大きさが異なることがあるようです。
具体的には、以下の5つがあります。

cm
センチメートル。Webサイト作成ではあまり使われることは無いかも。
mm
ミリメートル。Webサイト作成ではあまり使われることは無いかも。
in
インチ。1インチ=2.54センチメートル。日本での馴染みは少ない。
pt
ポイント。1ポイント=1/72インチ。マイクロソフトWord(ワード)のフォントサイズの単位でもある。
pc
パイカ。1パイカ=12ポイント。日本での馴染みは少ない。

用途別お勧め単位

基本的に、相対単位を使うことをお勧めします。

画像サイズ
px
デジカメで取った写真等も、基本的にはピクセル単位で大きさを表示しています。ホームページ作成者が見せたい様に画像を表示するにはpxが適しています。
文字サイズ
em
ブラウザの文字サイズ変更で大きさが変わり、閲覧者がそれぞれ自分の見やすい環境を選ぶことが出来ます。
レイアウト各パーツ幅・高さ
px
ターゲットとなる画面解像度を決めた後は、幅・高さをpx指定するのが作り手側としては分かり易いです。ただし、他解像度の人のことも考えてデザインしないと、酷くレイアウトが崩れたりすることがあるので注意も必要です。
10月 102011
 

色名称とカラーコードとRGB値をまとめた色見本です。

色名称 カラーコード RGB値(R,G,B) コメント
blanchedalmond #ffebcd 255,235,205
bisque #ffe4c4 255,228,196
moccasin #ffe4b5 255,228,181
peachpuff #ffdab9 255,218,185
navajowhite #eee8aa 255,222,173
wheat #f5deb3 245,222,179
palegoldenrod #eee8aa 238,232,170
khaki #f0e68c 240,230,140
yellow #ffff00 255,255,0
darkkhaki #bdb76b 189,183,107
olive #808000 128,128,0

オレンジ

色名称 カラーコード RGB値(R,G,B) コメント
burlywood #deb887 222,184,135
sandybrown #f4a460 244,164,96
orange #ffa500 255,165,0
darkorange #ff8c00 255,140,0
orangered #ff4500 255,69,0
tan #d2b48c 210,180,140
peru #cd853f 205,133,63
chocolate #d2691e 210,105,30

色名称 カラーコード RGB値(R,G,B) コメント
gold #ffd700 255,215,0
goldenrod #daa520 218,165,32
darkgoldenrod #b8860b 184,134,11
10月 102011
 

色名称とカラーコードとRGB値をまとめた色見本です。

赤・紅

色名称 カラーコード RGB値(R,G,B) コメント
lightsalmon #ffa0a7 255,160,167
darksalmon #e9967a 233,150,122
salmon #fa8072 250,128,114
tomato #ff6347 255,99,71
lightcoral #f08080 240,128,128
coral #ff7f50 255,127,80
crimson #dc143c 220,20,60
red #ff0000 255,0,0

ピンク

色名称 カラーコード RGB値(R,G,B) コメント
pink #ffc0cb 255,192,203
lightpink #ffb6c1 255,182,193
hotpink #ff69b4 255,105,180
deeppink #ff1493 255,20,147
orchid #da70d6 218,112,214
palevioletred #db7093 219,112,147
mediumvioletred #c71585 199,21,133

色名称 カラーコード RGB値(R,G,B) コメント
rosybrown #bc8f8f 188,143,143
indianred #cd5c5c 205,92,92
brown #a52a2a 165,42,42
firebrick #b22222 178,34,34
maroon #800000 128,0,0
darkred #8b0000 139,0,0
sienna #a0522d 160,82,45
saddlebrown #8b4513 139,69,19
10月 102011
 

色名称とカラーコードとRGB値をまとめた色見本です。

色名称 カラーコード RGB値(R,G,B) コメント
mediumorchid #ba55d3 186,85,211
mediumpurple #9370db 147,112,219
mediumslateblue #7b68ee 123,104,238
slateblue #6a5acd 106,90,205
blueviolet #8a2be2 138,43,226
darkviolet #9400d3 148,0,211
darkorchid #9932cc 153,50,204
darkslateblue #483d8b 72,61,139
darkorchid #4b0082 75,0,130
thistle #d8bfd8 216,191,216
plum #dda0dd 221,160,221
violet #ee82ee 238,130,238
magenta #ff00ff 255,0,255 fuchsiaと同一
fuchsia #ff00ff 255,0,255 magentaと同一
darkmagenta #8b008b 139,0,139
purple #800080 128,0,128

10月 102011
 

色名称とカラーコードとRGB値をまとめた色見本です。

色名称 カラーコード RGB値(R,G,B) コメント
palegreen #98fb98 152,251,152
lightgreen #90ee90 144,238,144
lime #00ff00 0,255,0
limegreen #32cd32 50,205,50
forestgreen #228b22 34,139,34
green #008000 0,128,0
darkgreen #006400 0,100,0

黄緑・オリーブ

色名称 カラーコード RGB値(R,G,B) コメント
greenyellow #adff2f 173,255,47
chartreuse #7fff00 127,255,0
lawngreen #7cfc00 124,252,0
yellowgreen #9acd32 154,205,50
olivedrab #6b8e23 107,142,35
darkolivegreen #556b2f 85,107,47

若葉

色名称 カラーコード RGB値(R,G,B) コメント
mediumaquamarine #66cdaa 102,205,170
mediumspringgreen #00fa9a 0,250,154
springgreen #00ff7f 0,255,127

海緑

色名称 カラーコード RGB値(R,G,B) コメント
darkseagreen #8fbc8f 143,188,143
lightseagreen #20b2aa 32,178,170
mediumseagreen #3cb371 60,179,113
seagreen #2e8b57 46,139,87