Webデザイン 1-09
スマートフォン／タブレットに対応した
Webデザインとは（後編）

昨今、WebサイトはPCから見るためだけのものではなくなってきている。スマートフォンやタブレット端末、テレビ等様々なデバイスに対応する必要がある。ここでは、それらを考慮したレイアウトデザインについて考える。

制作・文／白木達也（アローグ・プランニングス）　飯塚まり子
Browser Firefox 3.5over　Safari 3over　Chrome 10over

ブラウザによる解釈の違い

今後統一されていくと思われるが、現状CSS3への対応の進み具合がブラウザによって異なる。ブラウザの表示を行うレンダリングエンジンには、いまだ最大のシェアを誇るIE（Trident）の他に、大きくwebkit系（Google Chrome, Safari）とmozila系（Firefox）のふたつがあるが、ブラウザによる解釈の違いも、レイアウト崩れの原因となるため注意したい。

それぞれのブラウザの拡張機能を使うには、現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要がある。

Media Queries

ブラウザ以外にも、デバイスにおける画角の違いなど、さまざまな課題があるが、ワンソースであらゆるデバイスからのアクセスに対応できれば、運用コストなどはぐっとおさえられる。

そのための鍵となるのが「Media Queries」だ。実はMedia Queriesは、HTML5と同時にリリースされた新しい技術ではない。CSS2では「Media Type」という型があったが、その拡張版がMedia Queriesだ【01】【02】。

実際のソース例は【03】のようになる。また、「media=""」以下に、デバイスの種類の指定と、その場合の解像度の最大値の指定がされている。パラメータとして指定できるのものには、【04】のような値がある。

Media Queriesを正しく動作させるには、合わせてView portの指定が必要になる。View portでは、最初に読み込まれたときの画面サイズや、ピンチイン/アウトの制御、拡大率を指定する。【05】が実際のソース例だ。

Media Queriesも難点はある。レイアウトをCSSで切り替えているだけであるため、スマートフォンでもTVでも、結局は全てのコンテンツをローディングしてしまっている。

つまり、細かく対応しようとするほど、大量のコードを読み込んだり、元々高解像度の画像を縮小して表示するため、読み込みが重くなる。モバイル回線など、限られた環境の中では別サイトを構築することも視野に入れつつ、バランスを考えて使うようにしたい。

【01】Media Queries(http://mediaqueri.es/)
Media Queryを使って作られたサイトのショーケース。すでにさまざまなサイトが登録されており、MediaQueryの普及が加速しつつあることがわかる。

【02】320 and up（http://stuffandnonsense.co.uk/projects/320andup/）
さまざまなビューポートサイズへの対応を想定した、Media Queryのリセット用CSS紹介サイト。

【03】Media Queriesのコード例。「media=」以下に縦横幅などの指定があるのがわかる。

【04】Media Queriesのコードにおいて「media=」で指定できる項目。想定されるアクセスデバイスによって使い分ける。

【05】View portを用いたコード例。

2段組みレイアウト

それでは実際の組み方を見てみよう。まずは、HTMLで情報の優先度順に上からマークアップを行う。スタイルを何もあてていない状態では、当然ながら縦にボックスが並んだ状態になる。ボックス全体を【content】とし、カラムを上から【content_01】、【content_02】としよう【06】。

まずは、全コンテンツを全て含んだページ全体の幅を指定する。widthを%で指定すれば、ブラウザの幅の変化に合わせて可変になる。その後、【content】に対して「display:box;」を指定する。「display:box;」で横並びにした場合、左から右に並んで表示される。表示順序を入れ替えたい場合は「box-ordinalgroup」プロパティを使おう。実際のソースと画面は【07】【08】【09】のようになる。

【06】まずは大まかなレイアウトをモデル化する。ここまでは通常のCSSでのレイアウトと特に異なるところはない。

【07】レイアウトのHTML記述。

【08】CSS記述。

【09】これがレイアウトのサンプルである。テキストの分量が違っているが高さが揃っているのがわかる。これがこのコードのメリットである。

多段レイアウト

3段組みも、それ以上の場合も基本的には2段組みと同様の考え方で指定できる。左右のコンテンツをwidht:30%ずつで指定した場合、メインコンテンツにwidth:60%を指定するだけで、可変長の3段組みが完成する【10】。

【10】3段組みレイアウトのモデル。

高さの指定

「box-pack」プロパティでは、ボックスの横方向の位置を指定できる。パラメータには「start,end,center,justify」があり、例えばcenterを指定すると、親ボックスに対してセンタリングになる【11】。

【11】「content_01」に「box-pac=”center”」を指定したときの概念図。親ボックス全体におけるセンタリングになっているのがわかる。

伸縮比率

「box-flex」はボックスの伸縮比率を指定する。例えば、一つのbox に「boxflex:1.0」もう一つのboxに「box-flex:2.0」を指定するすると、2.0を指定した子要素は1.0を指定した子要素の2倍伸縮する【12】。

【12】「box-flex」の概念図。倍数的にサイズが拡大されている。

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。