デザイン＆レイアウト 1-05
水平方向に展開するフォトギャラリー

目的のコンテンツだけを展開して表示するアコーディオン式メニュー。垂直方向が一般的だが、水平方向に展開するアコーディオンでフォトギャラリーページを作ってみよう。

制作・文／高橋としゆき（Graphic Arts Unit）

BROWSER IE…6over　Firefox…4over　Safari…3.6over　Chrome…10over

01

水平アコーディオンの実装にはjQueryプラグインの「zAccordion」を利用する。まずは、「zAccordion」のプラグインファイルをサイトからダウンロードしてhead要素で読み込もう【1-1】。もちろんjQuery本体も必要だ。また、jQueryのイージングライブラリ「jQuery Easing」も利用するため、これも用意しよう。

読み込みは「jQuery 本体」、「jQueryEasing」、「zAccordion」の順番としておく【1-2】。

【1-1】「http://www.armagost.com/zaccordion/」から「zAccordion」をダウンロードする。あわせてjQuery本体（http://jquery.com/）と「jQuery Easing」（http://gsgd.co.uk/sandbox/jquery/easing/）もダウンロードしよう。

【1-2】HTML のhead 要素で必要なプラグインを読み込んでおく。

02

ギャラリーのサイズなど、外観の仕様を決めていこう。写真1枚あたりの大きさは、幅700px×高さ450pxとする。これにアコーディオンを開くためのタブが付加される。タブの大きさは幅40pxにする。写真とタブを含めた幅は740pxだ。これを6枚用意するので、ギャラリー全体の幅は940pxとなる【2-1】。

【2-1】コンテンツの内容とサイズの構成。ひとつのコンテンツには、3つの要素が入り、それが6枚重なった状態だ。ギャラリー全体の幅は940pxとなる。

03

ギャラリーの仕様が決まったらHTMLを作成しよう。ギャラリーのコンテンツはli要素でマークアップする。今回は6 枚の写真を使うのでli要素が6つのリストとなった。li要素の中身は、タブのh3要素と写真本体のdiv要素、さらにキャプションのp要素だ。h3 要素には「tab」、div 要素には「photo」、p 要素には「caption」というclass 名を付加しておく【3-1】【3-2】。

【3-1】コンテンツはli 要素内に3 つの要素が含まれる単純なもの。これが6 つで6 枚分のギャラリーとなる。

【3-2】内容はすべて絶対配置でli 要素内にレイアウトする。

04

続いてCSS の作成だ。

ギャラリーのコンテンツとなるli要素とその中身に対して【4-1】のようなスタイルを定義する。h3.tabとdiv.photoを横並びにして、写真の下部にp.captionを重ねるデザインだ。アコーディオンのギャラリー全体はプラグインによって自動的にレイアウトされるため、特にスタイルを設定しておく必要はない。

【4-1】ギャラリーのスタイル。キャプションの背景はrgba関数を使った半透明の処理だが、IE8以前は非対応なのでハックで黒ベタにしている。

05

コンテンツの中身のスタイルが設定できたら、プラグインを有効にしよう。

head 要素のプラグイン読み込み後に【5-1】のコードを追加する。これが「zAccordion」を有効にするための処理だ。

基本的な記述は「$(ギャラリーのul要素).zAccordion()」だが、いくつかのオプションを指定することができる。主なオプションは【5-2】の通りだ。

スライダーのclass名は「slide」とした。

【5-1】「zAccordion」を有効にして、アコーディオンを構築するための処理。いくつかのオプションを指定してカスタマイズしている。

【5-2】「zAccordion」の主なオプション。この他にもいくつかのオプションやメソッドが用意されている。

06

「zAccordion」のオプションでは、ギャラリー全体構築完了時とスライド開始、終了時のコールバック関数を指定してある【6-1】。

今回は写真のキャプションとして簡単な文章が入るが、それらをフェードイン、フェードアウトさせるものだ。

スライドによって隠されるli 要素には「（スライダーのクラス名）-previous」、新たに表示されるli要素には「（スライダーのクラス名）-open」、閉じているli 要素には「（スライダーのクラス名）-closed」のclass名が付加されるため、これを利用してキャプションの表示、非表示をコントロールする。

【6-1】状況に応じたコールバック関数を使って、キャプションのフェードイン、フェードアウトを実現する。

07

最後に、ギャラリーを画面中央にレイアウトし、背景やタイトルなどの要素を整えて完成だ【7-1】【7-2】。

【7-1】コンテンツ全体は、左右のmargin を「auto」にすることで中央に揃える。

【7-2】ギャラリー以外の要素の体裁を整えて、ページデザインを完成させる。

[目次に戻る]

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

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