こんにちは、コーディング担当の岡本です。
レスポンシブWEBサイトを作成する際に便利なツールといえば、「Twitter Bootstrap」をはじめとする「CSSフレームワーク」が有名ですね。
特に「Twitter Bootstrap」や「Foundation」「Bourbon」などはナビゲーションやフォームなどのUIパーツまで用意されているので、モックアップ作成などに非常に重宝されています。
しかしいざ実際にECサイトをコーディングするとなると、この「UIパーツ」が厄介者になることもあります。
すでに作成されたパーツを組み合わせての構築が前提ですので、どうしても「オリジナルデザイン」に対応させる手間が生じます。
そして既定のスタイルを打ち消して再設定するため、CSSファイルが肥大化するということにつながることがフレームワークを利用するデメリットでもありました。
今回紹介するCSSフレームワークは違います。
非圧縮で100行以下の軽さに3種類のグリッドに対応したレスポンシブフレームワーク、これが今回紹介するResponsive Grid Systemです。
Responsive Grid Systemの3つの特徴
Responsive Grid Systemには3つの大きな特徴があります。
それは
- 100行以下の軽量サイズ
- モバイルファースト志向の設計
- 12~24のグリッドに対応
というものです。
ここからはその特徴について1つずつ紹介いたします。
特徴1:100行以下の軽量サイズ
Responsive Grid Systemをダウンロードすると、中には3つのファイルが入っています。
1つはIEに対応させるための「ie.css」、もう1つはブラウザCSSをリセットする「reset.css」、そしてレスポンシブグリッドを設定できる「responsive-gs-XXcol.css」の3ファイルです。
この3ファイルの総容量はなんとたったの「5KB」。
TwitterBootstrapの圧縮ファイルが合計100KB以上ですので、非常に軽量なフレームワークであるといえます。
特徴2:モバイルファーストな設計
このフレームワークのユニークなところは、「スマートフォン画面がデフォルト」という設計がされていることです。
グリッド幅が全て100%になるように設定されており、タブレット以上ではMediaQuery内に記述されたCSSでグリッド分けされるようになっています。
スマートフォンから設計することでMediaQueryによる上書きを減らし、ページの読み込みを少しでも早くすることが可能となります。
特徴3:3種類のグリッドに対応
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サイト制作の一歩目を踏み出してみてはいかがでしょうか?