Lesson 09 ビジュアルがスライドするナビゲーション - Webデザイン表現&技法の新・スタンダード・インタラクション編

Webデザイン 表現&技法の 新・スタンダード

Lesson 9

ビジュアルがスライドする ナビゲーション

	制作・文			高橋としゆき（Graphic Arts Unit）
＞	To Use			CSS | JavaScript
＞	Browser			IE 7over | Firefox 3over | Safari 5over

ビジュアルが滑らかにアニメーションしながらスライドするギミック。視覚的なおもしろさに加え、1画面内で内容を効率的にまとめるのにも有効だ。jQueryを利用して効率的にコーディングを行おう。

まず、スライドするメインのビジュアルと、ナビゲーションのボタンとして使うサムネイル画像を用意しておこう。ここではそれぞれ4点ずつ用意した。また、ロゴや背景画像など、必要なパーツも合わせて用意しておく【1-1】【1-2】【1-3】。


【1-1】メインビジュアルの画像


【1-2】ナビゲーションのボタンになる画像


【1-3】

パーツの準備ができたらHTMLを記述していこう。【2-1】。のように記述して、メインビジュアルをul要素でマークアップする。ul要素の外側にあるdiv要素は、ビジュアルの必要な範囲のみを表示する「マスキング」として機能するものだ。続 けて【2-2】を追記し、ナビゲーション部を作成する。


【2-1】「id="main"」のdiv要素がマスキングとして機能する


【2-2】ナビゲーションの各画像にはリンクを設定するが、href属性は後で設定するので現時点では「#」にしておこう

次にCSSの作成だ。まずはメインビジュアルから【3-1】のようにli要素をfloat して、画像を横並びにしておく【3-2】。このとき注意するのはul要素に幅を指定しておくこと。こうしないと、マスキング用div要素の幅に合わせて、li要素がカラム落ちしてしまう。今回は幅600ピクセルの画像を4つ横並びにするので、liに設定した左右paddingの50ピクセルを計算に入れると、ul要素の幅は2800ピクセルとなる。


【3-1】ボックス全体に「More...」のa要素を広げて内容を覆い隠すことで全体リンクを実現する


【3-2】要素をfloatで横並びにする。paddingを含めたul要素全体の幅は2800ピクセルだ

さらにマスキング用div 要素のスタイルを設定しよう。【4-1】を追記し、div要素の幅を700 ピクセルに設定した上で「overflow:hidden」を指定する。内包するul 要素は幅2800 ピクセルなので当然オーバーフローしてしまうが、「overflow:hidden」を指定してあるので、はみ出した範囲は非表示になり、結果として内容をマスキングすることができる【4-2】。


【4-1】マスキング用div 要素に「overflow:hidden」を指定する


【4-2】この図のように、ul要素をdiv要素でマスキングする。ul要素を左右に動かすことで、スライドを実現する仕組みだ

続いてナビゲーションのCSS を【5-1】のように記述する。これもfloat による単純な横並びの構造だ。9 〜11 行目の「ul#navi li.active」は、現在選択中のナビゲーションの上に表示される三角形（吹き出しのような形状）を表示するためのスタイル。つまりli 要素に「class="active"」を追加すればボタンは選択中の状態になるということだ。


【5-1】9 〜11行目で選択中のボタンのスタイルもあらかじめ定義しておく

ここからはJavaScriptの記述だ。要素の取得やアニメーション処理を効率化するため、jQueryを利用する。jQueryのサイトからJavaScriptファイルをダウンロー ドし、head要素内で読み込む。さらに、新規のテキストファイルを「slider.js」というファイル名で作成し、これも合わせて読み込んでおく。読み込む順番はjQueryを先にしておこ【6-1】。


【6-1】head要素内にこの2行を記述してJavaScriptファイルを読み込む

「slider.js」を開き【7-1】を記述する。これは、最初に表示する画像の番号と、メインビジュアルの要素を取得して変数に代入する初期化の処理となる。画像の番 号についての考え方は【7-2】の通りだ。さらに、選択中のナビゲーションをアクティブ状態にするため、一度だけスライドの処理を実行している（12行目）。


【7-1】初期設定と初回処理のためのスクリプト


【7-2】JavaScriptで使うための画像番号。左から「0」…「3」というようにした。ゼロから始まることに注意しよう

続いて【8-1】を追記する。これが実際にビジュアルをスライドさせるための関数になる。この関数は引数としてスライド先の画像番号を受け取る。たとえば、一番 左の画像を表示したい場合は「0」、左から3番目の画像を表示したい場合は「2」といった具合だ。大まかなしくみは【8-2】のようになる。

関数の内容を順に解説しよう。まず、アニメーションが動作中、またはメインビジュアルが認識できなければ処理を中断する（6 〜8行目）。それ以外の場合は、動作中のフラグをtrueにしたあと（10行目）、jQueryのアニメーション機能を使ってメインビジュアルul要素の「marginleft」の値を変化させ、スライドの動作を実現している（13 〜15行目）。スライドの終了位置は、引数として渡される番号を基準に計算する。スライドが終了した ら、現在選択中のナビゲーションli要素に「active」のクラスを移し、選択中の画像番号を更新したあと動作中フラグをfalseに戻す（18 〜19行目）。これで一連の動作は完了だ。


【8-1】スライドを実行させるための関数。実行時は画像番号を引数として渡す


【8-2】ul要素にネガティブマージンを指定して位置を変える。指定位置へのスライドアニメーションはjQueryが自動的に実行してくれる

再びHTMLへ戻り、ナビゲーションの画像のリンク先（href属性）を【9-1】のように変更する。画像をクリックしたときに、先ほど記述したJavaScriptの関数「slideImage()」を実行するためのものだ。このとき、画像スライド先の画像番号を引数として指定することに注目しよう。あとは、その他のレイアウトを仕上げ れば完成だ【9-2】。


【9-1】ナビゲーションボタンのhref属性を書き変える。それぞれのボタンに対応した画像番号を引数として指定しよう


【9-2】