web creators特別号 |
HTML5・スマートフォン・SNS・Webアプリケーション Webサイト制作最新トレンドの傾向と対策 |
Webデザイン 1-09
スマートフォン/タブレットに対応した
Webデザインとは(前編)
昨今、WebサイトはPCから見るためだけのものではなくなってきている。スマートフォンやタブレット端末、テレビ等様々なデバイスに対応する必要がある。ここでは、それらを考慮したレイアウトデザインについて考える。
制作・文/白木達也(アローグ・プランニングス) 飯塚まり子
Browser Firefox 3.5over Safari 3over Chrome 10over
マルチデバイスに対応したレイアウト
スマートフォンやタブレット端末など、新しいWeb接続機器が次々に登場したことで、Webサイトのレイアウトについて注意すべき点も増えてきた。その代表的な例が、レイアウト面でのマルチデバイスへの対応だ。WebサイトへのアクセスデバイスがほぼPCに限られていた時代は、レイアウトの多くが固定長で作られていた。ブラウザごとの違いはあったものの、それらの多くは標準化された技術で制作し、最後に微調整をすれば、ほぼそれで対応できる程度の違いに過ぎなかった。しかし、iPhoneやiPad、Android端末などは、そもそもディスプレイの解像度がPCの場合とまったく違うため、それとは根本的に異なる対応が必要とされる。
固定枠マルチカラムレイアウトは、CSSが標準になり始めた頃から広く使われている。紙面のレイアウトを模した固定長の段組みデザインで、PCで見ることを前提としたデザインとしてはもっともポピュラーなものだ。まずはこの固定枠マルチカラムについて組み方を具体的に説明していこう。
従来のマルチカラムデザインの考え方
従来のPCメインにおけるマルチカラムのレイアウトは次のような考え方が一般的だ。細かいバリエーションはあるものの、基本的な構造はブラウザに表示させるコンテンツを大きく「ヘッダ」「コンテンツ」「フッタ」の3つの領域に分割する。そしてさらに「コンテンツ」を「メインコンテンツ」と「サブコンテンツ」に分ける【01】。それぞれの要素には固有のidを割り振っていく。ここでは、メインコンテンツを【content_main】、サブコンテンツを【content_left】とし、両方を【content】でくくりグループ化する。この場合、【content】が「親」ボックス、【content_main】および【content_left】が「子」ボックスになる。
次にデザインの内容に入っていこう。まずは、全体をくくる【content】の幅を指定する。ここでは1000pxに固定した。【content_left】にそれぞれwidthとfloatを指定し、【content_main】にwidthと、【content_left】幅+カラム間幅のmarginを左側に指定する。ここでは、【content_main】を800px、【content_left】を180pxにしているため、カラム間に20pxの余白があることになる【02】。
最後に、カラム全体をグループ化している【content】に、後述のclearfixを指定する。floatは、指定するとその要素のheightを無効にするため、後に続くコンテンツの表示を崩れてしまう。floatを後述のclearfixによって解除することで、全体のレイアウト作成が完了となる。実際のソースは【03】【04】のようになる。
XHTMLでコーディングする場合は、【05】のようなclearfixがよくある形になっている。
CSSでレイアウトを組むようになってから、floatを解除するためのclearfixについてさまざまな議論が行われている。しかし、ブラウザの進化とともに必要な記述も変わってきている。今後も、ブラウザの進化によって記述は変わっていくだろう。
なお、固定長マルチカラムレイアウトでページを作成した場合、文字を拡大するとカラムは縦方向にのみ伸びて表示される。
コンテンツ全体の幅が固定されているため、ブラウザを大きく表示させてもコンテンツのレイアウトには影響しない。これをfixed Layoutと呼ぶ。
しかしこれだと、横方向の解像度がPCブラウザとは異なるiPhoneなどのスマートフォンでは、一画面に収まりきらず、不都合なスクロールバーが出現してしまうこともある。
そこで、すなわちスマートフォンでもできるだけPCブラウザにおける表示を再現できるような方法を検討していく必要があるだろう。
その対策として注目が集まっているのが、端末の解像度や画面の回転に合わせて幅が可変になるリキッドカラムレイアウトである。なお、リキッドレイアウトに関しては、第16回の「表示領域に合わせて可変するリキッドレイアウト」で解説する予定だ。
【01】現在もっとも一般的な構成。ロゴや著作権表示、メニューなどが配置しやすく人気だが、端末によっては初期表示では左コンテンツ部分しか見えない場合もありうる。
【02】CSSでの配置イメージ。floatで配置するとカラム間の空白部分が自動的に生まれる。ヘッダー・フッターで1000pxなのに対して、左コンテンツ+メインコンテンツで980pxなので、余白は20pxとなる。
【03】【02】でみたレイアウトのHTML記述例。<content>でくくられたエリアを<clearfix>で指定して、レイアウトを崩さないようにしているのがわかる。
【04】【02】でみたレイアウトのCSS記述例。ごく単純だが、HTMLでclearfixを指定しないと、<content_main>と<content_left>の縦方向のサイズによってはレイアウトが崩れてしまうことがある。
【05】XHTMLにおけるclearfixの定義例。IE6とIE7ではXHTMLへの対応状況が異なるため、別々の定義が必要になる。
CSS3でのボックスレイアウト
CSS3でのボックスレイアウトHTML5とCSS3以前のレイアウトでは、floatを使ってカラムを組むのが一般的だった。しかし、CSS3では親ボックスに「display:box;」と指定するだけで、親ボックスが内包するボックスを横並びにする事ができる【06】。また、「display:box;」でボックスを横並びにした場合、もっとも高いheightの高さに合わせて、自動的に全ての高さが揃うようになっている。【06】「display:box; 」と指定した場合のレイアウトの並び方のサンプル。この指定では高さが揃うので、clearfixによる指定は不要となる。
(後編に続く)
[目次に戻る]
【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。
※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。