29分でできる！ あのサイトの“技”を盗め ― 第11回
すぐ使える！なめらかアコーディオンで“魅せる”UIに
2008年11月25日 12時33分更新
■完成した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">
<link rel="stylesheet" href="css/accordion.css" type="text/css" media="all">
<link rel="stylesheet" href="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/effects.js"></script>
<script type="text/javascript" src="js2/accordion.js"></script>
<title>JPhoto.net - Ranking -</title>
</head>
<body>
<div id="contents">
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top">Top</a></li>
<li><a href="photo.html" id="menu-gallery">Gallery</a></li>
<li><a href="seacrh.html" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking" class="current">Ranking</a></li>
<li><a href="info.html" id="menu-info">Information</a></li>
</ul>
<br style="clear:both;">
<img src="images/shared/rank.gif">
<div id="acc1">
<h2 class="accordion_toggle">top 1 | 北の丸公園で太陽とススキ</h2>
<div class="accordion_content">
<img src="photo/photo103.jpg">
<div class="captionOff">＃103 Location：Tokyo Date：08-10-24 Tag：Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 2 | 多摩川土手で出会う</h2>
<div class="accordion_content">
<img src="photo/photo107.jpg">
<div class="captionOff">＃107 Location：Tokyo Date：07-07-15 Tag：Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 3 | 夕日を浴びる京急線</h2>
<div class="accordion_content">
<img src="photo/photo109.jpg">
<div class="captionOff">＃109 Location：Tokyo Date：08-09-01 Tag：Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 4 | 聖路加ガーデンから臨む</h2>
<div class="accordion_content">
<img src="photo/photo108.jpg">
<div class="captionOff">＃108 Location：Tokyo Date：08-9-19 Tag：Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 5 | そうだ、京都行こう</h2>
<div class="accordion_content">
<img src="photo/photo099.jpg">
<div class="captionOff">＃099 Location：Kyoto Date：04-03-20 Tag：Girls</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 6 | 夕暮れ時の二月堂</h2>
<div class="accordion_content">
<img src="photo/photo6.jpg">
<div class="captionOff">＃097 Location：Nara Date：07-08-13 Tag：Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 7 | 地面に落ちた葉</h2>
<div class="accordion_content">
<img src="photo/photo105.jpg">
<div class="captionOff">＃105 Location：Tokyo Date：07-11-13 Tag：Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 8 | 倉敷川から横道へ</h2>
<div class="accordion_content">
<img src="photo/photo102.jpg">
<div class="captionOff">＃102 Location：Kurashiki Date：08-08-11 Tag：Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top 9 | 群馬の冬</h2>
<div class="accordion_content">
<img src="photo/photo100.jpg">
<div class="captionOff">＃100 Location：Gunam Date：07-03-01 Tag：Nature</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
<h2 class="accordion_toggle">top10 | 東京ステーションのある夜</h2>
<div class="accordion_content">
<img src="photo/photo095.jpg">
<div class="captionOff">＃095 Location：Tokyo Date：07-09-01 Tag：Architecure</div>
<a href="#" class="capButton"><img src="images/shared/rank_icon.gif"></a>
</div>
</div>
<img src="images/shared/rank2.gif">
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
<script type="text/javascript">
new accordion("acc1");
$$("#acc1 .capButton").each(function(ele){
Event.observe(ele,"click", function(){
var ele1 = $(this).previous(".captionOff");
var ele2 = $(this).previous(".captionOn");
if (ele1){
ele1.removeClassName("captionOff");
ele1.addClassName("captionOn");
}
if (ele2){
ele2.removeClassName("captionOn");
ele2.addClassName("captionOff");
}
}, true);
});
</script>
</body>
</html>
この連載の記事
- 第26回 普通のtableタグを1行で動く表にするJSライブラリ
- 第25回 Googleマップ＋jQueryで作るAjaxなデザイン
- 第24回 英国の映像作家も使うJS製LavaLampメニュー
- 第23回 jQueryでクールなくるくるウィジェットを作ろう
- 第22回 Amazonと楽天のアフィリエイトを効率化するjQuery技
- 第21回 意外性が心地よいJSメニューのWebデザイン
- 第20回 jQueryで作るAmazon流リキッドレイアウト
- 第19回 Yahoo！の流れるパネルをJSライブラリで再現
- 第18回 あのFlashサイトのUIをjQueryで作る
- 第17回 JavaScriptでびゅんびゅんスライド！ページ切換法
- この連載の一覧へ
