CSSの基本仕様 - その2

前回の「CSSの基本仕様」ではCSSの適用方法を記述しました。本当に触りの部分だったので、今回はもう少し具体的なCSSのマークアップの仕方を書いて行きたいと思います。

前回ではCSSの文法にはセレクタとプロパティと値があると言う事と、一つの指定は必ず{}（中カッコ）で囲わなければならないという事を書きました。ひとまずここで前回のおさらいをしたいと思います。文章で書くよりも、ここは簡単に図で説明して行きたいと思います。

これが基本的なCSSの宣言規則です。

セレクタには8種類の指定方法があります。

• ユニバーサルセレクタ
  {}の前に（アスタリスク）を入れる。は全称セレクタともよばれ、これを指定すると全ての要素に指定が反映される。
• 要素セレクタ
  (X)HTML要素名をそのまま書く。指定された要素全てに指定が反映する。
• 子孫セレクタ
  要素名と要素名の間に半角スペースを入れると先頭の要素の中に内包する要素にスタイルが反映される。
• 子供セレクタ
  要素名と要素名の間に「>」（結合子）を入れると、先頭要素直下（親子関係にある）に内包されている要素に適用される。（IE6以前は未対応）
• 隣接兄弟セレクタ
  要素名と要素名の間に「+」を入れると、先頭要素の隣関係（兄弟関係）にある要素に適用される。
• 属性セレクタ
  要素名[id]と指定するとid属性が指定されている要素に対してスタイルが適用される。
• クラスセレクタ
  要素名[class=クラス名]と指定すると、そのクラス名が指定されている要素のみスタイルが適用される。「要素名.（ピリオド）クラス名」と書く方が一般的。
• IDセレクタ
  要素名[id=ID名]と指定すると、そのID名が指定されている要素のみスタイルが適用される。「要素名#（ナンバー）ID名」と書く方が一般的。

また、セレクタは,（カンマ）で区切る事でグループ化する事も出来ます。例えばdiv#headerとdiv#footerの文字サイズを14pxで統一したい場合、

div#header,div#footer{
font-size:14px;
}

と書くと、div#headerとdiv#footerに内包されている文字が同じ14pxで統一されます。

疑似クラスと疑似要素
CSSのセレクタには疑似要素と疑似クラスというCSSで予め予約されているセレクタがあります。これはそれぞれ(X)HTMLの文書構造だけでは指定できないスタイルに適用されるものです。
疑似クラス

• :first-child–ある要素の最初に出現した子要素にスタイルを適用する。
• :link–未訪問のa要素にスタイルを適用
• :visited–訪問済みのa要素にスタイルを適用
• :active–マウスクリックしている要素に適用（IEのみ？）
• :hover–オンマウスしている要素に適用
• :focus–テキスト入力フィールドにフォーカスされている要素にスタイルを適用。

疑似要素

• :first-line–ブロックレベル要素の最初の一行目にスタイルを適用
• :first-letter–ブロックレベル要素の最初の一文字目にスタイルを適用
• :before–要素の前にcontentプロパティの内容を追加する。（IE6以前未対応）
• :after–要素の後にcontentプロパティの内容を追加する。（IE6以前未対応）

これらの疑似要素・疑似クラスはFirefox、Opera、Safariといったモダンブラウザでは全て対応されています。IE7でも一部対応していますが、IE6は未対応のものが多いので使う際は注意が必要です。
もし未対応でもどうしても使いたい場合はハックなどを使ってIE6だけ読み込ませる手段が必要となってきますが…個人的にあまりおすすめはしません。後でハックを取り除くのって、場合によっては結構面倒なので、私は普段からあまりハックには頼らないようにしています。

CSSの継承と優先順位
CSSを書いていて良くあるトラブルとして、文法的には間違いはないのにどうしても指定通りにスタイルが適用されないってこと良くありませんか？
私もCSSかじり始めた頃はよくこういったトラブルで良くなかされました…ひぃ。しかし、これもCSSの特徴と仕組みをちゃんと理解していればまず起こる事はなくなります。ので、ここでCSSの特徴についてご紹介。

