WebサイトのFAQ（よくある質問）やQ&Aでは、質問と回答をまとめて掲載することが多くあります。しかし、すべての回答を最初から表示するとページが長くなり、目的の質問を探しにくくなることがあります。そんなときに便利なのが、質問をクリックすると回答を開閉できるFAQ・Q&A向けアコーディオンです。質問を一覧で表示し、必要な回答だけを開いて確認できるため、情報を整理しながら掲載できます。
今回は、質問の先頭に青色の「Q.」、回答の先頭に「A.」を表示するアコーディオンを作成します。各質問の右側には開閉状態を示す「＋」「－」のアイコンを配置し、クリックすると対応する回答が表示・非表示に切り替わります。クリックした項目だけが開閉する仕組みなので、ほかの回答を閉じることなく、複数の回答を同時に表示できます。FAQページや料金案内、サービス説明、お問い合わせ前の確認事項などに利用できるデザインです。
HTMLでは質問と回答を3項目用意し、CSSで白い背景、角丸の枠線、文字色、項目間の余白などを設定します。JavaScriptでは、クリックした質問に対応する項目へis-openクラスを付け外しすることで、回答の表示を切り替えます。質問や回答の文章はHTMLから変更でき、項目の追加や削除も可能です。この記事では、実際に操作できるデモとサンプルコードを使って、FAQ・Q&A向けアコーディオンの作り方と開閉の仕組みを紹介します。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
質問をクリックすると、回答を開閉できます。
Q 他のアイコンを使いたい場合はどうするの？
無料のSVGアイコン作成ツールを使って、用途に合ったアイコンを作成できます。
コードをコピーして使おう！
<!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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルは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;
回答文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
コメント