ページの先頭へ
トップに戻る
2017年1月30日 Web制作

【CSS】floatを使わないシンプルな2カラムレイアウトの作り方

2カラムレイアウトといえばfloatを使うイメージが強いですが、CSS3のFlexboxを使う方法もあります。

今回はFlexプロパティを使った2カラムレイアウトの作り方を紹介します。

Flexを使った2カラムレイアウト

コンテンツとサイドバーで構成された、固定幅の2カラムレイアウトです。

HTML

CSS

表示デモ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
メインとサイドを包んでいる親要素をFlexコンテナ化して、横方向に均等配置するように指定するだけです。簡単簡単。

気になるブラウザの対応状況

この通り、Flexプロパティはほとんどのブラウザで動作します。IE8~9でもしっかり表示させたいならflexibilityを使えば良いんじゃないかな。

あとがき

簡単な2カラムレイアウトだと、Flexboxの偉大さが実感しにくいですね…floatと違って回り込みの解除が必要ないというメリットもありますが。

Flexboxが活躍するのはもう少し複雑なレイアウト(レスポンシブとかグリッドとか)を組み立てるときなので、近々別の記事で、もう少し踏み込んだレイアウト方法を解説します。