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

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

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

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

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

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

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

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

1.Bootstrap

Bootstrap_·_The_world_s_most_popular_mobile_first_and_responsive_front_end_framework..png
http://getbootstrap.com/

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

2.foundation

Foundation___The_most_advanced_responsive_front_end_framework_in_the_world..png
http://foundation.zurb.com/

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

3.Pure

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

4.Kathamo

Kathamo_CSS_Framework.png
http://kathamo.github.io/

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

まとめ

レスポンシブデザインの普及に伴い、CSSフレームワークも充実してきています。
ただし、CSSを理解したうえで、レスポンシブデザインでどのような表現をしたいかをしっかり決めてからフレームワークを選択する方が良いでしょう。

このニュースを読んだあなたにおすすめ

10秒でGoogleにて著作権フリーの画像を検索する方法。意外に知られていない高機能
デザイン不要の高品質無料ベクター素材60選【1月編】
【決定版】もはやデザイン不要!Photoshopの高クオリティなブラシ80選

このニュースに関連するカリキュラム

LPOに関するカリキュラム

LPOに関するカリキュラム

LPOに関して、カリキュラム形式で学びましょう