Web制作者がチェックしておきたい！2018年、CSSベースのフレームワークのまとめ
Post on:2018年12月18日
sponsors
CSSベースの新着のフレームワークをはじめ、もはや定番といっていいフレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介します。
まずは、新着のフレームワークから。
CodyHouse
CodyHouse's Framework -GitHub
CodyHouse's Frameworkは先日ローンチしたばかりですが、当ブログでは開発の過程を記事にして紹介していました。
Webサイトやスマホアプリでよく使用されるさまざまなコンポーネントを最適なコードで実装することができます。また、CSSはマージン用・カラー用・タイポグラフィ用・ボタン用などに分かれているので、自分用にカスタマイズして利用することもできます。
こういったフレームワークで重要なポイントは、開発が継続されていること。ブルマは当ブログで初めて紹介した時から、ずっと継続されてアップデートが行われています。
Flexboxで実装された柔軟なグリッドをベースに、さまざまなレイアウトやコンポーネントが用意されています。アイデアを探すために、見てみるのにもぴったりです。
BulmaをベースにしたVue.js用の軽量UIコンポーネント。派手なアニメーションはなしで、ユーザビリティとパフォーマンスに焦点を当てています。
Bootstrapはフレームワークのまとめではずせません。
つい先日もv.3がアップデートされたばかりで、今年リリースされたv.4はv4.1.3が最新版です。
Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。
Materialize
Materialize -GitHub
MaterializeはGoogleが提唱する「Material Design」をベースに、ユーザエクスペリエンスにフォーカスされたCSSベースのフレームワークです。長い間ベータ版として公開されていましたが、2018年9月にようやくv.1.0.0として公開されました。
GoogleのMaterial Designのガイドラインに準拠した軽量（5.4KB）のCSSフレームワーク。サイトを構築するために必要な基本コンポーネントはすべて含まれています。MUI Reactライブラリも用意されており、ReactアプリケーションにMUIコンポーネントを追加することもできます。
Semantic UI
Semantic UI -GitHub
Semantic UIはclass名にナチュラルな言葉を使用したUIコンポーネントのフレームワークです。「ui active button」はアクティブなボタン、「ui three buttons」は3つのボタンを内包するラッパー、のようにclass名を見るだけでどのように実装されるのかすぐに理解できると思います。
Bootstrap, PureCSSなどの不満点を解消するために開発されたフレームワーク。レイアウトやコンポーネントをすべて含めても10kb以内で実装でき、特にスマホでの読み込みに最適化されています。flexboxを利用したさまざまなレイアウトが簡単に利用できます。
3kbの超軽量CSSのフレームワーク。レイアウトはflexboxで、calc()を使用したフレキシブルなグリッドを簡単に利用できます。コンポーネントはナビゲーション・タブ・カードと最小限ですが、ユーティリティが充実しています。新しいプロジェクトでflexboxを利用したい時にぴったりのシンプルで使いやすいフレームワークです。
ミニマルで美しいフラットなデザインのコンポーネントが利用できるCSSのフレームワーク。デザインをカスタマイズしなくても、完成したページを実装できます。モジュール式なので、必要なものだけを利用し、テーマカラーは11色が用意されています。
高速でパワフルなWebインターフェイスを開発するための軽量CSSのフレームワーク。Sass, LESSのどちらにも対応しています。レイアウトはflexboxで柔軟なグリッドを利用でき、コンポーネントもさまざまなものが用意されています。
今回紹介した中で最軽量2kbのCSSフレームワーク。UIのフレームワークではなく、パフォーマンスを向上させ、生産性も向上するよう、コードがよりクリーンになるように設計されています。flexboxを使ったプロジェクトのベースとして利用できます。
最後はゆる〜い感じのフレームワーク。ナビゲーションやボタンなど、すべてのコンポーネントが手書き風のデザインです。
sponsors
