29分でできる！ あのサイトの“技”を盗め ― 第19回
Yahoo！の流れるパネルをJSライブラリで再現
2009年03月31日 09時00分更新
■完成したHTMLファイル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>TOKYOブックマニア</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<link rel="stylesheet" href="css/glider.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/book.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/glider.js"></script>
</head>
<body>
<div id="book_header">
<div>本屋巡りが趣味の管理人による独断と偏見の書評サイト</div>
<h1>TOKYOブックマニア</h1>
<img src="images/site/mark.gif" width="52" height="63" alt="">
</div>
<div id="book_review">
<div class="controls">
<a href="#book01">バウハウス・デッサウ展</a>｜
<a href="#book02">不思議を売る男</a>｜
<a href="#book03">就職しないで生きるには</a>
</div>
<div class="scroller">
<div class="content">
<div class="section" id="book01">
<img src="images/1.jpg" width="384" height="216" align="left" alt="バウハウス・デッサウ展" title="バウハウス・デッサウ展"><h2>バウハウス・デッサウ展</h2><p>2008年春から夏にかけて、東京藝術大学で開催された「バウハウス・デッサウ展」。展示会自体も興味深いものだったが、開催を記念して刊行されたこの本も、単なるありがちなカタログを越えた、大変価値のある1冊だ……続きを読む＞＞＞</p><br clear="left">
</div>
<div class="section" id="book02">
<img src="images/2.jpg" width="384" height="216" align="left" alt="不思議を売る男" title="不思議を売る男"><h2>不思議を売る男</h2><p>子どもだけではもったいない。大人もちゃんと楽しめる良質な児童書。ストーリーは、本の世界から飛び出てきた緑色のジャケットを着た男が、居候先の古道具屋で道具にまつわる小話を展開していく、というもの……続きを読む＞＞＞</p><br clear="left">
</div>
<div class="section" id="book03">
<img src="images/3.jpg" width="384" height="216" align="left" alt="就職しないで生きるには" title="就職しないで生きるには"><h2>就職しないで生きるには</h2><p>晶文社の「就職しないで生きるには」シリーズのきっかけになったのが本書。本屋・出版社の経営、缶詰工場など、著者レイモンド･マンゴーが体験した、80年代アメリカを自由に生きる話は今でも十分、刺激的……続きを読む＞＞＞</p><br clear="left">
</div>
</div>
</div>
</div>
<div id="book_contents">
<div id="bookmain">
<div class="contents">
<h2>当サイトで評価の高い本</h2>
<table border="0" cellspacing="10" cellpadding="0"><tr>
<td>
<img src="images/1b.jpg" width="120" height="180" alt="本を読む本"><br>
本を読む本<br>
M.J.アドラー著<br>
講談社学術文庫<br>
</td>
<td>
<img src="images/2b.jpg" width="120" height="180" alt="うずまき猫のみつけかた"><br>
うずまき猫のみつけかた<br>
村上春樹著<br>
新潮社<br>
</td>
<td>
<img src="images/3b.jpg" width="120" height="180" alt="美咲ケ丘ite"><br>
美咲ケ丘ite<br>
戸田誠二著<br>
小学館<br>
</td>
</tr></table>
</div>
</div>
</div>
<div id="book_navi_1">
<div id="booknavileft">
<h3>メインコンテンツ</h3>
<ul>
<li><a href="#">ブックレビュー</a></li>
<li><a href="#">ブック＆ストア</a></li>
<li><a href="#">ブック＆シネマ</a></li>
</ul>
<h3>当サイトについて</h3>
<ul>
<li><a href="#">サイト紹介</a></li>
<li><a href="#">管理人プロフィール</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
<div id="book_navi_2">
<div id="booknaviright">
<h3>最新のお知らせ</h3>
<ul>
<li>リニューアルオープンしました。まだいろいろと不具合があるかと思いますがよろしくお願いします。<br>(09-04-01)</li>
<li>レビューを4本追加しました<br>(09-03-25)</li>
<li>「ブック＆ストア」をオープンしました。東京の本屋さんを紹介していきますのでお楽しみに。<br>(09-03-20)</li>
</ul>
</div>
</div>
<div id="book_footer">
<p>
©Copyright 2009 TOKYO BOOK REVIEW
</p>
</div>
</body>
</html>
■完成したbook.jsファイル
var $j = jQuery.noConflict(); // $()の衝突回避
$j(function(){
new Glider("book_review");
// タブハイライト
$j(".controls a").click(function(){
$j(".controls a").removeClass("tabHighlight");
$j(this).addClass("tabHighlight");
});
});
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- 第16回 jQueryアニメ＆エフェクト合わせ技で画像を拡大
- この連載の一覧へ
