特集:RWD入門

特集:RWD入門

レスポンシブWebデザインの現状と、CSSフレームワーク「Foundation 4」によるサイト制作手法

2013年5月31日

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制作者に衝撃を与えた。

グーグルのサイト「Building Smartphone-Optimized Websites

 では、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サイトを手軽に作ることができる。

CSSフレームワークの代表「Twitter Bootstrap

 Bootstrapの登場後も、下記のとおり、さまざまなRWD対応のCSSフレームワークが登場している。

 これらのフレームワークの主な違いは、機能や準備されているデザイン・テンプレートにある。

 例えばBootstrapは、非常に高機能で採用しているWebサイトも非常に多い。半面、若干個性も強いので、筆者は(Bootstrapよりも)「Foundation」を好んで利用している。Foundationは、シンプルなデザインで、標準でSCSS(=CSSを効率的に記述するための記法)に対応していることや、Rubyのプロジェクトに簡単に組み込めたりするので利用しやすいフレームワークである。

 そこで以下では、Foundationの使い方を簡単に紹介しよう。

Foundationを導入する

 まずは、配布サイトからファイル群をダウンロードする。下記の画面に示すように配布サイトを開くと[Download Foundation 4]ボタンがあるのでこれをクリックし、次に表示されるページ内にある[Default CSS]コーナーで[Download Foundation CSS]ボタンをクリックしてダウンロードするとよいだろう。

Foundationの公式サイト

 ダウンロードした.zipファイルを解凍すると、「css」と「js」などのフォルダ群が展開されるので、この2つのフォルダを適当なフォルダにコピーする。そして、次のHTMLテンプレート(index.html)を準備しよう。

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>
HTMLテンプレート(index.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>要素内の一部のみを抜粋)を見てみよう。

HTML
<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>
FoundationのGridを定義しているサンプルHTMLソース(<body>要素内の一部のみを抜粋)

 上記のHTMLソースの内容を説明しよう。まず、class属性に「row」を指定した<div>要素で全体を囲む。この中で(列数の)合計が「12」になるように、エリアを作っていく。「large-6」というclass属性値は、「ラージ・スクリーンの場合に6列を利用する」という指示で、この<div>要素が2つあるので、この画面では左右が均等に分かれた画面が構築される(次の画面を参照)。

上記のサンプルを「ラージ・スクリーン」のWebブラウザで表示した例: 左右が均等に分かれた画面

 そして、スモール・スクリーン(=48em以下で、約760px以下。ラージ・スクリーンはこれより大きなサイズ)になると、1列に変化する。

上記のサンプルを「スモール・スクリーン」のWebブラウザで表示した例: 1列で上下になった画面
上記のサンプルを「スモール・スクリーン」のWebブラウザで表示した例: 1列で上下になった画面

 今度は(先ほどの6列+6列から)割合を変えてみよう。次のように各class属性を変更してみる。

HTML
<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>
FoundationのGridを「9列+3列」に変更したサンプルHTMLソース(<body>要素内の一部のみを抜粋)

 こうすると、次の画面のように3:1の割合のエリアに変化するようになる。こうして、自由に割合を変えてコンテンツ・エリアを作っていくことができるのだ。

上記の「9列+3列」のサンプルを(ラージ・スクリーンの)Webブラウザで表示した例: 3:1の割合のエリアに変化

 また、スモール・スクリーン時に割合を変えることもできる。これには、「small-X」というclass属性値を利用して、次のHTMLソースの例のように記述すればよい。

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>
ラージ・スクリーン=「9列+3列」/スモール・スクリーン=「6列+6列」のサンプルHTMLソース(<body>要素内の一部のみを抜粋)

 この場合、スモール・スクリーンになったら、1:1の割合に変化するというわけだ。

ラージ・スクリーン=「9列+3列」/スモール・スクリーン=「6列+6列」のサンプルを(スモール・スクリーンの)Webブラウザで表示した例: 1:1の割合のエリアに変化
ラージ・スクリーン=「9列+3列」/スモール・スクリーン=「6列+6列」のサンプルを(スモール・スクリーンの)Webブラウザで表示した例: 1:1の割合のエリアに変化

 このようにFoundationを使えば、コンテンツの内容に合わせて、スクリーンごとの割合を自由に設定できる。CMSなどで本文を管理する場合にも、シンプルなFoundationなら比較的学習コストを低く抑えられるだろう。

CSSフレームワークを利用したWebサイト制作

 Foundationでは、このほかにも文字の大きさなどをスクリーンの大きさによって変化させたり、<table>要素をスモール・スクリーンでも崩れないように調整したりするなど、さまざまな自動制御が行われる。これらの機能を自前で実現する場合を考えると、CSSフレームワーク活用時の手軽さが分かる。

 しかし逆に、従来のような、いわゆる「デザイン・カンプ」(=完成見本)を起こして、それをHTMLで再現する、という作り方をしようとすると、フレームワークで定義されているCSSと干渉してしまい、非常に作業が難しくなってしまうことも考えられる。

 専用サイトかRWDか、自前かフレームワークか、Webサイトのスマート・デバイス対策の手法は多岐に渡る。そのWebサイトの制作に合わせた最適な方法を模索する必要があるだろう。

サイトからのお知らせ

Twitterでつぶやこう!