Webデザイン 1-13
見た目にも楽しい動きのあるレイアウト

見た目に楽しくインパクトのある、動きのあるレイアウトのテクニックをいくつか紹介する。効果的に利用すると、デザイン的に優れたサイトを構築できるので活用してほしい。

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

01

前項にて背景画像をブラウザに合わせてサイズを調整する jQuery プラグインを紹介したが、ここでは複数の画像を順番に入れ替えてくれる maxImage Scalingプラグインを紹介する。jQuery本体と maxImage Scaling Plugin ファイルを読み込み、 body タグ直下に複数の背景イメージを並べるのだが、イメージの縦横サイズがバラバラでも自動的に調整されるので問題ない。イメージを並べたら、共通のクラス名を指定、ここでは bgimg とした。背景イメージのサイズが大きく読み込みに時間がかかるのが懸念される場合は、背景イメージの前にクラス名 loader を適用したローディング用イメージを設置してもよい【1-1】【1-2】。

【1-1】画像サイズが大きい場合はローディングイメージの表示も可能。また、title を追加すると入力内容が画像と一緒に表示できる機能もある。

【1-2】背景の画像が時間とともに変化していくようなページを制作する。

02

CSSは、クラスbgimg に position : fixed を指定、さらに !important宣言を適用する。 !important宣言がないとブラウザに意図しない横スクロールバーが表示されるので忘れないようにすること。ローディング用イメージに対しては、絶対値でブラウザの中央にくるようposition:absolute; 、top:49%; left:49% を指定する【2-1】。

スクリプトの設置は、head タグ内に【2-2】の内容を記述する。ここでは、背景イメージに指定したクラス名を適用する箇所がある。また、動作などに関する設定もここで指定することになる。

slideShow: trueでスライドショー機能が有効、false で無効となり1番目の背景イメージが表示される。

slideDelay: 5,は画像が切り替わるまでの秒数を指定、overflow: 'auto',ではhiddenを指定するとブラウザのスクロールバーが表示されなくなるので、デザインに合わせて使い分けよう。slideShowTitle: trueは背景イメージそれぞれにタイトルを表示させる機能で、イメージ要素に指定したtitle プロパティの内容を表示させることができる。スライドショー機能でイメージを見せるのが目的の場合など、積極的に使っていきたい【2-3】。

【2-1】スクロールの不具合をなくすため、position: fixed には!important の追加を行う。

【2-2】背景イメージに設定したクラス名に書き換える部分が1箇所。オプションで表示時間、タイトルの表示、スクロールの有無などを変更できる。

【2-3】コンテンツがなくても、ギャラリーとして利用できる。使い方はアイデア次第だ。

03

もう一つ jQueryのスムーズスクロールを利用したプラグインを紹介する。スムーズスクロールは、アンカーまで滑らかな動きでスクロールさせる技術だ。コンテンツ量が多いページで、通常のジャンプで位置がわからなくなることを防ぐために利用されている。ここでは趣向を変えて、smoothAnchor プラグインを使い、ブラウザの表示部を1画面として、縦横2列ずつ4画面をスムーズスクロールで移動できるように構築してみる【3-1】。スクリプト側については、基本的に head タグ内に jQuery と smoothAnchorプラグインを読み込めば完了だ【3-2】。

【3-1】ギャラリーなどデザイン性を求められるコンテンツに使いやすいスクリプト。

【3-2】スクリプトは読み込むだけで完了。

04

wrapper要素に4画面分のサイズを指定するので、width: 200%; height: 200%; と指定する。ここにブラウザで表示されている画面4つ分のコンテンツを入れることになる【4-1】。

コンテンツ部はアンカーとするためそれぞれ固有idを振り、クラス名に section を指定。スタイルは width: 50%; height: 50%; float: left; とすることによって wrapper内にぴったり収めることができる【4-2】。後は割り振ったidへリンクを張れば気持ちよくコンテンツ間を移動できるようになる【4-3】。

コンテンツ丸ごと移動してしまうので、それぞれにナビゲーションメニューを作ってもいいが、画面固定のナビゲーションを設置すれば無駄がない。position: fixed;を使って固定するが、コンテンツと重ならないよう気をつけよう【4-4】。

【4-1】画面上で見えるのはコンテンツ1つずつ。

【4-2】今回は4画面だが、横3列の場合 #wrapは width:300%; となり、コンテンツは3等分するのでwidth: 33%; となる。

【4-3】それぞれのboxのidにリンクを設定。

【4-4】左下に固定したナビゲーションで自在に移動が可能になる。

[目次に戻る]

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

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