3/3 スマホ対応も！アコーディオンメニューの簡単な作り方 [ホームページ作成] All About

HTML＋CSSだけで作るアコーディオンメニューの動作に、アニメーション効果を加える方法

CSS3で追加されたtransitionプロパティなどを使えば、CSSだけで簡単にアニメーション効果を加えられます。IE9以下などの古いブラウザでは対応していませんが、その場合でも単に「アニメーション効果が見えない」だけであって、アコーディオンメニューの「項目を表示したり消したりする」機能自体は問題なく使えます。したがって、アニメーション関連のブラウザ対応状況は気にすることなく安心して使えます。

総合的な記述内容はサンプルページのソースをご覧頂くとして、ここでは、CSSソースだけをご紹介いたします。ここで記述するCSSソースは、HTML側で用意したinput要素がラジオボタンの場合でもチェックボックスの場合でも共通です。

■アコーディオンメニューの動作にアニメーション効果を加えたバージョンのCSSソース
前ページでご紹介したCSSソースは一旦破棄して、以下のCSSソースに置き換えて下さい。AとBの部分だけは前のCSSソースと同じですが、C(非表示にする装飾)とD(表示する装飾)の各部分が異なり、さらにE(アニメーション効果の指定)を新たに加えています。

/* ▼A:アコーディオン内の1項目の装飾 */
.accordion label {
   display: block;            /* ブロック化 */
   margin: 5px 0px;           /* 外側の余白量 */
   padding: 0.5em 1em;        /* 内側の余白量 */
   background-color: #e0e0ff; /* 背景色 */
   border-radius: 0.5em;      /* 角丸 */
   cursor: pointer;           /* マウスを指形に */
}

/* ▼B:ラジオボタンそのものを非表示にする */
.accordionbox input {
   display: none;
}

/* ▼C:チェックが入っていない項目に対するボックスは非表示にする */
.accordionbox input + label div {
   opacity: 0;        /* 不透明度(0:完全に透明) */
   padding: 0px 0px;  /* 内側の余白量 */
   height: 0px;       /* ボックスの高さ */
   font-weight: 100;  /* 文字の太さ(100:細い) */
   overflow: hidden;  /* ※アニメーション途中に文字列がはみ出ないようにするために必要 */
}

/* ▼D:チェックが入っている項目に対するボックスは表示する */
.accordionbox input:checked + label div {
   opacity: 1;        /* 不透明度(1:完全に不透明) */
   padding: 5px 0px;  /* 内側の余白量 */
   height: auto;      /* ボックスの高さ */
   font-weight: 700;  /* 文字の太さ(700:太い) */
}

/* ▼E:アニメーション効果 */
.accordionbox div {
   transition: all 0.3s ease-out 0s;   /* 各値の意味は後述 */
}

上記のCSSソースは、A・B部分は前ページと同じで、

Cの部分が、チェックが入っていない場合の装飾(※)で、
Dの部分が、チェックが入っている場合の装飾で、
Eの部分が、「CとDの装飾が切り替わる際に実行されるアニメーション効果」の指定です。

※Cがこのような動作になるのは、Dを同時に記述した場合のみです。

前ページのCSSソースでは、表示状態と非表示状態を切り替えるためにdisplayプロパティを使いました。しかし、その方法だと下記で紹介するtransitionプロパティでのアニメーションができないので、ボックスの高さを指定するheightプロパティを使って表示状態と非表示状態を切り替えています。

■2つの状態が切り替わる際にアニメーション効果を付加できるtransitionプロパティ
上記CSSソースのEの部分で使用しているtransitionプロパティは、装飾が変化する際にアニメーション効果を付加できるプロパティです。下記のように、4つの値を指定して使います。それぞれの値は以下の意味です。

transition: [変化対象のプロパティ] [変化時間] [アニメーション方法] [遅延時間];

先のソースでは、以下のように値を記述しました。

transition: all 0.3s ease-out 0s;

これは、以下のようなアニメーション動作を意味します。

変化対象のプロパティ：all (すべて)
変化時間： 0.3s (0.3秒)
アニメーション方法： ease-out (ゆっくり終わる)
遅延時間： 0s (0秒)

いろいろ値を変化させて、動作を試してみて下さい。アニメーション方法の値には、linear(一定速度)、ease(開始と終了を滑らかに)、ease-in(ゆっくり始まる)、ease-out(ゆっくり終わる)、ease-in-out(ゆっくり始まってゆっくり終わる)などが使えます。

■アニメーション効果付きアコーディオンメニューの動作サンプル
上記のCSSソースを加えたサンプルページは、下記の通りです。ラジオボタン版とチェックボックス版を用意しましたが、加えたCSSソースは同じです。

全体のソースを確認したり、ソースをコピー＆ペーストしてカスタマイズしてみるには、上記のサンプルページのHTMLソースをご覧下さい。必要なCSSソースはすべて、HTMLソース内のstyle要素内に記述してあります。

備考：CSSで作るアニメーション効果

CSSだけでアニメーション効果を実現する方法としては、@keyframes規則などを使って複雑な動作を指定する方法もあります。その方法を解説した記事には「CSS3だけで特定の要素をアニメーションさせる方法」もありますので、別途ご参照下さい。本記事で使ったtransitionプロパティは、もっと簡単に「2つの状態の間で装飾を変化させる」方法で、既にご紹介したようにとても短い記述で実現できます。

アコーディオンメニューをスクリプトなしのCSSだけで作る方法

さて今回は、質問をクリックすると回答がスライド表示されたり、題名をクリックすると対応コンテンツが表示されたりするUIとしてよく使われるアコーディオンメニューを、HTML＋CSSだけで作成する方法をご紹介いたしました。input要素で作るラジオボタンやチェックボックスの仕様を使うという意外な方法なら、スクリプトは一切不要で作成できることがおわかり頂けたでしょう。ぜひ、活用してみて下さい。

【参考サイト】