XHTML レイアウト

完成イメージ)

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

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


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

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

スタイルシート記述例)

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

本文記述例)

<body>
<div id="header">...</div>

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

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

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


ページトップへ戻る



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


inserted by FC2 system