web creators特別号

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

スマートフォンサイト 6-03
可変グリッドによるPCとスマートフォンの両対応

レスポンシブWebデザインでは、ひとつのHTMLファイルであらゆる画面サイズに対応させる。ここでは、レイアウトを変えるだけでなく、スマートフォンで閲覧した際にメニューをボタンで表示させてみよう。

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

BROWSER iOS…5over　Android…1.6ove　rIE…6over　Firefox…3.6over　Safari…3.1over　Chorme…10over

01

「1-03 可変グリッドを採用したレスポンシブウェブデザイン」でも解説しているが、スマートフォンでの表示が可能だ。ただ、レイアウトは変わっても基本的にはPCサイトを縮小したものでしかない。表示はできるが操作も含めて考えるとスマートフォンに対応したデザインとまでは言い切れない部分がある。

そこでここでは、スマートフォンで表示した際に専用サイトに近い操作が可能となる方法について説明する【1-1】。


【1-1】レイアウトだけではなく、メニューもボタンで展開するようにする。

02

まずはjQuery(http://jquery.com/download/)とプラグインの準備をする。

ここでは可変グリッドレイアウトjQueryプラグインにjquery.vgrid.js【2-1】を利用する。

さらに、動作のアニメーションにjquery.easing.js【2-2】、ボックスの角丸表示のため、CSS3に対応していないIE6環境も考慮してjquery.corner.js【2-3】を利用する。


【2-1】jquery.vgrid.js(http://blog.xlune.com/2009/09/jqueryvgrid.html)


【2-2】jquery.easing.js（Ver1.3）(http://gsgd.co.uk/sandbox/jquery/easing/)


【2-3】jquery.corner.js(http://malsup.com/jquery/corner/)

03

PCとスマートフォン両方に対応させるために、メディアクエリを利用して、画面幅480pxを境に可変グリッドと1カラム表示を切り替えるようにする【3-1】。

可変グリッドではコンテンツを2種類の幅で【3-2】、画面幅を狭めるとそれぞれ幅一杯に表示【3-3】。


【3-1】汎用性を考え480px を境に読み込みcss を切り替えている。


【3-2】可変グリッド用のコンテンツボックスは大小２つの横幅。marginとpaddingを含め、綺麗に並ぶサイズを指定。


【3-3】スマートフォン用は各ボックスとも画面幅一杯に表示。

04

PC閲覧時とスマホ閲覧時でそれぞれ適切なJavaScriptと追加CSSを読み込ませるため、JavaScript によるuserAgent判定を利用する【4-1】。


【4-1】userAgent でiPhoneとAndroid を判定。PC 利用時だけ可変グリッド用JS を読み込む。

05

可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) は、並べ替え対象divをオプションで指定。さらにjquery.easing による並び替え動作の指定も追記する【5-1】。


【5-1】ここでは、id属性 grid-content 内のdiv 要素について並べ替え効果を適用。jquery.easingの動作と時間などを指定。

06

スマートフォン閲覧時には右上端にメニューボタンを設け、タップでメニュー展開できるようにする【6-1】【6-2】【6-3】。このスクリプトを外部js化し、HTML内に必要コードを記述してCSSに表示設定をおこなう【6-4】【6-5】。


【6-1】a要素（id i_menu）を右上端に配置


【6-2】a要素（id i_menu）をクリックした際にメニューリストを表示する。


【6-3】


【6-4】HTML内に、ボタンとなる要素とメニューリスト項目を記述する。


【6-5】メディアクエリを利用してCSSを切り替えるので、対応するCSSにdisplay:none;またはdisplay:block;を記述して表示・非表示を切り替える。

07

あとはjsファイルをHTMLと同階層のjsディレクトリに、CSSファイルをCSSディレクトリに収納。メディアクエリによるCSS読み込みとJavaScriptによるuserAgent判定による記述などをHTMLのhead内に組み込めばよい。

今回のサンプルでは、ボックス内に image-boxというclass属性でイメージ用のボックスを用意してその中に画像を配置、CSSで【7-1】のようにボックスの幅に合わせる記述を行っている。


【7-1】


[目次に戻る]

 

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


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