八日目！（CSS基本、単位、色）

今回から、CSSの基本内容に入っていきます。前回の投稿で書いたとおり、テキストを読み進めてはいるんですが、内容が頭に入ってない状態ですがなんとか頑張っていきたいと思います。

XHTMLで製作したWEBページはそのままでもデバイスやブラウザで表示できるが、CSS（カスケーティングスタイルシート）利用することで、見た目を詳細に設定することができる。
スタイルシート言語にはいくつか種類があるがWEBデザインの世界で「スタイルシート」といえば、「CSS」を指すのが一般的。

実務的には、CSSを複数のファイルに分けて制作し、読み込み専用のCSSファイルを用意してXHTMLに適用する方法がよく利用される。

現在広く利用されているCSSのバージョンは「CSS2.1」
CSSには音声表現（読み上げ速度、強弱、音を出す方向など）を設定する仕組みも用意されているが、現在のデバイスやブラウザの機能を考えると、まだ一般的ではない。しかし、今後は「見た目」だけではなく「音声」も含めて、適切な表現が求められるようになるかもしれない。

●セレクタ、プロパティ、値
CSSでは「セレクタ」「プロパティ」「値」という3つの用語を押さえておくことが重要。
「セレクタ」はスタイルの適用範囲「プロパティ」はスタイルの種類、「値」はスタイルの具体的な内容や程度。段落（p要素）の文字を赤にする場合は
「p { color: red; }」
と指定しますが、この場合セレクタは「p」、プロパティは「color」、値は「red」。

セレクタは、まずは「h1」や「p」といったXHTMLの要素名と考える。
他にも、IDやクラスのセレクタにしたり、ある要素に含まれる子要素といった書き方も認められている。

プロパティと値はコロンで区切る。プロパティと値のセットは、セミコロンで区切って複数指定できる。
例）
p {
color: red;
font-size: 120%;
line-heighr: 1.5;
}
●コメントの書き方
CSSのソースコードにコメントを記入するには、テキストを「/*」と「*/」で囲む。
コメントは製作者が目印やメモに使うのでスタイルの適用に影響しない。

●指定できる値
CSSのプロパティそれぞれには、「指定できる値」「初期値」「適用できる要素」があらかじめ標準仕様で決められている。たとえば、背景画像の繰り返し方法を指定するための
background-repeatプロパティでは、「repeat」「repeat-x」「repeat-y」「no-repeat」が指定でき、初期値では「repeat」適用できる要素は「すべての要素」となっている。
初期値とはそのプロパティを指定していない場合に自動で設定される値。

任意の値を指定できるものもあり、たとえばフォントサイズを指定するための、font-sizeプロパティでは「120％」「10pt」といった任意の値が指定できます。
値に「0」を指定する場合、単位が省略できる（たとえば「0px」は「0」と書くことができる。）

●利用できる単位
長さ
pt ・・・ポイント（1/72インチ）
pc ・・・パイカ（12pt）
in ・・・インチ（2.54cm）
cm ・・・センチメートル
mm ・・・ミリメートル
px ・・・ピクセル
em ・・・フォントの大きさ1とする単位
ex ・・・小文字「x」大きさを1とする単位

% ・・・パーセンテージ

●色の単位
6桁のRGB値（#rrggbb）、3桁のRGB値（#reb）、カラー名（「red」など17色）が利用できる。

aqua　・・・　水色　・・・　#00ffff
black ・・・　黒　　・・・　#000000
blue ・・・　青　　・・・　#0000ff
fuchsia ・・　紫紅色・・・　#ff00ff
gray ・・・　灰色　・・・ #808080
green ・・・　緑　　・・・　#008000
lime ・・・　黄緑　・・・　#00ff00
maroon・・・　えび茶色・・　#800000
navy ・・・　紺色　・・・　#000080
olive ・・・　オリーブ色・　#808000
orange・・・　オレンジ色・　#ffa500
purple・・・　紫　　・・・　#800080
red ・・・　赤　　・・・　#0000ff
silver・・・　銀色　・・・　#c0c0c0
teal ・・・　青緑　・・・ #008080
white ・・・　白　　・・・　#ffffff
yellow・・・　黄色　・・・　#0000ff

●URL
一部のプロパティでは画像パスなどURLを指定する。「url(.....)」という形式で記述するのが一般的。
例）body { background-image: url(...images/body_bcg.gif); }
●文字列
一部のプロパティでは文字列が指定できる「"...."」（二重引用符で囲む）という形式記述。
例）body:after { content: "ページ本文はここまで";}
今日はここまで。