HTML＋CSS 実例２
『３段組（３カラム）』のレイアウト
をソースと一緒にご紹介します。
こちらも応用がしやすく、よく使われるレイアウトなので、
参考にしてみてください。
これが、３段組のページですね。
凄く分かりやすい３段組です。
当ブログはテンプレートを使っていますが、
これも、基本は左の３段組のページと同じです。
それではソースです。
HTML↓
<body>
<div id="container">
<div id="header">
<p>タイトルなど</p>
</div>
<div id="main">
<div id="content">
<p>メインコンテンツ</p>
</div>
<div id="right">
<p>バナー広告等</p>
</div>
</div>
<div id="side">
<p>メニュー等</p>
</div>
<div id="footer">
<p>著作権情報など</p>
</div>
</div>
</body>
CSS↓
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000000;
}
#header {
background-color: #CCCCCC;
width: 700px;
height: 50px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#main {
width: 550px;
height: 500px;
float: right;
}
#content {
float: left;
height: 500px;
width: 400px;
}
#right {
float: right;
height: 500px;
width: 148px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
}
#side {
float: left;
width: 148px;
height: 500px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}
#footer {
clear: both;
height: 50px;
width: 700px;
background-color: #CCCCCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
となっています。
前回記事でお話したように、
３段組でも、中央のメインコンテンツから記述出来ている
のがわかると思います。
近いうちに２段組・３段組をまとめて解説していきます。
それまでに、まだの方は
HTML＋CSS 実例１
実例１をテーブルレイアウトと比較してみる
を読んでみてくださいね☆
▼ 稼げる情報ランキングはこちら
