分123今回は,アコーディオンのように開く画像をお題とする(サンプル1⁠)⁠。CSS3」のコードにもとづいて,組み立てをわかりやすく改め,行数も絞り込んだ。どの画像を選び,その前にどれが開いていたかにより,動きが少しずつ違っておもしろい。Accordionインタラクションを加える前のページレイアウトインタラクションを加える前の静的な組み立てから確かめよう。700を含めた⁠)⁠。いつもどおり,-prefix-freeもCDNから読み込んだ(第16回の「水平に並べた要素に静的なスタイルを割り当てる」参照⁠)⁠。src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>画像のひとつのパネルは,つぎのように<figure>要素(class属性)にまとめた。中には,画像の<img>(class属性"accordion-image")と選択のタブとなるラジオボタンの<input>(class属性"accordion-tab")や画像の上に置くキャプションの<figcaption>(class属性"accordion-caption")などの要素が含まれる。class="accordion-caption"><span>stroll</span></figcaption></figure>今回のお題で少し変わっているのは,この画像のアコーディオンがつぎのようにパネル(<figure>要素)の入れ子でつくられていることだ。親を動かせば,子も揃ってしたがう。これが,このアニメーションのひとつのポイントとなる。</figure></div>このHTMLのコードにつぎの<style>要素のとおりCSSを定めると,アコーディオンの画像パネルが揃う(図1⁠)⁠。インタラクションを加える前なので,おもに位置合わせだ。40×4)を決めている。先頭のパネルは,位置を左端にした。このセレクタには結合子>を用いている。要素の直接の子を示す。このお題ではパネルを入れ子にしたこともあって,ふたつのセレクタの関係から要素を定める結合子をいくつか使うので,以下の表1にまとめた(MDN「関係ベースのセレクタ」参照⁠)⁠。ここまでの要素<body>と<style>の定めは,以下のコード1のとおりだ。