アニメーションで変化するタブ切り替え：脱エンジニアっぽさ！クライアントの笑顔を引き出すCSS3アニメーション（2）（1/3 ページ）

前回のCSS3アニメーションの基本に続き、今回は「タブ切り替え」にアニメーションで変化を付けていきます。

» 2013年07月25日 17時30分公開

[内田　順一，Chime of Shigan]

「第1回」はこちら

はじめに

　Webデザインで頻繁に使われる「タブ切り替え」のインターフェイス。レイヤ状態にすることで、コンパクトなエリアに多くのコンテンツを表示でき、大変便利ですね。今回はこの切り替えのタブにアニメーションを付けてみたいと思います。

　まずは、サンプルをご覧ください。

サンプル

　タブをクリックする度、ちょうど「水位」が上がったり下がったりしているように見えます。なので、「水」を使った施設、例えば水族館やプール、さらにショットバーなどの飲食業など、さまざまな業種に使えますね。

　まず、HTMLと、タブの切り替え動作のためのJavaScriptをそれぞれ用意します。今回、CSS3でのアニメーションの解説が趣旨のため、JavaScriptはjQueryで手短かに設定します。

<ul class="tab">
    <li class="active">館内ガイド</li>
    <li>イルカショー</li>
    <li>新しいおともだち</li>
</ul>

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
    $(".tab li").click(function(){
        $(".tab li").removeClass("active");
        $(this).addClass("active");
    });
}) 
</script>

Javascript（HTMLのheadタグ内に記述）

　つまり、クリックされたliタグに「class="active"」を付け替えられれば良いだけなので、それが作成できればわざわざjQueryを使う必要はありません。

（1）CSSの設定で選択されたタブの色を変える

　次に、デザインレイアウトを行います。CSSで「タブが未選択のときの設定」と、「タブが選択されたときの設定」をします。

/*ulタグのデフォルトのスタイルを消去*/
ul{
    margin:0; padding:0; list-style:none;
    font-size:16px;
    line-height:1;
}
/*タブの表示崩れを防ぐ*/
ul.tab{
    overflow:hidden;
    zoom:1;
}
/*タブが未選択のときの設定*/
.tab li{
    float:left;
    border:1px solid #333;
    width:200px;
    background:aqua;
}
/*タブが選択されたときの設定*/
.tab li.active{
    background:blue;
}

　これで、タブをクリックして選択すると、backgroundプロパティで設定したアクア色から青色に地色が変わる仕組みができました。

基本設定のサンプル

　なお、冒頭のサンプルでお見せしたような「水位の変化」は、この背景を色指定ではなく画像にし、それを下から上にアニメーションで動かすことで表現します。

　簡単なサンプルを作ってみましょう。幅200px、高さ50pxの青くベタ塗りした画像「water.png」を用意します。

　CSSファイルと同じ階層に置き、backgroundプロパティに設定します。

/*タブが未選択のときの設定*/
.tab li{
    float:left;
    border:1px solid #333;
    width:200px;
    background:url(water.png) 0 20px no-repeat;
}
/*タブが選択されたときの設定*/
.tab li.active{
    background:url(water.png&#41 no-repeat;
}

　「タブが未選択のときの設定」においては、背景画像「water.png」を20px下げた状態にしてタブの表示範囲外に追い出し、見えないようにしています。そして、「タブが選択されたときの設定」で元の位置に戻し、タブの表示範囲に置いています。

　もちろん、これだけでは背景画像の位置が一瞬で切り替わるだけですね。徐々に移動していくように、さらにアニメーションの設定を追加します。

/*タブが未選択のときの設定*/
.tab li{
    float:left;
    border:1px solid #333;
    width:200px;
    background:url(water.png&#41 0 20px no-repeat;
    /*アニメーション指定*/
    /*Firefox向け*/
    -moz-transition-property: background;
    -moz-transition-duration:0.2s;
    /*Chrome、Safari向け*/
    -webkit-transition-property: background;
    -webkit-transition-duration:0.2s;
    /*Opera向け*/
    -o-transition-property: background;
    -o-transition-duration:0.2s;
    /*W3C*/
    transition-property: background;
    transition-duration:0.2s;
}
/*タブが選択されたときの設定*/
.tab li.active{
    background:url(water.png&#41 no-repeat;
}

　「transition-property」でbackgroundプロパティをアニメーションの対象とし、「transition-duration」で0.2秒かけて変化するように指定しました。また、多くのWebブラウザで有効となるように、ベンダプレフィックスを付けた設定も、その前に記述します。