×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
●回り込み
いわゆる段組．
図のようにブロックを左右に分割するとメインコンテンツを載せる部分とメニュー部分を分けることができます．
回り込ませるためには，2つのブロックに対してfloatを指定します．
float:left; とすると，左に回りこみ，
float:right; とすると，右へ回り込みます．
●HTML
<body>
<div id="contents">
<div id="main">ここにメインコンテンツを書く</div>
<div id="menu">ここにメニューを書く</div>
<div id="footer">copyrightとか書く</div>
</div>
</body>
●CSS
#contents {
background: #FFCC66;
width: 800px;
padding: 10px;
}
#main {
background: #FFFF66;
width: 600px;
float: left;
}
#menu {
background: #FF9900;
float: right;
width: 200px;
}
#footer {
clear: both;
background: #FFFFCC;
}
contentsは全体をくくる枠です．
幅を800pxでつくり，この中に幅600pxのメインコンテンツ部分と幅200pxのメニュー部分を用意．
mainにはfloat:leftで左へ回りこませ，menuにはfloat:rightで右へ．
！！回り込みを指定した場合は，それを解除する必要があります．
ここでは，footerに解除させます．それが clear:both の部分．
解除しないと，表示がおかしくなります．
よく使う手は
.clear {
clear: both;
}
のように，floatを解除するクラスを作って，回り込みをやめる部分に
<br class="clear">とかやる．
上のコードをコピペして作ればわかると思いますよ．
HTMLはbody内しかないけど（ぇ
linkかインポートしてください．
いわゆる段組．
図のようにブロックを左右に分割するとメインコンテンツを載せる部分とメニュー部分を分けることができます．
回り込ませるためには，2つのブロックに対してfloatを指定します．
float:left; とすると，左に回りこみ，
float:right; とすると，右へ回り込みます．
●HTML
<body>
<div id="contents">
<div id="main">ここにメインコンテンツを書く</div>
<div id="menu">ここにメニューを書く</div>
<div id="footer">copyrightとか書く</div>
</div>
</body>
●CSS
#contents {
background: #FFCC66;
width: 800px;
padding: 10px;
}
#main {
background: #FFFF66;
width: 600px;
float: left;
}
#menu {
background: #FF9900;
float: right;
width: 200px;
}
#footer {
clear: both;
background: #FFFFCC;
}
contentsは全体をくくる枠です．
幅を800pxでつくり，この中に幅600pxのメインコンテンツ部分と幅200pxのメニュー部分を用意．
mainにはfloat:leftで左へ回りこませ，menuにはfloat:rightで右へ．
！！回り込みを指定した場合は，それを解除する必要があります．
ここでは，footerに解除させます．それが clear:both の部分．
解除しないと，表示がおかしくなります．
よく使う手は
.clear {
clear: both;
}
のように，floatを解除するクラスを作って，回り込みをやめる部分に
<br class="clear">とかやる．
上のコードをコピペして作ればわかると思いますよ．
HTMLはbody内しかないけど（ぇ
linkかインポートしてください．
PR
この記事にコメントする