ヘッダー・フッターの設置

このページで言うと、ヘッダー部分とはタイトルとグローバルナビが表示されている部分、フッター部分はコピーライト記載部分になります。

[HTMLの記述]

  1. <div id="wrap">  
  2.     <div id="header">  
  3.         タイトルなど   
  4.     </div><!-- /header -->  
  5.     <div id="inner">  
  6.         ここに左右の内枠を作ります。   
  7.     </div><!-- /inner -->  
  8.     <div id="footer">  
  9.         コピーライトなど   
  10.     </div><!-- /footer -->  
  11. </div><!-- /wrap -->  

[ブラウザ上の表示]

タイトルなど
ここに左右の内枠を作ります。
コピーライトなど
（分かりやすくするため、高さ、色、枠線をつけています）

DIVタグは幅の指定をしない場合、記述した部分の範囲内（上の例では外枠780pxの範囲内）で100％表示されます。このような形で左右に寄せない部分は必ず出てくるものですので、左右の枠を作り始めてHTMLソースがゴチャゴチャしてくる前に、あらかじめ作っておきましょう。

なお上の例では、ヘッダー、フッターとも左右の余白を取らないよう、左右の余白を指定している「<div id="inner">～</div>」の外側にそれぞれを記述しました。ヘッダー、フッターの左右両端にもメイン部分同様に余白を設けたい場合は、それぞれを「<div id="inner">～</div>」の内側に記述してください。