HTML5でつくる2カラムや3カラムレイアウトのはじめの一歩

2014.07.27
CSS , HTML , WEB

Image by:Design Inspiration

サイトやブログの運営を長くやっていると、オリジナルのデザインに挑戦してみたくなったり、ちょっとだけカスタマイズしたくなったりと、興味が湧いてきませんか？

ちょっとしたデザインやCSSを変更したいときに、サイトのレイアウト構成を理解していないと、せっかく調べた装飾系コーディングも、どこに記述していいのか分かりませんよね。

今回は、レイアウトの理解のはじめの一歩として、基礎の基礎という感じになりますが、サイトのレイアウトを支える土台部分をメモっていきたいと思います。

このページの目次

デモについて（HTMLとCSSの注意点）
1カラムのレイアウト
2カラムのレイアウト
3カラムのレイアウト
あとがき

デモについて（HTMLとCSSの注意点）

HTMLのデモと説明のコーディングは、ほぼ同じになります。
強いて言えば、各セクションの中身の表記が違うだけです。

CSSの説明は、本当に必要な部分だけ説明しています。
説明を省略している部分やデモと違いのある部分は、装飾系のコーディングです。

width（幅）の指定では、記事に合わせて見やすいように最大480pxを指定しています。
各々デザインにあった幅に変更してください。

それでは、参りましょう。

1カラムのレイアウト

まずは、1カラムのレイアウトからです。

See the Pen layout-1col by webfeelfree (@webfeelfree) on CodePen.4259

1カラムのレイアウトは、上から下へストレートに各セクションが並んだ、シンプルなレイアウト。

スマホなど、モバイルサイトで使われていて、昔よりも陽の目を浴びる量が増えてきているレイアウトです。
ランディングページと呼ばれるページも、1カラムのレイアウトを採用しているページが多いですね。

HTMLコーディング

<body>
 <header id="header">
  ヘッダー部の中身
 </header>
 <main id="main">
  メイン部の中身
 </main>
 <div id="side">
  サイド部の中身
 </div>
 <footer id="footer">
  フッター部の中身
 </footer>
</body>

今回の記事で使用していく基本的なHTMLになります。
「2カラムのレイアウト」で使っているHTMLも同じコーディングです。

HTML5を意識したタグで構成してみました。
よくわからない場合は、<header>、<main>、<footer>の部分を<div>に書きかえましょう。

サイド部のところは、<div>を使っています。
<aside>を使うか？迷いましたが、いろんなサイトを眺めていると<aside>の使い方が、それぞれなので、今回は<div>を使うことにしました。

そして、各タグにセレクタ（id）を付加しています。
なるべく付加した方がメンテナンス性や拡張性に優れるのでオススメしたいと思います。

セレクタにidを使っていますが、classを使ってもOKです。
各セレクタの命名に関しても、自分のコーディングルールに合わせて、sidebarとかhead、footなどなど適当に命名してください。

CSSのポイント

body{
  width: 480px;
  margin: 0 auto;
}

1カラムのレイアウトは、各箇所にセレクタを付加しましたが、一番重要なところはココになります。

2行目のwidthでは、レイアウト（サイト）全体の幅を指定しています。
3行目のmarginは、サイト全体を中央寄せするためのコーディングです。

中央寄せについては「CSSで右寄せ・左寄せ・中央寄せする」も参考にしてみてください。

先に書いた通り、上から下へストレートにレイアウトされるということで、非常にシンプルな土台構成となります。

2カラムのレイアウト

次に、2カラムのレイアウトになります。

See the Pen blog-layout-2col by webfeelfree (@webfeelfree) on CodePen.4259

2カラムのレイアウトは、一般的なサイトからブログまで、広く使われているので、一番見かけるレイアウトだと思います。
デモは、左側にメイン記事、右側にブログでいうカテゴリーや最新記事一覧などのサイドコンテンツを設置するレイアウトとなっています。

HTMLに関しては、「1カラムのレイアウト」と同じHTMLを使っているので、そちらを参考にしてください。

CSSのポイント

body{
  width: 480px;
  margin: 0 auto;
}
#header{
  width: 480px;
}
#main{
  width: 300px;
  float: left;
}
#side{
  width: 180px;
  float: right;
}
#footer{
  clear: both;
  width: 480px;
}

