Float, Flexbox, Gridレイアウト, Bootstrap での段組みページの違いについて紹介します。

概要

Webページで段組みをする方式には複数の種類があります。 それぞれの種類での実装方式の違いやメリットやデメリットを紹介します。

Float

CSSのFloatプロパティを利用して枠を横方向に並べ段組みを作成できます。 FloatプロパティはCSSの中でも古くから実装されているプロパティのため、動作するブラウザの種類が多いメリットがあります。 その一方で、フローティングの制御ではマージン等の考慮が必要になるため、意図した通りに枠を配置するCSSの記述が複雑になる場合があります。 また、フローティングを解除する部分の設計や記述で冗長になることもあります。
近年では、Internet Explorerや他の古いWebブラウザの利用者も大幅に減少しているため、後述するFlexboxやグリッドレイアウトを利用する方式がメジャーです。

Floatプロパティを利用した記述についてはこちらから確認できます。

Flexbox

CSSのFlexBoxを利用して、枠を横方向に配置することができます。 Floatプロパティと比べるとシンプルに記述できます。 また、Internet Explorer 11(IE11)でも動作します。一方でCSSや動作の理解は必要になるため、Bootstrapほど導入は簡単ではないです。

Flexboxプロパティを利用した記述についてはこちらから確認できます。

グリッドレイアウト (Grid Layout)

CSSのグリッドレイアウトを利用すると、柔軟性の高いグリッドレイアウトのページを作成できます。 Flexboxよりさらにカスタマイズ性が高いですが、IE11では動作しない点がデメリットになります。 (AutoPrefixerなどを利用してベンダープリフィックスに変換することで動作させることはできます。)

Gridレイアウトを利用した記述についてはこちらから確認できます。

Bootstrap

Bootstrapはライブラリを導入して利用するページのフレームワークになります。 CSS等の記述が不要で導入するだけですぐに段組みページなどが作成できます。 導入、学習コストが低く簡単に利用できます。また、レスポンシブページ前提での設計になっており、レスポンシブページの作成も容易です。 一方でカスタマイズや枠の幅を固定するといった標準でない動作を実装するのはやや大変です。 また、動作にはJavaScriptが必要になる部分もあります。

Bootstrapを利用した記述についてはこちらから確認できます。

番外:tableタグ

スタイルシートが無い時代にページを段組み表示するために利用されてきた方式です。
tableタグは表を記述するためのタグのため、現在ではこの実装方式はほとんど利用されないです。

まとめ

違いを表にしたものが下図です。