[Design] Responsive Layoutを学ぶ(1)

PCとスマートフォン両対応ページを作っていると、避けて通れないのがレイアウトの問題。昨年サンフランシスコのAdobe Maxで紹介していたResponsive Layoutが良いんだろうと思って調べたのですが、なかなか日本語でまとまった資料が見つからず。

どうも「Responsive Layout」を日本で何と呼んでいるか分からず、だから見つからないのだと思うのですが。海外にすごく良い記事があったので、こちらのサンプルを用いながら、自分用にまとめておきます。

なお、サンプルは元記事のものへのリンクですが、本文は自分のざっとの理解で書いていますので、翻訳にはなっていません。ご了承ください。

デバイスごとに個別にページを用意

サイトが世に必要とされはじめた頃は、これが定番でしたね。サブドメインで m.example.com とか mobile.example.com とか。最近になっても smartphone.example.com なんてのも見かけます。

日本のガラケー対応は、あまりにもPC向けページとは作りが異なるので、結局これしかない部分もあります。また、デバイスによって画面のステップ数を変えるようなこだわりがある場合は、必要かもしれません。

しかし、ほぼ同じアーキテクチャで閲覧できる最近のスマートフォンで、そうした手間をかけるのは面倒です。SEOやメディアからの被リンクにも、あまり良いことは無いですし。

かといって、PCそのままのページ構成では読みにくい場合があることも事実。そこでまず出てくるのがフレキシブル・レイアウトです(まだ、今回取り上げたい「レスポンシブ・レイアウト」ではないので、慌てずに)。

フレキシブルなレイアウト

フレキシブル・レイアウトがどういったものなのか、サンプルを見てみましょう。

フレキシブル・グリッド・サンプル (A List Apart)

PCブラウザで閲覧している場合、ウインドウサイズを大きくしたり小さくしたりすると、どういうものかすぐに分かると思います。いわゆる Fruid Grid (可変グリッド)と呼ばれる構造に、フレキシブル・イメージという親のグリッドにあわせて画像サイズが自動調整されるテクニックを用いた、まさに「フレキシブルな」レイアウトになっています。

可変グリッドやフレキシブル・イメージについては詳細な説明は割愛しますが(要望があれば、どこかで)、スクリプトは事実上IE対応のみで、マトモなブラウザ相手であればHTML+CSSだけでサクサク実装できるのが魅力です。

これで概ね幸せだったのですが、iPhoneサイズで見るには、まだ残念な感じです。極端にブラウザを細くすると、グリッドがヘシャげて読みにくくなることが分かるかと。

そこでレスポンシブ・レイアウトの登場です。

レスポンシブなレイアウト

レスポンシブ・レイアウトでは、フレキシブル・レイアウトのように画面サイズに対して線形比率でレイアウトするのではなく、一定の閾値(ブレーク・ポイント)を堺にスタイルを切り替えることで、更に柔軟な構成を実現します。

まずは、実際に動作するサンプルを見てみましょう。

レスポンシブ・レイアウト・サンプル (A List Apart)

ブラウザサイズを変えていくと、ある地点でレイアウトが変わることがわかると思います。たとえば小さくしていくとサイドバーとコンテンツが縦に並んだり、画像の配置が変わったりといった具合です。この切り替わる境界点が「閾値」の部分です。

更に注目して欲しいのは、依然としてフレキシブル・レイアウトの動作も残している点です。閾値内でのレイアウトには、また従来のテクニックを組み合わせることが可能になっています。

これであれば、例えば同じスマートデバイスでもiPhoneとGalaxy Tabのように大きさが異なるディスプレイで、あるいは縦横の切替で、それぞれに最適な見せ方をすることができます。

次に、具体的な実装を見て行きましょう。

メディア・クエリー

元々はCSS2.1から登場した登場したメディア・タイプが、「デバイスによってスタイルを切り替える」という発想のスタートだったと思います。

実際に多くのメディアタイプが定義され、可能性を感じさせる仕様でした。しかし、メディア側の実装がなかなか追いつかず、実質的にはprintくらいしか使われていないと思います。

そこで登場したのが、考え方を引き継いで、より柔軟な実装を可能にした「メディア・クエリー」です。

メディア・クエリーは、メディア・タイプのようにデバイス依存のクラスを作成するのではなく、レンダリングするデバイスのサイズや性能を調べ、それを基に適用するスタイルを切り替えるものです。例えば次のコードは、iOS、Android、PCなどを問わず、出力先がスクリーン(プリンタなどではなく)で、デバイスの横幅が480px以内であればshetland.cssを適用するという意味になります。

この例では、960×480のスマートフォンを縦に持っている時は、横幅が480pxなのでスタイルが読み込まれます。しかし、横に持ち替えると条件に合致しなくなるので、この行は無視されるようになります。

こうしたことは、近年はJavaScriptを用いて実現するのが常套でした。しかし、メディア・クエリーの実装が進んできたことで、こちらを使えば更に解像度や色数など、更に進んだ機能にも対応できます。

またメディア・クエリーは、スタイルシート自体を切り分けるだけでなく、CSSファイルの中に記述することも可能です。

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

更に、importの記述により切り分けることも出来ます。

@import url("shetland.css") screen and (max-device-width: 480px);

特定のデバイスを見分けて切り分けるよりも、その特性にあわせたスタイルを適用する方が合理的であるという考え方を基に、こうした機能は実装されました。

レスポンシブ・レイアウトは、このメディア・クエリーを活用して多種多様なデバイスで最適な表示を実現するようデザインします。

次回で、具体的な実装方法を見ていきます。

Related posts:

1. [Design] Responsive Layoutを学ぶ(2)