float: ★;

clear: ★;

CSS 177、180p

  • left
    対象となるボックスを左に配置して、あとに続く内容を右側に回り込ませる。
  • right
    対象となるボックスを右に配置して、あとに続く内容を左側に回り込ませる。
  • none
    対象となるボックスの左右の配置と回り込みはさせない。

※一番下の表のようにヘッター部分とサブメニュー部分に「float: left;」を指定した場合
次のボックスには「float: right;」を必ず指定してください。
指定しないとサブメニューが左によってくれません。

  • left
    左側の要素に対する回り込み（float: left）を解除します。
  • right
    右側の要素に対する回り込み（float: right）を解除します。
  • both
    左側または右側のすべての要素に対する回り込みを解除します。
    この値もっとも使われます。
  • none
    回り込みを解除しない。

最も一般的なホームページレイアウトと
ブログなどで使われているレイアウト2種類を書いたタグです。

一般的なホームページレイアウト

CSS

.box {
width: 600px;
height: auto;
margin: auto;
padding: 0;
background: ]#0000ff:
｝

.header {
width: 600px;
height: 30px;
margin: auto;
padding: 0;
background: #ff0000;
float: left;
}

.sub {
width 200px;
height: auto;
margin; auto;
padding 0;
background: #0000ff;
float: left;
}

.maine {
width: 400px;
height: 100px;
margin: auto;
padding: 0;
background: #008000
float: right;
}

.footer {
width: 600px;
height: 20px;
margin: 0 auto;
padding: 0;
background: #ffcc00;
clear: both;
} 		XHTML

<div class="box">

<div class="header">
ヘッター
<⁄div>

<div class="sub">
サブメニュー
<⁄div>

<div class="maine">
メインメニュー
<⁄div>

<div class="footer">
<⁄div>
フッター
<⁄div>

<⁄div> 		ヤホーやブログなどで使われているホームページレイアウト

CSS

.box {
width: 600px;
height: auto;
margin: auto;
padding: 0;
background: #0000ff;
｝

.header {
width: 600px;
height: 30px;
margin: auto;
padding: 0;
background: #ff0000;
float: left;
}

.sub1 {
width 100px;
height: auto;
margin; auto;
padding 0;
background: #0000ff;
float: right;
}

.maine {
width: 400px;
height: 100px;
margin: auto;
padding: 0;
background: #008000
float: right;
}

.sub2 {
width 100px;
height: 100px;
margin; auto;
padding 0;
background: #800080;
float: right;
}

.footer {
width: 600px;
height: 20px;
margin: 0 auto;
padding: 0;
background: #ffcc00;
clear: both;
} 		XHTML

<div class="box">

<div class="header">
ヘッター
<⁄div>

<div class="sub1">
サブメニュー1
<⁄div>

<div class="maine">
メインメニュー
<⁄div>

<div class="sub2">
サブメニュー
<⁄div>

<div class="footer">
<⁄div>
フッター
<⁄div>

<⁄div>

なぜ土台となる「box」に「background: #0000ff;」を
指定しているかというと、サブメニューにはメインボックスと比べると
書く内容が少ないと思います。ボックスは大きいサイズに合わせようとするので
サブメニューの下に空白が出来てしまします。そこで下地をサブメニューと同じ
色にしてあげたら、あたかもサブメニューが伸びているように
見えるようにするためです。
完成例の方に指定した時としてない時の違いを表してみました。

タグが多すぎてわけわからないと思いますが…頑張りましょう(^O^)／
これをマスターしたらあなたは立派なホームページマスターだ！！ｗ

完成例はこちら！
ここをクリック！

トップに戻る