Web制作者がチェックしておきたい!2018年、CSSベースのフレームワークのまとめ

CSSベースの新着のフレームワークをはじめ、もはや定番といっていいフレームワーク、軽量フレームワーク、何かに特化されたフレームワークを紹介します。

2018年総まとめ CSSベースのフレームワーク

まずは、新着のフレームワークから。

サイトのキャプチャ

CodyHouse
CodyHouse's Framework -GitHub

CodyHouse's Frameworkは先日ローンチしたばかりですが、当ブログでは開発の過程を記事にして紹介していました。

Webサイトやスマホアプリでよく使用されるさまざまなコンポーネントを最適なコードで実装することができます。また、CSSはマージン用・カラー用・タイポグラフィ用・ボタン用などに分かれているので、自分用にカスタマイズして利用することもできます。

サイトのキャプチャ

Bulma
Bulma -GitHub

こういったフレームワークで重要なポイントは、開発が継続されていること。ブルマは当ブログで初めて紹介した時から、ずっと継続されてアップデートが行われています。

Flexboxで実装された柔軟なグリッドをベースに、さまざまなレイアウトやコンポーネントが用意されています。アイデアを探すために、見てみるのにもぴったりです。

サイトのキャプチャ

Bulma: ヒーローヘッダの実装集

サイトのキャプチャ

buefy
buefy -GitHub

BulmaをベースにしたVue.js用の軽量UIコンポーネント。派手なアニメーションはなしで、ユーザビリティとパフォーマンスに焦点を当てています。

サイトのキャプチャ

Bootstrap
Bootstrap -GitHub

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として公開されました。

サイトのキャプチャ

MUI
MUI -GitHub

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名を見るだけでどのように実装されるのかすぐに理解できると思います。

サイトのキャプチャ

Picnic CSS
Picnic CSS -GitHub

Bootstrap, PureCSSなどの不満点を解消するために開発されたフレームワーク。レイアウトやコンポーネントをすべて含めても10kb以内で実装でき、特にスマホでの読み込みに最適化されています。flexboxを利用したさまざまなレイアウトが簡単に利用できます。

サイトのキャプチャ

chota
chota -GitHub

3kbの超軽量CSSのフレームワーク。レイアウトはflexboxで、calc()を使用したフレキシブルなグリッドを簡単に利用できます。コンポーネントはナビゲーション・タブ・カードと最小限ですが、ユーティリティが充実しています。新しいプロジェクトでflexboxを利用したい時にぴったりのシンプルで使いやすいフレームワークです。

サイトのキャプチャ

siimple
siimple -GitHub

ミニマルで美しいフラットなデザインのコンポーネントが利用できるCSSのフレームワーク。デザインをカスタマイズしなくても、完成したページを実装できます。モジュール式なので、必要なものだけを利用し、テーマカラーは11色が用意されています。

サイトのキャプチャ

UIkit
UIkit -GitHub

高速でパワフルなWebインターフェイスを開発するための軽量CSSのフレームワーク。Sass, LESSのどちらにも対応しています。レイアウトはflexboxで柔軟なグリッドを利用でき、コンポーネントもさまざまなものが用意されています。

サイトのキャプチャ

Milligram
Milligram -GitHub

今回紹介した中で最軽量2kbのCSSフレームワーク。UIのフレームワークではなく、パフォーマンスを向上させ、生産性も向上するよう、コードがよりクリーンになるように設計されています。flexboxを使ったプロジェクトのベースとして利用できます。

サイトのキャプチャ

PaperCSS
PaperCSS -GitHub

最後はゆる〜い感じのフレームワーク。ナビゲーションやボタンなど、すべてのコンポーネントが手書き風のデザインです。

sponsors

top of page

©2019 coliss