読者です 読者をやめる 読者になる 読者になる

アプリ魂

はじめてのプログラミング生活

アプリ魂
はじめてのプログラミング生活

【初心者向け】レスポンシブ対応のCSSフレームワークは「Responsive Grid System」がオススメな理由

レスポンシブ対応のCSSフレームワークは「Responsive Grid System」

@appdamacyですペコリ(o_ _)o))
今日は初めてレスポンシブデザインのWebサイトを作ったときに役立ったCSSフレームワークを紹介します。

趣味でWeb制作を勉強している人や学習を始めたばかりの人向けです。

Responsive Grid Systemとは

Responsive Grid Systemと

CSSフレームワークというとBootstrapやFoundationが有名みたいですが、初心者がはじめて自分のコード以外を使うには全体のボリュームが大きくて混乱してしまいます。

実際にはコンポーネントといって部品みたいに小さく使えますが、そもそもプログラミングを書き始めたばかりの人は英語のドキュメントを見るだけでうわーってなってしまいます。

そこで見つけたのが、コード量が短くて最低限のレスポンシブデザインのレイアウトを組める「Responsive Grid System」。

個人的にとっても簡単にカスタマイズができるCSSフレームワークで、レスポンシブの仕組みを理解できるキッカケになりました。

Bootstrapなどで、とくに使いたいコンポーネントがないのであればResponsive Grid Systemを使ってみるのがいいかもしれません。

補足:レスポンシブデザインの説明

はてなブログのテーマでもよく見かける「レスポンシブデザイン」あれと一緒です。

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。レスポンシブウェブデザイン - Wikipedia

必ずしもウェブサイトはレスポンシブがいいとは限りません。サイトの魅せ方・コンテンツ量に適した方法で構築するべきで、表現方法のひとつです。

Responsive Grid Systemのポイント

特筆すべきポイントは以下の7つ

  • モバイルファースト 
  • 軽量のCSSフレームワーク
  • カラム数は 12・16・24の三通り 
  • クラスにguttersを付与して溝を追加
  • フロート解除はclearfix
  • box-sizingが全セレクタに適用
  • reset.cssとrespond.jsを採用

初期の段階でレスポンシブデザインに最適な構想とそれにともなって必要となる要素が詰め込まれています。

何年か前に公開されたCSSのためフロートを解除する手法ではclearfixが使われています。

最近だとレイアウトを組む時にはflexをメインに使っているフレームワークもあるので、ここだけ少しきになるところ。

でも全然ダメな訳ではないのでシンプルなサイトを設計するときなど十分に使えものだと思っています。

初心者にも優しいGridだけのシンプルなCSSフレームワーク

Responsive Grid Systemを使う手順はこれだけ。

  • 公式サイトからダウンロードする
  • index.htmlを開くと2カラムのサイトが完成している
  • スタイルシートでレイアウトを好みにあわせて調整する

デフォルトだとmainはspan_8とspan_4のカラムで組まれている。つまりレイアウトは8:4の割合になります。

合計数が12(もしくは16か24)になるように調整してあげればいいので、例えばspan_3・span_4・span_5とするだけで3:4:5の割合を保った3カラムになります。

直感的に数字を変更するだけでレイアウトを調整できるので、一度触ってみると誰でもすぐに理解できます。

ブラウザごとの見え方の違いを気にしなくても大丈夫

  • reset.css:各ブラウザがデフォルトで持っているスタイルを全てリセットして統一するスタイルシート
  • respond.js:最小・最大幅(min-width・max-width)をIE6から8までのブラウザに対応させるスクリプト

はじめてウェブサイトを作るときに自分で全てのブラウザに対応させるのは難しい。Responsive Grid Systemにはreset.cssとrespond.jsが入っているので、何も考えずにサイト制作に集中できます。

環境を構築した上でブラウザ間の調整までやってると制作する前にやめてしまう人が多くいそうなのでそういう意味でもかなりおすすめです。

2016 アプリ魂