レスポンシブデザインに役立つCSSフレームワーク


マルチデバイスに対応するため時間のかかるレスポンシブwebデザインの制作ですが、開発コストを軽くするため「CSSフレームワーク」を導入するという選択があります。
レスポンシブ対応のweb制作を効率的に行うためのCSSフレームワークを紹介します。

Bootstrap

cssfw01

http://getbootstrap.com/
CSSフレームワークといえば「Bootstrap」といわれる代表的なフレームワークです。初心者でも導入しやすく利用ユーザも多いため、事例やカスタマイズ方法などを調べるのにも困りません。
機能も多く、簡単にレスポンシブ対応の見栄えのよいデザインができますが、デザインに強いこだわりがある場合には向いていません。

Pure

cssfw02

http://purecss.io/
米Yahoo!が開発したシンプルなインターフェイスのCSSフレームワークです。
非常に軽量ですが基本的な機能は十分そろっており、Bootstrapではオーバースペックという場合、Pureのような軽量タイプがよいでしょう。レスポンシブにも対応しています。

Foundation

cssfw03

http://foundation.zurb.com/
Bootstrapとならび多様な機能をそろえているフレームワークです。Bootstrapとの違いとしては、複雑なGridパターン(段組)が用意され、さまざまなレイアウト表現に柔軟性が高い点が魅力といえます。

Skeleton

cssfw04

http://getskeleton.com/
非常に軽量なフレームワークです。基本的な機能とグリッドレイアウトといった必要最低限の構成のため、Skeletonをベースに自分でコードを書いていくことになります。不必要なUIパーツや余剰機能がなく導入しやすいです。

Materialize

cssfw05

http://materializecss.com/
Googleが提唱する「マテリアルデザイン」を実現するCSSフレームワークです。さまざまなコンポーネントが用意されており、パララックスやボタンアクションのアニメーションも手軽に実装できます。

最後に

CSSフレームワークの代表といえる多機能な「Bootstrap」から軽量でシンプルなタイプまで、フレームワークの種類も年々さまざまなものが開発されています。
CSSフレームワークを選ぶ際は、多機能なものを求めるのか、またはシンプルで軽量なものを求めるのかなど、目的にあったタイプの選択を行うとよいでしょう。
また、目的に添っていても利用者が少なく情報が乏しいCSSフレームワークや、開発されたまま放置されているようなCSSフレームワークは思わぬトラブルにつながりかねません。
CSSフレームワークの選択で失敗しないためにも、最新のブラウザに対応するよう更新され、フレームワークに手を加える際にも情報が出回っているようなCSSフレームワークが望ましいといえます。

SNSでもご購読できます。