前回のエントリーに引き続き、CSSに関する基本的なことをば。

今回は以下の事について触れるので、理解している方は次のエントリーにお進み下さい。

  1. CSSで使える長さの単位
  2. 色の指定方法
  3. スタイルの継承
  4. CSSの適用方法

CSSで使える長さの単位

使える単位は大きく分けて、「絶対単位」と「相対単位」の2つがあります。

絶対単位

  • cm （センチメートル）
  • mm （ミリメートル）
  • pt （ポイント 1/72インチ）
  • pc （パイカ 12pt）
  • in （インチ 2.54cm）

絶対単位での例

p {
 font-size:1pc;
}

相対単位

  • px （ピクセル）
  • em （font-sizeの値を1とする単位）
  • ex （小文字の「x」の高さを1とする単位）
  • ％ （パーセンテージ）

相対単位での例

p {
 font-size:1.2em;
}

px（ピクセル）指定での注意

px指定は、ディスプレイの解像度に依存して大きさが変わるので、相対単位になってますが、大半のブラウザでは「絶対単位」として解釈されるので実質「絶対単位」だと思って問題ありません。

絶対単位指定での注意

文字サイズを絶対単位（px指定含む）で指定する事は、ユーザービリティ上オススメしません。
レイアウトが破綻するとかで絶対指定（px指定含む）している方も居るかもしれませんが、破綻しないように組むのが基本です。
Firefoxなどで極端に文字サイズを大きくした場合までは考慮しなくて良いと思いますが、IEで文字サイズ「大」くらいまでは保てるようにしましょう。

以上の理由などから、文字サイズに関しては相対単位で指定するようにしましょう。

単位の省略とか

値が0の場合は省略出来ます。また、値が1未満の場合下記のように0を省略できます。

p {
 font-size:.8em;
}

色の指定方法

色の指定は、「RGB値」と「キーワード」のいずれかで指定できます。

キーワード指定

p {
 color:red;
}

その他使えるキーワードは下記。
定義されている16色

RGB値（16進数、6桁）

もっともポピュラーな指定方法。
RGB値の各値を6桁の16進数（0～f）で指定します。

p {
 color:#FF0000;
}

最初に「#」が付くので忘れないようにしましょう。

RGB値（16進数、3桁）

RGB値の各値を3桁の16進数（0～f）で指定します。

p {
 color:#F00;
}

最初に「#」が付くので忘れないようにしましょう。
3桁の場合は、二度繰り返した6桁の16進数と同じです。
上記の場合だと、「#FF0000」と同じになります。

RGB値（10進数）

「rgb()」関数を利用して、RGB値の各値の10進数（0～255）を半角カンマ（,）で区切って指定します。

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

ちなみに255以上の値を指定しても、255として解釈されます。

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

10進数と同様ですが、こちらは%で指定します。

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

値が100%より大きくても、100%として解釈されます。
また、色の指定は大文字、小文字の区別が行われないので、#F00と書いても、#f00と書いても問題ありません。

スタイルの継承

スタイルシートでは、親要素に適用したスタイルが子孫要素に引き継がれます。
例えばbodyにcolor:blueと指定した場合、後に続く全ての要素の文字色が青になります。

継承される値が「%」や「em」などの相対単位の場合は、基本的に親要素の値に子孫要素の値を乗じた値になります。

例えば以下のような指定では、p要素のフォントサイズ「85%」は、親要素にあたるbody要素の「120%」を基点として計算され、実際には「102%」で表示されます。（2％がブラウザで反映されるかは各ブラウザに依存するので、実際の表示は100％で見えることが多いと思います。）

body {
 font-size:120%;
}
p {
 font-size:85%;
}

値が継承されるのはプロパティによって異なります。
例えば、body要素に背景を指定していてもp要素にその背景は適用されません。
この辺は結構直感的に判断できると思います。

ってか、背景が継承されたら洒落にならないくらい面倒だ...

CSSの適用方法

今回の練習では「head要素の範囲内で、link要素によって外部ファイルを読み込む」でやっていくのでその説明だけ。

<head>から</head>内に以下を記述します。

記述方法

<link href="./css/style.css" rel="stylesheet" type="text/css" />

この場合だと、「（X）HTMLが置かれている場所からCSSフォルダ内のstyle.cssを読み込みに行くよ。」って指定になります。

その他の適用方法については下記を参照して下さい。
CSSの適用方法

次回はショートハンドについて書きます。