メディアチームCSSのおすすめフレームワーク5選
メディアチームエンジニアになろう！
CSSのおすすめフレームワーク5選
ミツオカ
にゃんこ師匠ミツオカ にゃんこ師匠ミツオカでは早速、評価が高く、気軽に使いやす CSS のフレームワークを…
にゃんこ師匠Bootstrap（ブートストラップ）
多く存在する CSS のフレームワークの中で、最も有名で定番のCSSフレームワークといっても過言ではないのが、Twitter社が開発した「Bootstrap」です。
グリッドシステムを採用しているのが特徴で、レスポンシブ対応、テーブルやカラムの幅などの調整も簡単に行うことができます。
「Bootstrap」の気になるところ
特に悪いところが思いつかない「Bootstrap」。
ただ、唯一気になるところがあるとすれば、使用者が多い故に、デザインが他のサイトと似てしまいます。
そして、「Bootstrap」の機能性が高いためか、ファイルサイズが多く必要なのが辛いところです。
バージョンアップも定期的に行われており、現在は2018年1月にリリースされたバージョン4です。（2020年１月現在）
にゃんこ師匠ミツオカFoundation（ファウンデーション）
「Foundation」も、Twitter社の Bootstrap と同じくらい人気の高い CSS のフレームワークの一つです。
ファウンデーションは英語で「基礎・土台」の意味で、その名前にふさわしく基盤のしっかりしたフレームワークです。
カスタマイズ性が魅力で、Bootstrap とは、また少し違うサイトを構築することが可能です。
「Foundation」の気になるところ
ただ、全ての機能をダウンロードすれば、膨大なデータ量が必要になってしまうのが欠点です。
ですが、カスタムダウンロードという方法を用いれば、自分に必要な機能を個別に選択して、ダウンロードすることが出来るので心配はいりません。
なお、バージョン4の時に、グリッドフレームワークのクラス名などが変更され、現在はバージョン6となっています。（2020年１月現在）
にゃんこ師匠ミツオカUlkit（ユーアイキット）
「Uikit」は、綺麗なデザインを求める人に、人気の高い CSS のフレームワークです。
視覚的でユーザーにとって使いやすいつくりになっていて、JQuery などのプラグインを取り入れても速度が遅くならないのが特徴です。
レスポンシブデザインにも対応
もちろん、レスポンシブデザインにも対応しており、パンくずリストやボタン機能も簡単に作成できます。
Bootstrap を触ったことがあるなら、カスタマイズも特に問題なく行うことができるはずです。
軽量のCSSフレームワークが良いという人は、 Ulkit を選んでおけば間違いはないでしょう！
にゃんこ師匠ミツオカBulma（ブルマ）
Ulkit のような軽量のCSSフレームワークを求めている人には、「Bulma」も選択肢に入れても良いでしょう。
CSSフレームワークといえば、どうしても Bootstrap が有名で、その他のCSSフレームワークは影が薄く、選択肢にすら入らないことがほとんど。
そのため、Bulma は、Bootstrap には存在しない要素を取り入れ、独自性のあるCSSフレームワークになっています。
「Bulma」の特徴
Bulma と他のCSSフレームワークの違いは、以下の2点
- Flexbox（柔軟なレイアウトが可能な CSS の新しいレイアウトモジュール）を活用しているCSSフレームワーク。
- JavaScript のファイルが含まれていない。
グリッドシステムもシンプルで視覚的なため、技術は身につきやすいと言えます。
ただ、JavaScript を使いたければ、自分でコードを追加しなければならないことがデメリットではあります。
にゃんこ師匠ミツオカMaterialize（マテリアライズ）
「Materialize」は、マテリアルデザインを取り入れたCSSフレームワークです。
マテリアルとは「物質的、具体的」という意味で感覚的に理解できることを指します。
視覚的に良質なサイトが構築できる
マテリアルデザインは、Google が2014年に提唱したデザイン手法なため、「Materialize」を使用すれば、ユーザーにとっても良質なサイトが作成できます。
「アニメーション」「トランジション」「サイトテンプレート」などが最初から豊富に揃っています。
そのため、視覚的にユーザーに寄り添ったサイトを簡単に構築できるのが特徴です。
2018年9月9日リリースされた新しいCSSフレームワークで、新しくて優れた機能が好きな人にもオススメです。
にゃんこ師匠ミツオカまとめ
にゃんこ師匠ミツオカまとめるとこんな感じですね！
１、王道の「Bootstrap」
２、カスタマイズ性に優れた「Foundation」
３、軽量で使いやすい「Ulkit」
４、Flexbox を活用し JavaScript のファイルが含まれていない「Bulma」
５、マテリアルデザインで新しい「Materialize」
にゃんこ師匠ミツオカ にゃんこ師匠
ミツオカ
にゃんこ師匠CSSでオススメの本
こちらの記事もオススメ！
2020.08.04エンジニアの働き方 特集社員としての働き方社員としてのエンジニアの働き方とは？ライトコードのエンジニアはどんな働き方をしてるのか、まとめたいと...
2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit
おすすめ記事
