クリックすると表示される折りたたみメニューを実装する方法!

クリックすると表示される折りたたみのメニューを実装する方法をサンプルコード付きで解説します。今回はHTMLとCSSのみで実装していきます。

コンテンツ [表示]

  1. 1クリックすると表示される折りたたみメニューを実装したい
  2. 2クリックすると表示される折りたたみメニューを実装する方法
  3. 2.1解説
  4. 2.2複数の折りたたみメニューを実装
  5. 3まとめ

クリックすると表示される折りたたみメニューを実装したい

WEBページの制作において、下記のようなクリックすると表示される、折りたたみのメニューを作りたい時があります。(いわゆるアコーディオン)

Photo byPexels

例えばメニューが長くなりすぎて折りたたんで表示したいときなど、特にスマホサイトなどですっきりとした見た目で表示したいときに折りたたみのメニューは重宝します。

今回はこの折りたたみのメニューについてHTMLとCSSを使って実装していきたいと思います。

クリックすると表示される折りたたみメニューを実装する方法

今回はシンプルにHTMLとCSSのみで、クリックすると表示される折りたたみメニューを実装してみたいと思います。

サンプルコードは下記となります。

解説

今回はHTMLのlabelタグとinput[type="checkbox"]がポイントです。

labelタグはfor属性で指定した値をid属性に持つチェックボックスが存在している場合、labelタグの中身をクリックしたときに有効にする機能があります。

つまり上記のサンプルコードの「▼  クリックで展開1」のテキストをクリックするとチェックボックスが有効になります。
(今回あえてチェックボックスを非表示にしているためブラウザからは見えない)

チェックボックスが有効になることでCSSの疑似クラス:checkedが使えます。つまり通常は非表示にしているコンテンツを、:checkedされているときに表示に切り替えるということで、コンテンツの表示・非表示を切り替えています。

つまり処理の流れとしては下記のようになります。

サンプルコードの処理の流れ

複数の折りたたみメニューを実装

それでは先程のサンプルコードをベースに今度はクリックスと表示される折りたたみメニューを複数実装してみましょう。

1つ目のlabelタグ、inputタグ、divタグをコピーして2つ目・3つ目を作成しましょう。

その中でlabelfor属性の値とinput[type="checkbox"]id属性の値についてはかぶりがないように1つ目とは別の値に設定しましょう。

まとめ

いかがでしたでしょうか。クリックすると表示される折りたたみメニューは動的な動きのためJavaScriptで実装すると先入観を持っている方もいるかと思いますが、HTMLとCSSのみでも実装することが出来ます。

ぜひ今回紹介したテクニックをご活用下さい!

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次