全て幅固定の2カラム左メニュー

CSS source

body {
    margin: 0; /*ボーダーから外側の余白を初期化*/
    padding: 0; /*ボーダーから内側の余白を初期化*/
    background-color:#FFFFFF; /*ページ全体の背景色*/
}
#wrapper {
    margin: 0 auto; /*全体の外側の余白(全体のセンタリング)*/
    width: 750px; /*全体の横幅*/
}
#header {
    width: 100%; /*ヘッダーの横幅*/
    background-color: #808080; /*ヘッダーの背景色*/
}
#container {
    width: 100%; /*コンテナの横幅*/
    height:200px; /*コンテナの高さ(※2)*/
    background-color: #CADBFF; /*コンテナの背景色*/
}
#menu {
    float: left; /*左に寄せて、続く内容を右に回り込ませる*/
    width: 200px; /*メニューの横幅*/
    background-color: #75BAFF; /*メニューの背景色*/
}
#contents {
    float: right; /*右に寄せて、続く内容を左に回り込ませる*/
    width: 550px; /*メインの横幅*/
    background-color: #F6F6F6; /*メインの背景色*/
}
#footer {
    clear: both; /*回り込みを解除*/
    width: 100%; /*フッターの横幅*/
    color: #FFFFFF; /*フッター内の文字色*/
    background-color: #171717; /*フッターの背景色*/
}

HTML source

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">ヘッダー</div>
      <div id="container">
        <div id="menu">メニュー</div>
        <div id="contents">メイン</div>
      </div>
      <div id="footer">フッター</div>
    </div>
  </body>
</html>

スタイルシート(CSS)はHTML文書の<head>~</head>の間に挿入するか、外部ファイルで呼び出します。
margin、border、padding、contents、各領域についてこちらのページで少し説明してます。

※2) この例ではメニューとメインの親ボックスのコンテナ(container)の高さを指定しなければ、コンテナはメニューとメインを囲みません。(floatした親ボックスは高さが算出されません。) また、高さを指定しても、メニューやメインの内容がコンテナで指定した高さを超えた場合、やはりきちんと囲んでくれません。コンテナの背景色(#CADBFF)も表示されません。 高さ(height:200px;)の代わりに「overflow:hidden;」「float:left;(コンテナに指定しwidth:100%、次のボックスでclearする)」で高さを戻す方法もあります。 いろいろとややこしいのですが、これは親ボックスがある場合の一例ですので、コンテナは、必要なければ外してくださっても大丈夫です。

上に戻る