6. CSS のパラメタ

SIZE

フォントやマージン、パッディングの大きさなど、長さは基本的に em単位 の数字で指定します。これは相対値で、1em が其処で使われているフォント一文字分（M の高さ = 1クワタ）に対応しています。フォントの大きさ自身に用いる時は、親要素の値が参照されます。

% でも指定できるのですが、この場合、元になる量がセレクタ、プロパティ毎に異なるので、其の説明はここでは措きます。多くの場合は、当該要素自身のフォントの大きさか、表示可能枠の長さを基にとります。

絶対値で、ポイント pt、センチ cm、ミリ mm などでも指定できます。

【使用例】

h1 { font-size: 14px;      /* 文字の大きさ：14 pixels */
     text-indent: 1em }    /* 行頭の字下げ：1 em = 14*1 = 14 px */
h2 { font-size: 12px;      /* 文字の大きさ：12 pixels */
     margin: 0.5em }       /* 四隅にとるスペース：0.5 em = 12*0.5 = 6 px */

絶対単位と相対単位の使い分け

Webコンテンツは、「出力装置が特定できない」と云う特徴が有ります。

相対単位は周囲とのバランスでデザインしますので、出力装置やウィンドウの大きさなどの変化に対して、汎用性が高まります。一方、絶対単位はカッチリとデザインしやすいのですが、特定のウィンドウ・サイズに最適化してしまうと、他のサイズで見たときに、可読性が保てなくなる恐れがあります。

また、絶対単位で指定すると、メンテナンス・修正がし辛い、閲覧者が基準フォントの大きさを指定できないなどの弊害が有ります。アクセッシビリティ accessibility と云う観点からも、特に、フォントの大きさに絶対単位を指定する場合は、よくよく注意が必要です。

私は全てのサイズ指定を、原則 em 単位で行っています。絶対単位で指定する場合は、本当にそれで良いのか注意して下さい。ウィンドウサイズを想定する場合は、小さめのサイズ（８００×６００程度）でも見られるように考えるべきです。

FONT

fontは、「閲覧者のブラウザにどのフォントが関連付けられているか」、「どのフォントが閲覧者の環境にインストールされているか」に依存するため、閲覧者に依存せず、サイト製作者側で一意的に指定する事は困難です。

そこで、個々のフォントをデザイン系統で分類し、その「系統名」で指定できます。「個々のフォント名」を "family name" と呼び、そのフォントが属する「系統」を "geneirc family" （総称）と呼びます。

環境によっては、上に挙げた generic family も使えない場合があります。この時は、ブラウザで「標準」に設定されているフォントが代用されます。通常の GUI ブラウザでは、和文・欧文それぞれに、「通常」と「等幅」のフォントが設定できます。

【記述形式】

p {font-family:'font1','font2',GenericFamily}
                   /* 'font1'が無ければ'font2'を使用
                      それもなければ、generic family を使用 */

複数のフォントが宣言されている場合は、先に記述した方が優先順位が高い。 font1 が無い場合は font2 が利用されます。

【具体例】

code {font-family:'courier new','courier','ＭＳ ゴシック',monospace}

この例では、ブラウザが表示する際、'Courier New'が無ければ'Courier'を使用、無ければ'ＭＳ ゴシック'を使用、何も無ければ系統 monospace に属する台替フォントを使用します。

個別のfontはブラウザによっては利用できないかもしれませんが、一般に「系統名（総称名）」はどのブラウザでも利用出来ることになっています。 'font-family' 宣言の最後にこれを記述しておくと良いでしょう。

フォント名は、引用符 ' で括って記述しなければならない。

フォント名は大文字・小文字・全角・半角で厳密に区別します。

samples> その他のフォント・サンプル

詳しい使い方は、CSS FONT propertiesを御覧下さい。

colors

色は基本的に RedGreenBlue (rgb) の光の強さを、16進数;(0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f) で指定します（#rgb）。

光の三原色：

光の三原色の強度を調整して、全ての色を表現します。

より詳細な色表：

• 216 colors ……r,g,b = 0,3,6,9,c,f;  (r,g,b)=(6*6*6)-colors
• 512 colors ……r,g,b = 0,2,4,6,8,a,c,e;  (r,g,b)=(8*8*8)-colors

実は RGB 指定は「二桁の 16 進数（32 ビット）」で行うように定義されています (#rrggbb)。 16 ビットの #036 は、32 ビットでは #003366 と解釈されるように定義された省略形です。

32ビットでは、１色当たり「１６進数の二桁＝２５６段階」が三色あるわけですから、結果的には 256×256×256 = 16777216 色表現できます。これはＰＣのモニターのトゥルーカラー（フルカラー）に他なりません。しかし、通常はこれほどの色数は必要ありません。

上にあげた色名は、 HTML 4, XHTML 1 で定義されている全 16 色であり、併記した RGB 指定と等価です。

参考：32ビット色表現表

特に、 rgb 値を 0, 3, 6, 9, c, f で指定した 6*6*6 = 216色は、 win. でも mac. でも同じ色に発色する（解釈される）ことが保証された websafecolor です。しかし、全く同じ環境でも、モニタ、ブラウザ、osによって具体的な発色は異なりますし、最近では殆どのモニタがハイカラー（16ビット）以上の表現能力に設定されていますので、セーフカラーの意味もなくなってきました。

また、個々のユーザのモニタにはばらつきがあり、特定するのは不可能です。従って、サイト製作者側で、一意的に物理的なモニタの発色を指定することは現在の所不可能です。製作者は、様々な表示装置が有る事を考慮しなければなりません。色の場合は、背景色と前景色を指定する場合、彩度、明度のコントラストをはっきりさせるようにした方が無難でしょう。

10進数指定とパーセント指定

パソコンのモニタは、 RGB の各々を 0-255 までの２５６段階（２の８乗）で調節し、これを組み合わせて色を表現しています。これは通常トゥルーカラーと呼ばれます。

１色当たり２５６段階が３色で 256*256*256 = 16777216 色。１色当たり１６段階に落としたものをハイカラーと呼び、 16*16*16 = 4096 色表示できます。 CSS の 16 進数表示（16*16 = 256）は、これに対応します。

0-255 の 10 進数及びパーセント値でも RGB 値を指定できます：

rgb(000,255,000) = rgb(0,100%,0) = #00ff00

このときの WebSafeColor の対応表を掲げておきます；

IE、NNなどのブラウザでは独自拡張で色名を決めており、140色以上の色名が共通に決められています。しかし、これらはブラウザ依存で不安定であるので、ここでは具体例を幾つか挙げるに止め、網羅的な紹介はしません：

では次に、ここで紹介したパラメタを値に取るプロパティを幾つか紹介します。