Webページの視認性やユーザーエクスペリエンスに寄与する「アコーディオンメニュー」。ユーザーが興味のあるコンテンツだけを選んで閲覧できるうえ、サイトに動的な表現を取り入れられるので多くのサイトで導入されています。
本記事ではJavaScriptやjQueryを使わず、HTMLやCSSだけで実装できる簡単でお洒落なアコーディオンメニューを紹介しているので、ぜひ自分のWebデザインに取り入れてみてください。
アコーディオンメニューの基礎知識
まずはアコーディオンメニューの基礎知識について見ていきましょう。
アコーディオンメニューとは？
Webページに表示されるクリックやタップで開くメニューをアコーディオンメニューと呼びます。ページのコンテンツを見やすく整理したり、ユーザーが興味のあるコンテンツだけを表示するために利用され、UIやUXの向上に役立つデザイン手法です。
Webページに動きが出るので立地に見えますし、一見するとJavaScriptやjQueryなどのプログラミングが求められそうですが、実はHTMLとCSSだけで簡単に実装できます。初心者の方でもすぐに作成できるので、ぜひ試してみましょう。
アコーディオンメニューはHTMLとCSSだけで作れる？
HTMLではアコーディオンメニューの各セクションや要素をマークアップしましょう。アコーディオンメニューの各アイテム（セクション）は、ボタン（タイトル）とコンテンツ（展開・非表示の部分）から成り立っているので、これらの要素をHTMLで配置して属性やクラスを追加します。
CSSはアコーディオンメニューのスタイリングや表示を制御するために使います。CSSではHTMLでマークアップしたボタンやコンテンツのスタイル、アイテムの表示・非表示、トランジション効果などをカスタマイズしましょう。
ただし、CSSだけではアコーディオンの動的な振る舞いを実現することは難しいので、物足りないと思った場合はWebページに動的な表現を加えるJavaScriptやjQueryでの実装も検討することをおすすめします。
HTMLとCSSだけで作れるアコーディオンメニュー5選
ここでは、HTMLとCSSだけで作れるアコーディオンメニューを5つご紹介します。
- 項目選択タイプのアコーディオンメニュー
- シンプルで使いやすいアコーディオンメニュー
- 立体的な影付きアコーディオンメニュー
- 枠線無しのお洒落なアコーディオンメニュー
- 吹き出し風のアコーディオンメニュー
それぞれ詳しく見ていきましょう。
1.項目選択タイプのアコーディオンメニュー
「項目選択タイプのアコーディオンメニュー」は、ユーザーが異なる項目を選択し、それに関連する情報を展開するために実装するアコーディオンメニュー。以下は、HTMLとCSSだけで作る場合のコード例です。まずはHTMLから見ていきましょう。
<!DOCTYPEhtml> <htmllang="ja"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>項目選択アコーディオン</title> <linkrel="stylesheet"href="styles.css"> </head> <body> <divclass="accordion"> <divclass="accordion-item"> <buttonclass="accordion-button">項目1</button> <divclass="accordion-content"> <p>項目1の詳細情報がここに表示されます。</p> </div> </div> <divclass="accordion-item"> <buttonclass="accordion-button">項目2</button> <divclass="accordion-content"> <p>項目2の詳細情報がここに表示されます。</p> </div> </div> <divclass="accordion-item"> <buttonclass="accordion-button">項目3</button> <divclass="accordion-content"> <p>項目3の詳細情報がここに表示されます。</p> </div> </div> </div> </body> </html>
次にCSSコードを見ていきます。
/*アコーディオンスタイル*/
.accordion{
max-width:400px;
margin:0auto;
}
/*アコーディオンアイテム*/
.accordion-item{
margin-bottom:10px;
}
/*アコーディオンボタンスタイル*/
.accordion-button{
background-color:#f0f0f0;
padding:10px;
width:100%;
text-align:left;
border:none;
cursor:pointer;
}
/*アコーディオンコンテンツ（初期状態では非表示）*/
.accordion-content{
display:none;
padding:10px;
background-color:#ffffff;
}
/*アコーディオンアイテムが開いた際のスタイル*/
.accordion-item.active.accordion-content{
display:block;
}
このコードは、3つの項目を持つシンプルなアコーディオンメニューです。各項目はボタンで表示され、クリックすると詳細情報が展開されます。CSSを使用してアコーディオンのスタイリングと動作を制御しており、必要に応じて項目の数やコンテンツを追加し、デザインをカスタマイズしましょう。
2.シンプルで使いやすいアコーディオンメニュー
このコードで作れるアコーディオンメニューはシンプルで使いやすいデザインです。ウェブサイトのナビゲーションやコンテンツの整理に便利なのでぜひ活用してみてください。まずはHTMLから見ていきましょう。
<!DOCTYPEhtml> <htmllang="ja"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="styles.css"> <title>シンプルなアコーディオンメニュー</title> </head> <body> <divclass="accordion"> <buttonclass="accordion-button">セクション1</button> <divclass="accordion-content"> <p>セクション1の内容がここに表示されます。</p> </div> <buttonclass="accordion-button">セクション2</button> <divclass="accordion-content"> <p>セクション2の内容がここに表示されます。</p> </div> <buttonclass="accordion-button">セクション3</button> <divclass="accordion-content"> <p>セクション3の内容がここに表示されます。</p> </div> </div> <scriptsrc="script.js"></script> </body> </html>
次に、CSSコードを見ていきます。
/*デフォルトはコンテンツを非表示に*/
.accordion-content{
display:none;
}
/*ボタンがクリックされたときにコンテンツを表示*/
.accordion-button.active+.accordion-content{
display:block;
}
必要に応じて、デザインやスタイルをカスタマイズしてください。
3.立体的な影付きアコーディオンメニュー
クリックするとコンテンツが展開し、立体的な影が要素に追加されるデザインのアコーディオンメニュー。サイトに立体感をもたらしてくれるので、場合に応じて実装してみてください。以下は、HTMLとCSSを使用して立体的な影付きアコーディオンメニューを作成する基本的なコード例です。
<!DOCTYPEhtml> <htmllang="ja"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="styles.css"> <title>立体的な影付きアコーディオンメニュー</title> </head> <body> <divclass="accordion"> <divclass="accordion-item"> <buttonclass="accordion-header">項目1</button> <divclass="accordion-content"> <p>項目1のコンテンツがここに表示されます。</p> </div> </div> <divclass="accordion-item"> <buttonclass="accordion-header">項目2</button> <divclass="accordion-content"> <p>項目2のコンテンツがここに表示されます。</p> </div> </div> <!--他の項目も同様に追加--> </div> </body> </html>
そして、CSSは以下のように記載します。
/*スタイルのリセット*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/*アコーディオンメニューのスタイル*/
.accordion{
max-width:400px;/*メニューの最大幅を設定*/
margin:0auto;/*中央寄せ*/
}
.accordion-item{
border:1pxsolid#ccc;
border-radius:5px;
margin-bottom:10px;
}
.accordion-header{
width:100%;
background-color:#f1f1f1;
padding:10px;
text-align:left;
cursor:pointer;
border:none;
outline:none;
}
.accordion-content{
display:none;
padding:10px;
border-top:1pxsolid#ccc;
}
/*アコーディオンメニューのアニメーション*/
.accordion-item.active.accordion-content{
display:block;
}
.accordion-item.active.accordion-header{
background-color:#e0e0e0;
box-shadow:0px4px8pxrgba(0,0,0,0.2);
}
このコードでは、HTMLでアコーディオンメニューの構造を定義し、CSSでスタイリングとアニメーションを追加しています。項目をクリックするとコンテンツが展開し、選択した項目に立体的な影が表示されるよう指示しています。必要に応じて項目を追加またはカスタマイズしましょう。
4.枠線無しのお洒落なアコーディオンメニュー
こちらはシンプルでモダンなデザインのアコーディオンメニュー。このスタイルでは、枠線を使用せず、クリーンで洗練された外観を実現します。HTMLとCSSで実装するための基本的なコード例を見ていきましょう
<!DOCTYPEhtml> <htmllang="ja"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="styles.css"> <title>枠線無しのお洒落なアコーディオンメニュー</title> </head> <body> <divclass="accordion"> <divclass="accordion-item"> <buttonclass="accordion-header">項目1</button> <divclass="accordion-content"> <p>項目1のコンテンツがここに表示されます。</p> </div> </div> <divclass="accordion-item"> <buttonclass="accordion-header">項目2</button> <divclass="accordion-content"> <p>項目2のコンテンツがここに表示されます。</p> </div> </div> <!--他の項目も同様に追加--> </div> </body> </html>
そして、CSSは以下のように記述します。
/*スタイルのリセット*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/*アコーディオンメニューのスタイル*/
.accordion{
max-width:400px;/*メニューの最大幅を設定*/
margin:0auto;/*中央寄せ*/
}
.accordion-item{
margin-bottom:10px;
}
.accordion-header{
width:100%;
background-color:#f1f1f1;
padding:10px;
text-align:left;
cursor:pointer;
border:none;
outline:none;
transition:background-color0.3sease-in-out;
}
.accordion-content{
display:none;
padding:10px;
}
/*アコーディオンメニューのアニメーション*/
.accordion-item.active.accordion-content{
display:block;
}
.accordion-item.active.accordion-header{
background-color:#e0e0e0;
}
このコードでは、HTMLでアコーディオンメニューの構造を定義し、CSSでスタイリングとアニメーションを追加しています。枠線を無くし、シンプルでお洒落な外観を持つアコーディオンメニューに仕上がっているので、ぜひ活用してみてください。
5.吹き出し風のアコーディオンメニュー
吹き出しのように表現された、ユニークで目を引くデザインのアコーディオンメニュー。項目を選択すると吹き出しが展開されるデザインです。以下は、HTMLとCSSを使用して吹き出し風のアコーディオンメニューを作成する基本的なコード例です。
<!DOCTYPEhtml> <htmllang="ja"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="styles.css"> <title>吹き出し風のアコーディオンメニュー</title> </head> <body> <divclass="accordion"> <divclass="accordion-item"> <buttonclass="accordion-header">項目1</button> <divclass="accordion-content"> <p>項目1のコンテンツがここに表示されます。</p> </div> </div> <divclass="accordion-item"> <buttonclass="accordion-header">項目2</button> <divclass="accordion-content"> <p>項目2のコンテンツがここに表示されます。</p> </div> </div> <!--他の項目も同様に追加--> </div> </body> </html>
そして、CSSは以下のように記述します。
/*スタイルのリセット*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/*アコーディオンメニューのスタイル*/
.accordion{
max-width:400px;/*メニューの最大幅を設定*/
margin:0auto;/*中央寄せ*/
}
.accordion-item{
position:relative;
border:1pxsolid#ccc;
border-radius:5px;
margin-bottom:10px;
}
.accordion-header{
width:100%;
background-color:#f1f1f1;
padding:10px;
text-align:left;
cursor:pointer;
border:none;
outline:none;
}
.accordion-content{
display:none;
padding:10px;
border-top:1pxsolid#ccc;
background-color:#f1f1f1;
position:absolute;
left:100%;
top:0;
border-radius:5px;
box-shadow:3px3px5pxrgba(0,0,0,0.2);
}
/*アコーディオンメニューのアニメーション*/
.accordion-item.active.accordion-content{
display:block;
}
Webサイトのコンセプトによってはマッチするデザインに仕上がっているので、ぜひ活用してみてください。
JSを使ったアコーディオンメニューの設置方法
ここでは応用編として、JavaScript（JS）を使ったアコーディオンメニューの設置方法を紹介します。より動的な表現を取り入れてWeb制作に臨みたい方はぜひ参考にしてみてください。
JavaScriptを使用したアコーディオンメニューを設置するには、HTMLとCSSに加えてJavaScriptコードを追加する必要があります。以下は、項目選択が可能なアコーディオンメニューのコード例です。
<!DOCTYPEhtml>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<linkrel="stylesheet"href="styles.css">
<title>JavaScriptを使ったアコーディオンメニュー</title>
</head>
<body>
<divclass="accordion">
<divclass="accordion-item">
<buttonclass="accordion-header">項目1</button>
<divclass="accordion-content">
<p>項目1のコンテンツがここに表示されます。</p>
</div>
</div>
<divclass="accordion-item">
<buttonclass="accordion-header">項目2</button>
<divclass="accordion-content">
<p>項目2のコンテンツがここに表示されます。</p>
</div>
</div>
<!--他の項目も同様に追加-->
</div>
<script>
constaccordionHeaders=document.querySelectorAll(".accordion-header");
accordionHeaders.forEach(header=>{
header.addEventListener("click",()=>{
constaccordionItem=header.parentElement;
accordionItem.classList.toggle("active");
});
});
</script>
</body>
</html>
そして、CSSは以下のように記述します。
/*スタイルのリセット*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
/*アコーディオンメニューのスタイル*/
.accordion{
max-width:400px;/*メニューの最大幅を設定*/
margin:0auto;/*中央寄せ*/
}
.accordion-item{
border:1pxsolid#ccc;
border-radius:5px;
margin-bottom:10px;
}
.accordion-header{
width:100%;
background-color:#f1f1f1;
padding:10px;
text-align:left;
cursor:pointer;
border:none;
outline:none;
}
.accordion-content{
display:none;
padding:10px;
border-top:1pxsolid#ccc;
}
/*アコーディオンメニューのアニメーション*/
.accordion-item.active.accordion-content{
display:block;
}
このコードでは、JavaScriptを使用してアコーディオンメニューの開閉を制御しています。クリックやタップされた際に、「active」クラスをトグルすることで、アコーディオンの展開と閉じる動作を実現。HTMLとCSSの部分はこれまでと同様ですが、JavaScriptを追加して動作を追加しているのがポイントです。
アコーディオンメニューに関するQ&A
ここからは、アコーディオンメニューに関するQ&Aを見ていきましょう。よくある質問と回答をまとめているので、ぜひ参考にしてみてください。
HTMLとCSSだけで実装しても問題はない？
一般的にはJavaScriptで動的な表現を処理することが多いですが、アコーディオンメニューくらいの動きであればHTMLとCSSだけで実装しても問題はありません。手軽に実装できるので初心者にもおすすめです。この記事で紹介したコードを元にご自身でも記述してみましょう。
実装したのにアコーディオンが動かないのはなぜ？
アコーディオンが動かない場合、その原因と解決策はいくつか考えられます。一般的な原因とそれに対する解決策は以下のとおりです。
JavaScriptが正しく読み込まれていない
JavaScriptファイル（スクリプト）が正しくHTMLに組み込まれていない可能性があります。<script>タグが<body>タグの内部にあることを確認し、ファイルのパスが正しいか確認しましょう。
イベントリスナーが正しく設定されていない
JavaScriptコード内でクリックイベントリスナーが正しく設定されていないかもしれません。
document.querySelectorAll(“.accordion-header”)で要素が正しく選択されていることを確認し、イベントリスナーがクリック時に正しく実行されているかチェックしましょう。
クラス名やセレクタが一致しない
JavaScriptでクラス名やセレクタを使用して要素を選択している場合、HTMLと一致していないかもしれません。HTMLのクラス名やセレクタがJavaScriptコードと一致しないと、正しい要素が選択されず、アコーディオンの動作に支障を来す可能性があります。
CSSスタイルが正しく設定されていない
アコーディオンのスタイリングがCSSで正しく設定されているか確認しましょう。特に「display:none;」や「display:block;」などのプロパティを適切に設定しているかチェックすることをおすすめします。
JavaScriptエラーが発生している
ブラウザのデベロッパーツールを使用して、JavaScriptコンソールにエラーメッセージが表示されていないか確認しましょう。エラーがある場合はそれを解決してもう一度試してみてください。
アコーディオンメニューに向いているのはどんなコンテンツ？
アコーディオンメニューはユーザーが興味のあるコンテンツだけを選んでアクセスできる機能です。その特長から、FAQや長いリスト、表のようなコンテンツに向いていると言えるでしょう。
いずれにせよ、情報を整理し、階層や対応表のように記載したい場合に重宝する手法です。Webページに載せる情報の中でアコーディオンメニューに適しているものがあれば積極的に活用してみましょう。
CSSを活用してアコーディオンメニューを実装しよう
CSSやHTMLだけでもアコーディオンメニューは実装できるので、本記事で紹介したコードも参考にしつつサイトのコンセプトに適したアコーディオンメニューを設置してみましょう。もっと細かな調整がしたくなった場合は、ぜひJavaScriptでの実装にも挑戦してみることをおすすめします。
