こんにちは、コーディング担当の岡本です。

レスポンシブWEBサイトを作成する際に便利なツールといえば、「Twitter Bootstrap」をはじめとする「CSSフレームワーク」が有名ですね。

特に「Twitter Bootstrap」や「Foundation」「Bourbon」などはナビゲーションやフォームなどのUIパーツまで用意されているので、モックアップ作成などに非常に重宝されています。

しかしいざ実際にECサイトをコーディングするとなると、この「UIパーツ」が厄介者になることもあります。

すでに作成されたパーツを組み合わせての構築が前提ですので、どうしても「オリジナルデザイン」に対応させる手間が生じます。

そして既定のスタイルを打ち消して再設定するため、CSSファイルが肥大化するということにつながることがフレームワークを利用するデメリットでもありました。

今回紹介するCSSフレームワークは違います。

非圧縮で100行以下の軽さに3種類のグリッドに対応したレスポンシブフレームワーク、これが今回紹介するResponsive Grid Systemです。

Responsive Grid Systemの３つの特徴

Responsive Grid Systemには３つの大きな特徴があります。

それは

1. 100行以下の軽量サイズ
2. モバイルファースト志向の設計
3. 12～24のグリッドに対応

というものです。

ここからはその特徴について１つずつ紹介いたします。

特徴１：100行以下の軽量サイズ

Responsive Grid Systemをダウンロードすると、中には３つのファイルが入っています。

１つはIEに対応させるための「ie.css」、もう１つはブラウザCSSをリセットする「reset.css」、そしてレスポンシブグリッドを設定できる「responsive-gs-XXcol.css」の３ファイルです。

この３ファイルの総容量はなんとたったの「5KB」。

TwitterBootstrapの圧縮ファイルが合計100KB以上ですので、非常に軽量なフレームワークであるといえます。

特徴２：モバイルファーストな設計

このフレームワークのユニークなところは、「スマートフォン画面がデフォルト」という設計がされていることです。

グリッド幅が全て100％になるように設定されており、タブレット以上ではMediaQuery内に記述されたCSSでグリッド分けされるようになっています。

スマートフォンから設計することでMediaQueryによる上書きを減らし、ページの読み込みを少しでも早くすることが可能となります。

特徴３：３種類のグリッドに対応

Responsive Grid Systemの嬉しいところには、「グリッド幅が3種類から選べる」というものもあります。

2013年10月時点で12カラム・16カラム・24カラムの3種類が配布されており、コンテンツの幅に応じて自由に使い分けることができます。

また、このフレームワークには「グリッド設定」しか記述されていませんので、ナビゲーションやフォームなどのUIパーツのスタイルを自由に設定できるというメリットもあります。

Responsive Grid Systemのデメリット

ここまでResponsive Grid Systemのメリットについて紹介しましたが、もちろんデメリットもあります。

それは「IE8以前に完全非対応」であることです。

PC画面のデザインをすべでMediaQueryで設定しているため、MediaQuery非対応ブラウザで閲覧すると「スマートフォン画面」が表示されることになります。

そのため利用する際は、「IE8以前のブラウザに対応させるか否か」を定義付けする必要があります。

Responsive Grid Systemの使い方

軽量・シンプルなフレームワークですので、使い方も非常に簡単です。

親要素にclass=”container”を設定、子要素にclass=”row”を設定すれば準備は完了。

孫要素にclass=”col span_X”を入れることで、タブレット/PC画面でグリッドX個分の要素が作成されます。

<main class="container">
 <article class="row">
  <section class="col span_4">
  </section>
  <section class="col span_4">
  </section>
  <section class="col span_4">
  </section>
 </article>
</main>

こんな感じですね。

Clearfix用に「clr」というクラスも設定されていますが、「row」を使用していればあまり使い場面はないかと思います。

まとめ

「モバイルファースト」という言葉はWEB制作の中では広く知られるようになってきました。

しかしまだまだPCサイトを作った後、スマートフォン向けに対応させるようなデザイン・コーディング手法が主流です。

軽量かつ扱いやすいCSSフレームワークのResponsive Grid Systemを使うことで、「モバイルファースト」なWEBサイト制作の一歩目を踏み出してみてはいかがでしょうか？