Webでレスポンシブデザインをやるなら必ず使用されるようになったCSSフレームワーク。これまでは新しいものが出ては消えてを繰り返していましたが、2018年現在はかなり洗練されてきた感じがしますね。
そんな中でもとくに使い勝手が良く今後数年に渡って使用できるような王道といえるレベルの５つのCSSフレームワークを紹介します。
Bootstrap4
世界で最もよく使われているのがBootstrap。最新版のBootstrap4ではグリッドシステムにFlexが取り入れられ、さらにレイアウトしやすくなっています。
国内外の情報量が多く、Bootstrap4向けのテーマエディタやテンプレートジェネレータなども充実。初心者から上級者まで幅広く使えるのが魅力です。
参考リンク
Bulma
超軽量で超シンプルなCSSフレームワークがこのBulma。
is-activeなどの修飾語を追加することでコンポーネントの動作を簡単にコントロールすることができ、アプリ開発者に人気のフレームワーク。
高度にモジュール化されており、レスポンシブグリッドだけ使いたい、Modalだけ使いたいという状況にも対応可能。また、jsファイルがないため、jQueryを使えない環境や変な挙動を心配することなく開発できるのも魅力。
参考リンク
UIkit
アニメーションやデザインが非常に美しくフレームワークそのまま使えそうなクオリティなのがUIkit。
コンポーネントのパターンがたくさん用意されているため、必要なものはほぼ揃ってる印象。美しいスライドショーやOffCanvasなど、jQueryプラグインを導入しなくてもUIkitだけで対応できます。
参考リンク
Semantic UI
フォームなどの一般的なスタイルだけでなく、コメントや検索フォームのような実用的なコンポーネントが揃っているCSSフレームワーク。
参考リンク
Skeleton
Skeletonという名前からもわかるとおり、必要最小限のコンポーネントに限定されたCSSフレームワーク。
jQueryやJavascriptも必要なく、純粋にCSSのみで使えるのが特徴。グリッドやフォーム、ボタンなど一通り揃ってるのでとにかく軽量なフレームワークが欲しいならこちらもおすすめ。
参考リンク
{{< ad-bottom >}}
まとめ
ここで紹介したCSSフレームワークではやっぱりBootstrap4が安定してる感じですね。IE10対応だし、レスポンシブとユーティリティだけを切り離して使うこともできるので使いやすさ抜群です。
最近きになるのはBulma。JavascriptなしなのでjQueryのバージョンきにすることなく開発できるのが嬉しいポイント。
ただ問題点がひとつ。CSSフレームワーク使い始めると、自分でレスポンシブのCSS作るのがめんどくさくなることですね。どうしてもフレームワーク使えない案件だと頭が痛くなります...