29分でできる！あのサイトの“技”を盗め ― 第4回

jQueryで作る“Amazon風”インターフェイス

2008年09月22日 04時00分更新

文● 古籏一浩、ASCII.jp

HTMLタグとスタイルシートクラスを追加

　今回スクリプトを組み込むのも、前回までの作例でおなじみになった料理レシピサイトです。第2回（関連記事）でズーム機能を実装した「レシピ紹介」のページを使いましょう。ページの下の方に、他の料理のサムネイル画像がずらっと並んでいます。今回はこの部分にカルーセル表示機能を追加したいと思います。

　何も組み込んでいない状態のソースコードは以下のようになっています（作例ページ）。


スクリプトを組み込む前の状態。ページの下にある料理のサムネイル画像がずらずらと並んでいます

■元のHTMLファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="手入力なのだ">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<title>オレ流レシピ</title>
</head>
<body>
<div id="contents">
<h3><a name="top">―「今晩のおかず」 から 「スイーツ」まで―</a></h3>
<h1>オレ流レシピ</h1>
<div id="memu">
｜<a href="#">トップ</a>｜
<a href="#">レシピ</a>｜
<a href="#">ブログ</a>｜
<a href="#">このサイトについて</a>｜
</div>
<br style="clear:left;">
<img src="images/line2.gif" width="490" height="10" alt="line" style="margin:30px 0px 30px 0px;" >
<div>
<img src="images/main.jpg" width="490" height="325" alt="マグロのほほ肉のステーキ丼" onmouseover="TJPzoom(this)">
</div>
<div id="recipeImage">
<h2>マグロのほほ肉のステーキ丼</h2>
<p>
マグロのほほ肉をたっぷり使った丼。カンタン激ウマで平日でもさくっと作ってがっつりいけます。やっぱり丼は準備も片付けも楽でいいっすね。
</p>
</div>
<br style="clear:left;">
<div id="ingredient">
<h2>材料（1人分）</h2>
<ul>
<li>マグロのほほ肉……150g</li>
<li>にんにく……2かけ</li>
<li>ごま油……大さじ1</li>
<li>塩・こしょう……適量</li>
<li>しょうゆ……大さじ2</li>
<li>レタス……2～3枚</li>
<li>長ねぎ……適量</li>
<li>ご飯……どんぶり1杯</li>
</ul>
</div>
<div id="HowToMake">
<h2>作り方</h2>
<ul>
<li>フライパンにみじん切りにしたにんにく、ごま油を入れて火にかけます</li>
<li>塩・こしょうをしたマグロのほほ肉を入れて強火で表面をさっと焼く</li>
<li>中火にしてじっくり焼く</li>
<li>火を止めてしょうゆをいれ、しっかり絡める</li>
<li>丼にご飯を盛り、その上にレタスと焼いたマグロをのせ、たれをたらす</li>
<li>せん切りにした長ねぎをたっぷりのせたらできあがり</li>
</ul>
</div>
<div id="other">
<h2>他のオススメレシピ</h2>
<img src="thumbnail/01s.jpg" width="64" height="48" alt="パスタ">
<img src="thumbnail/02s.jpg" width="64" height="48" alt="アクアパッツァ">
<img src="thumbnail/03s.jpg" width="64" height="48" alt="野菜炒め">
<img src="thumbnail/04s.jpg" width="64" height="48" alt="ヒレカツ">
<img src="thumbnail/05s.jpg" width="64" height="48" alt="マグロのステーキ">
<img src="thumbnail/06s.jpg" width="64" height="48" alt="ムニエル">
<img src="thumbnail/07s.jpg" width="64" height="48" alt="焼きそば">
<img src="thumbnail/08s.jpg" width="64" height="48" alt="ラーメン">
<img src="thumbnail/09s.jpg" width="64" height="48" alt="豚キムチ">
<img src="thumbnail/10s.jpg" width="64" height="48" alt="チャーハン">
</div>
<div id="footer">
<p>Copyright Oreryu Recipe 2008 all rights reserved.</p>
<a href="#top">PAGE TOP</a>
</div>
</div>
<!-- 追加したスクリプト -->
<script type="text/javascript" src="js/tjpzoom.js"></script>
<script type="text/javascript"><!--
window.scrollTo(0,1);
// --></script>
</body>
</html>

　HTMLに追加するのは<div>タグと左右の矢印画像を示す<img>タグです。左右の矢印の画像を含む全体を<div id="jqCarousel">として囲みます。次にスライド表示する窓（切り抜き領域）を示す<div class="jqCarouselClipArea">、そしてスライド画像を内包する<div class="jqCarouselArea">を順番に書いていきます。

　あとはスライドさせたい<img>タグを必要な数だけ繰り返しましょう。

<div id="jqCarousel">
<img src="images/left.gif" width="24" height="24" alt="オススメレシピ左" class="jqCarouselPrev">
<div class="jqCarouselClipArea">
<div class="jqCarouselArea">
スライドさせたい画像(<img>タグ)
：
</div>
</div>
<img src="images/right.gif" width="24" height="24" alt="オススメレシピ右" class="jqCarouselNext">
</div>

　ここで1つだけ注意するのは、スライドさせていくと微妙に画像の位置がずれていってしまうことです。HTML内のタグ間の空白や改行が原因ですので、手軽な対策方法として、以下のように空白や改行をタグ内に入れてしまいましょう。

<img src="thumbnail/01s.jpg" width="64" height="48" alt="パスタ"
><img src="thumbnail/02s.jpg" width="64" height="48" alt="アクアパッツァ"
><img src="thumbnail/03s.jpg" width="64" height="48" alt="野菜炒め"
><img src="thumbnail/04s.jpg" width="64" height="48" alt="ヒレカツ"
><img src="thumbnail/05s.jpg" width="64" height="48" alt="マグロのステーキ"
><img src="thumbnail/06s.jpg" width="64" height="48" alt="ムニエル"
><img src="thumbnail/07s.jpg" width="64" height="48" alt="焼きそば"
><img src="thumbnail/08s.jpg" width="64" height="48" alt="ラーメン"
><img src="thumbnail/09s.jpg" width="64" height="48" alt="豚キムチ"
><img src="thumbnail/10s.jpg" width="64" height="48" alt="チャーハン">