2ボックス(header_a、b)-2ボックス(main、nav)-footer

完成イメージ)

2header-2-1footer カラムレイアウト - いまさらHTML,CSS入門講座 -

実際のXHTMLファイルの表示はこちら


  1. body要素に728pxの横幅(width)を指定し、上から順に、2つのボックスのid="header_a"に200px、id="header_b"に528pxの横幅を指定。
  2. 2つのボックスのid="main"に578px、id="nav"に150pxの横幅を指定。
  3. id="footer"に728pxの横幅を指定しています。

※記述例の便宜上各ボックスに高さ「heigh」と背景色「background」を設定しています。

スタイルシート記述例)

*{
margin: 0;
padding: 0;
}
body{
width: 728px;
}
#header_a{
float: left;
width: 200px;
background: #c0c0c0;
height: 100px;
}
#header_b{
float: left;
width: 528px;
background: #eeeeee;
height: 100px;
}
#main{
float: left;
width: 578px;
background: #ededdd;
height: 300px;
}
#nav{
float: left;
width: 150px;
background: #f5f5dc;
height: 300px;
}
#footer{
clear: both;
width: 728px;
background: #c0c0c0;
height: 100px;
}

本文記述例)

<body>
<div id="header_a">id="header_a"</div>
<div id="header_b">id="header_b"</div>

<div id="main">id="main"</div>
<div id="nav">id="nav"</div>

<div id="footer">id="footer"</div>
</body>

このエントリーをはてなブックマークに追加


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system