いまさら聞けない2カラムレイアウトの作り方（2017年版） - Webデザイン・プログラミングオンライン個別指導のAkros

こんにちは、Akros Web & Business Design Academy 札幌校の三本です。

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

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

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

[html] <!– 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>
[/html] [css] /* floatを使った2カラムレイアウト */
#wrap {
width: 800px;
overflow: hidden;
}
#left_content {
width: 200px;
float: left;
}
#right_content {
width: 560px;
float: right;
}
#footer {
clear: both;
}
[/css]

話題沸騰！？ Flexboxレイアウト

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

[html] <!– 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>
[/html] [css] /* Flexboxを使った2カラムレイアウト */
#wrap {
display: flex;
}
#left_content {
width: 200px;
}
#right_content {
width: 560px;
}
[/css]

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

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

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

[html] <!– 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>
[/html] [css] /* display:tableを使った2カラムレイアウト */
#wrap {
display: table;
}
#left_content {
width: 200px;
display: table-cell;
}
#right_content {
width: 560px;
display: table-cell;
}
[/css]

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

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

[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>
[/html] [css] /* display:inline-blockを使った2カラムレイアウト */
#left_content {
width: 200px;
display: inline-block;
}
#right_content {
width: 560px;
display: inline-block;
}
[/css]