Float, Flexbox, Gridレイアウト, Bootstrap での段組みページの作成の違いについて - CSS

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

Float

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

Flexbox

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

Gridレイアウト

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

Bootstrap

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

まとめ

違いを表にしたものが下図です。
導入コスト記述のシンプルさIE11 対応ライブラリの導入幅を固定した枠の作成カスタマイズのしやすさJavaScriptを使わずに動作
CSS Floatなし
CSS FlexBoxなし
CSS Grid Layout×なし
Bootstrap必要
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2018-10-12
iPentec all rights reserverd.