CSSフレームワークを使おう

■第15話：HTMLだけで簡単に折り畳み機能を作ろう

（最終更新日：2024.03.23）

「アコーディオンの実装が面倒」

みなさんは、今まで、Web制作で折り畳み機能（アコーディオン）を実装するには、jQueryやJavaScriptを使っていたと思う。 もしくは、JavaScriptを使わわずとも、CSSのライブラリを使って上手く実装していたかもしれない。 どちらを選択するにせよ、少しテクニックがいる実装方法だった。 しかし、今はHTMLだけで折り畳み機能を実装することができるようになった。 今回は、そんなHTMLの折り畳み機能を紹介する。

１.HTMLで折り畳み機能を実装する

現代のHTMLにおいて、折り畳み機能を実装するのは非常に簡単だ。 実装するためのタグが既に用意されていて、detailsタグとsummaryタグを使うだけで実現できる。 実例を下記に示す。クリックすると、各メニュー（ハンバーガー、チーズバーガー、ビックマック）が表示できる。

☝マクドナルドのレギュラーメニュー

• ハンバーガー
• チーズバーガー
• ビックマック

その時のコードは以下の通りである。HTMLだけで折り畳み機能が実装できている。 summaryタグの中身が折り畳み時でも表示される中身で、折り畳まれた中身がsummaryタグ外になる。

２.CSSによる折り畳み部分の装飾

実例では、赤の見出しと肌色の詳細で折り畳み部分を装飾していた。 その際のCSSを下に記す。

最初から、詳細を開いた状態にしたければ、HTMLのdetailsタグにopen属性を付ければできる。 （<details open>と書く。）これも極めて簡単である。以下がその例である。

☝マクドナルドのレギュラーメニュー

• ハンバーガー
• チーズバーガー
• ビックマック

３. まとめ

今回、HTMLだけで簡単に折り畳み機能を実装する方法を紹介した。 折り畳み自体の機能は、昔のようにjQueryやCSSを駆使しなくても簡単に実装できるようになった。 本機能とページリンクを合わせれば、ハンバーガーメニューも実装できる。 CSSアニメーションと組み合わせることで、華やかな動きにすることも可能だ。

よく使う便利な機能はプログラム無しでどんどん実装できるようになる。 常に情報をキャッチアップを行い、シンプルなコードで実装できるようになろう。

▼参考図書、サイト

  detailsとsummaryタグ　　CODE KITCHEN
  【HTMLで箇条書き】ul・ol・liタグの使い方まとめ　　サルワカ