タブとなるタイトルバーをクリックすると、ウインドウが開き、そのタイトルに該当する写真が現れる、いわゆるアコーディオン式のビューアーである。このサンプルでは、現れる写真をクリックすると、関連の写真集のページが開くようにしていて、ナビの機能を併せ持つサンプルとなっている。
このサンプルでは、タブのクリックをイベントとして感知するトリガーとしては、target を使っている。これまでのサンプルは、ラジオボタンの checked を使っていた。この両者の使い勝手には一長一短があって、例えばサムネイルのクリックで他の要素の設定を変えたいときなどは radioボタンが適しているが、どちらも使えるケースなどでは target を使ったほうがコードがややシンプルになるようだ。
サンプル
本サンプル表示用HTML
<div id="stage">
<div class="tab">
<a href="#photo1"><div class="title"><span>槍が岳</span></div></a>
<a href="http://yoshioka.holding.jp/mt-photogallery/yarigatake.html" target="_blank"><div id="photo1" class="photo"></div></a>
</div>
<div class="tab">
<a href="#photo2"><div class="title"><span>白馬岳</span></div></a>
<a href="http://yoshioka.holding.jp/mt-photogallery/sirouma.html" target="_blank"><div id="photo2" class="photo"></div></a>
</div>
<div class="tab">
<a href="#photo3"><div class="title"><span>剣 岳</span></div></a>
<a href="http://yoshioka.holding.jp/mt-photogallery/turugi.html" target="_blank"><div id="photo3" class="photo"></div></a>
</div>
<div class="tab">
<a href="#photo4"><div class="title"><span>穂高岳</span></div></a>
<a href="http://yoshioka.holding.jp/mt-photogallery/hodaka.html" target="_blank"><div id="photo4" class="photo"></div></a>
</div>
<div class="tab">
<a href="#photo5"><div class="title"><span>針の木岳</span></div></a>
<a href="http://yoshioka.holding.jp/mt-photogallery/harinoki.html" target="_blank"><div id="photo5" class="photo"></div></a>
</div>
</div>
HTML の概要説明
・div(.tab) の中に、表題を表示する div(.title) と、写真を表示する div(#photo1,,,) を設ける。
・写真は、div #photo1,,,, の背景としてCSSで設定する。
本サンプル表示用CSS
/* 全体枠 */
#stage {
width:673px;
height:280px;
position:relative;
margin:0 auto;
overflow:hidden;
background:#ccc;
}
/* 背景画像として各写真をセット */
#photo1 {
background-image:url(wp-images/a1.jpg);
}
#photo2 {
background-image:url(wp-images/a2.jpg);
}
#photo3 {
background-image:url(wp-images/a3.jpg);
}
#photo4 {
background-image:url(wp-images/a4.jpg);
}
#photo5 {
background-image:url(wp-images/a5.jpg);
}
/* タイトルバーと写真を格納 */
.tab {
position:relative;
float:left;
}
/* タイトルバーを水平に並べる */
.title {
width:35px;
height:280px;
background:#CCC;
border:2px solid #aaa;
float:left;
}
/* タイトルバーを縦書き表示 */
.title span {
text-decoration:none;
width:1em;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:1.2em;
padding:30px 10px 0 0;
float:right;
}
/* 写真格納divの初期幅を0に、transitionの設定 */
.photo {
margin-left:35px;
width:0px;
height:280px;
-webkit-transition:width 1s ease;
transition:width 1s ease;
}
/* div(.photo)のクリックイベントで幅を拡大 */
.photo:target {
width:480px;
}
CSS のポイント説明
・複数枚の写真を用意する（ここでは幅500pxの写真5枚）。（Wordpressの設定幅に合わせて、480px表示に調整している。）
・#photo1,#photo2,,,に、背景画像として各写真をセット。
・写真表示部の幅を0に設定し、タイトルバー（.title）を水平に並べる。
・表題の表示は、span の幅を 1em に設定することにより、縦書き表示にする。
・タイトルバーのクリックで、.photo のイベントを target で感知し、幅を元の幅に拡大する。