2011-02-01

CSSのみでスライドして画像を切り替えるギャラリーを作る

ポートフォリオとかでよく見かけるクリックすると横にスライドしながら画像を切り替えるギャラリーUIをCSS3だけで作ってみた。最終的に、エフェクト的には満足のいかないところがあるもののすごくシンプルに作成できたのでまぁ満足。:target擬似クラスとtransitionプロパティ(とtransformプロパティ)の組み合わせは色々できて楽しい。

Demo: CSS Sliding Image Gallery

ギャラリー全体のマークアップは以下のような単純なもの。

<ul id="gallery">
  <li class="image" id="first"><a href="#second"><img src="161-1.png"></a></li>
  <li class="image" id="second"><a href="#third"><img src="161-2.png"></a></li>
  <li class="image" id="third"><a href="#first"><img src="161-3.png"></a></li>
</ul>

HTML的にも不自然なところはない。画像の数を増やす時にはリンクを適宜書き換えなくてはならないという欠点はあるが、リストの画像をクリックして次々に見ていくというものなので、避けようがない作業だと思う。

CSSは以下のようなコードになる。

#gallery .image {
  display: block;
  float: left;
  width: 0px;
  height: 450px;
  overflow: hidden;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

#gallery .image:target {
  width: 450px;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

#gallery .image a img {
  width: 100%;
  height: 100%;
}

.imageでwidth: 0px;を指定して通常は見えないようにしておき、それを:target擬似クラスを利用して画像へのリンクを踏んだ時にwidth: 450px;に変更して見えるようにする。この変化をtransitionプロパティを使ってアニメーションさせるというただそれだけのもの。CSS自体に難しいところはまったく無く、不自然なところもあまり無い。強いて注意すべき点を挙げるとするなら画像のリサイズはコンテナ(.image)に任せてimg要素では100%にすること。こうすることによって.imageのwidthプロパティの変化によるアニメーションが綺麗に反映される。

:target擬似クラスとtransitionプロパティのどちらにも対応しているブラウザはChromeとSafariはかなり前からで、Firefoxは4以降、Operaは10.5以降だと思う。