web creators特別号

HTML5・スマートフォン・SNS・Webアプリケーション Webサイト制作最新トレンドの傾向と対策

Webデザイン 1-11
表示領域に合わせて可変するリキッドレイアウト

リキッドレイアウトとは、ブラウザの表示領域に合わせてコンテンツの幅・位置を可変で表示させるもの。表示環境による違いを最適化し、スマートフォン対応などにも有効だ。

制作・文／栗林 宏之 B's StuDio
Browser IE 7over Firefox 3over　Safari 4over

01

リキッドレイアウト（可変グリッド）とはブラウザの幅に合わせてコンテンツの表示範囲（位置）を変えつつ、解像度の違いでユーザビリティを損なわないように最適化したレイアウトを維持する表示方法である【1-1】。


【1-1】ブラウザ幅に合わせてコンテンツの表示領域も変わるのがリキッドレイアウト。

02

基本は幅の指定を相対値で指定することとなる。2カラムレイアウトを例にすると【2-1】、まず全体を含むid［wrapper］にブラウザに対する相対値を指定。ここでは90％とする。コンテンツ部のid［leftColumn］［main］は親ブロックになるid［wrapper］に対し、合計が100％になるよう、それぞれ相対値を指定していく。i d［leftColumn］［main］ともに左寄せ float: left; を追加し、それぞれ20％、80％ と指定する。これでブラウザの幅を広げたり縮めたりすると常に一定の割合でコンテンツ幅が可変することが確認できるようになる【2-2】【2-3】。


【2-1】2カラムパターンを例にする。


【2-2】カラムの合計を100％に。不具合を回避するためマージン等指定しない方が無難。


【2-3】コンテンツが相対的に変化する。

03

この無制限に可変する状態のレイアウトだと、解像度の高いディスプレイで幅を広げきった時、または幅を限りなく狭くしていった時などは逆に見づらく、ユーザビリティが最悪になるという本末転倒な状況になってしまう。 そこで最大幅 max-width: 1260px;、最小幅 min-width: 780px; のように指定することによって極端な想定外のレイアウトになることを回避できる【3-1】【3-2】。


【3-1】最大・最小幅を指定することによって想定外の表示になることを防止する。


【3-2】サイズを制限することで、ユーザビリティを維持する。

04

リキッドレイアウトをうまく利用すると、ブラウザの幅を変えるとコンテンツ要素をそれに合わせて並び変わるようなレイアウトもつくることができる【4-1】。

まず、可変するブロック内にリストタグの<li>でコンテンツを複数制作する。並べた<li>タグに対し幅・高さ200ピクセルを指定し、float: left; 、右辺・下辺に10ピクセルのマージンをとる。親枠を可変幅にするだけで、コンテンツを並べる際に普段使うテクニックをそのまま利用できる【4-2】。ただし、並べたコンテンツの高さがバラバラだとレイアウトが崩れるため揃える必要がある【4-3】。


【4-1】深く考える必要はなく、float: left; で勝手に並んでくれる。


【4-2】リストタグでなく、pタグなどのブロックタグを利用してもよい。


【4-3】並べるコンテンツには固定サイズを指定する。

05

大きさが不揃いのコンテンツを並べたいときはJavaScriptなどの使用が必要になるが、 jQueryプラグイン を使うと容易に組み込むことができる。

jquery.vgrid.js はレイアウトの更新をキレイに、かつ動的に見せる非常に便利なプラグインとなっている。

必要なものは、jQuery本体、jQuery easing、jquery.vgrid.js の3つのスクリプト。これをHTMLに読み込み、さらに【5-1】のソースを記述する。

個々のコンテンツ幅を指定する必要があるが、最小幅をクラス名 small で基本値180ピクセルとした場合、クラス名 middle で2倍の幅＋マージン10ピクセルで370ピクセル、クラス名 large で3倍の幅＋マージン20ピクセルで560ピクセルの3種類の幅を設定してみた。高さも固定することができるが、コンテンツ内容次第の成り行きで問題ない【5-2】。

あとは、id［content］内に<div>タグで先のクラス名を付与していくだけで動作するようになる【5-3】。

コンテンツの動くスピードを調整する場合は、【5-1】のtime: 400, delay: 20 の数値を増減させる。数値を増やすほど動きがゆっくりに、減らすと素早くなるのでいろいろ試してみよう【5-4】。


【5-1】idの名前を変更。コンテンツの動くスピード調整は数字を書き換える。


【5-2】smallの180pxを基準とし、middleは180×2+10=370px、largeは180×2+20=560pxとする。


【5-3】サイズの種類に上限はないが、コンテンツの端が揃うようにサイズを指定する必要がある。


【5-4】time/delay の値を変更することによって、移動する各要素の動くスピードに変化をつけることができる。


[目次に戻る]

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

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