実例２（３段組）の解説
今回は、
『HTML＋CSS 実例２』を
詳しく解説していきたいと思います！
この実例２は３段組のレイアウトでしたね。
このソースが理解できるようになると、
大分色々なことに応用出来ると思います。
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>
前回の通りです。
<div id="○○○"> </div>
で、各部位をマークアップし構造化しているんですね。
この○○○の部分は、各部位の名前だと思ってください。
自分のわかりやすい名前にして良いでしょう。
図で表すとこんな感じですね↓
まだ、HTMLの記述通り順番に表示されます。
それを、CSSでマークアップした各部位をレイアウトしていくんですね。
CSS↓
#container {
width: 700px;
margin-right: auto;
margin-left: auto;
}
#header {
width: 700px;
height: 50px;
}
#main {
width: 550px;
height: 500px;
float: right;
}
#content {
float: left;
height: 500px;
width: 400px;
}
#right {
float: right;
height: 500px;
width: 150px;
}
#side {
float: left;
width: 150px;
height: 500px;
}
#footer {
clear: both;
height: 50px;
width: 700px;
}
※CSSは分かりやすくするために１部前回記事より削ってます
<div id="○○○"></div>
をCSSで指定するときは上記ソースのように #○○○ とします。
上記CSSソースで各部位をレイアウトすると以下の図のようになります。
ここからは、図とCSSを見ながら解説を聞いてくださいね。
それぞれのwidthとheightは幅と高さの指定です。
しっかりmainとsideがcontainerの幅以内で収まるように、
contentとrightがmainに収まるように指定されてますね。
floatで左右の回り込みを指定します。
まず、mainを右にsideを左に指定して、２段組にします。
つぎに、mainの中のcontentとrightをそれぞれ左右に指定することで、
３段組のレイアウト表示にしているんです。
そして、footerのclear:both;で両方の回り込みを解除することで、
このようなレイアウトが完成になるんですね。
あと、containerのmargin-right:auto;とmargin-left:auto;は、
ページをブラウザの常に中央に表示するために指定しています。
詳しい解説のはずがかなりザクッとした感じになってしまいました（汗）
少しやってみるとそんなに難しくないことがわかると思うんですが…。
分からないところはコメントで聞いてくださいね☆
過去記事の関連記事は
⇒『HTML＋CSS 実例２』
▼ 稼げる情報ランキングはこちら
