TOP > web creators > Webサイト制作最新トレンドの傾向と対策 - Webデザイン

  • このエントリーをはてなブックマークに追加
  • Twitter
  • Clip to Evernote

web creators

 
 

連載記事 web creators

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

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

canvasを使ってグラフを描く

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

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



01

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

【1-1】ヘッダー・フッターを含め、大きく5つにわかれる。
【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-1】2カラムパターンを例にする。


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


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



03

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

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


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



04

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

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

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


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


【4-3】並べるコンテンツには固定サイズを指定する。
【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-1】idの名前を変更。コンテンツの動くスピード調整は数字を書き換える。


【5-2】リストタグでなく、pタグなどのブロックタグを利用してもよい。
【5-2】smallの180pxを基準とし、middleは180×2+10=370px、largeは180×2+20=560pxとする。


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


【5-4】並べるコンテンツには固定サイズを指定する。
【5-4】time/delay の値を変更することによって、移動する各要素の動くスピードに変化をつけることができる。



[目次に戻る]

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

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


 
 




この記事をチェックした人はこんな記事も読んでいます。

  • 【web creators】

    Webサイト制作最新トレンドの傾向と対策

  • 【web creators】

    新世代Web制作テクニック総特集 - スマートフォンサイト

  • 【web creators】

    Webサイト制作最新トレンドの傾向と対策 - スマートフォン・タブレット

  • 【Web デザイン】

    ゼロからはじめるHTML5でのサイト制作

おすすめの記事

  • 【インタビュー】

    ソーシャルアプリ制作の裏側/第7回ドリコム「ちょこっとファーム」

  • 【インタビュー】

    ソーシャルアプリ制作の裏側/第1回gloops「大召喚!!マジゲート」

  • 【インタビュー】

    ソーシャルアプリ制作の裏側/第8回コロプラ「プロ野球PRIDE」

  • 【インタビュー】

    ソーシャルアプリ制作の裏側/第5回コナミデジタルエンタテインメント「DRAGON COLLECTION」(海外版)

MdN出版物のご案内

MdN定期購読のご案内
近刊発売の新刊情報
訂正とお知らせ・ダウンロード
MdNの電子書籍

MdN のデザイン求人情報

ログイン

メールアドレス
パスワード