floatを使って2段組みのレイアウトを作成してみよう

こんにちわ、ゆう。です♪
さて前回はヘッダーの作り方を紹介しましたので、次はcssのfloatプロパティを使って２カラムのレイアウトを作っていきましょう。
floatの使い方については、このページ内で出来る限りわかりやすく紹介しますので、ご心配なく！一緒にページを作りながら覚えていきましょう(^^♪
完成イメージ（下の画像）を見てみると、左側にナビゲーションメニュー、右側にメインコンテンツが表示してあります。

上のような２カラムのレイアウトは、 cssの「float（フロート）」と呼ばれている仕組みを使って実現しています。このfloatを使うと、指定した要素（divやh1など）が左右のどちらかに寄せて配置され、あとに続く要素がその横に回り込んで配置されるようになります。
では、floatを使って回り込ませる前に、まずは左側に配置するメニューの幅などの設定からしていきます。

cssでナビゲーションメニューの設定

まずはナビゲーションメニューの設定です。
HTMLソースを見てみると、ナビゲーションメニューはid名「menu」でグループ化されています。なので「menu」という名前のidセレクタを指定し、そこにナビゲーションメニュー用の設定を記述していきます。
cssファイルに下記のようにidセレクタを「menu」と指定し、記述してみましょう。

記述できたらcssファイルを保存して、 webページをブラウザで確認してみます。

ブラウザで確認して見ると、メインコンテツがナビゲーションメニューの下に表示されているのが分かると思います。そこで完成例のように2段組みのレイアウトを実現するために、 floatを使ってナビゲーションメニューの横にメインコンテンツを配置する事にします。

floatを使って2段組みレイアウトを作ろう

cssのfloatとは、対象の要素を左右のどちらかに寄せて配置し、あとに続く要素を反対側（横）に回り込ませるためのプロパティです。どちらに寄せるかは、値に「left」または「right」を指定することで設定できます。

この場合「#menu」を左に寄せたいので、 float:left;を使います。さっそくcssファイルに記述してみましょう！

ブラウザで確認してみると、上のようにナビが左に配置され、あとに続くメインコンテンツが右に回り込んできたのが確認できると思います。
次はメインコンテンツの表示サイズ（幅）をピクセル単位で指定し、右側に寄せて配置してみましょう！そうすることで2段組みのレイアウトが大体完成します。
右側に寄せるためには、またfloatを使いますが、その前に幅などの設定をしましょう。

floatの回り込みを解除して2段組みレイアウトを完成させよう

前回floatを使ったことでナビゲーションメニューが左になり、メインコンテンツがその右に回り込んで表示されるようになりました！
今度はメインコンテンツの表示サイズを設定してから、右に配置するfloatを使って2段組みのレイアウトを完成させましょう！
このページではcssのfloatの実践的な使い方と floatの回り込み解除の方法を紹介します。

CSSでメインコンテンツの設定

これで｛｝内にcssを記述していくとmain_contentsの部分に、記述したcssが適用されます。
完成イメージを見てみると背景が白で、内側の余白（padding）が15px、外側の余白（margin）が0、幅が600pxとなっています。
ここで注意してもらいたいのは、コンテンツの幅は600pxですが、左右のpaddingは30px（右と左の合計）あります。
コンテンツの幅の内訳は「要素の幅（570px）+左右のパディング（30px）+左右のボーダー（0）=合計600px」となるので、 width:600px;と記述するわけにはいきません。なので上記の内訳のようにwidth:570px;と記述して下さいね。

確認して見ると、こんな感じでメインコンテンツが左に詰まった状態で表示されます。なんでこうなるかというと、前回ナビゲーション（#menu）に使ったfloat:left;が反映されているからです。
これを直すためには、メインコンテンツに対して右にフロート（float:right;）を設定する事で解決します。まずは何も考えずにcssに記述してみましょう！

こんな感じで思い通りのスタイルになったと思うのですが、どうでしょうか？？
floatの挙動が中々わかりにくい所ではあるんですが、今は気にせず、次はフッターのサイズと位置調整をしていきましょうｗ（floatの挙動については、後ほど説明します）

ページの下部にフッターを設置しよう

フッターとして表示する部分は、footer要素としてグループ化されています。なのでタイプセレクタを「footer」と指定して、 cssに記述してみしょう。
css
footer{
}

これでcssに記述した内容がfooterに適用されるようになりました！

フロートの回り込みを解除する

こうすると、中央の余白が生まれる部分にフッターが入り込んで来てしまいます。今作成している練習用のページでは、全体の幅を設定しているので、こういうようにはなりません。
ですが、思いがけないレイアウト崩れを防止するためにも、フッターにもフロートの設定を行う必要があります。
設定としては、左右のどちらかにフロートさせるか、直前の要素（#main_contents）のフロートによる回り込みを解除するかのどちらかになります。 footerの場合は、左右にフロートさせる必要はないので、ここでは回り込みを解除することにします。
floatを解除する場合は「clear:both;」と記述する事で、直前の要素で設定されているフロートの設定が及ばなくなります。
基本的にfloatを使う場合は、これだけは覚えておきましょうね！
ではcssに記述してみましょう！

cssを記述して確認してみると上のようになります。
あとは余白を調整したり、それぞれのデザインを設定していけば、完成イメージのようになります。
今回はフロートを使った2カラムのレイアウトの作り方でしたが、いかがしたでしょうか？フロートを使う時は最初は、うまく回り込んでくれなかったり、デザインが崩れたりする事があると思います。でも基本的には、回り込みを解除すれば崩れる事はそうそうないので、是非ぜひ試してみて下さいね。
あと今回は書かなかったですが、 clearfixで回り込みを解除する方法などもありますので、時間に余裕があったら検索してみて下さい(^^)/
次回からは、メインコンテンツのスタイルを設定していきますので、よろしくお願いします！！