以下のリンクをクリックすることで、各セクションに直接ジャンプできます: アコーディオンとは | 基本的なHTMLアコーディオンの作成 | アコーディオンのカスタマイズ方法 | JavaScriptによるアコーディオンの動作制御

アコーディオンとは

アコーディオンとは、ウェブページ上でコンテンツを折りたたんだり展開したりするインターフェースの一種です。 特に多くの情報を提供する必要がある場合に、スペースを節約しつつ、ユーザーが簡単に内容を確認できるようにします。アコーディオンは、通常、見出しやタイトル部分をクリックすることで、その下に隠れている内容を表示させます。

基本的なHTMLアコーディオンの作成

アコーディオンを作成するには、基本的にはHTMLの要素や要素を使います。これを組み合わせて、アコーディオンの開閉動作を実現します。以下に、基本的なアコーディオンのコード例を示します。

        
<details>
    <summary>セクション1</summary>
    ここにセクション1の内容が表示されます。<br>
    コンテンツが追加されても、詳細タグ内で折りたたみ可能です。
</details>

<details>
    <summary>セクション2</summary>
    セクション2の内容がここに表示されます。<br>
    さらに多くの情報が追加できます。
</details>

<details>
    <summary>セクション3</summary>
    セクション3の内容が表示されます。<br>
    すべての情報はユーザーがクリックするまで表示されません。
</details>
        
    

上記のコードは、<details>と<summary>要素を使用してアコーディオンを作成しています。各セクションをクリックすると、その内容が展開されます。

アコーディオンのカスタマイズ方法

HTMLだけでなく、CSSを使用してアコーディオンの見た目をカスタマイズすることができます。例えば、開閉時にアニメーションを加えたり、色を変更することができます。以下のCSSコードは、アコーディオンの見た目を調整する例です。

        
<style>
details {
    margin: 10px 0;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

summary {
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    background-color: #4CAF50;
    color: white;
}

summary:hover {
    background-color: #45a049;
}

details[open] summary {
    background-color: #2196F3;
}

details p {
    font-size: 14px;
}
</style>
        
    

上記のCSSコードは、アコーディオンのセクションの見た目を改善します。例えば、<summary>要素には背景色やホバー時の色変更を設定しており、展開された状態では異なる色が適用されます。

JavaScriptによるアコーディオンの動作制御

アコーディオンの動作を制御するために、JavaScriptを使用することができます。例えば、クリックすることでアコーディオンが開閉する動きを制御できます。以下は、JavaScriptでアコーディオンの開閉動作を制御する例です。

        
<button class="accordion">セクション1</button>
<div class="panel">
    
セクション1の内容
</div>

<button class="accordion">セクション2</button>
<div class="panel">
    
セクション2の内容
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
</script>
        
    

上記のJavaScriptコードは、各ボタンをクリックすると、その下にあるコンテンツが表示または非表示になるように制御します。accordionクラスを持つボタンをクリックすると、その隣のpanelクラスのdivが開閉します。