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

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

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

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

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

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

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」

https://www.siimple.xyz/

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

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

参考：
Sassとは？〜今からでも遅くない！基礎から学ぶSass入門

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

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

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

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

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

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

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

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

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

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

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

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

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

https://groundworkcss.github.io/

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

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

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

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

まとめ

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

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