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

FAQ・Q&A向けセレクトボックスの作り方

FAQ・Q&A向けセレクトボックスの作り方を紹介します。このサンプルでは、セレクトボックスに質問を選択肢として表示し、選んだ質問に対応する回答をJavaScriptで表示します。複数の質問と回答を縦に並べる方法とは異なり、必要な質問を選んで回答を確認できるため、限られたスペースへFAQを設置したい場合に利用できます。

サービスについての質問、料金や利用方法に関する案内、お問い合わせ前のよくある質問など、複数のQ&Aから必要な内容を選んで確認する場面に適しています。セレクトボックスから質問を変更すると、その質問に対応する回答へ表示が切り替わるため、ページ内へ多くの回答を常時表示せずに情報をまとめられます。

質問の選択肢と回答内容はHTMLから変更でき、CSSでは横幅、余白、背景色、枠線、角丸、文字サイズなどを用途に合わせて調整できます。JavaScriptでは選択された質問に合わせて回答を切り替えます。レスポンシブにも対応し、スマートフォン・タブレット・PCで利用できるFAQ・Q&A向けセレクトボックスです。

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

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

デモ

よくある質問

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

質問

A. FAQページ、料金ページ、サービス説明ページ、お問い合わせ前の案内などに使えます。

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

<!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・Q&A全体 -->
  <div class="faq-select-box_demo">

    <!-- タイトル -->
    <div class="faq-select-box_demo_title">
      よくある質問
    </div>

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

    <!-- ラベル -->
    <label class="faq-select-box_demo_label" for="faq">
      質問
    </label>

    <!-- セレクトボックス -->
    <div class="faq-select-box_demo_select_wrap">

      <select class="faq-select-box_demo_select" id="faq">

        <option value="use">
          どんなページに使えますか？
        </option>

        <option value="javascript">
          JavaScriptは必要ですか？
        </option>

        <option value="price">
          利用料金はかかりますか？
        </option>

      </select>

    </div>

    <!-- 回答表示エリア -->
    <div class="faq-select-box_demo_answer" id="faq-answer">
      <span class="faq-select-box_demo_answer_mark">A.</span>
      <span>
        FAQページ、料金ページ、サービス説明ページ、お問い合わせ前の案内などに使えます。
      </span>
    </div>

  </div>

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

</body>
</html>

/* すべての要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingと枠線を要素サイズへ含める */
}

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

/* FAQ・Q&A全体 */
.faq-select-box_demo{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:680px; /* 最大横幅 */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:36px; /* 内側余白 */
  border:1px solid #dbe5f1; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸 */
  background:#f8fafc; /* 全体の背景色 */
}

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

