自宅で学べるオンラインのプログラミングスクール TechAcademy
Webサイトのスタイルを設定するCSS。CSSを効率よくコーディングするためのは、フレームワークを使います。
フレームワークによって定められたルールに沿うことで短いコードで必要な機能、スタイルが実現できます。CSSの代表的フレームワークを紹介します。
- Bootstrap：人気が高く利用ユーザーが多い
- Materialize：Googleマテリアルデザイン準拠
- Material Components for the Web：Googleエンジニア開発
- MUI：Googleマテリアルデザイン準拠
- Pure CSS：軽量・コンパクト・シンプル
- Semantic-UI
- Foundation
- Surface
- Material-UI
目次
CSSフレームワーク 人気おすすめ比較５選【2019年最新版】
Bootstrap（ブートストラップ）
Bootstrap · The most popular HTML, CSS, and JS library in the world.
人気の定番CSSフレームワーク
Bootstrapは、もっとも有名なCSSフレームワークです。Bootstrapはtwitter社に勤めていた、Mark Otto, Jacob Thorntonによって作成されました。
CDN:あり
レスポンシブ対応：あり
Materialize
Googleマテリアルデザイン準拠CSSフレームワーク
Materializeは、Googleの提唱するマテリアルデザインを使えるCSSフレームワーク。Bootstrapに似ているため、Bootstrapでなれている人にもおすすめです。
マテリアルデザインとは、ユーザーが直感的に操作できることを目指したGoogleが提唱してるWebデザインの概念です。現実の物理法則、刷物向けデザインの基本要素にそったデザインです。
参考：Design – Material Design
レスポンシブ対応：あり
Material Components for the Web
Develop for the Web – Material Design
Googleエンジニア開発
Googleのエンジニアが開発しているCSSフレームワーク。
MUI
Googleマテリアルデザイン準拠CSSフレームワーク
MUI – Material Design CSS Framework
Pure CSS
軽量、コンパクト、シンプル
Pure CSSは、Yahooの提供しているCSSフレームワーク。軽量、コンパクト、シンプルなのが特徴です。
Semantic-UI
どのようなスタイルになるのかclass名からも判別しやすいCSSフレームワークです。
Foundation
The most advanced responsive front-end framework in the world. | Foundation
Foundationは、zurb社が提供しているCSSフレームワークです。
WordPressのテーマにFoundationのフレームワークを採用したものが多数します。
Surface
レンポンシブ対応：あり
CDN:なし
Material-UI
Material-UIは、名前のとおり、マテリアルデザインの使えるCSSフレームワークです。
CSSフレームワークをGoogleトレンドで比較
人気の動向を調べることができるサービス「Googleトレンド」でCSSフレームワークを比較してみました。
CSSフレームワークをGoogletトレンドで比較（対象地域：世界）
「Bootstrap」が突出しています。
CSSフレームワークをGoogletトレンドで比較（対象地域：日本）
対象地域が日本の場合でもやはり「Bootstrap」が抜きん出ています。
まとめ
CSSの代表的フレームワークを5種類紹介しました。
この中でも最もよく使われてるのは「Bootstrap」です。
初心者はまずは、「Bootstrap」から使いこなせるようになりましょう。
参考：CSSフレームワーク Bootstrap の基本的な使い方
