トップ > スタイルシートデザイン > 枠を分割する
枠を分割する
スポンサード リンク
HTMLファイル、CSSファイルに以下のように記述します。
<html>
<head>
</head>
<body>
<div id="outline">
<div id="header">
</div>
<div id="content">
<div id="main">
</div>
<div id="menu">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<head>
</head>
<body>
<div id="outline">
<div id="header">
</div>
<div id="content">
<div id="main">
</div>
<div id="menu">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
#outline{
width:750px;
margin:0 auto 0;
}
#header{}
#content{}
#main{
float:left;
width:500px;
}
#menu{
float:right;
width:210px;
}
#footer{
clear:both;
}
width:750px;
margin:0 auto 0;
}
#header{}
#content{}
#main{
float:left;
width:500px;
}
#menu{
float:right;
width:210px;
}
#footer{
clear:both;
}
ここでは、メインを左寄せ、メニューを右寄せにしていますが、逆にしたい場合は「float」の値を変更するだけでOKです。
実はこれがスタイルシートデザインのメリットでもあります。
HTMLファイルの中身を変えずにCSSを変えるだけで左右の入れ替えが可能なのです。
メインの<div>を先に書いている場合でも、メインを右側に寄せることが出来ます。
検索エンジンのロボットはHTMLファイルの上からデータを採取するので、これはSEO対策に有効ですね。
また、footerで「clear:both;」を使って回り込みを解除しています。
これを指定しておかないと、レイアウトが崩れることがあるので注意して下さい。
ここで作成した枠組みは以下のようなイメージになります。
outline
※分かりやすいように適当な余白を設定してあります。
header
content
main
menu
footer