FlashではなくjQueryで！インパクトのあるUIを作ろう (5/5)
2008年10月14日 04時00分更新
文●古籏一浩、ASCII.jp
■完成した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="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/thickbox.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">
<title>JPhoto.net - TOP -</title>
</head>
<body>
<div id="contents">
<h1>JPhoto.net</h1>
<ul id="globalMenu">
<li><a href="top.html" id="menu-top" class="current">Top</a></li>
<li><a href="photo.html" id="menu-gallery">Gallery</a></li>
<li><a href="#TB_inline?width=320&height=300&inlineId=searchOption" class="thickbox" id="menu-search">Search</a></li>
<li><a href="ranking.html" id="menu-ranking">Ranking</a></li>
<li><a href="info.html" id="menu-info">Information</a></li>
</ul>
<br style="clear:both;">
<!-- 繰り返し表示 -->
<div id="photoSlide">
<ul>
<li><a href="#slide1" id="menu-slide1">Weekly Pickup</a></li>
<li><a href="#slide2" id="menu-slide2">New Arrival</a></li>
<li><a href="#slide3" id="menu-slide3">Hot Photograph</a></li>
<li><a href="#slide4" id="menu-slide4">Standard Work</a></li>
</ul>
<div id="slide1">
<img src="images/main-1.jpg"><br><br>
＃103 TITLE：北の丸公園で太陽とススキ
</div>
<div id="slide2">
<img src="images/main-2.jpg"><br><br>
＃109 TITLE：夕日を浴びる京急線
</div>
<div id="slide3">
<img src="images/main-3.jpg"><br><br>
＃098 TITLE：夏の終わりの空模様
</div>
<div id="slide4">
<img src="images/main-4.jpg"><br><br>
＃088 TITLE：東大寺大仏殿にて
</div>
</div>
<!-- What's New? -->
<div id="WhatsNew">
<h2>What's new？</h2>
<hr>
<h3>サイトをリニューアル</h3>
<p>Webサイトを大幅リニューアルしました。Ajaxを使ったサイトに生まれ変わりました。（08/09/19）</p>
<h3>検索機能を追加</h3>
<p>写真のジャンルなどから検索できる詳細検索機能を搭載しました「Search」からお試しください。（08/09/01）</p>
<h3>夏の新作2点追加</h3>
<p>夏の京都を中心に2点、新作を追加しました。「Gallery」からどうぞ。（08/08/30）</p>
</div>
<div id="partner">
<h2>Friends＆Favorites</h2>
<br>
<img src="images/shared/banner01.jpg" alt="banner">
<img src="images/shared/banner02.jpg" alt="banner">
<img src="images/shared/banner03.jpg" alt="banner">
</div>
<div id="footer">
<p>Copyright JPhoton.net 2008 all rights reserved.</p>
</div>
</div>
<!-- 詳細検索で表示する内容 -->
<div id="searchOption">
<form action="./search.cgi" method="post">
<h2>[Search Option]</h2>
<p>
<label><input type="checkbox" value="near">Recent Entries</label>
<label><input type="checkbox" value="season">Traditional Beauty</label>
</p>
<p>
<label><input type="checkbox" value="mountain">Modern Beauty</label>
<label><input type="checkbox" value="sea">Architecure</label>
</p>
<hr>
<p>
<label><input type="checkbox" value="river">Nature</label>
<label><input type="checkbox" value="cat">Animals</label>
</p>
<p>
<label><input type="checkbox" value="cat">Girls</label>
</p>
<br />
<h2>[Search Keyword]</h2>
<p>
<label><input type="text" value="" name="keyword"></label>
<label><input type="submit" value="この条件で検索"></label>
</p>
</form>
</div>
<!-- スクリプトファイルを読み込ませます -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js"></script>
<script type="text/javascript"><!--
$("#photoSlide > ul").tabs({ fx: { opacity: "toggle" } }).tabs("rotate", 4000, true);
// --></script>
</body>
</html>
