ブログデザインのためのCSSレイアウト 3 id と classの違いと合わせ技の記述
前回から#wrapperとか#flashとか#mainとか当たり前のように記述していましたが、CSSの基本ですのでもう一回おさらいしておきます。
普通、CSSのとっかかりとしては、
div{font-size:12px}
のように、HTMLの基本であるタグに対しての装飾を最初に覚えます。
しかしタグ単位での装飾（プロパティ）だけではレイアウトデザインには足りません。
そこで、idとclassが登場します。
簡単にその２つの違いを説明すると、
- id = 各ページに1回しか使えない。
CSSでは # をつけて指定する。 - class = 各ページに何度でも使える。
CSSでは .（ピリオド）をつけて指定する。
ということになります。
idもclassもどのHTMLタグに使ってもOKですが、idは各ページ1回しか使えないのでdivなどのレイアウトに使用するタグにつけるのが普通です。
また、idとclassは併用できます。
ひとつのHTMLタグに対して idとclassの両方を一度に使ってもOKです。
ただ、同じ装飾（プロパティ）がかぶった場合の優先順位はあります。
記述の例
●こんなCSSがあったとして
div
{font-size:12px;color:blue;} ←文字サイズ12px、文字色を青#main
{border:5px double #000000;color:green;}←二重罫線で囲み、文字色を緑.red
{text-decoration:underline;color:red;}←下線をつけて、文字色を赤
●HTML
●<div>divタグだけの装飾</div>
●結果→
●<div id="main">id属性が加わった場合</div>
●結果→
●<div id="main" class="red">id属性＋class属性の合わせ技</div>
●<div class="red">classタグだけの装飾</div>
●結果→
注目は id="main" class="red" の場合です。
２つの属性それぞれが適用された結果、かぶったcolorの指定は i d が 優 先 されています。(図：上）
かぶりあわない部分（borderとtext-decoration）は両方とも適用されました。
●CSSの指定はもっと細かくできる
例えばこんな指定も可能です。
#main p{text-decoration:underline;color:red;}
これは、<xxx id="main">の中に出てくる<p>にのみこの指定を適用する、という意味になります。(xxx はなんらかのタグ。divが一般的ですが、tableとかでもOK）
<xxx id="main">から外れた部分の<p>には適用されません。
さらに入れ子にすることもできます。
#main p.red a{text-decoration:none}
これだと<xxx id="main">の中の<p class="red">の中の<a>タグにのみ指定されます。
半角スペースで区切っていくとどんどん入れ子構造になっていくわけです。
また、その他に、複数のclassを１つのHTMLタグに指定することも可能です。
.size
{font-size:12px;} ←文字サイズ12px.keisen
{border:5px double #000000;}←二重罫線で囲み.red
{color:red;}←文字色を赤
というCSSがあったとき、
<p class="size keisen red ">３つのクラスを指定</p>
というように、class=" "の間に半角スペースを入れて記述すると複数のclassの装飾を指定できます。
●スタイルシート自体の優先順位
スタイルシート自体にも優先順位があります。
スタイルシートが記述できる場所は、
１．外部書類（xxx.css)
<link rel="stylesheet" href="xxxx.css" type="text/css" />
で読み込ませる。
２．HTMLの<head>部分
<style> <!– –> </style> の中に記述。
３．HTMLタグ内
タグの中に style="xxx:xxx;xxxx:xxx;" というようにずらずら書いていく。
の3つです。
基本「後から読み込まれたほうが優先」です。
なので、最も優先順位が高いのが３になります。
１と２についてはhead部分にどちらを先に書くかで変わってきます。
<style> <!– body{xxx:xxxx} –> </style>
<link rel="stylesheet" href="xxxx.css" type="text/css" />
だと１（外部ファイル xxxx.css の記述）が優先ですし、
<link rel="stylesheet" href="xxxx.css" type="text/css" />
<style> <!– body{xxx:xxxx} –> </style>
にすると２のほうが優先です。