様々な種類のCSSフレームワークが公開されていますが、種類が多すぎてどれを選べばいいのか分からないというパターンは多いと思います。

今回は、2020年おすすめのCSSフレームワークと、それぞれの特徴について分かりやすくご紹介していきたいと思います。

CSSフレームワークとは

CSSフレームワークとは、ボタンやフォーム、レイアウトなどWebページの実装に必要なコンポーネントや機能が詰まったライブラリのようなものです。

短期間でWebサイトを実装したい場合や、デザイナー不在のチームがWebサービスを作る場合など、CSSフレームワークを利用することによってデザイン実装の手間を減らすことができます。

ただし、CSSフレームワークは使い方を覚えるまでに時間が必要なものもあったり、目的の異なるCSSフレームワークもあるので、しっかりと考えてからCSSフレームワークを導入する事が必要です。

CSSフレームワークを利用するメリット

CSSフレームワークをあまり使用する機会が無いという方も多いかと思いますが、下記のような場合にCSSフレームワークを使うと良いでしょう。

Webデザイナーのような職種の人が利用するというよりは、エンジニアが簡易にフロントエンドを実装したい場合に利用することが多いと思います。

デザイナーがいなくても見た目が整えられたページを作ることができる

CSSフレームワークを正しく扱えば、適切なマージンや余白が取られたWebページを実装することができます。

デザイナーがいれば、デザインファイルを元に実装することでデザインが整ったページを作ることができますが、例えば管理画面の実装などデザイナーがアサインされていないプロジェクトでは、CSSフレームワークを使うことである程度デザインが整えられたページを作ることができるでしょう。

また、複数人で実装を行ってもルールを決めてしまえば同じ様に実装することができるという点もCSSフレームワークを利用することによるメリットだと言えるでしょう。

ドロップダウンメニューやスライダーなど、簡単に作成することができる

多くのCSSフレームワークにはJavaScriptファイルも一緒に提供されていて、クラス名を指定するだけで簡単に動的なコンポーネントを追加することができます。

ドロップダウンメニューやスライダー、ライトボックスなどCSSだけで実装するには手間がかかるコンポーネントも、簡単に追加することができるというのはCSSフレームワークを利用するメリットの1つだと思います。

個人的には、CSSを書かなくて済むことよりもこちらの方がメリットが大きいと感じています。

CSSフレームワークの選び方

CSSフレームワークは、大きく分けると下記の2種類に分けることができます。

  • しっかりスタイリングするためのCSSフレームワーク
  • 最低限のデザインを整えるためのCSSフレームワーク

前者の「しっかりスタイリングするためのCSSフレームワーク」は、HTMLの中で様々なクラス名を指定することで、CSSを書かずにレイアウトやデザインをコントロールすることができるというメリットがあります。CSSフレームワークの有名なものは、このタイプが多いです。

後者の「最低限のデザインを整えるためのCSSフレームワーク」は、フォームやボタンなど、よく利用するコンポーネントのデザインを整えたり、レイアウトを組むためのCSSフレームワークです。リセットCSSのような使い方に近いイメージですね。中には、HTMLタグに対してスタイリングが定義されているNoクラスのCSSフレームワークというものもあります。

もちろん、2つのタイプのいずれかしかないという訳ではなく、その中間のような立ち位置のCSSフレームワークもあります。

CSSフレームワークを選ぶ時は、目的に合ったCSSフレームはどちらのタイプかを考えて選ぶようにするといいでしょう。

しっかりスタイリングするためのCSSフレームワーク

まずは、細かなスタイリングまで行える高機能なCSSフレームワークからご紹介します。

デザイナーが不在でWebサービスを構築する場合や、あまりデザインの調整に時間をかけられないような場合は、このタイプを使用するといいでしょう。

BootStrap

BootStrapは、Twitterが開発した最も有名で利用者数が多いCSSフレームワークです。

世界中様々なチームで採用されていて、多くのプロジェクトで使われています。

  • 利用者数が多い
  • ドキュメントが豊富(公式以外にも)
  • テーマの種類が多い

BootStrapを使うと、よく見かけるデザインのサイトになってしまうため、ホームページやLPにBootStrapを使う機会はあまり多くありません。ただ、管理画面や社内ツールなどにBootStrapを使う機会はとても多いと思います。

特殊なCSSフレームワークを使って、特定の人しか扱えないような状況になるよりは、無難にBootStrapを使うことで、誰でも扱えるようにしておいた方がメンテナンスしやすいというメリットもあると思います。

また、有料で色々なテーマも販売されているので、企業でBootStrapを使ってWebサービスやWebサイトを作るような場合には、手っ取り早くテーマを購入してしまうというのも1つの手です。

Foundation

Foundationは、BootStrapに次いで知名度が高く、カスタマイズ性の高いCSSフレームワークです。

フレームワークを使いたいけれどあまり全面に押し出したくないという場合は、カスタマイズ性の高いFoundationを使用することで効率のいいWeb制作を行うことができますね。

ただ、カスタマイズ性が高いがゆえに、覚えなければならないことが多く、ある程度CSSが書ける人であれば自分で書いた方が早く実装できるということになってしまい、本末転倒となるかもしれません。

UIKit

UIKitは、軽量でカスタマイズ性の高いCSSフレームワークです。他のCSSフレームワークの方が有名かもしれませんが、デザインも優れて扱いやすいUIKitが個人的には気に入っています。

デザインが少し小洒落ているというのもおすすめポイントの1つで、例えば、カードコンポーネントはこんなかんじのデザインです。

