2018年最新版！手軽なのにユニークなCSSフレームワーク4選

更新日: 2023年05月07日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

出典：Renaissance.css※このWebサイトは現在公開されていません

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

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

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

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

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