widthで各セクション部分の幅を指定しています。
widthを指定していないと、これから紹介するfloatの影響で、レイアウトが崩れてしまう場合があるので、各セクション、しっかりとwidthの指定をした方がいいです。
デモでは、5pxの空白を入れているので、widthの値が異なります。

余談ですが、このwidthの値を相対（%）指定することにより、流行りのレスポンシブサイトの入口に立つことができます。
この話は、また機会があったら、いづれ・・・。

3行目のmarginは、サイト全体を中央寄せするためのコーディングです。

ここから、2カラムのレイアウトの大きなポイントになります。
floatを使って、メイン部とサイド部を並べます。
10行目のfloat: left;と14行目のfloat: right;がそれに当たります。

もし、メイン部とサイド部を入れ替えたい場合は、このfloatのleftとrightを入れ替えます。

最後に、フッター部。
17行目のclear: both;を忘れないようにしましょう。
これは、floatを解除しますよぉ～という指定になります。
これがないと、レイアウトが崩れてしまう場合があるので、忘れずに記述しましょう。

floatを解除する方法は、他にもありますが、今回は、この方法を紹介させていただきました。

3カラムのレイアウト

さて、徐々にパズルのように難しくなっていきますが・・・今度は、3カラムのレイアウトです。

See the Pen site-layout-3col by webfeelfree (@webfeelfree) on CodePen.4259

3カラムのレイアウトは、情報量の多いサイトやショッピングサイトなどで、お目にかかっていると思います。
オーソドックスなタイプとしては、メイン部が真ん中にあって、両端にナビゲーションや宣伝・広告などのサイドコンテンツが設置されているパターンが一般ですかね。

HTMLコーディング

<body>
 <header id="header">
  ヘッダー部の中身
 </header>
 <div id="wrapper">
  <main id="main">
    メイン部の中身
  </main>
  <div id="side01">
    サイド部1の中身
  </div>
 </div>
 <div id="side02">
  サイド部2の中身
 </div>
 <footer id="footer">
  フッター部の中身
 </footer>
</body>

HTMLのポイントは、2つあります。

1つ目は、セマンティックな文章構造に気をつけることです。
なぜ、気をつけなければならないか？というと、ざっくりですが、SEOという概念に準じるため、また、CSSが読み込まれなかった場合に、順序良く文章やページの内容が表示されるために気をつけなければなりません。

なかなかCSSを使いこなしていないと、
「ヘッダー部→サイド部１→メイン部→サイド部2→フッター部」
の順にHTMLをコーディングしてしまいがちになります。

サイトにもよりますが、やっぱり、サイド部分は、あくまで補足なので
「ヘッダー部→メイン部→サイド部1→サイド部2→フッター部」
の順番がベターと言えます。
なので、文章構造の順番を意識して、HTMLコーディングしましょう。

2つ目のポイントは、5行目の<div id="wrapper">でメイン部とサイド部1を囲んでいることです。
wrapperはラッパーと読みます。
包むという意味で・・・あの透明のラップです、ラップ。
メイン部とサイド部1を<div id="wrapper">（ラップ）で、包んでいるのです・・・イメージ的に・・・。

デモでいうと、黒枠で囲まれている部分が、ラップしている部分に当たります（ここではラップ部とします）。
何のために囲んでいるのか？は、次のCSSのポイントで明らかにしていきます。

各タグ付けやセレクタについては「1カラムのレイアウト」も参考にしてみてください。

CSSのポイント

body{
  width: 480px;
  margin: 0 auto;
}
#header{
  width: 480px;
}
#wrapper{
  float: left;
}
#main{
  width: 270px;
  float: right;
}
#side01{
  width: 105px;
  float: left;
}
#side02{
  width: 105px;
  float: right;
}
#footer{
  clear: both;
  width: 480px;
}

widthで各部分の幅を指定しています。
デモでは、5ピクセルの空白を入れているので、widthの値が異なります。

3行目のmarginは、サイト全体を中央寄せするためのコーディングです。
ここまでは、1カラム・2カラムのレイアウトと同じになります。

最大のポイントに突入しますが、やっぱり、floatの並べ替えになります。
2カラムのレイアウトでは、メイン部とサイド部の2か所を並べていましたよね。

3カラムのレイアウトでは、メイン部、サイド部1、サイド部2、そして、ラップ部の4か所を駆使して並べ替えを行います。

まずは、メイン部とサイド部1を含むラップ部とサイド部2、この二つのセクションをfloatで並べます。
9行目のfloat: left;と21行目のfloat: right;が、その部分です。