CSSの特徴その一「継承」
CSSにはその何もある通り「継承」という特徴があります。分かりやすく言うと、例えばbody要素に
font-size:12px;を指定すると、そのbody要素に内包されている全ての要素にこのスタイルが「継承される」という事です。ですから、全
ページの基本文字を統一する時はbody要素やhtml要素に指定すると、その中に内包されている子要素は全てhtmlないしbody要素の指定を参照し
て表示されます。

CSSの特徴その二「継承による優先順位」
CSSには優先順位というものが約束事であります。そのなかで最も代表的なのがCSS適用先の優先順位です。
CSSの適用先は大きくわけて3つあり、ブラウザ＜ユーザー＜制作者と言ったヒエラルキーがあります。
ブ
ラウザ＜ユーザー＜制作者という事からお分かりになる方もいるかもしれませんが、実はブラウザにもCSSが存在するのです。ちょっと思い出してみてくださ
い。HTMLを書いて、何も装飾を指定していない状態。背景は真っ白で文字は黒、h1要素がやたら大きく（笑）、未訪問リンクの文字は青色、訪問済みリン
クは紫色になっていると思います。これも実はブラウザ側で指定されているCSSなんです。これを私たちWEBの制作者は「ブラウザのCSS初期設定（デ
フォルト）」とか言ったりします。これは優先順位的には一番最下位になるものです。
次に優先されるものはユーザー側で指定したCSSです。多分一
般ユーザーの方はあまりご存じないかもしれませんが、ブラウザのCSSはユーザー側でカスタマイズできるようになっています。IEをお使いの方はもしかし
たら一度は「表示メニュー」＞「文字サイズ」を変更した事がある方などいらっしゃると思いますが、あれが実はユーザー側のCSSです。もしくは自分で
CSSファイルを作ってブラウザに読み込ませることも出来ます。これが「ユーザー側のCSS」という事になります。
最後に最も優先されるCSSが「制作者側のCSS」です。これはまあ分かっての通り、そのホームページを作った人が書いたCSSの事です。これが最も優先されるものになります。
し
かし、この優先順位には例外があったりします。実はCSSの規則で「!important」規則というものがあります。この「!important」を指
定しているプロパティは全てのCSSにおいて優先されるものになるので、もしユーザーがこの「!important」を指定している場合は制作者サイドの
CSSが無効になったります。（まあこういった事はまずないと思いますけど…）

CSSの特徴その三-「個別性による優先順位」
セレクタにも実は優先順位があったりします。ここでは分かりやすくセレクタにポイントを振った箇条書きで説明させていただきます。

1. IDセレクタ–100点
2. クラスセレクタ–10点
3. 要素セレクタ–1点
4. ユニバーサルセレクタ–0点

以上の点数の合計が高い宣言ブロックほど、優先順位が高くなります。
最初に言った「文法的には間違ってないのにスタイルが適用されない」と言ったトラブルはこの辺が原因だと言う事が良くあります。心当たりがある方は一度確認してみた方が良いかもしれません。

CSSの特徴その四-「読み込み位置による優先順位」
CSSは読み込み位置によっても優先順位が存在してます。順的には

1. 要素にstyle属性で指定するインラインスタイル
2. 内部スタイルシート（head要素内に記述する）
3. 外部スタイルシート

です。
しかし、前回では書きませんでしたが、XHTML1.1ではstyle属性は非推奨属性とされています。という事は、将来的な事を考えてみ
るとstyle属性によるCSSの指定はやらない方が後々楽です。なので実質は1と2だけ頭に入れておいて、3は使わないとしておいた方が良さそうですね。

というわけで、今回もまた長ったらしい記事を書いてしまいましたが…お役に立てるないようだったでしょうか？
CSSは工夫と発想の転換でいろいろ出来るので、興味がある方はやってみてください。