/* 説明文 */
.faq-select-box_demo_text{
  margin:0 0 28px; /* 下側28pxの余白 */
  text-align:center; /* 中央揃え */
  color:#64748b; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* ラベル */
.faq-select-box_demo_label{
  display:block; /* ブロック要素として表示 */
  margin-bottom:10px; /* 下側10pxの余白 */
  font-size:16px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
  color:#111827; /* ラベルの文字色 */
}

/* セレクトボックスを囲む要素 */
.faq-select-box_demo_select_wrap{
  position:relative; /* 矢印を配置する基準 */
  width:100%; /* 親要素いっぱいに表示 */
}

/* セレクトボックス */
.faq-select-box_demo_select{
  width:100%; /* 親要素いっぱいに表示 */
  padding:16px 52px 16px 16px; /* 上下16px・右52px・左16pxの内側余白 */
  border:2px solid #2563eb; /* セレクトボックスの枠線 */
  border-radius:12px; /* セレクトボックスの角丸 */
  background:#ffffff; /* セレクトボックスの背景色 */
  color:#111827; /* セレクトボックスの文字色 */
  font-size:16px; /* セレクトボックスの文字サイズ */
  line-height:1.5; /* セレクトボックスの行間 */
  appearance:none; /* ブラウザ標準の矢印を非表示 */
  -webkit-appearance:none; /* Safari用 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* セレクトボックスの矢印 */
.faq-select-box_demo_select_wrap::after{
  content:""; /* 擬似要素を表示 */
  position:absolute; /* 右側へ配置 */
  top:50%; /* 縦方向中央 */
  right:20px; /* 右端から20px */
  width:10px; /* 矢印の横幅 */
  height:10px; /* 矢印の高さ */
  border-right:2px solid #111827; /* 矢印の右線 */
  border-bottom:2px solid #111827; /* 矢印の下線 */
  transform:translateY(-70%) rotate(45deg); /* 下向きの矢印にする */
  pointer-events:none; /* クリック操作を邪魔しない */
}

/* フォーカス時 */
.faq-select-box_demo_select:focus{
  outline:3px solid rgba(37,99,235,.18); /* 外側の強調表示 */
}

/* 回答表示エリア */
.faq-select-box_demo_answer{
  margin:24px 0 0; /* 上側24pxの余白 */
  padding:24px 22px; /* 上下24px・左右22pxの内側余白 */
  border:1px solid #dbe5f1; /* 回答エリアの枠線 */
  border-radius:12px; /* 回答エリアの角丸 */
  background:#ffffff; /* 回答エリアの背景色 */
  color:#4b5563; /* 回答文の文字色 */
  font-size:16px; /* 回答文の文字サイズ */
  line-height:1.8; /* 回答文の行間 */
}

/* A.表記 */
.faq-select-box_demo_answer_mark{
  margin-right:8px; /* A.と回答文の間隔 */
  color:#2563eb; /* A.の文字色 */
  font-size:22px; /* A.の文字サイズ */
  font-weight:700; /* A.を太字にする */
}

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

  /* ページ全体 */
  body{
    padding:24px 16px; /* 上下24px・左右16pxへ縮小 */
  }

  /* FAQ・Q&A全体 */
  .faq-select-box_demo{
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* タイトル */
  .faq-select-box_demo_title{
    font-size:24px; /* タイトルの文字サイズを縮小 */
  }

  /* セレクトボックス */
  .faq-select-box_demo_select{
    padding:14px 50px 14px 14px; /* 内側余白を縮小 */
  }

  /* セレクトボックスの矢印 */
  .faq-select-box_demo_select_wrap::after{
    right:18px; /* 矢印の位置を調整 */
  }

  /* 回答表示エリア */
  .faq-select-box_demo_answer{
    padding:20px 18px; /* 内側余白を縮小 */
  }

}

// セレクトボックスを取得
const faqSelect =
  document.getElementById("faq");

// 回答表示エリアを取得
const faqAnswer =
  document.getElementById("faq-answer");

// 質問ごとの回答を設定
const faqAnswers = {

  use:
    "FAQページ、料金ページ、サービス説明ページ、お問い合わせ前の案内などに使えます。",

  javascript:
    "このサンプルでは、選択した質問に合わせて回答を切り替えるためにJavaScriptを使用しています。",

  price:
    "サンプルコードは自由に確認できます。実際に利用する場合は、事前に動作確認を行ってください。"

};

// 質問が変更された時
faqSelect.addEventListener("change",function(){

  // A.表記を作成
  const answerMark =
    document.createElement("span");

  answerMark.className =
    "faq-select-box_demo_answer_mark";

  answerMark.textContent =
    "A.";

  // 回答文を作成
  const answerText =
    document.createElement("span");

  answerText.textContent =
    faqAnswers[faqSelect.value];

  // 現在の回答を削除
  faqAnswer.replaceChildren();

  // A.と回答文を表示
  faqAnswer.append(
    answerMark,
    answerText
  );

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではFAQ・Q&Aの質問を選択するセレクトボックスと回答表示エリアを作成し、CSSでは全体の横幅、余白、背景色、枠線、角丸、セレクトボックスや回答エリアの見た目を設定します。JavaScriptでは選択された質問に対応する回答を切り替えて表示します。

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

各ファイルの役割
index.htmlはFAQ・Q&A向けセレクトボックス全体を構成するファイルです。「よくある質問」のタイトル、説明文、セレクトボックスに表示する質問、初期状態で表示する回答を変更できます。各option要素のvalueは、JavaScriptで対応する回答を判別するために使用します。

style.cssはFAQ・Q&A全体、セレクトボックス、回答表示エリアのデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、タイトルの文字サイズ、セレクトボックスの内側余白、矢印、回答エリアの余白や文字サイズなどを変更できます。

script.jsは質問を変更したときに回答を切り替えるファイルです。faqAnswersに質問ごとの回答を登録し、セレクトボックスのvalueに対応する文章を回答表示エリアへ反映します。「A.」の表示もJavaScriptで生成して回答文と一緒に表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。

セレクトボックスから確認したい質問を選択すると、下の回答表示エリアがその質問に対応した内容へ切り替わります。初期状態では「どんなページに使えますか？」が選択され、その回答が表示されます。

カスタマイズできる内容
index.htmlでは「よくある質問」のタイトル、説明文、質問の選択肢、初期表示する回答を変更できます。質問を追加する場合はoption要素を追加し、ほかの質問と重複しないvalueを設定します。

script.jsではfaqAnswersへ新しいvalueと回答文を追加します。index.htmlに追加したoptionのvalueと、script.js内のキー名を一致させることで、新しい質問と回答を追加できます。

style.cssではFAQ全体の横幅、余白、背景色、枠線、角丸、タイトルの文字サイズ、セレクトボックスの枠線や内側余白、回答エリアの背景色、文字色、行間、「A.」の色や文字サイズなどを変更できます。

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

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

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

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

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

margin:0 0 28px;
説明文の下側余白です。28pxを大きくすると説明文とラベルとの間隔が広がります。

margin-bottom:10px;
ラベルとセレクトボックスの間隔です。値を大きくすると両者の間隔が広がります。

padding:16px 52px 16px 16px;
セレクトボックスの内側余白です。上下16pxで高さ、右52pxで矢印用の余白、左16pxで文字と枠線の間隔を調整できます。

border:2px solid #2563eb;
セレクトボックスの枠線です。2pxを大きくすると枠線が太くなります。

border-radius:12px;
セレクトボックスと回答表示エリアの角丸です。値を大きくすると丸みが強くなります。

right:20px;
セレクトボックス右側に表示する矢印の位置です。値を大きくすると矢印が左へ移動し、小さくすると右端へ近づきます。

width:10px;・height:10px;
セレクトボックスの矢印の大きさです。値を大きくすると矢印も大きく表示されます。

outline:3px solid rgba(37,99,235,.18);
セレクトボックスを選択したときの外側の強調表示です。3pxを大きくすると強調範囲が広がります。

margin:24px 0 0;
回答表示エリアの上側余白です。24pxを大きくするとセレクトボックスとの間隔が広がります。

padding:24px 22px;
回答表示エリアの内側余白です。24pxは上下、22pxは左右の余白です。値を大きくすると文章と枠線の間隔が広がります。

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

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

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

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではFAQ全体へwidth:100%とmax-width:680pxを指定しているため、画面幅に合わせて縮小されます。

また、画面幅640px以下ではFAQ全体の内側余白を24px 18px、タイトルの文字サイズを24px、セレクトボックスの内側余白を14px 50px 14px 14px、回答表示エリアの内側余白を20px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。