独自レイアウト「HTML」、「CSS」と、前ページのレイアウト図とを見比べて、現時点のページレイアウトを理解しておきましょう。

まず「HTML」をご覧ください。いくつか <div>～</div> で囲まれている組みが見つかります。

  • container
    • header
    • navigation
      • sidebar
    • content
    • footer

「container」が一番外側で囲んでいます。 その内側に「header」「navigation」「content」「footer」が並び、「navigation」の中に「sidebar」が含まれます。

前ページのレイアウト図と見比べてみると、ページ全体の“台紙”のような役割を「container」が担い、その上に「header」「navigation」「content」「footer」が配置され、さらに「navigation」の領域内に「sidebar」が置かれています。

通常、「HTML」に記述された各コンテンツは、記述された順番に上から下に向かって配置されます。ところが、このレイアウト図によれば、「navigation」と「content」が左右に並んで配置されています。

それでは「CSS」の41、42行と49、50行をご覧ください：

41  #navigation {    /* メニュー */

42      float:left;

 

49  #content {    /* コンテンツ */

50      float:right;

この「float: left;」は指定した要素を左に寄せ、後に続く内容をその右側に回り込ませ、「float: right;」は指定した要素を右に寄せ、後に続く内容をその左側に回り込ませます。

この結果、「navigation」が左側に、「content」が右側に並びます。

若干の注意としては、42行だけで「navigation」が左寄せされ、続く「content」はその右側に配置されますが、42行だけでは「content」は「navigation」のすぐ右隣に配置されるのに対し、50行は「content」を「container」内で右寄せします。

したがって、「container」「navigation」「content」の幅(width)や余白(padding)の設定によっては横並びになるとは限りません。

次に「CSS」の54、55行をご覧ください：

54  #footer {

55      clear:both;

「clear:both」は floatプロパティで左寄せ、または右寄せを指定された要素に対する回り込みを解除します。

この結果、「footer」が「container」の最下部に“普通に”配置されます。

次へ