Webデザイナーブログから学ぶホームページ制作

アコーディオンメニューを実装するにはさまざまな方法がありますが、従来は、「jQuery」や「JavaScript」を利用して実装するのが一般的でしたが、「HTML」や「CSS」の技術が進化し「CSS」のみでアコーディオンメニューを実装することができるようになりました。

今回は、CSSのみ（JavaScript無し）でアコーディオンメニューを実装する方法を解説します。

CSSのみ（JavaScript無し）でアコーディオンメニューを実装する方法は沢山ありますが、基本的な考え方は同じですが、「CSS」の記述方法が異なります。

【基本的な考え方】
・チェックボックスを非表示にする
・「チェックボックス」のid属性と「アコーディオンメニュー）」のfor属性を紐づける

各アコーディオンメニューを「チェックボックス」で配置し、デザイン性を持たせるために「チェックボックス」の機能を非表示にする必要があります。CSSで「input[type=checkbox]」に「display:none;」要素を記述して、チェックボックスを非表示にしてからデザインを設計します。

チェックボックスを機能させるために「チェックボックス」と「タブ項目」を紐づけする必要がります。
「input（チェックボックス）」のid属性と「label（メニュー項目）」のfor属性を紐づけます。id属性とfor属性が一致していないとアコーディオンメニューは機能しません。

※ひとつのアコーディオンメニューのみ表示しています。

<input id="accordion-check1" class="accordion-check" type="checkbox">
<label class="accordion-label" for="accordion-check1">クリックメニュー1</label>

「input（ラジオボタン）」のタブを選択した際に、直下にあるClass要素に記述されている「id（コンテンツ内容）」を開くことができます。

<div class="accordion_test">
<input id="accordion-check1" class="accordion-check" type="checkbox">
<label class="accordion-label" for="accordion-check1">クリックメニュー1</label>
<div class="accordion-content">
<p>コンテンツ内容 1</p>
</div>
<input id="accordion-check2" class="accordion-check" type="checkbox">
<label class="accordion-label" for="accordion-check2">クリックメニュー2</label>
<div class="accordion-content">
<p>コンテンツ内容 2</p>
</div>
<input id="accordion-check3" class="accordion-check" type="checkbox">
<label class="accordion-label" for="accordion-check3">クリックメニュー3</label>
<div class="accordion-content">
<p>コンテンツ内容 3</p>
</div>
<input id="accordion-check4" class="accordion-check" type="checkbox">
<label class="accordion-label" for="accordion-check4">クリックメニュー4</label>
<div class="accordion-content">
<p>コンテンツ内容 4</p>
</div>
</div>

.accordion_test{
  margin: 0 auto 50px;
}
.accordion-check{
    display: none;
}
.accordion-label{
    background: #1f71b5;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
}
.accordion-label:after{
    background: #065596;
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    height: 52px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0px;
}
.accordion-content{
    border: 1px solid #cecece;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.accordion-check:checked + .accordion-label:after{
    content: '\f068';
}
.accordion-check:checked + .accordion-label + .accordion-content{
    height: 50px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

「jQuery」や「JavaScript」を利用してアコーディオンメニューを実装するとどうしてもWebサイトのパフォーマンスが悪くなり表示速度が遅くなってしまいます。CSSのみで完結できるのは表示速度の遅延防止に繋がります。
CSSのみでアコーディオンメニューの実装方法を覚えておくと「jQuery」や「JavaScript」が苦手な方でもWebサイトに動きを取り入れることができますね。