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

第12回 垂直に回転して切り替わる直方体のタブ

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

今回のお題は,タブにより表示要素を切り替える。ただし,例によってこけおどしの3次元の回転を採り入れようサンプル1)。コンテンツの画像と背景は,3面の直方体で組み立てた。タブをクリックすると,対応するコンテンツが垂直に回って正面に向く。3D Cube for tabbed contentの3次元表現とCSSを参考に,コードは絞り込み,わかりやすく組み立て直した。

サンプル1 CSS3: 3D Cube for tabbed content

スタイルを与える前の素のHTMLコード

まず,HTMLドキュメントの<body>要素には,つぎのようなHTMLのコードを加えた。CSSを与える前のHTMLドキュメントの表示と照らし合わせてもらうとよい図1)。タブのクリックで表示するコンテンツの<div>要素class属性"tab-content")は,ラジオボタンの<input>要素type属性"radio")で切り替える。もっとも,CSSでラジオボタンそのものは表示しない。<label>要素にfor属性でラジオボタンのid属性を与えれば,ラベルもラジオボタンと同じクリックの対象になる。

<div class="container">
    <label class="tab" for="tab-top">Child</label>
    <label class="tab" for="tab-front">Adult</label>
    <label class="tab" for="tab-bottom">Family</label>
    <input type="radio" name="tabs" id="tab-top">
    <input type="radio" name="tabs" id="tab-front">
    <input type="radio" name="tabs" id="tab-bottom"> 
    <div class="cube">
        <div class="tab-content">
            <div class="tab-image"><img src="images/pen01.png" alt=""></div>
            <h1>Child</h1>
        </div>
        <div class="tab-content">
            <div class="tab-image"><img src="images/pen02.png" alt=""></div>
            <h1>Adult</h1>
        </div>
        <div class="tab-content">
            <div class="tab-image"><img src="images/pen03.png" alt=""></div>
            <h1>Family</h1>
        </div>
    </div>
</div>

図1 CSSを与える前のHTMLドキュメントの表示

図1 CSSを与える前のHTMLドキュメントの表示

タブとコンテンツのテキストのフォントには,Google FontsのRobotoを用いた。また例によって,ベンダープレフィックスを省くため,<script>要素で-prefix-freeを読み込んである(第1回のベンダープレフィックスと-prefix-freeの項参照)。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,500" rel="stylesheet">
<style>
/* ここにCSSを定める */
</style>
<script src="lib/prefixfree.min.js"></script>

コンテンツの直方体を静的に組み立てる

前掲のHTMLコードには,つぎのコード1のスタイルを与える。アニメーションや3次元表現はまだ加えていない。文字と画像や背景,それらの色と大きさ,および配置を定めた。とくに3次元表現を加えると,試行錯誤で細かな位置調整をしなければならない。perspectiveプロパティ(第4回の要素にポインタを重ねたら水平軸で回す参照)は,ここで定めておかないと位置決めがしにくいため先に適切な値を与えている。

コード1 <style>要素に定めたコンテンツの静的なスタイル

.container {
    perspective: 1200px;
    width: 400px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    color: white;
    text-align: center;
}
input {
    display: none;
}
.tab {
    position: absolute;
    width: 80px;
    height: 70px;
    left: 325px;
    line-height: 70px;
    font-weight: 300;
}
.tab:nth-child(1) {
    background: mediumturquoise;
}
.tab:nth-child(2) {
    top: 74px;
    background: steelblue;
}
.tab:nth-child(3) {
    top: 148px;
    background: deeppink;
}
.cube {
    margin: 60px 10px auto;
    width: 300px;
}
.tab-content {
    width: 300px;
    height: 200px;
    position: absolute;
}
.tab-content h1 {
    font-size: 30px;
    margin: 75px 115px;
    text-align: center;
    font-weight: 500;
}
.tab-content:nth-child(1) {
    background: mediumturquoise;
}
.tab-content:nth-child(2) {
    background: steelblue;
}

.tab-content:nth-child(3) {
    background: deeppink;
}
.tab-image {
    margin: 20px 30px;
    position: absolute;
}

タブとコンテンツの位置は,アニメーションと3次元表現をおいてひとまず決まった。ただ,コンテンツとその中の画像が少し小さい図2)。これは3次元でコンテンツを直方体に組み立てるとき,正面を少し手前にもってくるので,その分余裕をとっているからだ。あとのふたつのコンテンツは,まだその裏に重なっている。

図2 タブとコンテンツの静的なスタイル

図2 タブとコンテンツの静的なスタイル

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入