このページの本文へ

前へ 1 2 3 4 5 次へ

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

jQueryで作るAmazon流リキッドレイアウト

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>
&copy;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();
    }
}

前へ 1 2 3 4 5 次へ

カテゴリートップへ

この連載の記事

関連記事

ソーシャルランキング
  1. 2ケ月で売上が10倍、BASEとロコンドの意外な関係 221
  2. Web制作会社の言うSEOは、顧客が望むSEOではないかもしれない 78
  3. JR中央線に「Amazonトレイン」 63
  4. 「iAd」は意外と穴場!アプリ広告の出稿方法と効果とは 62
  5. バラバラの画像がぴったり揃う美しいパララックス 59
  6. 日本のスマホサイトは2年間でこんなに変わった 2890
  7. たった4行で電話が作れるAPI「Twilio」とは? 2345
  8. 遅すぎる日本のスマホサイトの原因を探る 2233
  9. 残業ゼロのIT会社、理想の就労環境の作り方とは 1816
  10. 「自宅でコードを書くプログラマー」は優秀か? 1697
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング