FAQ・Q&A向けチェックボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】

FAQ・Q&A向けチェックボックスの作り方

FAQ・Q&A向けチェックボックスの作り方を紹介します。このサンプルでは、確認したい質問をチェックボックスから複数選択すると、選択した項目に対応する回答を表示します。1つだけでなく複数の質問を同時に選べるため、利用者が必要な情報をまとめて確認できるFAQ・Q&Aとして利用できます。

施設案内、サービス紹介、料金ページ、お問い合わせ前の案内など、複数の質問から気になる項目を選んでもらいたい場面に適しています。「営業時間」「利用料金」「予約方法」などの項目を自由に選択でき、チェックを入れると対応する回答が表示され、チェックを外すと回答も非表示になります。

HTMLでは質問項目と回答内容を変更でき、CSSでは全体の横幅、余白、背景色、枠線、角丸、チェックボックスの大きさなどを調整できます。JavaScriptでは各チェックボックスの選択状態を確認し、対応する回答の表示・非表示を切り替えます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

施設についてよくある質問

確認したい質問を自由に選択してください。

営業時間利用料金予約方法

A. 営業時間は午前9時から午後6時までです。

A. 一般料金は1,000円です。利用内容によって料金が異なる場合があります。

A. 予約フォームから希望日時を選択してお申し込みください。

営業時間・利用料金・予約方法から確認したい項目を選択すると、対応する回答を複数同時に表示できます。

コードをコピーして使おう！

<!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>

  <!-- FAQ全体 -->
  <div class="faq-checkbox_wrap">

    <!-- タイトル -->
    <div class="faq-checkbox_title">
      施設についてよくある質問
    </div>

    <!-- 説明文 -->
    <p class="faq-checkbox_text">
      確認したい質問を自由に選択してください。
    </p>

    <!-- 質問一覧 -->
    <div class="faq-checkbox_list">

      <!-- 営業時間 -->
      <label class="faq-checkbox_label">
        <input
          class="faq-checkbox_input"
          type="checkbox"
          value="hours">
        営業時間
      </label>

      <!-- 利用料金 -->
      <label class="faq-checkbox_label">
        <input
          class="faq-checkbox_input"
          type="checkbox"
          value="price">
        利用料金
      </label>

      <!-- 予約方法 -->
      <label class="faq-checkbox_label">
        <input
          class="faq-checkbox_input"
          type="checkbox"
          value="reservation">
        予約方法
      </label>

    </div>

    <!-- 回答一覧 -->
    <div class="faq-checkbox_answers">

      <!-- 営業時間の回答 -->
      <div class="faq-checkbox_answer" data-answer="hours">
        <span class="faq-checkbox_answer-mark">A.</span>
        営業時間は午前9時から午後6時までです。
      </div>

      <!-- 利用料金の回答 -->
      <div class="faq-checkbox_answer" data-answer="price">
        <span class="faq-checkbox_answer-mark">A.</span>
        一般料金は1,000円です。利用内容によって料金が異なる場合があります。
      </div>

      <!-- 予約方法の回答 -->
      <div class="faq-checkbox_answer" data-answer="reservation">
        <span class="faq-checkbox_answer-mark">A.</span>
        予約フォームから希望日時を選択してお申し込みください。
      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本の文字色 */
  font-family:sans-serif; /* 使用するフォント */
}

/* FAQ全体と内部要素 */
.faq-checkbox_wrap,
.faq-checkbox_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* FAQ全体 */
.faq-checkbox_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて中央配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #dfe7f0; /* 全体の枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* FAQ全体の背景色 */
}

/* タイトル */
.faq-checkbox_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.faq-checkbox_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 中央揃え */
}

/* 質問一覧 */
.faq-checkbox_list{
  display:grid; /* 質問を縦方向に配置 */
  gap:12px; /* 質問同士の間隔。値を大きくすると広がる */
}

/* 質問 */
.faq-checkbox_label{
  display:flex; /* チェックボックスと文字を横並びにする */
  align-items:center; /* 上下中央へ配置 */
  min-height:56px; /* 質問の最小高さ */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:1px solid #dfe7f0; /* 質問の枠線 */
  border-radius:12px; /* 質問の角丸 */
  background:#ffffff; /* 質問の背景色 */
  color:#111827; /* 質問の文字色 */
  font-size:16px; /* 質問の文字サイズ */
  font-weight:700; /* 質問を太字にする */
  line-height:1.5; /* 質問の行間 */
  cursor:pointer; /* マウスポインターを変更 */
}

/* チェックボックス */
.faq-checkbox_input{
  width:22px; /* チェックボックスの横幅 */
  height:22px; /* チェックボックスの高さ */
  margin:0 14px 0 0; /* 右側14pxの余白 */
  accent-color:#0b6bff; /* 選択時の色 */
  flex-shrink:0; /* チェックボックスの縮小を防ぐ */
  cursor:pointer; /* マウスポインターを変更 */
}

