CSS3アニメーションでつくるインターフェイス表現

第19回 画像のアコーディオン表示

この記事を読むのに必要な時間:およそ 6.5 分

今回は,アコーディオンのように開く画像をお題とするサンプル1)⁠Image Accordion with CSS3のコードにもとづいて,組み立てをわかりやすく改め,行数も絞り込んだ。どの画像を選び,その前にどれが開いていたかにより,動きが少しずつ違っておもしろい。

サンプル1 CSS3: Image Accordion

インタラクションを加える前のページレイアウト

インタラクションを加える前の静的な組み立てから確かめよう。まず<head>要素だ。WebフォントとしてGoogle Fontsから,つぎのようにOpen Sans Condensedを用いる(bold 700を含めた)⁠いつもどおり,-prefix-freeもCDNから読み込んだ(第16回の水平に並べた要素に静的なスタイルを割り当てる参照)⁠

<head>要素

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
<script 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")などの要素が含まれる。

<figure class="accordion-panel">
    <img class="accordion-image" src=画像ファイルのパス alt=代替テキスト />
    <input class="accordion-tab" type="radio" name="radio-set" checked="checked"/>
    <figcaption class="accordion-caption"><span>stroll</span></figcaption>

</figure>

今回のお題で少し変わっているのは,この画像のアコーディオンがつぎのようにパネル<figure>要素)の入れ子でつくられていることだ。親を動かせば,子も揃ってしたがう。これが,このアニメーションのひとつのポイントとなる。

<div class="container">
    <figure class="accordion-panel">
        <!-- パネル01 -->
        <figure class="accordion-panel">
            <!-- パネル02 -->
            <figure class="accordion-panel">
                <!-- パネル03 -->
                <figure class="accordion-panel">
                    <!-- パネル04 -->
                    <figure class="accordion-panel">
                        <!-- パネル05 -->
                    </figure>    
                </figure>
            </figure>
        </figure>
    </figure>
</div>

このHTMLのコードにつぎの<style>要素のとおりCSSを定めると,アコーディオンの画像パネルが揃う図1)⁠インタラクションを加える前なので,おもに位置合わせだ。幅は,表示画像(240px)とタブ(40px)から全体(400px = 240 + 40×4)を決めている。また,先頭のパネルは,位置を左端にした。このセレクタには結合子>を用いている。要素の直接の子を示す。このお題ではパネルを入れ子にしたこともあって,ふたつのセレクタの関係から要素を定める結合子をいくつか使うので,以下の表1にまとめた(MDN関係ベースのセレクタ参照)⁠ここまでの要素<body><style>の定めは,以下のコード1のとおりだ。

<style>要素

.container {  /* アコーディオン全体 */

    width: 400px;  /* 全体の幅 */

    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
    border: 7px solid rgba(255, 255, 255, 0.6);
}
.accordion-panel {  /* パネル */

    position: absolute;

    left: 40px;  /* タブとして見せる幅 */
    width: 240px;  /* 画像の幅 */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.container > .accordion-panel {  /* 先頭のパネル */
    position: relative;
    left: 0;
}

.accordion-tab {  /* タブ */

    width: 40px;  /* 反応する幅 */
    height: 100%;
    cursor: pointer;
    z-index: 100;
}
.accordion-caption span {  /* キャプション */

    text-transform: uppercase;

    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

図1 インタラクションを加える前の画像パネルのレイアウト

図1 インタラクションを加える前の画像パネルのレイアウト

表1 ふたつのセレクタの関係から要素を定める結合子

結合子構文選択要素
子セレクタ>A > BセレクタAの要素の直接の子で,セレクタBに合う要素
一般兄弟セレクタ~A ~ Bふたつのセレクタに共通の親要素があるとき,セレクタAの要素より後ろにあって,セレクタBに合う要素
隣接セレクタ+A + BセレクタAの要素の後にあって,セレクタBに合うはじめの要素

コード1 インタラクションを加える前のもととなるHTMLコードとスタイル
<body>要素

<div class="container">
    <figure class="accordion-panel">
        <img class="accordion-image" src="images/photo_01.png" alt="image01" />
        <input class="accordion-tab" type="radio" name="radio-set" checked="checked"/>
        <figcaption class="accordion-caption"><span>stroll</span></figcaption>
        <figure class="accordion-panel">
            <img class="accordion-image" src="images/photo_02.png" alt="image02" />
            <input class="accordion-tab" type="radio" name="radio-set" />
            <figcaption class="accordion-caption"><span>families</span></figcaption>
            <figure class="accordion-panel">
                <img class="accordion-image" src="images/photo_03.png" alt="image03" />
                <input class="accordion-tab" type="radio" name="radio-set" />
                <figcaption class="accordion-caption"><span>fawn on</span></figcaption>
                <figure class="accordion-panel">
                    <img class="accordion-image" src="images/photo_04.png" alt="image04" />
                    <input class="accordion-tab" type="radio" name="radio-set" />
                    <figcaption class="accordion-caption"><span>solitary</span></figcaption>
                    <figure class="accordion-panel">
                        <img class="accordion-image" src="images/photo_05.png" alt="image05" />
                        <input class="accordion-tab accordion-tab-last" type="radio" name="radio-set" />
                        <figcaption class="accordion-caption"><span>conversation</span></figcaption>
                    </figure>    
                </figure>
            </figure>
        </figure>
    </figure>
</div>

<style>要素

body{
    font-family: 'Open Sans Condensed','Arial Narrow', serif;
    background-color: aliceblue;
}
.container {
    position: relative;
    width: 400px;
    margin: 20px auto;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
    border: 7px solid rgba(255, 255, 255, 0.6);
}
.accordion-panel {
    margin: 0;
    position: absolute;
    top: 0;
    left: 40px;
    width: 240px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.container > .accordion-panel {
    position: relative;
    left: 0;
}
.accordion-image {
    display: block;
}
.accordion-tab {
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
    z-index: 100;
}
.accordion-caption span {
    position: absolute;
    top: 40%;
    margin-top: -20px;
    left: 20px;
    right: 20px;
    text-align: center;
    background: rgba(47, 79, 79, 0.25);
    line-height: 10px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    padding: 20px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入