HTMLの折りたたみメニューを有効活用する方法を現役エンジニアが解説【初心者向け】

折りたためるメニュー、通称アコーディオンメニューはWebページに必須のパーツです。

おしゃれなメニューを効果的に活用したいですよね。

アコーディオンメニューの作り方がよくわからない、うまく作れないという方に、この記事ではHTMLでアコーディオンメニューを作り、有効活用する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• HTML5でアコーディオンメニューを作る方法
• HTMLを学習中の方へ

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

 

HTML5でアコーディオンメニューを作る方法

HTML5では、detailsタグとsummaryタグを使って、アコーディオンメニューを簡単に作ることができます。

See the Pen
Accordion by TAKAYOSHI (@lspuwbkv)
on CodePen.

2010年代は、inputタグとCSS3アニメでアコーディオンメニューを作っていました。

まず、inputタグのチェックボックスを透明にし、onとoffを切り替えるスイッチを作成します。

そのonとoffをCSSでセレクトし、アニメで切り替えていく手法です。

見えないinputタグを複雑に活用するため、難しいテクニックでした。

 

しかし現在、HTML5のdetailsタグとsummaryタグを使って簡単に作れるようになりました。

2021年10月現在、Chrome、Edge、FireFox、Safariがdetailsとsummaryをサポート (Can I Use)。

IEではサポートされていませんので注意してくださいね。

 

それでは詳しく解説していきます。

 

detailsタグとsummaryタグ

detailsタグとsummaryタグは折りたたみ要素、つまりアコーディオンメニューを作るためのタグです。

 

<details>タグの中に<summary>タグで囲った常に見える要素と、折りたたむ要素を並べて記述してください。

See the Pen
detail by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

これだけで、シンプルなアコーディオンメニューとして表示されます。

detailsタグやsummaryタグをCSSで装飾すると、おしゃれなアコーディオンメニューになるんですね。

See the Pen
detail 2 by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

アコーディオンの折りたたみ状態に応じたCSS

アコーディオンを開く閉じるに応じて、デザインを変えたいことがあります。

その時は、detailsタグの[open]セレクタで、開いた状態をセレクトしましょう。

details[open] {
     /* アコーディオンが開いている状態のCSS */ 
}

 

summaryなどの子要素を装飾したい場合は、子孫セレクタでつなげます。

details[open]  summary{
     /* アコーディオンが開いている状態のCSS */ 
}

 

このテクニックを使って、開閉するとメニューの色が変わるようにしたサンプルです。

See the Pen
detail 3 by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

CSSアニメーションでアコーディオン

次に、開閉によるデザインの違いをアニメーションにしていきましょう。

変化に時間をかけることで、アニメーションを表現するtransitionプロパティを使います。

details summary{
     /* 変化に0.5秒かけるアニメーション*/
     transition:  0.5s; 
}

 

すると、デザインの変化が滑らかにアニメーションします。

See the Pen
detail 4 by TAKAYOSHI (@lspuwbkv)
on CodePen.

このように、 開閉それぞれのデザインをCSSで作りアニメーションとし、おしゃれなアコーディオンメニューを作るんですね。

 

例えば、二重にしてツリー構造を表現したサンプルです。

See the Pen
detail 5 by TAKAYOSHI (@lspuwbkv)
on CodePen.

表現の幅が広がると、Web制作がどんどん楽しくなりますね。

みなさんも、ぜひおしゃれなアコーディオンメニューを作ってみてください。

 

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！