ここからメイン

トップページ > 本文3段組 > [2]floatで並べる

CSSレイアウト[本文3段組のレイアウト-2]float:で並べる

複数のボックスを全てfloat:で並べる方法。ボックスのCSSの指定が2種類までなら「float:left;」で並べられる。HTML上で「main」の記述を先に持ってくるという自由度は無くなる。意図的に複数のサイドバーの幅を同じにしたい時などには使える。

図解 このページは、図のように、3つのボックスを単純に並べている。各ボックスに「float:left;」指定をしている。

HTML上での記述は、位置の順番通りside→main→sideの順。
また「main」はid(#)のままで良いが、「side」は、複数使用になるためclass(.)指定にしなくてはならない。
(idとclassについては
TIPS「セレクタとは」を参照。)

このように、入れ子にする事なく、3つ以上のボックスを横に並べる事が出来るが、ボックスは2種類まで。色々試したが「float:left;」のみで、3種類以上のボックスを並べることは出来なかった。

このページの左右にある「side」は全く同じ。ただし右側の「side」は、デザインを変えるために下記のように背景の指定のCSSを、HTML上で追加している。そのほかに、ボックス「#outlinebg」の背景画像も右側がオレンジ色になるように変更している。
<div class="side" style="background-image:url(img/side_bg.jpg); background-repeat:no-repeat;">
 ↑HTML上で、背景に画像を置き、リピート無しにしている。
全体のHTMLは下記参照。

<div id="outline">

<div class="side">
略(このサイトで全ページ共通の左側のメニュー)
</div><!-- END side -->

<div id="main">
<h2 id="pankuzu">略</h2>←パンくずリスト
本文
</div><!-- END main -->

<div class="side" style="background-image:url(img/side_bg.jpg); background-repeat:no-repeat;">
略(右側のサブメニュースペース)
</div><!-- END side -->

<div id="footer">略</div><!-- END footer -->
<div id="headersubmenu">略<!-- END headersubmenu -->

</div><!-- END outline -->

このページのCSSは、floatで3段に組むために「3col2.css」を使用。
このカテゴリー用の「3column.css」と、サイト全共通の「style_import.css」を使用。

ここから右側のサイドスペース

このスペースは、メインの右側に再び「side」ボックスをfloatで並べることによって作っている。したがって「side」はidでなくclassにする必要がある。

関連ページ
banner
banner