分123今回のお題は,画像を縦のパネルに分けて切り替えるアニメーションだ。数字のボタンを押すと,分かれたパネルが伸縮してクロスフェードする(サンプル1⁠)⁠。CSS3」の表現を参考にして,HTMLやCSSの構成を改めるとともに,とくにCSSのコードはできるかぎり絞り込んだ。仕組みがわかりやすくなるよう心がけた。panels画像とキャプションを切り替える<body>要素に書くコードは,つぎのように単純な構成で始めよう。type属性を"radio"とした<input>と<label>の要素がボタンとなる。キャプションはh3要素の中に,<span>要素でタイトル(class属性"img-title")と説明書き(class属性"img-caption")をそれぞれ加えた。これらの<h3>要素はさらに<div>要素(class属性"img-titles")に含めてある。注目してほしいのは<img>要素がないことだ。画像は空の<div>要素(class属性"bg-img")にCSSで背景として加えるからだ。</div></div>この<body>要素の記述に対して,後に掲げるコード1の<style>要素を与える。これで,ボタンを押せば画像とキャプションはとりあえず切り替わる(図1⁠)⁠。切り替えの効果はまだ加えていない。ボタンで画像とキャプションが切り替わる画像とキャプションが切り替わる仕組みを,先に確かめておこう。選ばれたラジオボタン(type属性"radio"の<input>要素)は,:checked擬似クラスでとれる。そこで,つぎに抜き書きしたコードのとおり,対応した画像のURLをurl()関数でbackground-imageプロパティに定めた。url(images/image_004.png);}キャプションの要素(class属性"img-title"と"img-caption")は,つぎのように初めはすべてopacityプロパティで透明にしておく。選ばれたラジオボタンに応じたキャプションの<h3>要素を一般兄弟(間接)セレクタ~と:nth-child()擬似クラスで取り出して不透明にすればよい。1;}<style>要素の定めは,つぎのコード1にまとめたとおりだ。CSSにベンダープレフィックスを付けなくて済むように,<script>要素で-prefix-freeを読み込んでいる(第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠)⁠。Fontsと回り込みの解除」参照⁠)⁠。