1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. CSSのおすすめフレームワーク5選

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

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

ミツオカミツオカ
Webサイト作りになれたと思っても、コードの打ち間違いって起こってしまうのですよねー
にゃんこ師匠 にゃんこ師匠
一つ一つ確認するのは面倒じゃし、プログラミング初心者にいたっては、どこをどう間違っているのかもわからないのが厄介じゃな
ミツオカミツオカ
そんな時は、CSS のフレームワークを使用するのがオススメですね!
にゃんこ師匠 にゃんこ師匠
あ、そ、そうじゃ。CSS のフレームワークを使用すれば…
ミツオカミツオカ
WEBサイトのデザインやレイアウトを考えなくてもよく、手軽にレスポンシブ対応のサイトも作成することができますね!
では早速、評価が高く、気軽に使いやす CSS のフレームワークを…
にゃんこ師匠 にゃんこ師匠
しょしょ、紹介します! ってワシの存在意義をなくすんじゃない!

Bootstrap(ブートストラップ)

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

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

「Bootstrap」の気になるところ

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

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

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

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

にゃんこ師匠 にゃんこ師匠
知名度が高く、王道のCSSフレームワークなため、迷ったら「Bootstrap」にしておけば問題ないじゃろう
ミツオカミツオカ
「Bootstrap」の公式サイトはコチラ

Foundation(ファウンデーション)

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

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

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

「Foundation」の気になるところ

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

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

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

にゃんこ師匠 にゃんこ師匠
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選紹介したがどうだったかの?
ミツオカミツオカ

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

にゃんこ師匠 にゃんこ師匠
それぞれにメ…
ミツオカミツオカ
それぞれにメリットがあり、そして弱い部分もあったりするので、試してみて自分に合ったCSSフレームワークを見つけましょう!
にゃんこ師匠 にゃんこ師匠
と、という事じゃ!わ、わしの指示通りの説明じゃったな!ご苦労ご苦労!
ミツオカミツオカ
………(ジー)
にゃんこ師匠 にゃんこ師匠
;;;;;;;

CSSでオススメの本

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

 

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事