超現場ブログ

Technique,Design and Events

いまさら聞けない2カラムレイアウトの作り方(2017年版)

Twitter Facebook Google+ はてブ

img_20170415-2

こんにちは、WEB塾 超現場主義 札幌校の三本です。

WEB制作の勉強を始めると、いくつかの大きなハードルが待ち受けています。
そのうちのひとつにfloatがあるのではないでしょうか?
今回は、floatプロパティも含めて、最近よく使われている手法で、2カラムレイアウトの実現方法をご紹介したいと思います。

定番! floatプロパティを使ったレイアウト

floatプロパティを使って2カラムのレイアウトを組む手法は、今でもオーソドックスな方法として使われ続けています。
ブラウザやバージョンに依存せずに導入できる点がメリットかと思います。
floatを使って組む場合のポイントは3つ。
1. 左右のカラムにwidthを設定する
2. 2カラムレイアウトの下(floatの必要ないコンテンツ)で、clearプロパティを設定する
3. 2カラムコンテンツの親要素がある場合は、overflow:hidden;を設定する
とにかく、まずはこれをしっかり守ってコーディングして下さい。

<!-- floatを使った2カラムレイアウト -->
<div id="wrap">
  <div id="left_content">
  	<p>hogehoge</p>
  </div>
  <div id="right_content">
  	<p>hogehoge</p>
  </div>
</div>
<footer id="footer">
	<small>copyright hogehoge</small>
</footer>
/* floatを使った2カラムレイアウト */
#wrap {
  width: 800px;
  overflow: hidden;
}
#left_content {
  width: 200px;
  float: left;
}
#right_content {
  width: 560px;
  float: right;
}
#footer {
  clear: both;
}

話題沸騰!? Flexboxレイアウト

CSS3以降実装されたFlexboxですが、これまでブラウザの対応が十分ではなかったため、現場ではあまり使われていませんでした。
最近ようやく全てのブラウザで対応され、現場での実装にも耐えうるものになってきたようです。
比較的簡単に組み込めるため、今後注目のテクニックになるかもしれません。

<!-- Flexboxを使った2カラムレイアウト -->
<div id="wrap">
  <div id="left_content">
  	<p>hogehoge</p>
  </div>
  <div id="right_content">
  	<p>hogehoge</p>
  </div>
</div>
<footer id="footer">
	<small>copyright hogehoge</small>
</footer>
/* Flexboxを使った2カラムレイアウト */
#wrap {
  display: flex;
}
#left_content {
  width: 200px;
}
#right_content {
  width: 560px;
}

こちらの記事も参考にご覧下さい。
話題のFlexboxでグローバルナビ

復活? 擬似的tableレイアウト

今は誰も使っていないと思いますが、昔はtableタグを使ってページレイアウトを組んでいました。
現在では推奨されていませんが、HTML5になってからdisplayプロパティを使って要素の挙動を変える事も許容されるようになりました。
これにより、display:table-cell;などの設定で、擬似的にテーブルレイアウトを組む場面も増えてきました。

<!-- display:tableを使った2カラムレイアウト -->
<div id="wrap">
  <div id="left_content">
  	<p>hogehoge</p>
  </div>
  <div id="right_content">
  	<p>hogehoge</p>
  </div>
</div>
<footer id="footer">
	<small>copyright hogehoge</small>
</footer>
/* display:tableを使った2カラムレイアウト */
#wrap {
  display: table;
}
#left_content {
  width: 200px;
  display: table-cell;
}
#right_content {
  width: 560px;
  display: table-cell;
}

賛否両論? 擬似的インラインレイアウト

上記、擬似的tableレイアウトと同じ手法で、inline-blockとして並べる方法もあります。
こちらの場合、html上で改行すると改行記号が余白として表示され、レイアウトが崩れる場合があります。
個人的には、あまり使わないかもしれません。

<!-- display:inline-blockを使った2カラムレイアウト -->
<div id="wrap">
  <div id="left_content">
  	<p>hogehoge</p>
  </div>
  <div id="right_content">
  	<p>hogehoge</p>
  </div>
</div>
<footer id="footer">
	<small>copyright hogehoge</small>
</footer>
/* display:inline-blockを使った2カラムレイアウト */
#left_content {
  width: 200px;
  display: inline-block;
}
#right_content {
  width: 560px;
  display: inline-block;
}

まとめ

2カラムレイアウトの実現には、色々な方法があります。
いずれにしても、メリット・デメリットがありますので、うまく使い分けて下さい。

いまさら聞けないようなことも、懇切丁寧にご説明致します。
まずは、無料体験レッスンを受けてみて下さい。
詳しくはこちら

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.