jQueryで作るAmazon流リキッドレイアウト (5/5)
2009年04月06日 08時00分更新
文●古籏一浩、ASCII.jp
■完成した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>
<div class="bookrank">
<img src="images/1b.jpg" width="120" height="180" alt="本を読む本"><br>
本を読む本<br>
M.J.アドラー著<br>
講談社学術文庫<br>
</div>
<div class="bookrank">
<img src="images/2b.jpg" width="120" height="180" alt="うずまき猫のみつけかた"><br>
うずまき猫のみつけかた<br>
村上春樹著<br>
新潮社<br>
</div>
<div class="bookrank">
<img src="images/3b.jpg" width="120" height="180" alt="凡人として生きるということ"><br>
美咲ケ丘ite<br>
戸田誠二著<br>
小学館<br>
</div>
<div class="bookrank">
<img src="images/4b.jpg" width="120" height="180" alt="いつも旅のなか"><br>
恋愛小説ふいんき語り<br>
麻野 一哉ほか<br>
ポプラ社<br>
</div>
<div class="bookrank">
<img src="images/5b.jpg" width="120" height="180" alt="プロフェッショナルの原点"><br>
就職しないで生きるには<br>
レイモンド マンゴー著<br>
晶文社<br>
</div>
<div class="bookrank">
<img src="images/6b.jpg" width="120" height="180" alt="楽しい本"><br>
バウハウス・デッサウ展<br>
東京藝術大学<br>
東京藝術大学<br>
</div>
</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(window).resize(setBookRank);
setBookRank();
// タブハイライト
$j(".controls a").click(function(){
$j(".controls a").removeClass("tabHighlight");
$j(this).addClass("tabHighlight");
});
});
function setBookRank(){
var w = $j("#bookmain").width(); // 表示領域の横幅を取得
var eleW = $j(".bookrank:first").width(); // 1つの本の紹介の横幅
var d = parseInt(w / eleW);
for(var i=0; i<$j(".bookrank").length; i++){
$j(".bookrank").eq(i).css({
"position":"absolute",
"top":"50px", // 表示位置の調整はここで
"left": i * eleW
});
}
for(var i=0; i<d; i++){
$j(".bookrank").eq(i).fadeIn();
}
for(var i=d; i<$j(".bookrank").length; i++){
$j(".bookrank").eq(i).fadeOut();
}
}
