<div>タグはブロック分けのhtml
ホームページのhtmlソースを見てみると、<div>というhtmlタグが頻繁に出てきます。
この<div>タグは、開始タグ<div>と終了タグ</div>とで囲み、ホームページのレイアウトを区画化してブロック分けをする際に使います。
例えば、当ホームページでは、この<div>タグを使って、ヘッダーやコンテンツの部分、サイドバーなどをブロックわけしています。
bodyの部分がモニター画面に表示される全体とすれば、<div id="outer"></div>で囲まれた部分がホームページの全体にあたります。 また、<div id="header"></div>で囲まれた範囲がヘッダー、あるいは<div id="content"></div>が本文のコンテンツの部分など、それぞれにブロック分けがされています。
概ね、全体を覆うouterやwrapperなどの一番大きなdiv要素でひとつ、それをヘッダーやコンテンツ、フッターなどで分割して３つか４つ、さらにヘッダーなどそれぞれの部分で２つか、３つぐらいづつのブロック分けをする程度がちょうどよいと思います。
CMSなどでサイトを構築した際、コメントやタグなど多種多様な機能が用意されているため、ブロック分けされる箇所も複雑になりがちですが、空のブロック要素や無駄なブロック分けはできるだけ作成しないことをおすすめします。
ブロック分けがされているので、何かあるのかな？と探ってみても、特に何もなかったという場合、検索エンジンのクローラーもがっかりして帰ってしまうかもしれません。意味のないdiv要素は作成せず、すっきりした状態で保つようにしましょう。
また、<div>タグの後ろに、id や class などが出てきますが、id はそのページで１度しか使わないブロック要素に使い、class は何度も使う要素に対して使います。
例えば、ヘッダーは１ページに１度しか使わないので、idで指定して<div id="header">を使用したり、サイドバーのタイトルの部分などは何度も使うので、div classを使うといった感じになります。
<div>要素に適用させるデザインはスタイルシート側で指定
この<div>要素に個別のid属性やclass属性を指定し、それぞれのブロック内でのみ適用される文字の大きさや色、背景色などのデザインを個別にスタイルシート側で指定することができます。
- div id → id属性を割り当ててスタイルシートで別に指定
- div class → class属性を割り当ててスタイルシートで別に指定
例えば、ヘッダー部分の文字を中央寄せにしたい場合、まずは div に header という id を指定して、ヘッダー部分を<div id="header"></div>として囲い、このヘッダー部分のみに適用されるデザインをスタイルシートの側での対応させて指定します。
【html上での記述】
<div id="header">ヘッダー部分</div>
【対応するスタイルシート側での設定】
#header {text-align: center;}
【class属性の例】
<div class="header">タイトル部分</div>
【対応するスタイルシート側での設定】
.header {text-align: center;}
このように、id属性で指定した場合はスタイルシートで #（シャープ）を記述して指定しますが、class属性で指定した場合は .（ドット、ピリオド）を記述して指定します。
→ スタイルシートの作り方
中央よせだけではなく、背景の色彩やボーダー線の大きさや種類、文字の色彩など、さまざまな指定をスタイルシート側で設定できます。
→ cssの一覧
上の例の場合、中央寄せはヘッダー部分のみに適用されますので、他のdiv要素には適用されません。
けれども、このヘッダー部分自体も囲い込んでいる、さらに大きな<div id="outer"></div>の部分で中央寄せを指定した場合、その内側に含まれるヘッダー部分やコンテンツの部分にも適用されます。
■親要素と子要素
この大きなdiv要素を親要素、小さなdiv要素を子要素といいますが、親要素で指定している内容は子要素にも適用されるものの、子要素の方で個別に指定している場合はそちらが優先されます。
つまり、子要素は親要素の内容をモロに受けるものの、子要素が独自に指定することでそれを拒否することができ、一方で子要素間では影響をうけないということです。
例えば、上の親要素の<div id="outer">で文字色を赤に指定していた場合、子要素である<div id="header">の部分にも自動的に赤が適用されますが、この<div id="header">の部分で個別に黒色を指定した場合はそちらが優先されて黒で表示されます。
ちなみに、ここでは id="header" と指定していますが、任意の文字列を指定できますので、id="haed"でもid="hoge"でも、自分でわかりやすい任意の文字を記入して、スタイルシートの方で対応させることができます。