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の作業もする。