ホームページの作り方（HP作成法）を解説

>>ホームページの作り方TOP　>>floatの使い方

■floatの使い方

ではさっそく、ブロックレベル要素にしたメニューバーに幅を指定するとともに、floatタグを使って回り込ませてみます。

floatは指定した位置にボックスを寄せることができます。

ブロックレベル要素に対しては使えますが、インライン要素に対しては使うことはできません。rightで右寄り、leftで左寄りです。

#a2 a　{ 　　　　display:block; 　　　　background-color:#eeeeee; 　　　　width:160px; 　　　　line-height:24px; 　　　　text-align:center; 　　　　float:left; 　　　　border-right:solid 2px #ffffff; 　　　　}

上のタグをCSSファイル内に記述するだけでこのようになります→サンプル

さらに、floatを使用して、縦にならばっているdivブロックを回り込ませて形を整えて見ます。

#b1 { 　　　　float:left; 　　　　} #b2 { 　　　　float:left; 　　　　} #b3 { 　　　　float:left; 　　　　}

上記のようにだらだら書いてもよいのですが、同じスタイルを複数のID名にたいして指定したい時は、IDをカンマで区切って連ねて指定 また、今回のようなsectionを使う場合は、sectionに対して指定して一度にスタイルを適用することもできます。

#b1, #b2, #b3 { 　　　　float:left; 　　　　} .section { 　　　　float:left; 　　　　}

floatを使用したレイアウトの方法は、上記のような全て左フロートで作る以外にも、下のようにrightやmarginを使用する方法もあります。

上記のタグを打ち込めばわかると思いますが、divのa2で指定されているエリアの全体の幅が指定されていないので、ブラウザによってはdivのbで指定されたエリアやcで指定された エリアが右側に回りこんでしまっていると思います。

これを直すためには、各エリアの横幅を以下のように指定する（コンテンツの幅を明確にする）必要があります。

#a2, #b　{ #c1　{ 　　　　width:820px; 　　　}

幅を820pxにしてあるのは、a2のメニューの幅が160×5＋線の幅あるために800pxより少しとってみただけです。

ここまででどうなるか見てみましょう。→サンプル

この状態では、なんか窮屈なので、今まで学んだスタイルを使って見た目を調節します。

そのときに、ID="c1"の要素に対して、”clear:both;”を指定してください。

clearというのは流し込みを解除するタグで、right、left、bothを指定することで、floatによる流し込みを解除できます。

floatによる流し込みとは、下の図のように、floatされるボックスの高さが異なるとき、本当なら左のボックスの下に配置させたいボックスが、右の高さの低い ボックスの後に流し込まれてしまうと言うことを意味します。

clear：bothを指定すると、右左両方への流し込みが解除されるので、赤矢印の長さのクリアランスと呼ばれる特殊な空間が自動的に広がって、フッターのボックスを 流し込ませずに配置させることができます。

ただ、今回のサンプルのid="c1"のように後続の要素でfloatをclearできる場合はよいですが、clearを指定できる要素がない場合は、after擬似要素とcontentプロパティ を使用し、フロートしたボックスを含む親ボックス内の末尾に新たなボックスを生成します。

#c1, #b, #a2 { 　　　　width:820px; 　　　　} #a2 a { 　　　　display:block; 　　　　background-color:#eeeeee; 　　　　width:160px; 　　　　line-height:24px; 　　　　text-align:center; 　　　　float:left; 　　　　border-right:solid 2px #ffffff; 　　　　} #b { 　　　　margin-top:10px; 　　　　} #b1 { 　　　　width:160px; 　　　　float:left; 　　　　} #b2 { 　　　　width:420px; 　　　　float:left; 　　　　} #b3 { 　　　　margin-left:40px; 　　　　width:160px; 　　　　float:left; 　　　　} #c1 { 　　　　margin-left:40px; 　　　　clear:both; 　　　　} p.submenu { 　　　　width:140px; 　　　　text-align:center; 　　　　background-color:#888888; 　　　　color:#ffffff; 　　　　line-height:24px; 　　　　} ul { 　　　　list-style-type:none; 　　　　margin-left:30px; 　　　　line-height:20px; 　　　　font-size:14px; 　　　　} li { 　　　　list-style-image:url(mark.gif); 　　　　padding-left:2px 　　　　} p.rireki { 　　　　text-align:center; 　　　　} p.list { 　　　　text-align:center; 　　　　} h2 img { 　　　　vertical-align:middle; 　　　　margin-right:5px; 　　　　} p.no1 { 　　　　font-size:14px; 　　　　} address { 　　　　font-size:14px; 　　　　border-top:double 3px #333333; 　　　　padding-top:5px; 　　　　width:820px; 　　　　font-style:normal; 　　　　} p.submenu1 { 　　　　width:140px; 　　　　text-align:center; 　　　　border-top:solid 1px #666666; 　　　　border-bottom:solid 1px #666666; 　　　　color:#333333; 　　　　line-height:20px; 　　　　font-size:16px; 　　　　font-style:italic; 　　　　margin-bottom:3px; 　　　　padding-bottom:0; 　　　　} p.submenu2 { 　　　　width:140px; 　　　　text-align:center; 　　　　lin-height:24px; 　　　　background-color:#777777; 　　　　margin-top:50px; 　　　　margin-bottom:0; 　　　　color:#ffffff; 　　　　font-style:italic; 　　　　} p.submenu3 { 　　　　width:100px; 　　　　text-align:left; 　　　　font-size:12px; 　　　　background-color:#dddddd; 　　　　padding:10px 20px 20px 20px; 　　　　margin-top:0; 　　　　}

するとこのようになります。→サンプル

IEを使用している人はこれでよいでしょうけど、Firefoxを使っている人はたぶん左のメニューのレイアウトがおかしくなっているかと思います。

これがIEのfloatした方向にmarginが広がるというバグなわけで、結構厄介です。

気になる人は、下のように書き直すとよいでしょう。ulのmarginとpaddingはゼロにしてIEのバグを補正し、liの方でpaddingを指定します。

リストのマークは、「リストの設定」の項にて少し述べた、backgroundに配置する方法をとります。widthは必ず指定してくださいね。

ul { margin:0; padding:0; list-style-type:none; font-size:14px; line-height:20px; } li { width:150px; padding-left:24px; background:url(mark.gif) 10px 5px no-repeat; }

なぜ、liの幅が150pxなのかというと、IEとFirefoxの表示の違いに、全体の幅＝widthの150pxととらえるfirefoxと全体の幅＝widthの150px＋paddingの24pxととらえるIE があるのが原因です。