/* 回答一覧 */
.faq-checkbox_answers{
  display:grid; /* 回答を縦方向に配置 */
  gap:12px; /* 回答同士の間隔 */
  margin-top:24px; /* 質問一覧との間隔 */
}

/* 回答 */
.faq-checkbox_answer{
  display:none; /* 初期状態では回答を非表示 */
  padding:20px; /* 回答の内側余白 */
  border:1px solid #dfe7f0; /* 回答の枠線 */
  border-radius:12px; /* 回答の角丸 */
  background:#ffffff; /* 回答の背景色 */
  color:#4b5563; /* 回答の文字色 */
  font-size:16px; /* 回答の文字サイズ */
  line-height:1.8; /* 回答の行間 */
}

/* 選択された質問の回答 */
.faq-checkbox_answer.is-active{
  display:block; /* 回答を表示 */
}

/* A.表記 */
.faq-checkbox_answer-mark{
  margin-right:8px; /* 回答本文との間隔 */
  color:#0b6bff; /* A.の文字色 */
  font-weight:700; /* A.を太字にする */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* FAQ全体 */
  .faq-checkbox_wrap{
    margin:24px auto; /* スマートフォンでは上下余白を24pxにする */
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* 質問 */
  .faq-checkbox_label{
    padding:14px; /* スマートフォンでは左右の余白を小さくする */
  }

  /* 回答 */
  .faq-checkbox_answer{
    padding:18px; /* スマートフォンでは回答の余白を小さくする */
  }

}

// FAQのチェックボックスをすべて取得
const faqCheckboxInputs =
  document.querySelectorAll(".faq-checkbox_input");

// 各チェックボックスへ変更時の処理を設定
faqCheckboxInputs.forEach(function(input){

  input.addEventListener("change",function(){

    // チェックボックスのvalueに対応する回答を取得
    const answer =
      document.querySelector(
        '[data-answer="' + input.value + '"]'
      );

    // チェック状態に合わせて回答の表示・非表示を切り替える
    answer.classList.toggle(
      "is-active",
      input.checked
    );

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「営業時間」「利用料金」「予約方法」のチェックボックスと、それぞれに対応する回答を配置します。CSSではFAQ全体や質問、回答、チェックボックスのデザインを設定し、JavaScriptではチェック状態に合わせて対応する回答の表示・非表示を切り替えます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはFAQ・Q&A全体を構成するファイルです。「施設についてよくある質問」のタイトル、説明文、「営業時間」「利用料金」「予約方法」の質問、各質問に対応する回答内容を変更できます。チェックボックスのvalueと回答側のdata-answerを同じ値にすることで、質問と回答を対応させています。

style.cssはFAQ・Q&Aのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、質問項目の高さ、チェックボックスの大きさ、回答部分の余白などを変更できます。回答は通常display:none;で非表示になり、is-activeクラスが付いた回答だけdisplay:block;で表示されます。

script.jsはチェックボックスと回答を連動させるファイルです。チェックボックスが変更されると、そのvalueと同じdata-answerを持つ回答を取得し、チェック状態に合わせてis-activeクラスを付け外しします。複数のチェックボックスを同時に選択できるため、複数の回答をまとめて表示できます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。確認したい質問のチェックボックスを選択すると、その質問に対応する回答が表示されます。チェックを外すと回答は非表示になります。

カスタマイズできる内容
index.htmlではFAQのタイトル、説明文、質問名、回答内容を変更できます。質問を変更する場合は、チェックボックスのvalueと対応する回答のdata-answerを同じ値にしてください。「営業時間」「利用料金」「予約方法」を別の質問へ変更して、用途に合わせたFAQ・Q&Aとして利用できます。

style.cssではFAQ全体の最大横幅、余白、背景色、枠線、角丸、文字サイズ、質問項目の高さ、チェックボックスのサイズや選択時の色、回答部分の余白などを変更できます。

数値調整
style.css
max-width:700px;
FAQ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
FAQ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
FAQ全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
FAQ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

gap:12px;
質問同士と回答同士の間隔です。値を大きくすると各項目の間隔が広がります。

min-height:56px;
質問項目の最小高さです。値を大きくすると各質問の高さが大きくなります。

padding:14px 18px;
質問項目の内側余白です。上下の14pxと左右の18pxを変更すると、文字と枠線との間隔が変わります。

width:22px;・height:22px;
チェックボックスの大きさです。値を大きくするとチェックボックスが大きく表示されます。

margin:0 14px 0 0;
チェックボックスと質問文の間隔です。14pxを大きくすると間隔が広がります。

margin-top:24px;
質問一覧と回答一覧の間隔です。値を大きくすると回答が質問一覧から離れて表示されます。

padding:20px;
回答部分の内側余白です。値を大きくすると回答文と枠線の間隔が広がります。

border-radius:12px;
質問と回答の角丸です。値を大きくすると丸みが強くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてFAQ全体が縮小されます。また、640px以下ではFAQ全体をpadding:24px 18px;、質問をpadding:14px;、回答をpadding:18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。