web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

デザイン＆レイアウト 1-03
可変グリッドを採用したレスポンシブWebデザイン

ECサイトなど、トップページに小さな商品サムネイル画像のボックスを配置した、可変グリッド対応のサイトデザインについて簡単に説明する。多デバイスに対応したWebサイトに活用できる。

制作・文／marine（松本まりん）

BROWSER IE…9over　Firefox…3.6over　Safari…5over　Chrome…3over

 

01

ECサイトのように沢山のボックスを配置したレイアウトの場合、divでボックス配置すると、デバイスの画面サイズが異なる場合、ボックスが綺麗に並ばずにレイアウトが崩れてしまう。そこで、ここでは可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js、jquery.easing.js)を利用する。まずは、jQuery【1-1】と各プラグインを、それぞれのサイトから入手しよう【1-2】【1-3】。jquery.vgrid.jsは前項で解説されているMasonryとよく似た可変レイアウト用のプラグインで、スムーズなアニメーションと動作の軽さに定評がある。最大の特徴は、国産のプラグインなので、説明やバージョンアップ情報などが日本語である点だろう。


【1-1】jQuery 公式サイト
（http://jquery.com/download/）からダウンロードする。


【1-2】jquery.vgrid.js
（http://blog.xlune.com/2009/09/jqueryvgrid.html）。
GitHub 掲載の最新版をダウンロードしよう。


【1-3】jquery.easing.js
（http://gsgd.co.uk/sandbox/jquery/easing/）
スムーズな動作のため、jquery.easing.jsを利用する。（Ver1.3を利用）

02

ダウンロードし解凍した3つのjsファイル（jquery.js、jquery.vgrid.js、jquery.easing.js）をHTMLと同階層にあるjs ディレクトリに収納する。次にHTMLファイルのhead 内にscript 要素を組み込み【2-1】、オプションコードを記述【2-2】。なお今回は通常版を利用している。

ここでは、id属性 grid-content 内にあるdiv 要素について効果を適用する設定とする。easingはエフェクトの動きを変化させるための関数で、色々な効果がある。ここではeaseOutQuintを指定して徐々に動く効果としたが、easeOutBounceのような弾む効果なども可能だ。timeやdilay を変更すると動作時間や遅延設定もできる。


【2-1】HTML にscript 要素を追加。


【2-2】オプションコード等を記述。コンテナ要素 gridcontentに対して動作適用指定。jquery.easing.js のアニメーション、動作時間の指定などが可能。

03

次にbodyにコンテナ要素とボックス要素を作成する。

まずは可変グリッドを適用するエリアとなるコンテナ要素（#grid-content）と並び替えるボックス要素を作成。ボックス要素には横幅を指定。表示幅を変更する場合は、整数倍とする【3-1】【3-2】。そうでないと並び替えにガタツキが出てしまう。なお、ボックス内には自由にテキストを記述できる【3-3】。


【3-1】ボックス要素の表示幅はpaddingを含んだ横幅となることに注意しよう。


【3-2】


【3-3】ボックス内には自由な記述ができる。

04

ボックス内で画像を利用する場合【4-1】、img 要素には"width","height"属性を正しく指定する必要がある【4-2】。指定しないと、画像が読み込み後にサイズ取得することになるため、表示レイアウト崩れが生じることがあるので注意しよう。

サンプルの表示サイズを変えると、【4-3】【4-4】【4-5】のようにレイアウトが変化していくので確かめてほしい。これで様々な画面サイズに対応したレイアウトのサイトができあがる。

今回のサンプルでは利用していないが、ブラウザ表示幅が余りに広いと（ブロックが小さく）余白が多くなってしまうのでCSSのメディアクエリを利用するのもよいだろう。表示幅が大きくなるとブロックサイズも拡大してくれる。


【4-1】


【4-2】イメージには、width・height を指定する。


【4-3】


【4-4】


【4-5】

【4-3】〜【4-5】
表示サイズを変えると、上記のようにレイアウトが変化していくので、さまざまな解像度の画面に対応できる。メディアクエリを@media (min-width: 1024px) などとすれば、ブラウザの表示幅が1024pxより大きい場合に、ブロックサイズ（大）で表示し余白を減らしてくれる。


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。