CSSのおすすめフレームワーク5選

ミツオカ

Webサイト作りになれたと思っても、コードの打ち間違いって起こってしまうのですよねー

にゃんこ師匠

一つ一つ確認するのは面倒じゃし、プログラミング初心者にいたっては、どこをどう間違っているのかもわからないのが厄介じゃな

ミツオカ

そんな時は、CSS のフレームワークを使用するのがオススメですね！

にゃんこ師匠

あ、そ、そうじゃ。CSS のフレームワークを使用すれば…

ミツオカ

WEBサイトのデザインやレイアウトを考えなくてもよく、手軽にレスポンシブ対応のサイトも作成することができますね！
では早速、評価が高く、気軽に使いやす CSS のフレームワークを…

にゃんこ師匠

しょしょ、紹介します！　ってワシの存在意義！

Bootstrap（ブートストラップ）

多く存在する CSS のフレームワークの中で、最も有名で定番のCSSフレームワークといっても過言ではないのが、Twitter社が開発した「Bootstrap」です。

グリッドシステムを採用しているのが特徴で、レスポンシブ対応、テーブルやカラムの幅などの調整も簡単に行うことができます。

「Bootstrap」の気になるところ

特に悪いところが思いつかない「Bootstrap」。

ただ、唯一気になるところがあるとすれば、使用者が多い故に、デザインが他のサイトと似てしまいます。

そして、「Bootstrap」の機能性が高いためか、ファイルサイズが多く必要なのが辛いところです。

バージョンアップも定期的に行われており、現在は2018年1月にリリースされたバージョン4です。（2020年１月現在）

にゃんこ師匠

知名度が高く、王道のCSSフレームワークなため、迷ったら「Bootstrap」にしておけば問題ないじゃろう

ミツオカ

「Bootstrap」の公式サイトはコチラ

Foundation（ファウンデーション）

「Foundation」も、Twitter社の Bootstrap と同じくらい人気の高い CSS のフレームワークの一つです。

ファウンデーションは英語で「基礎・土台」の意味で、その名前にふさわしく基盤のしっかりしたフレームワークです。

カスタマイズ性が魅力で、Bootstrap とは、また少し違うサイトを構築することが可能です。

「Foundation」の気になるところ

ただ、全ての機能をダウンロードすれば、膨大なデータ量が必要になってしまうのが欠点です。

ですが、カスタムダウンロードという方法を用いれば、自分に必要な機能を個別に選択して、ダウンロードすることが出来るので心配はいりません。

なお、バージョン4の時に、グリッドフレームワークのクラス名などが変更され、現在はバージョン6となっています。（2020年１月現在）

にゃんこ師匠

Bootstrap と同じ感覚で使用できるためか、より良いカスタマイズ性を求めて Bootstrap からこちらに変更する人もおるな

ミツオカ

「Foundation」の公式サイトはコチラ

Ulkit（ユーアイキット）

「Uikit」は、綺麗なデザインを求める人に、人気の高い CSS のフレームワークです。

視覚的でユーザーにとって使いやすいつくりになっていて、JQuery などのプラグインを取り入れても速度が遅くならないのが特徴です。

レスポンシブデザインにも対応

もちろん、レスポンシブデザインにも対応しており、パンくずリストやボタン機能も簡単に作成できます。

Bootstrap を触ったことがあるなら、カスタマイズも特に問題なく行うことができるはずです。

軽量のCSSフレームワークが良いという人は、 Ulkit を選んでおけば間違いはないでしょう！

にゃんこ師匠

視覚的で使いやすいところも素晴らしいが、なんといっても「Ulkit」の最大の魅力はその軽さにある

ミツオカ

「Ulkit」の公式サイトはコチラ

Bulma（ブルマ）

Ulkit のような軽量のCSSフレームワークを求めている人には、「Bulma」も選択肢に入れても良いでしょう。

CSSフレームワークといえば、どうしても Bootstrap が有名で、その他のCSSフレームワークは影が薄く、選択肢にすら入らないことがほとんど。

そのため、Bulma は、Bootstrap には存在しない要素を取り入れ、独自性のあるCSSフレームワークになっています。

「Bulma」の特徴

Bulma と他のCSSフレームワークの違いは、以下の2点

1. Flexbox（柔軟なレイアウトが可能な CSS の新しいレイアウトモジュール）を活用しているCSSフレームワーク。
2. JavaScript のファイルが含まれていない。

グリッドシステムもシンプルで視覚的なため、技術は身につきやすいと言えます。

ただ、JavaScript を使いたければ、自分でコードを追加しなければならないことがデメリットではあります。

にゃんこ師匠

Flexbox を活用しているCSSフレームワークじゃから、要素を並べやすく、JavaScript のファイルが含まれておらん。だから、他のCSSフレームワークよりも軽いんじゃな！

ミツオカ

「BULMA」の公式サイトはコチラ

Materialize（マテリアライズ）

「Materialize」は、マテリアルデザインを取り入れたCSSフレームワークです。

マテリアルとは「物質的、具体的」という意味で感覚的に理解できることを指します。

視覚的に良質なサイトが構築できる

マテリアルデザインは、Google が2014年に提唱したデザイン手法なため、「Materialize」を使用すれば、ユーザーにとっても良質なサイトが作成できます。

「アニメーション」「トランジション」「サイトテンプレート」などが最初から豊富に揃っています。

そのため、視覚的にユーザーに寄り添ったサイトを簡単に構築できるのが特徴です。

2018年9月9日リリースされた新しいCSSフレームワークで、新しくて優れた機能が好きな人にもオススメです。

にゃんこ師匠

マテリアルデザインを取り入れたCSSフレームワークなため勘違いしがちだが、Google が提供しているのではなく、「Materialize」は大学の学生チームにより開発されているCSSフレームワークじゃ

ミツオカ

「Materialize」の公式サイトはコチラ

まとめ

にゃんこ師匠

今回は評価が高く、気軽に使いやすいCSSのフレームワークを5選紹介したがどうだったかの？

ミツオカ

まとめるとこんな感じですね！
１、王道の「Bootstrap」
２、カスタマイズ性に優れた「Foundation」
３、軽量で使いやすい「Ulkit」
４、Flexbox を活用し JavaScript のファイルが含まれていない「Bulma」
５、マテリアルデザインで新しい「Materialize」

にゃんこ師匠

それぞれにメ…

ミツオカ

それぞれにメリットがあり、そして弱い部分もあったりするので、試してみて自分に合ったCSSフレームワークを見つけましょう！

にゃんこ師匠

と、という事じゃ！わ、わしの指示通りの説明じゃったな！ご苦労ご苦労！

ミツオカ

………（ジー）

にゃんこ師匠

；；；；；；；

CSSでオススメの本

CSS設計完全ガイド ~詳細解説+実践的モジュール集

　

こちらの記事もオススメ！

2020.08.04エンジニアの働き方 特集社員としての働き方社員としてのエンジニアの働き方とは？ライトコードのエンジニアはどんな働き方をしてるのか、まとめたいと...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...