レスポンシブ対応のCSSフレームワーク5選

レスポンシブ対応に対応しているCSSフレームワークについてまとめました。

CSSフレームワークと言っても、その種類は非常にさまざま。全部入りの重量級フレームワークから、機能に特化している軽量なものまで。大手どころのCSSフレームワークを選んでも構わないのですが、できれば用途によって最適なものを選んでいくようにしましょう。

なお、レスポンシブデザインについては下の記事でも解説してあります。よろしければそちらの記事もご覧ください。

» 初心者向け！レスポンシブデザイン制作の簡単レシピ

» レスポンシブだけじゃない！スマホ対応の方法3つと特徴まとめ

レスポンシブ対応のCSSフレームワーク5選

それでは早速、おすすめのCSSフレームワークの紹介に入っていきましょう。

本稿ではスマホなどの端末でも意図した通りのデザインで表示できる、レスポンシブデザイン対応のCSSフレームワークに限定して取り上げています。

Bootstrap

（画像出典元： http://getbootstrap.com/ ）

» Bootstrap · The world’s most popular mobile-first and responsive front-end framework.

CSSフレームワークとしておそらく最も有名なのがBootstrapでしょう。モバイルファーストなフレームワークで、レスポンシブにも対応しています。なおTwitterが開発に関わっていたことから、以前はTwitter Bootstrapと呼ばれていました。

Bootstrapは、言ってみれば全部入りのCSSフレームワークです。他のフレームワークと比較するとファイルサイズは大きいのですが、機能は豊富に備わっています。

横に12分割のできるグリッドシステムを採用していて、デザインも自由に行えます。テキストやボタン、フォームなど、Webページで使うスタイルも一通り備わっています。Glyphiconというアイコンが使えることも人気です。

BootstrapはCSSプリプロセッサのSassとLessにも対応しています。Bootstrapをカスタマイズするなど、より踏み込んだWeb開発を行いたい時にもメリットがあるでしょう。

Foundation | The most advanced responsive front-end framework in the world.

（画像出典元： http://foundation.zurb.com/ ）

» Foundation | The most advanced responsive front-end framework in the world.

Foundationは、Bootstrapと並んで取り上げられることが多いCSSフレームワークです。Bootstrapと同じで軽量さはありませんが、機能の豊富さがウリになっています。

Foundationの良さとしてよく言われるのが、カスタマイズ性の高さです。Foundationは変数を設定することで細かいカスタマイズが可能で、直接スタイルを変更する場合と比べて格段に便利です。

もう一つ、Foundationの特徴としてはRubyとの親和性が高いこともあげられます。gemが用意されているので、Ruby on Railsを使った案件の場合はFoundationを検討してみてはいかがでしょうか。

なおFoundationは設計にモバイルファーストを採用しているので、もちろんレスポンシブデザインにも対応しています。CSSプロセッサーとしてSassを採用しています。

Pure

（画像出典元： https://purecss.io/）

» Pure

Bootstrapなどの重量級のフレームワークの場合、大幅なカスタマイズを行うのはかなりの手間になりますし、コストを考えても現実的ではありません。

そんな時に役に立つのが、PureのようなシンプルなCSSフレームワークです。

PureはYahoo!が提供しているCSSフレームワークで、その名の通りシンプルで軽量につくられています。minifiedされたファイルだとたった3.8KBしかありません。BootstrapやFoundationが数百KBなのと比較すると、大きな差であることがわかります。

シンプルでカスタマイズのしやすいことが特徴ですが、加えて他のフレームワークやツールと組み合わせやすいというメリットもあります。

Material-UI

（画像出典元： http://www.material-ui.com/#/ ）

» Material-UI

Googleが提唱したマテリアルデザインに対応したCSSフレームワークです。デバイスを問わずに、使いやすく親しみやすいUIデザインを作っていくことができるでしょう。

公式サイトは英語なのですが、使い方やコンポーネントなどのドキュメントはしっかりと掲載されています。はじめてCSSフレームワークを使う方にも助けになってくれることでしょう。

なお、Material-UIを動かすためにはbrowserifyとreactifyの2つのツールを導入する必要があります。

Semantic UI

（画像出典元： https://semantic-ui.com/ ）

» Semantic UI

Semantic UIはその名の通り、セマンティックな記述が可能になるCSSフレームワークです。「何をしたいか？」と「HTML/CSSコード」にずれがないため、直感的でスムーズなプログラミングが期待できます。

それでは、Semantic UIの特徴をいくつか具体的にあげていきましょう。

まず第一に、わかりやすいコーディングが可能になります。HTML/CSSで使用するクラスは理解し易いよう命名されていますし、HTMLの構造も意味や役割に沿って記述されます。Semantic UIがセマンティックと呼ばれている理由は、こういった部分にあるのです。

第二に、デバッグがしやすい作りになっています。Performance logging機能によって、スタックトレースを読み解く必要がなくなるでしょう。

それ以外にも、利用可能なコンポーネント数の多さや、実現できるデザインの多様さも特徴としてあげられます。

なお上述のCSSフレームワーク同様、Semantic UIもレスポンシブに対応しています。デバイスによらず制作したデザインでページを表示することができます。

あとがき

レスポンシブ対応のされているCSSフレームワークを5つ選んでご紹介しました。

ご紹介したように、CSSフレームワークはそれぞれ特徴が異なります。また開発のし易さも千差万別。カスタマイズ性が高い茅、SassやLessに対応しているかも重要なポイントでしょう。

CSSフレームワークを途中から変えるのは大変なので、案件に合ったCSSフレームワーク選びをしていただければと思います。