【HTML】HTMLとCSSのみでFAQを作る

HTMLとCSSだけ使ってFAQのような開閉するコンテンツを作る方法

大まかな仕組み
実際に作ってみる
CSSを整えていく

大まかな仕組み

CSSの擬似要素checkedを使って開いている状態と閉じている状態を表現する。

hoverならカーソルが上に乗っているかどうかでCSSを切り替えて表示するがcheckedはその要素がチェックされた状態かどうかでCSSを切り替える

具体的にはチェックボックスを使用してチェックボックスが選択されていれば開いている状態、選択されてなければ閉じている状態になるようにCSSを記述する

実際に作ってみる

アコーディオンのサンプル

クリックで開く

アコーディオンの中身

アコーディオンの下のコンテンツ

※ページ中にコードを打ち込んだので現在のサンプルでもアニメーションします。

    <style>
        /*閉じた状態*/
        .acd_text{
            height:0;
            overflow:hidden;
        }
        /*開いた状態*/
        .acd_check:checked + .acd_text{
            height:auto;
            opacity:1;
        }
    </style>

    <label for="check1">クリックで開く</label>
    <input type="checkbox" id="check1" class="acd_check">
    <div class="acd_text">アコーディオンの中身</div>
    <div>アコーディオンの下のコンテンツ</div>

最低限の状態。ラベルかチェックボックスをクリックすると開閉の状態が切り替わるようになっている。

まず、ラベルのfor属性にチェックボックスのidを指定（サンプルではcheck1）することでラベルをクリックすることでもチェックを入れられるようになる。

次に、チェックボックスのすぐ下にアコーディオンの中身を記述する。中身を示すタグはなんでも良いが、今回は隣接セレクタ（＋）を使用するので必ずチェックボックスのすぐ下に記述する。

次にCSSを設定。アコーディオン本文は最初は閉じているので高さは0、はみ出たテキストの扱いを指定するoverflowもhidden（隠す）にしておく

次にチェックが入れられて開いた状態のCSSを設定する。チェックが入れられた状態は擬似要素checked。さらに隣接セレクタである+を使って

チェックボックスのクラス:checked + 切り替えたいクラス

と記述すると、「チェックが入れられたチェックボックスの隣にあるクラス」を指定することができる。

サンプルの場合「.acd_check:checked + .acd_text」がチェックされた状態の隣のクラスを示しているので開いた状態である高さはauto、不透明度も１（１００％）に指定。

上記の設定で、チェックボックスのオンオフで高さが切り替わるようになる

CSSを整えていく

アコーディオンの動作サンプル

クリックで開く

アコーディオンの中身
アコーディオンの中身
アコーディオンの中身
アコーディオンの中身
アコーディオンの中身

アコーディオンの下のコンテンツ

    <style>
        /*閉じた状態*/
        .acd_text{
            height:0;
            opacity:0;
            overflow:hidden;
            /*追加したCSS*/
            transition: 0.5s;
            background-color:#CCC;
            padding:0px 5px;
        }
        /*開いた状態*/
        .acd_check:checked + .acd_text{
            height:auto;
            opacity:1;
            /*追加したCSS*/
            padding:10px 5px;
        }
        /*チェックボックスを隠す*/
        .acd_check{
            display:none;
        }
        /*ラベルをボタン風に装飾*/
        .label_button{
            padding:10px;
            background-color:#232399;
            border-radius:10px;
            color:#FFF;
            margin-bottom:20px;
            display:inline-block;
            width:200px;
            height:45px;
            text-align:center;
        }
    </style>

    <h4>アコーディオンの動作サンプル</h4>
    <label for="check1">クリックで開く</label>
    <input type="checkbox" id="check1" class="acd_check">
    <div class="acd_text">
        アコーディオンの中身<br>
        アコーディオンの中身<br>
        アコーディオンの中身<br>
        アコーディオンの中身<br>
        アコーディオンの中身<br>
    </div>
    <div>アコーディオンの下のコンテンツ</div>

追加したのは下記の要素