FAQ・Q&A向けラジオボタンの作り方【HTML/CSS/JavaScript・サンプルコード付き】

FAQ・Q&A向けラジオボタンの作り方

FAQ・Q&A向けラジオボタンの作り方を紹介します。このサンプルでは、複数の質問から確認したい項目を1つだけ選択すると、対応する回答を下部へ表示します。ラジオボタンは同じグループ内から1つだけ選択できるため、現在確認している質問を明確にしながら回答を切り替えられます。

施設案内やサービス紹介ページ、会員サイトのヘルプ、ECサイトの利用案内、お問い合わせ前のよくある質問など、複数のQ&Aから1つずつ内容を確認してもらいたい場面に利用できます。サンプルでは「営業時間」「駐車場」「予約」の3つの質問を用意し、別の質問を選択すると、それまで表示していた回答を非表示にして新しい回答へ切り替えます。

HTMLでは質問文と回答文を変更でき、CSSではFAQ全体の横幅、余白、背景色、枠線、角丸、ラジオボタンの色などを調整できます。JavaScriptでは選択されたラジオボタンの値を取得し、対応する回答だけを表示します。画面幅640px以下では余白も調整しているため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

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

確認したい質問を1つ選択してください。

営業時間を教えてください駐車場はありますか？予約は必要ですか？

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

A. 施設専用の駐車場をご利用いただけます。

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-radio-button_wrap">

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

    <!-- 説明文 -->
    <p class="faq-radio-button_text">
      確認したい質問を1つ選択してください。
    </p>

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

      <!-- 営業時間 -->
      <label class="faq-radio-button_label">
        <input
          class="faq-radio-button_input"
          type="radio"
          name="faq-question"
          value="hours">
        <span class="faq-radio-button_name">
          営業時間を教えてください
        </span>
      </label>

      <!-- 駐車場 -->
      <label class="faq-radio-button_label">
        <input
          class="faq-radio-button_input"
          type="radio"
          name="faq-question"
          value="parking">
        <span class="faq-radio-button_name">
          駐車場はありますか？
        </span>
      </label>

      <!-- 予約 -->
      <label class="faq-radio-button_label">
        <input
          class="faq-radio-button_input"
          type="radio"
          name="faq-question"
          value="reservation">
        <span class="faq-radio-button_name">
          予約は必要ですか？
        </span>
      </label>

    </div>

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

    <!-- 駐車場の回答 -->
    <div class="faq-radio-button_answer" data-answer="parking">
      <span class="faq-radio-button_answer-mark">A.</span>
      施設専用の駐車場をご利用いただけます。
    </div>

    <!-- 予約の回答 -->
    <div class="faq-radio-button_answer" data-answer="reservation">
      <span class="faq-radio-button_answer-mark">A.</span>
      通常は予約なしで利用できます。
    </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-radio-button_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて中央配置 */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #dfe7f0; /* FAQ全体の枠線 */
  border-radius:18px; /* FAQ全体の角丸 */
  background:#f8fafc; /* FAQ全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

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

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

/* 質問一覧 */
.faq-radio-button_list{
  display:grid; /* 質問を縦方向へ配置 */
  gap:14px; /* 質問同士の間隔 */
}

/* 質問ラベル */
.faq-radio-button_label{
  display:flex; /* ラジオボタンと質問文を横並びにする */
  align-items:center; /* 上下中央へ揃える */
  gap:12px; /* ラジオボタンと質問文の間隔 */
  padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
  border:1px solid #dfe7f0; /* 質問の枠線 */
  border-radius:10px; /* 質問の角丸 */
  background:#ffffff; /* 質問の背景色 */
  cursor:pointer; /* マウスポインターを変更 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* ラジオボタン */
.faq-radio-button_input{
  width:20px; /* ラジオボタンの横幅 */
  height:20px; /* ラジオボタンの高さ */
  margin:0; /* 外側余白を削除 */
  accent-color:#2563eb; /* 選択時の色 */
  cursor:pointer; /* マウスポインターを変更 */
  flex-shrink:0; /* ラジオボタンが縮まないようにする */
}

/* 質問文 */
.faq-radio-button_name{
  font-size:16px; /* 質問文の文字サイズ */
  font-weight:700; /* 質問文を太字にする */
  color:#111827; /* 質問文の文字色 */
  line-height:1.5; /* 質問文の行間 */
}

/* 回答 */
.faq-radio-button_answer{
  display:none; /* 初期状態では非表示 */
  margin-top:24px; /* 質問一覧との間隔 */
  padding:20px; /* 回答エリアの内側余白 */
  border:1px solid #dbeafe; /* 回答エリアの枠線 */
  border-radius:10px; /* 回答エリアの角丸 */
  background:#ffffff; /* 回答エリアの背景色 */
  color:#4b5563; /* 回答文の文字色 */
  line-height:1.8; /* 回答文の行間 */
}

/* 表示中の回答 */
.faq-radio-button_answer.is-show{
  display:block; /* 選択した質問の回答を表示 */
}

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

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

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

  /* 質問 */
  .faq-radio-button_label{
    padding:14px; /* スマートフォンでは内側余白を小さくする */
  }

}

// FAQのラジオボタンをすべて取得
const faqRadioButtons=document.querySelectorAll(
  ".faq-radio-button_input"
);

// FAQの回答をすべて取得
const faqRadioAnswers=document.querySelectorAll(
  ".faq-radio-button_answer"
);

// 各ラジオボタンへ変更時の処理を設定
faqRadioButtons.forEach(function(radio){

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

    // すべての回答を非表示にする
    faqRadioAnswers.forEach(function(answer){

      answer.classList.remove("is-show");

    });

    // 選択したラジオボタンに対応する回答を取得
    const target=document.querySelector(
      '[data-answer="' + radio.value + '"]'
    );

    // 対応する回答を表示
    target.classList.add("is-show");

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 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全体とラジオボタンのデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、質問項目の間隔、ラジオボタンの大きさや選択色、回答エリアの余白などを変更できます。

script.jsはラジオボタンの選択に合わせて回答を切り替えるファイルです。質問が選択されると、すべての回答からis-showクラスを削除し、選択されたラジオボタンのvalueと同じdata-answerを持つ回答へis-showクラスを追加します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。確認したい質問のラジオボタンを選択すると、その質問に対応する回答が下部へ表示されます。別の質問を選択すると、前の回答が非表示になり、新しく選択した質問の回答へ切り替わります。

カスタマイズできる内容
index.htmlではFAQのタイトル、説明文、質問文、回答文を変更できます。質問を追加する場合は、同じname="faq-question"を指定したラジオボタンを追加し、valueへ新しい値を設定します。対応する回答側にも同じ値をdata-answerへ設定してください。

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:14px;
質問項目同士の間隔です。値を大きくすると各質問の間隔が広がります。

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

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

width:20px;・height:20px;
ラジオボタンの大きさです。2つの値を同じ数値へ変更すると、ラジオボタンのサイズを調整できます。

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

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

line-height:1.8;
回答文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

margin-right:8px;
「A.」と回答文の間隔です。値を大きくすると両者の間隔が広がります。

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