単位と色について
今回はスタイルシートを書く上で必要な単位や色の指定方法について紹介します。
WEBの世界ではセンチメートルとかミリメートルといった単位はほとんど役に立ちません。
よく使われるのはピクセルとか％といった単位です。
色も光の3原色の組み合わせを16進数で表現します。
これらの特徴を覚えて使いこなせるようになりましょう。
絶対に知っておきたい単位
WEBの世界で使われる単位もいろいろありますが、今回はその中で最も重要だと思われる3つを紹介します。
それは、％（パーセント）、px（ピクセル）、em（イーエム）です。
1つ目は％です。
これは皆さんのよく知っている％となんら変わりありません。
基準となるものに対して何％かを表します。
結構あいまいなので、厳密なレイアウトの調整にはあまり向きません。
可変的なレイアウトを組むときや、文字の大きさ、画像のサイズを調整するときに使います。
2つ目はpx（ピクセル）です。
デジカメの画素を表すときなんかにも使いますね。
WEBの世界ではディスプレイの点1つの大きさのことを言います。
ペイントソフトなどで絵を描いて拡大していくと、そのうち正方形の集まりであることが分かってきますが、
その正方形1つの大きさが1ピクセルになります。
ピクセルは非常に細かく設定でき、画面の拡大縮小などの影響をほとんど受けません。
そのためレイアウトの調整や、デザインを崩したくないときに使うと有効です。
ただし、文字の拡大ができないため、あまり小さい文字を使ってしまうと
使っているディスプレイによっては読めなくなってしまいます。
3つ目はem（イーエム）です。
これはMの高さを基準とした単位です。
その場所で使われている文字の大きさが基準となるので、
場所によって同じ2emでも大きさが変わります。
文字の大きさや行間、インデントの調整などに使うことが多いです。
レイアウトにはあまり向きません。
フォントサイズの拡大縮小に対応できます。
文字のサイズについて
単位を指定する機会はよくありますが、その中でも文字の大きさは非常に重要です。
大きさの指定を間違えると、最悪読めない場合があるからです。
サイズの指定には上で紹介した3つの単位が使用できますが、
pxを使うときには特に注意が必要です。
他の2つは文字サイズの拡大に対応しているので、見えなければ拡大して読むことができますが、
pxは拡大ができないので、読めないこともあります。
よほどデザインにこだわるのでなければpxを使うのは控えましょう。
さて、文字の大きさの指定方法はもう1つあります。キーワード指定です。
文字通りキーワードで文字の大きさを指定します。キーワードは
xx-small , x-small , small , medium , large , x-large , xx-large
の7つで段階的に大きくなっていきます。
キーワード指定も文字サイズの拡大縮小に対応できます。
さらにどんなに縮小してもきちんと見える大きさを確保してくれます。
文字サイズにとくにこだわらないなら、お勧めの指定方法です。
色の指定方法
WEBの世界では色はRGB（R=赤、G=緑、B=青）で表現し、0〜Fまでの16字を使い、6桁で表現します。
プロパティの値として指定するときは頭に#をつけます。
例えば白は#FFFFFF、黒は#000000、赤は#FF0000、緑は#00FF00、青は#0000FFで表現できます。
大抵のホームページ制作ソフトには色をこの6桁に変換してくれる機能がついているので、
色の指定で迷うことは少ないです。
文字と同じようにキーワード指定もできるようですが、数が限られるし、覚えるのも大変なので
お勧めはしません。
色の指定をするときには１つ気に留めておかなければならないことがあります。
それはディスプレイによって色が違って見えることです。メーカーが違えばもちろんのこと
同じメーカーでも明るさの設定などによって色が違ってきます。
だから、どんなに自分が素晴らしいと思う配色をしても、
自分が作った通りに見える人はあまりいないことを覚えておきましょう。
とくに文字色と背景色が似たような色のときは注意が必要です。
自分のパソコンではちゃんと読めても、他のパソコンだと読めないことがあります。気をつけましょう。
WEBセーフカラーについて
最近のパソコンはフルカラー表示ができるものがほとんどですが、世の中には256色しか表示できない パソコンを使っている人もいます。その人がフルカラー画像を見ると表示が変になってしまいます。 それを避けるためにあるのがWEBセーフカラーと呼ばれる256色です（厳密には216色）。 256色しか表示できないパソコンを使っている人は少数派なのであまり気にする必要はありませんが、 ロゴやテキストなど色数が少ない部分に使うとより”やさしい”サイトを作ることができます。
今回は単位や色について書きました。単位や色の指定方法は他にもありますが、
ここで紹介したものだけ覚えておけば困ることは余りありません。
実際どのように見えるのかは自分で試してみましょう。
他のパソコンをつかって見比べるとその差がよく分かると思います。
余裕があれば他のパソコンを使って見え方のチェックをしたいものです。