レスポンシブデザインを作るときにオススメ！cssフレームワークまとめ

Web制作者にとってレスポンシブデザインの技術は必要になっており、レスポインシブの需要も急上昇しています。

今回は、レスポンシブデザイン作成時にオススメのCSSフレームワークをご紹介します。

レスポンシブデザインとCSS

レスポンシブデザインはマルチデバイスに対応するために生まれた技術です。
一般的なWebデザインの場合、PC・スマホ・タブレットと各デバイス専用のCSSが必要でしたが、レスポンシブデザインはスタイルシート1枚でPCやスマホに表示させることができます。1枚で完結できるため効率的ではありますが、一方でCSSへの理解な手法でもあります。

例えばウィンドウ幅によってスタイルシートを変更するための「@media（メディアクエリ）タグ」の記述であったり、デバイス幅の指定（max-width: ●●px、min-width: ●●pxの使用）も理解しなければうまく対応できなくなってしまいます。

以下より、初めての方でも安心してレスポンシブデザインが作れるようなフレームワークを4つご紹介します。

レスポンシブデザイン作成時に使えるCSSフレームワークまとめ

1.Bootstrap

http://getbootstrap.com/

Twitter社が提供しているCSSフレームワークです。Webデザイナーであれば聞いたことがある方も多いのではないでしょうか。
Bootstrapは初心者でも使用しやすいインターフェイスで、トレンドに沿ったデザインが作りやすくなっています。
用意しているフレームワークに画像やJavascriptを当てはめていくだけで簡単にレスポンシブサイトが作れます。
LESSもSASSも対応可能で高い応用力を持っているため、まずはBootstrapを利用してから他のフレームワークを使用してみるといいかもしれません。

2.foundation

http://foundation.zurb.com/

ZURB社が提供するFoundationも幅広く利用されているフレームワークです。
カスタムで色やグリッド、ボタンなどの設定や、段組のレイアウトも可能なため、様々なタイプのレスポンシブデザインに対応できます。

3.Pure

http://purecss.io/
PureはＹahoo！製のシンプルなインターフェイスで利便性の高いフレームワークです。
CSSのみの軽量フレームワークとして利用できます。
スターターページに使い方が丁寧に掲載されているためレスポンシブ初心者でも効率よく制作できます。
構造がシンプルで、且つ情報量の多いサイトを作ろうと思った時に便利かもしれません。

4.Kathamo

http://kathamo.github.io/

こちらもPureと同様にCSSのみの軽量フレームワークで、モバイルフレンドリーにも対応しています。
他のcssフレームワークと比べても圧倒的に軽量で、エンドユーザーにとっても負荷が少ないページを制作できます。