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

回り込みを解除してみよう

※このページは「floatを使って2段組みのレイアウトを作成してみよう」の続きです。

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

このページではcssのfloatの実践的な使い方floatの回り込み解除の方法を紹介します。

※下のHTML文書を使って紹介していきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="htmlファイル作り方,htmlファイル作成,html初心者">
<meta name="description" content="htmlファイルの作り方を紹介しているページです">
<title>html・css入門!初心者でも見るだけで自由自在に</title>
</head>
<body>

<div id="page">
 
<header>
   <p>まずは簡単なwebページを実際に作って見ましょう!!</p>
</header>

<div id="menu">
<ul> 
   <li>ホーム</li>             
   <li>遊び</li>
   <li>仕事</li>
   <li>パソコン</li>
   <li>アフィリエイト</li>   
 </ul>
</div>
 
<div id="main_contents">
<h1>「2016年07月」一覧</h1>    
<h2>狙ったキーワードで上位表示!アクセスが増えるキーワード選びのコツ</h2>      
   <p>スマホアフィリエイトで広告を選んだら、次に悩むのがキーワードですね。
この記事ではスマホ</p>
<h2>稼げるスマホ広告をパソコンでチェック!便利なツールご紹介</h2>
   <p>アクセス数はあるのに、「全然商品が売れない」なんて思った事ないですか?
   今はパソコンより</p>
<h2>アフィリエイトをする前に知っておきたい、PVが少なくても売れる広告主の特徴とは</h2>
   <p>良い広告を見つけて「よし、アフィリエイトするぞ」と思っても、
   始める前に注意しなければならない落と<p/> 
<h2>スマホで副業するならアフィリエイト!稼ぐための新戦略</h2>
   <p>スマホで副業するならアフィリエイトがオススメです。 なぜ?って、
   それは失敗してもリスクがなく</p> 
</div>
 
<footer>
<p>Copyrightc 安月給さよなら!本当に稼げるのか実験記 All Rights Reserved.</p>
</footer>
 
</div>
 
</body>
</html>

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

メインコンテンツ完成図

メインコンテンツとして表示する部分は、id名「main_contents」でグループ化されています。 なのでidセレクタを「main_contents」に指定して下のように記述してみましょう!

#main_contents{
}

これで{}内にcssを記述していくとmain_contentsの部分に、記述したcssが適用されます。

完成イメージを見てみると背景が白で、内側の余白(padding)が15px、外側の余白(margin)が0、幅が600pxとなっています。 ここで注意してもらいたいのは、コンテンツの幅は600pxですが、左右のpaddingは30px(右と左の合計)あります。

コンテンツの幅の内訳は「要素の幅(570px)+左右のパディング(30px)+左右のボーダー(0)=合計600px」となるので、 width:600px;と記述するわけにはいきません。 なので上記の内訳のようにwidth:570px;と記述して下さいね。

#main_contents{
  background-color:#fff;
  margin:0;
  padding:15px;
  width:570px;
  height:670px;
}

cssファイルに記述したら保存して、ブラウザで確認してみましょう! おそらく下のようになっているはずです。

css適用後のイメージ

確認して見ると、こんな感じでメインコンテンツが左に詰まった状態で表示されます。 なんでこうなるかというと、前回ナビゲーション(#menu)に使ったfloat:left;が反映されているからです。

これを直すためには、メインコンテンツに対して右にフロート(float:right;)を設定する事で解決します。 まずは何も考えずにcssに記述してみましょう!

#main_contents{
  background-color:#fff;
  margin:0;
  padding:15px;
  width:570px;
  height:670px;
  float:right;
}
float反映後の表示例

こんな感じで思い通りのスタイルになったと思うのですが、どうでしょうか??

floatの挙動が中々わかりにくい所ではあるんですが、今は気にせず、次はフッターのサイズと位置調整をしていきましょうw (floatの挙動については、後ほど説明します)

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

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

footer{
}

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

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

フッター

さて上記の画像で現在のfooterの位置を見てみると、一見問題なさそうに見えます。

ですが現在の設定では、ナビ(#menu)とメインコンテンツ(#main_contents)floatの設定を行っていますよね。 この場合は、続く要素(この場合footer)に対してもfloatを設定しないと、レイアウトが崩れてしまうことがあります。

例えば下の画像は、ページの全体幅(この場合は#page)を指定していない状態ナビを左、コンテンツを右にフロートさせた例です。

全体幅を設定せずフロートをした例

こうすると、中央の余白が生まれる部分にフッターが入り込んで来てしまいます。 今作成している練習用のページでは、全体の幅を設定しているので、こういうようにはなりません ですが、思いがけないレイアウト崩れを防止するためにも、フッターにもフロートの設定を行う必要があります。

設定としては、左右のどちらかにフロートさせるか、直前の要素(#main_contents)のフロートによる回り込みを解除するかのどちらかになります。 footerの場合は、左右にフロートさせる必要はないので、ここでは回り込みを解除することにします。

floatを解除する場合は「clear:both;」と記述する事で、直前の要素で設定されているフロートの設定が及ばなくなります。 基本的にfloatを使う場合は、これだけは覚えておきましょうね!

ではcssに記述してみましょう!

footer{
  clear:both;
}

これで2段組みのレイアウトは完成です! レイアウト崩れを起こす事もありません。

ではフッターのデザインの設定をしていきましょう!

入力内容 意味
background:#372F2D; 背景を濃い茶色にする
margin:0; 上下左右のマージンを設定
font-family:Arial,sans-serif; フォントの形を設定
font-size:14px; 文字の大きさを14pxにする
color:#fff; 文字の色を白にする
text-align:center; 文字を中央揃え
footer{
  clear:both;
  background:#372F2D;
  margin:0;
  font-family:Arial,sans-serif;
  font-size:14px;
  color:#fff;
  text-align:center;
}
css設定後の表示例

cssを記述して確認してみると上のようになります。

あとは余白を調整したり、それぞれのデザインを設定していけば、完成イメージのようになります。

今回はフロートを使った2カラムのレイアウトの作り方でしたが、いかがしたでしょうか? フロートを使う時は最初は、うまく回り込んでくれなかったり、デザインが崩れたりする事があると思います。 でも基本的には、回り込みを解除すれば崩れる事はそうそうないので、是非ぜひ試してみて下さいね。

あと今回は書かなかったですが、clearfixで回り込みを解除する方法などもありますので、時間に余裕があったら検索してみて下さい(^^)/

次回からは、メインコンテンツのスタイルを設定していきますので、よろしくお願いします!!