CSSは、標準規格でもさまざまなことが行えるようになりました。最近では「The best CSS framework is NO framework.」(一番のCSSフレームワークフレームワークを使わないことだ)という言葉さえ生まれているほどです。

確かに、レスポンシブ対応にしたり、簡単な設定を行うだけであれば、標準のCSSで設定してしまうほうがかえって楽なのかもしれません。言い換えれば、レスポンシブ対応で、とっても簡単だと、同じような特徴ばかりのCSSフレームワークは淘汰されていくことになるでしょう。

そこで今回は、手軽なのにユニークでやたらと便利なCSSフレームワーク5選をご紹介します。使うべき必然性が見つかる、ユニークなフレームワークばかりなので、ぜひ利用を検討してみましょう。

手軽なのにやたらと便利なCSSフレームワーク5選

1. BEMで書ける「黄金比」フレームワーク「Renaissance.css」

1.png
https://www.renaissancecss.com/

Renaissance.cssはマークアップにBEMを使ったモダンなCSSフレームワークです。

BEMとは、表現したいモジュールを「Blocks」(かたまり)「Elements」(要素)「Modifiers」(状態)の3つに分けて考えるCSSの記述体系のことで、レゴブロックを組み立てるようにCSSでWebサイトを構築する方法のことです。BEMを取り入れることで、よりセマンティックな(意味的で誰が見ても分かる)構造を表現することができます。

参考:
予想以上に実用的!CSSを効率的にマークアップする概念「BEM」とは?

また、Renaissance.cssでは、ボタンやナビゲーションバーなどのコンポーネント(UIパーツ)に「黄金比」を取り入れており、ノンデザイナーがマークアップしても美しく見えるように仕上がっています。

グリッドシステムはFlexboxを活用しています。ルールが厳格な分、曖昧なところがなく、誰がマークアップしても同じ状態になるのは、魅力的な選択肢なのではないでしょうか。

2. かゆいところに手が届いてなおかつシンプル「Siimple」

2.png
https://www.siimple.xyz/

siimpleは、SASS/SCSSのmixinを使って作られた、レスポンシブでエレガントなCSSフレームワークです。コンポーネントの色違いバージョンであるsiimple colorsも用意されています。

SASSを使うと、簡単な関数の設定によって、多くの部分をまとめて設定することができます。CSSは通常では関数機能などは用意されていないので冗長になりなおかつメンテナンスが大変になりやすいですが、SASSを使うことによってカスタマイズしやすくなるのです。

参考:
Sassとは?〜今からでも遅くない!基礎から学ぶSass入門

用意されている配色も非常に現代的なものばかりで、ナビゲージョンバーなどの各種コンポーネントもとても簡単に設置することができます。グリッドシステムは12カラムで、デバイスによって複数のブレイクポイントを設定することも可能です。

3. これ以上ないほどに超軽量「lit」

3.png
https://ajusa.github.io/lit/

litSkeletonと呼ばれるレスポンシブ対応のCSSのボイラープレート(最低限の必要事項を記載したテンプレート)から生み出された、極めて軽量なCSSフレームワークです。Skelton自体がたったの400行ほどしかなく、これだけでも使えるのですが、litはそれをもう少し応用したものになります。

さて、気になるフレームワークのサイズですが、なんとたったの393バイトです。300文字程度のテキストメール(ヘッダー情報付き)が約5キロバイトなので、いかに軽量化がご理解いただけるのではないでしょうか。

神経質になる必要はありませんが、言うまでもなく読み込み速度は早ければ早いほどよいと言えます。少しでも読み込み速度を早く、ユーザーにストレスを与えないWebサイトにしたいのであれば、使用を検討してみてはいかがでしょうか。

参考:
CSSの読み込みを高速化するための5つのポイント

4. マイクロインタラクションが驚くほど簡単になる「micron」

4.png
https://webkul.github.io/micron/

micronは、誰でも簡単に微細な動きであるマイクロインタラクションを取り入れることができるCSSフレームワークJavaScriptライブラリです。実際にはJavaScriptの力を借りるので完全なCSSドリブンのフレームワークではありませんが、コンセプトとして珍しいのでご紹介させていただきます。

設定も非常に簡単で、要素にいくつかの属性を付け加えるだけで、クリックすれば簡単に反応するようにできます。mironにはJavaScriptが用意されていますが、JavaScriptのコードを一切書かずにクリックアニメーションを実装することも可能で、現時点では12種類のアニメーションを利用することができます。

CSS自体は2.65キロバイト、JavaScriptも1.38キロバイトと軽量なので、ちょっとしたアクセントが欲しい時に使ってみるとよいでしょう。

5. 必要な機能は全部パッケージ化「GroundworkCSS」

5.png
https://groundworkcss.github.io/

GroundworkCSSは、非常に高機能なCSS・HTML5・JavaScriptを使ったフレームワークです。セマンティックな文法になっており、SASSにも対応しており、ミニマルなコーディングで大抵のことは何でもできます。

しかし、それだけなら、類似品は身の回りにたくさんあるのです。GroundCSSが人気を博している大きな理由は、「レスポンシブテキスト」(Responsive Text)と言って、デバイスごとに最適なテキストサイズを維持する機能が含まれている点です。

また、グリッドシステムも非常にユニークで、なんと「分数」を使って指定していきます。たとえば、4分の1の場合は(英語は分子→分母の順で表現するので)「one fourth」と指定する、といった具合です。

すでにFont Awesomeも同梱されており、たくさんのアイコンフォントを即座に利用することさえできます。アニメーションも標準で利用できるので、他に余計なフレームワークを併用する必要は一切ないのは嬉しいところです。

まとめ

CSSフレームワークを探すと、すでに溢れかえるほどにたくさん見つかります。数え切れないほどのCSSフレームワークの中から自分にとって意味のあるものを選ぶためには、ユニークな特徴と使いやすさを兼ね揃えたものである必要があるでしょう。

どれも導入まであっという間に済んでしまうものばかりです。お気に入りが見つかったら、早速使ってみましょう。