こんにちは、Akros Web & Business Design Academy 札幌校の三本です。
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カラムレイアウトの実現には、色々な方法があります。
いずれにしても、メリット・デメリットがありますので、うまく使い分けて下さい。
いまさら聞けないようなことも、懇切丁寧にご説明致します。
まずは、無料体験レッスンを受けてみて下さい。
詳しくはこちら
Akros東京校ではマンツーマンのPRO講座以外にも短期で学べる「短期講座」も開催しています。
Webデザイナーとして成功するための条件
Webデザインの第一歩！Photoshop基礎マスター講座
Webデザインの第一歩！実践 Photoshop基礎 バナー制作講座
UI/UXデザイン講座 ～初心者向けAdobe XD基礎講座～
初心者でも３Hでホームページが作れる！WordPress講座
Google AnalyticsによるWeb解析セミナー 初級
上記以外にも限定講座なども開校しておりますので気になる方はぜひご確認・ご受講ください。
セレクト講座
短期コース
是非ご参加ください。
