HTMLタグとスタイルシートクラスの追加から
今回も、前回、前々回とスクリプトを組み込んできた趣味の料理レシピサイトを改良していきましょう。トップページにある「What's new」「このサイトについて」「カテゴリで選ぶ」の部分に開閉パネル機能を実装してきます。
まず、開閉パネルを組み込む前のソースコードは以下のようになっています（作例ページ）。
組み込む前の状態。「What's new」「このサイトについて」「カテゴリで選ぶ」の部分をクリックしても特に変化はありません
■元の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="css/init.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<title>オレ流レシピ</title>
</head>
<body>
<div id="contents">
<h3><a name="top">―「今晩のおかず」 から 「スイーツ」まで―</a></h3>
<h1>オレ流レシピ</h1>
<div id="memu">
｜<a href="#">トップ</a>｜
<a href="#">レシピ</a>｜
<a href="#">ブログ</a>｜
<a href="#">このサイトについて</a>｜
</div>
<br style="clear:left;">
<img src="images/line2.gif" width="490" height="10" alt="line" style="margin:30px 0px 30px 0px;" >
<div id="recipeImage">
<h2>新着レシピ</h2>
<img src="thumbnail/01.jpg" width="160" height="120" alt="" id="recipe1">
<img src="thumbnail/02.jpg" width="160" height="120" alt="" id="recipe2">
<img src="thumbnail/03.jpg" width="160" height="120" alt="" id="recipe3">
<br>
<img src="thumbnail/04.jpg" width="160" height="120" alt="" id="recipe4">
<img src="thumbnail/05.jpg" width="160" height="120" alt="" id="recipe5">
<img src="thumbnail/06.jpg" width="160" height="120" alt="" id="recipe6">
<br style="clear:left;">
</div>
<div id="news">
<h2>What's new</h2>
<ul>
<li>サイトをリニューアルしました(08/08/30)</li>
<li>和食のレシピを2つ追加しました(08/08/20)</li>
<li>新カテゴリ「エスニック」を追加しました(08/07/25)</li>
</ul>
<br>
<h2>このサイトについて</h2>
<p>
このサイトは管理人、高橋が個人的に運営する料理レシピサイトです。現在のレシピは全部で50種類以上。ゴハンのおかずのがっつりメニューから、スイーツ（笑）まで幅広く取り揃えています。詳しくは<a href="#">こちら</a>。
</p>
<br>
<h2>カテゴリで選ぶ</h2>
<ul id="category">
<li>和食</li>
<li>中華</li>
<li>スイーツ</li>
<li>洋食</li>
<li>エスニック</li>
<li>その他</li>
</ul>
<br style="clear:left;">
</div>
<div id="footer">
<p>Copyright Oreryu Recipe 2008 all rights reserved.</p>
<a href="#top">PAGE TOP</a>
</div>
</div>
<!-- ツールチップで表示する内容 -->
<div id="recipeText1" class="tooltips">
<ul>
<li><h4>生ハム＆トマトのパスタ</h4></li>
<li>用途：昼食向き</li>
<li>難易度：★★★☆☆</li>
</ul>
</div>
<div id="recipeText2" class="tooltips">
<ul>
<li><h4>スズキとアサリのアクアパッツァ</h4></li>
<li>用途：夕食向き</li>
<li>難易度：★★★★☆</li>
</ul>
</div>
<div id="recipeText3" class="tooltips">
<ul>
<li><h4>豪快ピリ辛野菜炒め</h4></li>
<li>用途：昼食向き</li>
<li>難易度：★★☆☆☆</li>
</ul>
</div>
<div id="recipeText4" class="tooltips">
<ul>
<li><h4>超さくさくロースとんかつ</h4></li>
<li>用途：昼食向き</li>
<li>難易度：★★★★☆</li>
</ul>
</div>
<div id="recipeText5" class="tooltips">
<ul>
<li><h4>マグロのほほ肉のステーキ丼</h4></li>
<li>用途：昼食向き</li>
<li>難易度：★★★☆☆</li>
</ul>
</div>
<div id="recipeText6" class="tooltips">
<ul>
<li><h4>白身魚のムニエル（ちょいイタリア風）</h4></li>
<li>用途：夕食向き</li>
<li>難易度：★★★☆☆</li>
</ul>
</div>
<!-- スクリプトファイルを読み込ませます -->
<script type="text/javascript" src="js/SpryTooltip.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</body>
</html>
「What's new」「このサイトについて」「カテゴリで選ぶ」の3つのカテゴリタイトル（領域）部分をクリックするとそれぞれの内容（リスト）部分が折り畳まれ、再度クリックすると展開されるようにしましょう。
Spry Frameworkで開閉パネルを実装するには、以下の規則に従ってタグとスタイルシートクラスをカテゴリごとに設定していきます。
<div id="●●●ID名●●●" class="CollapsiblePanel">
<タグ名 class="CollapsiblePanelTab">●●●カテゴリタイトル1●●●</h2>
<div class="contentArea CollapsiblePanelContent">
内容1（折り畳まれる）
</div>
</タグ名>
</div>
最初の<div>タグで囲まれた中に、カテゴリタイトル部分を示すタグを指定します。タグは<div>でも<h2>でも問題なく動作しますが、サンプルではもともとのHTMLと同じ<h2>タグにしています。
表示する内容（折り畳む部分）は<div>タグで囲みます。内容にはテキスト、画像などが混在していても問題ありません。
カテゴリを増やしたい場合には、必要な数だけ「<div id="●●●ID名●●●" class="CollapsiblePanel">～</div>」を繰り返し書きます。例によってID名が重複しないように注意してください。サンプルではプログラムで処理しやすくするため、「CollapsiblePanel1～3」のように「名前＋番号」にしました。
HTMLタグを設定したら次にスタイルシートを設定します。ここで設定するのはパネルを開閉する<h2>タグのスタイルシートだけです。<h2>タグには「CollapsiblePanelTab」クラスが設定されているので、ページのデザインに合わせてスタイルを設定します。これ以外にマウスが重なったとき、フォーカスしたときのスタイルも以下のように設定しておきます。今回は背景色しか指定していませんが、ページデザインに合わせて調節しましょう。
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
background-color: #CCC;
}
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #3399FF;
}