BootStrapなどは、「いかにもCSSフレームワーク」というイメージのデザインになってしまいますが、UIKitは控えめでスマートな印象のデザインなので、見た目がすっきりとしたページを作ることができます。

また、クラス名の頭に、uk-という文字列が付けられていて、他のCSSとコンフリクションを起こしづらく、扱いやすいという特徴もあります。

Bulma

Bulmaは、ここ数年で注目度が高まっているCSSフレームワークです。

JavaScript無しで使えるCSSフーレムワークという点が、BootStrapやFoundationと大きく異なります。

そのため、例えばモーダルを実装する場合コンポーネント自体のマークアップはBulmaを使うことができますが、モーダルの閉会は自分でJavaScriptを記述しなければなりません。

その他には、ドキュメントが他のCSSフレームワークと比べて読みやすい印象で、実務で導入する場合には意外と大きな点なのではないでしょうか。

Semantic UI

Semantic UIは、デザイン性が高く、非常にシンプルで使いやすいCSSフレームワークです。

クラス名の付け方が特徴的で、本来の意味や目的に合わせたクラス名でスタイリングが行えるようになっており、直感的なコーディングが可能です。

BootStrapやFoundationよりも学習コストがかからないので、ライトにCSSフレームワークを導入したいような場合におすすめです。

TailWind CSS

Tailwind CSSは、予め用意されたコンポーネントを利用するのではなく、ユーティリティクラスを使い回すことでデザインをカスタムするためのCSSフレームワークです。

例えば、rounded-fullというクラスを付与すれば要素が円形になったり、text-centerというクラスを付与すればテキストが中央寄せになるなど、クラス名を加えたり変更するだけで基本的なデザインを作り上げることができます。

HTMLとCSSを行き来する回数が減るので、コーディング作業に必要な時間を短縮することができますね。クラス名を覚えるまでが少し大変ですが、覚えてしまえばとても扱いやすいというメリットがあります。

Materialize CSS

Materialize CSSは、Googleの提唱したマテリアルデザインがベースとなっているCSSフレームワークです。

良くも悪くもマテリアルデザインがベースとなっているので、CSSフレームワークを使ってマテリアルデザインを実装したい場合に使うといいでしょう。

最低限のデザインを整えるためのCSSフレームワーク

次は、最低限のデザインを整えることができる軽量フレームワークのご紹介です。

このタイプは、フレームワーク単体でデザインを完結させることは難しいので、あくまでサイト実装のベースとしてフレームワークを利用し、デザイン実装は自ら行うような場合におすすめです。

new.css

new.cssは、Noクラスの軽量CSSフレームワークです。

利用用途は最低限の見た目を整えるという所に留まり、レイアウトのスタイリングは自分で行わなければなりません。

小さめのプロジェクトで、フォームやテーブルなどを簡単に整えたいような場合に使うと良さそうです。

MVP.css

MVP.cssは、Noクラスの軽量CSSフレームワークです。

少し面白いのが、sectionタグの中にasideタグを配置すると、カードUIのように影が付いて余白の大きさが変化するという点です。

HTMLのタグの本来の使い方とは少し離れてしまっていますが、クラス名を考えずに最低限のデザインを整えられるという点では便利かもしれません。

Skelton

Skeltonは、必要最低限のスタイリングが提供された軽量のCSSフレームワークです。

軽量ながらも、グリッドシステムを利用することができるのでレイアウトを組むこともでき、Webサイトを実装する時にベースとして使用すると役立つでしょう。

また、モバイルファーストで作られている点も評価できます。

Milligram

Milligramは、Normalize.cssのようにベースとなるデザインを整えるための軽量CSSフレームワークです。

フォームやテーブル、ボタンなどよく使うコンポーネントのスタイリングを整えたい場合に使用するといいでしょう。

グリッドシステムも用意されているので、クラス名に指定することでレイアウトを組むこともできます。

Base

Baseは、非常に軽量で最低限のスタイリングが用意されたCSSフレームワークです。

クラス名で最低限の指定を行うことはできますが、カスタマイズ前提で設計されているCSSフレームワークであり、細かなスタイリングは自分で行いたいという人におすすめです。

イメージとしては、「Normalize.css+最低限のレイアウトを行うためのクラス定義」のようなものが詰まったCSSフレームワークです。

Mini.css

Mini.cssは、軽量ながらも多くのコンポーネントを利用することができるCSSフレームワークです。

BootStrapやFondationのように細かなデザイン調整を行うことはできませんが、用意されているコンポーネントの種類が豊富なので管理画面の実装などは十分Mini.cssで簡潔させることができます。

そのままでもシンプルなUIが作れて、カスタマイズも行いやすく、色々な場面で役立つのではないでしょうか。

Pure CSS

Pure CSSは、軽量CSSフレームワークです。

軽量な分、用意されているコンポーネントの種類は多くありませんが、グリッドシステムを使うことができるので、レスポンシブ対応のレイアウトをクラス名だけで定義することができます。

使い方としては、スタイリングのベースにPure CSSを使用し、細かなデザインは自分でCSSを書くというような使い方になると思います。

まとめ

CSSフレームワークは種類がとても多いですが、たくさん知っているよりも、どれか1つを扱えることの方が得られるメリットは大きいと思います。

特にBootStrapやFoundationのような高機能なCSSフレームワークは、扱えるようになるまでに少し時間がかかるので、時間をかけて慣れていく必要があるでしょう。

ぜひこの機会に、CSSフレームワークを使ったWeb制作に挑戦してみてください。

おすすめの記事