メイン可変2カラム右メニュー(上に1ボックス)

CSS source

body {
    margin: 0; /*ボーダーから外側の余白(初期化)*/
    padding: 0; /*ボーダーから内側の余白(初期化)*/
}
#header {
    width: 100%; /*ヘッダーの横幅*/
    height: 20px; /*ヘッダーの高さ*/
    background-color: #808080; /*ヘッダーの背景色*/
}
#navi {
    width: 100%; /*ナビゲーションの横幅*/
    height: 20px; /*ナビゲーションの高さ*/
    background-color: #E6C46A; /*ナビゲーションの背景色*/
}
#container {
    width: 100%; /*コンテナの横幅*/
    background-color: #CADBFF; /*コンテナの背景色*/
}
#contents {
    margin-right: 200px; /*右マージン(右外側余白)*/
    background-color: #F6F6F6; /*メインの背景色*/
}
#menu {
    position: absolute; /*親ボックス(ここではウィンドウ全体の左上が基準位置)に対して絶対配置*/
    right: 0; /*基準位置の右からの距離*/
    top: 40px; /*基準位置の上からの距離(ここではヘッダー+ナビゲーションの高さ)*/
    width: 200px; /*メニューの横幅*/
    background-color: #75BAFF; /*メニューの背景色*/
}
#footer {
    width: 100%; /*フッターの横幅*/
    color: #FFFFFF; /*フッター内の文字色*/
    background-color: #171717; /*フッターの背景色*/
}

HTML source

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

上に戻る