FAQ・Q&A向けアコーディオンの作り方
FAQ・Q&A向けアコーディオンの作り方を紹介します。このサンプルでは、よくある質問と回答を縦に並べ、質問をクリックすると対応する回答を開閉できるアコーディオンをHTML・CSS・JavaScriptで実装します。回答を最初からすべて表示せず、必要な項目だけを開いて確認できるため、質問数が多いページでも内容を整理して掲載できます。
FAQページやお問い合わせ前の案内、料金ページ、サービス説明ページなど、質問と回答をまとめて掲載したい場面に利用できます。各質問には「Q.」、回答には「A.」を表示し、閉じている質問には「＋」、開いている質問には「－」を表示します。質問をクリックするたびに、その項目だけを個別に開閉できるため、複数の回答を同時に開いて確認することもできます。
HTMLでは質問と回答の文章や項目数を変更でき、CSSでは横幅、余白、背景色、枠線、角丸、文字色などを調整できます。JavaScriptではクリックした質問の親要素へ開閉用のクラスを付け外しし、回答の表示状態を切り替えます。シンプルな構成なので内容を変更しやすく、FAQ・Q&Aをアコーディオン形式で掲載したいWebページへ導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
質問をクリックすると、回答を開閉できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードを指定 -->
<meta charset="UTF-8">
<!-- 画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>FAQ・Q&A向けアコーディオン</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモ全体を囲むエリア -->
<div class="faq-accordion_wrap">
<!-- タイトル -->
<div class="faq-accordion_title">
FAQ・Q&A向けアコーディオン
</div>
<!-- 説明文 -->
<p class="faq-accordion_text">
質問をクリックすると、回答を開閉できます。
</p>
<div class="faq-accordion_item">
<button class="faq-accordion_question" type="button">
<span class="faq-accordion_question-text">利用料金はかかりますか？</span>
</button>
<div class="faq-accordion_answer">
サンプルコードは自由に確認できます。実際に利用する場合は、事前に動作確認を行ってください。
</div>
</div>
<div class="faq-accordion_item">
<button class="faq-accordion_question" type="button">
<span class="faq-accordion_question-text">JavaScriptは必要ですか？</span>
</button>
<div class="faq-accordion_answer">
このサンプルでは、クリックした質問の開閉をJavaScriptで制御しています。
</div>
</div>
<div class="faq-accordion_item">
<button class="faq-accordion_question" type="button">
<span class="faq-accordion_question-text">どんなページに使えますか？</span>
</button>
<div class="faq-accordion_answer">
FAQページ、料金ページ、サービス説明ページ、お問い合わせ前の案内などに使えます。
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではFAQ・Q&Aの質問と回答を作成し、CSSで各項目の枠線、余白、背景色、角丸、「Q.」「A.」の表示、開閉アイコンなどを整えます。JavaScriptでは質問ボタンをクリックしたときに、対応するFAQ項目へis-openクラスを付け外しして回答の表示・非表示を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはFAQ・Q&A向けアコーディオン全体を構成するファイルです。タイトル、説明文、質問文、回答文を変更できます。質問と回答はfaq-accordion_itemで1組になっているため、同じ構造を追加することでFAQ項目を増やせます。
style.cssはアコーディオンの見た目を設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、質問ボタンの余白、「Q.」「A.」の色、開閉アイコンの表示などを変更できます。回答は初期状態でdisplay:none;になっており、FAQ項目へis-openクラスが付くとdisplay:block;へ切り替わります。
script.jsは質問をクリックしたときの開閉処理を行うファイルです。すべてのfaq-accordion_questionを取得し、クリックされたボタンの親要素へis-openクラスを付け外しします。各FAQ項目は個別に開閉できるため、複数の回答を同時に開いた状態にもできます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3ファイルを保存したあと、sample/index.htmlをブラウザで開いてください。
表示された質問をクリックすると、その質問に対応する回答が表示されます。もう一度同じ質問をクリックすると回答が閉じます。閉じている状態では「＋」、開いている状態では「－」が表示されます。
カスタマイズできる内容
index.htmlでは「FAQ・Q&A向けアコーディオン」のタイトル、説明文、各質問、各回答を変更できます。FAQ項目を追加する場合は、既存のfaq-accordion_itemと同じ構造を追加します。
style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、質問ボタンの内側余白、項目同士の間隔、「Q.」「A.」の文字色、開閉アイコンの色などを変更できます。content:"Q.";、content:"A.";、content:"＋";、content:"－";を変更すると、それぞれの表示文字も変更できます。
数値調整
style.css
max-width:700px;
FAQ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
FAQ全体の上下余白です。40pxを大きくすると上下の間隔が広がります。
padding:32px;
FAQ全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
FAQ全体の角丸です。値を大きくすると丸みが強くなります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin-bottom:12px;
各FAQ項目の下側余白です。値を大きくすると項目同士の間隔が広がります。
border-radius:12px;
各FAQ項目の角丸です。値を大きくすると丸みが強くなります。
padding:16px 18px;
質問ボタンの内側余白です。16pxは上下、18pxは左右の余白です。値を大きくすると質問部分が大きくなります。
gap:12px;
質問文と開閉アイコンの間隔です。値を大きくすると両者の間隔が広がります。
margin-right:8px;
「Q.」と質問文、「A.」と回答文の間隔です。値を大きくすると文字同士の間隔が広がります。
padding:0 18px 18px;
回答部分の内側余白です。左右の18pxを大きくすると文章と外枠の間隔が広がり、下側の18pxを大きくすると回答下部の余白が広がります。
line-height:1.8;
回答文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
コメント