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

s61

こんにちわ、ゆう。です♪

さて前回はヘッダーの作り方を紹介しましたので、次はcssのfloatプロパティを使って2カラムのレイアウトを作っていきましょう。

floatの使い方については、このページ内で出来る限りわかりやすく紹介しますので、ご心配なく! 一緒にページを作りながら覚えていきましょう(^^♪

完成イメージ(下の画像)を見てみると、左側にナビゲーションメニュー、右側にメインコンテンツが表示してあります。

練習用ページの完成イメージ

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

では、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でナビゲーションメニューの設定

まずはナビゲーションメニューの設定です。

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

cssファイルに下記のようにidセレクタを「menu」と指定し、記述してみましょう。

#menu{
}

次にナビゲーション全体のサイズを設定します。 幅(width)を180px、縦(height)を700pxに指定してみましょう。

※高さは指定する必要ない場合もありますが、ここではわかりやすく設定しています。

#menu{
  width:180px;
  height:700px;
}

次にナビゲーションメニューで表示するテキストのフォントとサイズを設定します。

#menu{
  width:180px;
  height:700px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size:13px;
}

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

ブラウザでの表示例 ブラウザでの表示例

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

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

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

プロパティ 意味
float:left; 要素を左寄せで配置し、あとに続く要素を右側に回り込ませる
float:right; 要素を右寄せで配置し、あとに続く要素を左側に回り込ませる

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

#menu{
  width:180px;
  height:700px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size:13px;
  float:left;
}
floatを使った時の表示例

ブラウザで確認してみると、上のようにナビが左に配置され、あとに続くメインコンテンツが右に回り込んできたのが確認できると思います。

次はメインコンテンツの表示サイズ(幅)をピクセル単位で指定し、右側に寄せて配置してみましょう! そうすることで2段組みのレイアウトが大体完成します。

右側に寄せるためには、またfloatを使いますが、その前に幅などの設定をしましょう。

続きは下記のページへ