[使える CSS テクニック] CSSだけで実現するPhotoアルバム

2008.06.27

集中連載「使える CSS テクニック」も第 9 回になりました。
今回は CSS だけで画像ギャラリーを作ります。

画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。

サンプル

日本大通り駅
指路教会
馬車道入口
馬車道十番館
県立歴史博物館
北仲通り

XHTML


<div id="album">
  <ul>
  <li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li>
  <li><a id="photo02" href="#slide"><em><img src="css_album/img/photo02.jpg" /></em><span>指路教会</span></a></li>
  <li><a id="photo03" href="#slide"><em><img src="css_album/img/photo03.jpg" /></em><span>馬車道入口</span></a></li>
  <li><a id="photo04" href="#slide"><em><img src="css_album/img/photo04.jpg" /></em><span>馬車道十番館</span></a></li>
  <li><a id="photo05" href="#slide"><em><img src="css_album/img/photo05.jpg" /></em><span>県立歴史博物館</span></a></li>
  <li><a id="photo06" href="#slide"><em><img src="css_album/img/photo06.jpg" /></em><span>北仲通り</span></a></li>
  </ul>
  </div><!-- /#album -->

各リストは、以下のとおりに設定します。


<li><a id="各画像のid名" href="ダミーリンク"><em><img src="表示する画像" /></em><span>タイトル</span></a></li>

CSS


/* エリア設定
--------------------------------------------------------- */
div#album {
  position: relative;
  width: 530px;
  height: 275px;
  margin: 0 auto 1em;
  background: #373737 url(img/bg_album.gif) no-repeat 230px 110px;
  border: 1px #878787 solid;
}
div#album ul {
  position: absolute;
  top: 30px;
  left: 12px;
  width: 200px;
  height: 250px;
  background: url(img/bg_title.gif) no-repeat 0 187px;
}
div#album ul li {
  float: left;
  margin: 0 5px 5px 0;
}

/* 挙動設定
--------------------------------------------------------- */
/* サムネイル画像設定 */
div#album ul li a,
div#album ul li a:visited {
  display: block;
  width: 80px;
  height: 52px;
  border: 2px #FFFFFF solid;
  z-index: 50;
  outline: none;
}
  div#album ul li a:hover {
  border: 2px #FF6600 solid;
  outline: none;
}
  div#album ul li a:active,
  div#album ul li a:focus {
  border: 2px #666666 solid;
  outline: none;
}

/* メイン画像設定 */
div#album ul li a em,
div#album ul li a span {
  display: none;
}
div#album ul li a:active em,
div#album ul li a:focus em {
  position: absolute;
  top: 0;
  left: 188px;
  display: block;
  width: 300px;
  border: 8px #E7E7E7 solid;
  z-index: 50;
}

/* タイトル設定 */
div#album ul li a:hover span {
  position: absolute;
  top: 193px;
  left: 0;
  display: block;
  width: 170px;
  text-align: center;
  font-weight: bold;
  font-size: 120%;
  color: #C7C7C7;
  z-index: 100;
}

/* 各サムネイル画像読込み設定
--------------------------------------------------------- */
a#photo01 {background:url(img/photo01_thumb.jpg);}
a#photo02 {background:url(img/photo02_thumb.jpg);}
a#photo03 {background:url(img/photo03_thumb.jpg);}
a#photo04 {background:url(img/photo04_thumb.jpg);}
a#photo05 {background:url(img/photo05_thumb.jpg);}
a#photo06 {background:url(img/photo06_thumb.jpg);}

ポイント

サムネイル画像は背景画像で表示します。
a 各id属性 [background:url(img/photo01_thumb.jpg);]
初期状態ではメイン画像を非表示にしておきます。
a 内 em [display: none;]
サムネイル画像が :hover 時に、タイトルを表示します。
a 内 span [display: block;]
サムネイル画像が :active（または:focus）時に、メイン画像を表示します。
a 内 em [display: block;]

注意：各設定の順番を入れ替えると、正しい表示ができなくなる場合がありますので注意が必要です。

もちろん Javascript を使えば、もっともっと効果的な動きが実現できますが、現状のCSSだけでもココまで表現するコトができます。
今後、様々な擬似クラス・擬似要素、また transforms and transition などが使用できるようになれば、CSSの表現はさらに広がりを見せるようになるでしょう。
楽しみでなりません。

次回はいよいよ最終回！
「第 10 回 CSSで文字サイズを変更するボタンを設置する」です。お楽しみに！