CSSのおすすめフレームワーク5選
2020.05.28
目次
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でオススメの本
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
IT技術2020.08.09Vue.jsで作ったオリジナルコンポーネントをnpm・CDNに公開してみた！
特集2020.08.08Go言語 特集- ITエンタメ2020.08.08戦いは続くよ どこまでも「MacとWindowsの歴史」
- IT技術2020.08.07cycleGANで男顔⇄女顔への変換を可能してみた！
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
