特集：RWD入門
レスポンシブWebデザインの現状と、CSSフレームワーク「Foundation 4」によるサイト制作手法
Webサイトをマルチデバイス対応する際の1つの手法にRWD（レスポンシブWebデザイン）がある。その利点と欠点を考察。また、欠点を補うためのCSSフレームワークを紹介する。
本稿の文章スタイルについて
編集者により、Build Insider基準の文章にアレンジされています。
Webサイトを制作する際、現在ではスマートフォンやタブレットなどの「スマート・デバイス」への対応は必須要件となりつつある。その対応手法の1つが「レスポンシブWebデザイン」（以下、RWD）だ。
しかし、RWDは制作が煩雑になりがちで、制作現場からは決して歓迎されている手法とはいえない。その煩雑さを軽減するために注目されているのが、「CSSフレームワーク」を活用した制作手法である。
本記事では、そんなRWDの現状と、CSSフレームワークの1つである「Foundation 4」を利用したサイト制作手法を紹介しよう。
RWDの利点と欠点
RWDがこれほど注目されたのは、グーグル（Google）がブログで言及した「Building Smartphone-Optimized Websites」（次の画面を参照）および、その翻訳記事の影響が大きいだろう。グーグル自身が特定の技術や手法を推奨することは珍しく、Web制作者に衝撃を与えた。
では、RWDの利点は何だろうか。例えば次のような点が考えられる。
- URLが変化しないので、混乱を防ぎ、検索エンジンにも認識されやすい
- さまざまなスクリーン・サイズに柔軟に対応できる
- コンテンツを1ソースで提供できるので、メンテナンスがしやすい
特に1つ目の「URLが変化しない」という点と、HTMLソースが変化しない点が、グーグルにも推奨されている理由だ（しかし、この「1 URL」「1ソース」という利点は、WordPressなどのCMS（コンテンツ管理システム）を活用すれば、RWDを採用しなくても解決可能なので、必ずしもRWDの方がそうでない場合よりも優れているとはいえない）。
一方で、RWDには制作上の欠点も多く存在する。具体的には以下のような点だ。
- 設計や制作が煩雑で、サイト・デザインに制限が出る
- HTMLソース内に余計なコンテンツが紛れ込みやすく、ファイル・サイズが肥大化しやすい
- 運用中も、常に各スクリーン・サイズを考慮する必要があり、煩雑になりやすい
もちろんそれぞれの問題は、工夫次第で回避することができる。RWDを採用する際、これらの欠点を補う方法として近年注目されているのが「CSSフレームワーク」である。
注目のCSSフレームワーク
Twitterが配布している「Bootstrap」（次の画面を参照）というCSSフレームワークがその代表的な存在で、数々のRWD対応のCSSフレームワークの中でも比較的早い段階で登場した。このBootstrapを使えば、RWDに対応したシンプルなWebサイトを手軽に作ることができる。
Bootstrapの登場後も、下記のとおり、さまざまなRWD対応のCSSフレームワークが登場している。
これらのフレームワークの主な違いは、機能や準備されているデザイン・テンプレートにある。
例えばBootstrapは、非常に高機能で採用しているWebサイトも非常に多い。半面、若干個性も強いので、筆者は（Bootstrapよりも）「Foundation」を好んで利用している。Foundationは、シンプルなデザインで、標準でSCSS（＝CSSを効率的に記述するための記法）に対応していることや、Rubyのプロジェクトに簡単に組み込めたりするので利用しやすいフレームワークである。
そこで以下では、Foundationの使い方を簡単に紹介しよう。
Foundationを導入する
まずは、配布サイトからファイル群をダウンロードする。下記の画面に示すように配布サイトを開くと［Download Foundation 4］ボタンがあるのでこれをクリックし、次に表示されるページ内にある［Default CSS］コーナーで［Download Foundation CSS］ボタンをクリックしてダウンロードするとよいだろう。
ダウンロードした.zipファイルを解凍すると、「css」と「js」などのフォルダ群が展開されるので、この2つのフォルダを適当なフォルダにコピーする。そして、次のHTMLテンプレート（index.html）を準備しよう。
|
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="ja" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja" > <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link rel="stylesheet" href="css/foundation.css" /> …… 1 <script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
<!-- contents -->
<script> ……2
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><¥/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Foundationの「css」／「js」フォルダをコピーしたフォルダ内に、このようなHTMLソースを記述したindex.htmlファイルを（UTF-8エンコードで）作成する。なお、この状態でWebブラウザで表示しても何も表示されない。
- 1FoundationのCSSファイルを読み込んでいる。なお、このファイル以外にも、ファイル容量の小さい「.min.css」も同梱されている。
- 2jQueryよりも軽量なJavaScriptライブラリ「Zapto」を優先的に読み込んでいる。その後、FoundationのJavaScriptライブラリを読み込む。
RWDを実現する「Grid」
Foundationには、多くのスタイルやロジックが準備されている。その中で特にRWDに必要なのは、「Grid」と呼ばれる仕組みである。
Gridとは、画面全体を12列に分け、それを各カラムで何列分を利用するかを定義するものだ（詳しくは「Foundation Docs: Grid（英語）」のページを参照されたい）。例えば、次のHTMLソース（<body>要素内の一部のみを抜粋）を見てみよう。
|
<div class="row">
<div class="large-6 columns" style="background: #a4ffa1">
<h1>Foundation 4サンプル</h1>
<p>ここは本文エリア（左側）です。</p>
</div>
<div class="large-6 columns" style="background: #ffb7d5">
<p>ここはサブエリア（右側）です</p>
</div>
</div>
|
上記のHTMLソースの内容を説明しよう。まず、class属性に「row」を指定した<div>要素で全体を囲む。この中で（列数の）合計が「12」になるように、エリアを作っていく。「large-6」というclass属性値は、「ラージ・スクリーンの場合に6列を利用する」という指示で、この<div>要素が2つあるので、この画面では左右が均等に分かれた画面が構築される（次の画面を参照）。
そして、スモール・スクリーン（＝48em以下で、約760px以下。ラージ・スクリーンはこれより大きなサイズ）になると、1列に変化する。
今度は（先ほどの6列＋6列から）割合を変えてみよう。次のように各class属性を変更してみる。
|
<div class="row">
<div class="large-9 columns" style="background: #a4ffa1">
<h1>Foundation 4サンプル</h1>
<p>ここは本文エリア（左側）です。</p>
</div>
<div class="large-3 columns" style="background: #ffb7d5">
<p>ここはサブエリア（右側）です</p>
</div>
</div>
|
こうすると、次の画面のように3：1の割合のエリアに変化するようになる。こうして、自由に割合を変えてコンテンツ・エリアを作っていくことができるのだ。
また、スモール・スクリーン時に割合を変えることもできる。これには、「small-X」というclass属性値を利用して、次のHTMLソースの例のように記述すればよい。
|
<div class="row">
<div class="large-9 small-6 columns" style="background: #a4ffa1">
<h1>Foundation 4サンプル</h1>
<p>ここは本文エリア（左側）です。</p>
</div>
<div class="large-3 small-6 columns" style="background: #ffb7d5">
<p>ここはサブエリア（右側）です</p>
</div>
</div>
|
この場合、スモール・スクリーンになったら、1：1の割合に変化するというわけだ。
このようにFoundationを使えば、コンテンツの内容に合わせて、スクリーンごとの割合を自由に設定できる。CMSなどで本文を管理する場合にも、シンプルなFoundationなら比較的学習コストを低く抑えられるだろう。
CSSフレームワークを利用したWebサイト制作
Foundationでは、このほかにも文字の大きさなどをスクリーンの大きさによって変化させたり、<table>要素をスモール・スクリーンでも崩れないように調整したりするなど、さまざまな自動制御が行われる。これらの機能を自前で実現する場合を考えると、CSSフレームワーク活用時の手軽さが分かる。
しかし逆に、従来のような、いわゆる「デザイン・カンプ」（＝完成見本）を起こして、それをHTMLで再現する、という作り方をしようとすると、フレームワークで定義されているCSSと干渉してしまい、非常に作業が難しくなってしまうことも考えられる。
専用サイトかRWDか、自前かフレームワークか、Webサイトのスマート・デバイス対策の手法は多岐に渡る。そのWebサイトの制作に合わせた最適な方法を模索する必要があるだろう。
