HTMLとCSSで作るウェブサイト作成入門

CSS(13)floatによるボックスの配置

 ウェブページは、様々なタグ(要素)によって作られるボックスを組み合わせてデザインされます。ということは、適切にデザインするためには、ページ内の意図した場所にボックスを配置できなくてはなりません。方法としては、floatプロパティを使うものと、positionプロパティを使うものがあります。イメージとしては、floatがボックスを積み木のように並べる方式なのに対し、positionはボックスをある座標にピンポイントで置く方式ということになります。ここでは、floatによる方法を説明します。

 ●floatとclearによるボックスの並べ替え

 ボックスを、横に並び替えたり、左右を入れ替えたりするために、floatとclearがあります。通常、ボックスは縦に並びます。以下サンプルでは、<p>タグで囲まれた4つの段落に対し、サイズ160×80ピクセル、太さ5ピクセルの実線で囲む、ということを行っています。

[CSSサンプル]
p {
    border-style: solid;  /*枠を実線で*/
    border-width: 5px;  /*枠線を5ピクセルに*/
    width: 160px;         /*幅を160ピクセルに*/
    height: 80px;         /*高さを80ピクセルに*/
    margin: 0px;          /*外側余白をゼロに*/
}

[HTMLサンプル] ※基本タグは省略
<p id="a1">花形<br>自社高シェア・市場高成長で高収入の一方出費も多い</p>
<p id="a2">問題児<br>市場高成長だが自社低シェアのため多大な投資が必要</p>
<p id="a3">金のなる木<br>自社高シェアだが市場低成長で高収入を期待できる</p>
<p id="a4">負け犬<br>市場低成長な上、自社低シェアで撤退を検討</p>

[サンプルのブラウザ表示結果]
フロートサンプル1

 ただ、このようなボックスを、横に並べたいことがあります。そのような場合はfloatを使います。指定したボックスを左寄せにし、続くボックスを右に回り込ませる場合は、「float: left」と指定します。逆に、指定ボックスを右寄せ、続くボックスを左に回り込ませる場合は「float: right」を指定することもできます。また、floatを使う場合は、必ずwidthを設定して下さい。

[CSSサンプル] ※HTMLは省略(上記と同様)
p {
    border-style: solid;  /*枠を実線で*/
    border-width: 5px;  /*枠線を5ピクセルに*/
    width: 160px;         /*幅を160ピクセルに*/
    height: 80px;         /*高さを80ピクセルに*/
    margin: 0px;          /*外側余白をゼロに*/
    float: left;            /*左寄せ、後続を右に回り込み*/
}

[サンプルのブラウザ表示結果]
フロートサンプル2

 また、一部は横に並べ、別の部分は縦に並べたい、ということもしばしばあります。そのような場合は、縦に並べたい箇所で、「clear: both」を設定して一端floatを解除し、その上で再度「float: left」を設定する、という方法をとります。上記サンプルをベースに、ボックスを2×2に並べることを考えると、3つめのボックスで、横並びの「float: left」を解除すれば良いことになります。そのため、以下のサンプルでは、<p>タグのうち、#a1、#a2、#a4は、これまで同様に「float: left」を設定し、#a3のみ、「clear: both」でfloatを解除し、「float: left」を再設定するということをしています。

[CSSサンプル] ※HTMLは省略(上記と同様)
#a1,#a2,#a4 {
    border-style: solid;  /*枠を実線で*/
    border-width: 5px;  /*枠線を5ピクセルに*/
    width: 160px;         /*幅を160ピクセルに*/
    height: 80px;         /*高さを80ピクセルに*/
    margin: 0px;          /*外側余白をゼロに*/
    float: left;            /*左寄せ、後続を右に回り込み*/
}
#a3 {
    border-style: solid;  /*枠を実線で*/
    border-width: 5px;  /*枠線を5ピクセルに*/
    width: 160px;         /*幅を160ピクセルに*/
    height: 80px;         /*高さを80ピクセルに*/
    margin: 0px;          /*外側余白をゼロに*/
    clear: both;            /*既存のfloatを解除*/
    float: left;            /*左寄せ、後続を右に回り込み*/
}

[サンプルのブラウザ表示結果]
フロートサンプル3

 floatを使う際に注意すべきもう一つのポイントは、floatの設定が終わったボックスの次のボックスに、float解除の「clear: both」を設定することです。そうしないと、次のボックスも回り込んで表示されてしまいます。忘れないよう気をつけて下さい。 

●floatとclearの設定値一覧

プロパティ 項目 対象
float 浮動化(回り込み)の指定 position指定されていない要素 left 左寄せ設定。続く要素は右に回り込み
right 右寄せ設定。続く要素は左に回り込み
none 回り込みなし
clear 回り込み解除 ブロックレベル要素 left 左寄せ設定を解除
right 右寄せ設定を解除
both 左右寄せ設定を解除
none 回り込み解除せず

   
 
 
 
SPONSORED LINK


 

SPONSORED LINK