FAQ・Q&A向けモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

FAQ・Q&A向けモーダルウインドウの作り方

FAQやQ&Aでは、質問と回答をすべて並べるのではなく、確認したい質問を選んだときだけ回答を表示したい場合があります。この記事では、質問をクリックすると対応する回答をモーダルウインドウで表示できるFAQ・Q&Aを、HTML・CSS・JavaScriptで作る方法を紹介します。

サンプルでは「営業時間」「駐車場」「予約」に関する3つの質問を用意し、質問をクリックすると画面上にモーダルウインドウが開きます。選択した質問の内容と「A.」から始まる回答が表示され、「×」ボタンをクリックするとモーダルを閉じられる仕組みです。JavaScriptで各質問に設定した回答を取得するため、1つのモーダルを複数の質問で共通して使用できます。

施設案内やサービスサイトのよくある質問、お問い合わせ前の案内、会員サイトのヘルプなど、質問一覧を残したまま回答を個別に確認させたい場面で利用できます。質問文と回答文はHTMLから変更でき、モーダルのサイズや背景色、余白、角丸などはCSSで調整できるため、サイトのデザインに合わせてカスタマイズできます。

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

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

デモ

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

確認したい質問をクリックすると、回答がモーダルで表示されます。

質問をクリックすると回答がモーダルで表示されます。「×」をクリックすると閉じます。

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

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

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

    <!-- 説明文 -->
    <p class="faq-modal_text">
      確認したい質問をクリックすると、回答がモーダルで表示されます。
    </p>

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

      <!-- 営業時間 -->
      <button
        class="faq-modal_button"
        type="button"
        data-question="営業時間を教えてください"
        data-answer="営業時間は午前9時から午後6時までです。">
        営業時間を教えてください
        <span class="faq-modal_icon">?</span>
      </button>

      <!-- 駐車場 -->
      <button
        class="faq-modal_button"
        type="button"
        data-question="駐車場はありますか？"
        data-answer="施設の専用駐車場をご利用いただけます。">
        駐車場はありますか？
        <span class="faq-modal_icon">?</span>
      </button>

      <!-- 予約 -->
      <button
        class="faq-modal_button"
        type="button"
        data-question="予約は必要ですか？"
        data-answer="通常は予約なしで利用できます。">
        予約は必要ですか？
        <span class="faq-modal_icon">?</span>
      </button>

    </div>

  </div>

  <!-- モーダル全体 -->
  <div class="faq-modal_overlay" data-faq-modal>

    <!-- モーダル本体 -->
    <div class="faq-modal_content">

      <!-- 閉じるボタン -->
      <button
        class="faq-modal_close"
        type="button"
        aria-label="閉じる"
        data-faq-modal-close>
        ×
      </button>

      <!-- 選択した質問 -->
      <div
        class="faq-modal_question"
        data-faq-modal-question>
      </div>

      <!-- 選択した質問の回答 -->
      <p class="faq-modal_answer">
        <span class="faq-modal_answer-mark">A.</span>
        <span data-faq-modal-answer></span>
      </p>

    </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-modal_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて中央配置 */
  padding:32px; /* 内側余白。値を大きくすると余白が広がる */
  border:1px solid #dbe4f0; /* FAQ全体の枠線 */
  border-radius:18px; /* FAQ全体の角丸 */
  background:#f8fbff; /* FAQ全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

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

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

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

/* 質問ボタン */
.faq-modal_button{
  display:flex; /* 質問文と？アイコンを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:space-between; /* 左右へ配置 */
  gap:16px; /* 質問文と？アイコンの間隔 */
  width:100%; /* 横幅いっぱいに表示 */
  min-height:60px; /* 質問ボタンの最小高さ */
  padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
  border:1px solid #dbe4f0; /* 質問ボタンの枠線 */
  border-radius:12px; /* 質問ボタンの角丸 */
  background:#ffffff; /* 質問ボタンの背景色 */
  color:#111827; /* 質問文の文字色 */
  font:inherit; /* ページと同じフォント */
  font-size:16px; /* 質問文の文字サイズ */
  font-weight:700; /* 質問文を太字にする */
  line-height:1.5; /* 質問文の行間 */
  text-align:left; /* 質問文を左揃え */
  cursor:pointer; /* マウスポインターを変更 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 質問ボタンへマウスを重ねた状態 */
.faq-modal_button:hover{
  border-color:#2563eb; /* 枠線を青色へ変更 */
  background:#eff6ff; /* 背景色を変更 */
}

/* ？アイコン */
.faq-modal_icon{
  display:flex; /* ？を中央へ配置 */
  align-items:center; /* 上下中央へ配置 */
  justify-content:center; /* 左右中央へ配置 */
  width:30px; /* アイコンの横幅 */
  height:30px; /* アイコンの高さ */
  border-radius:50%; /* 円形にする */
  background:#2563eb; /* アイコンの背景色 */
  color:#ffffff; /* ？の文字色 */
  font-size:18px; /* ？の文字サイズ */
  font-weight:700; /* ？を太字にする */
  flex-shrink:0; /* アイコンが縮まないようにする */
}

/* モーダル全体 */
.faq-modal_overlay{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右いっぱいに広げる */
  z-index:9999; /* 前面へ表示 */
  align-items:center; /* モーダルを上下中央へ配置 */
  justify-content:center; /* モーダルを左右中央へ配置 */
  padding:20px; /* 画面端との余白 */
  background:rgba(15,23,42,.55); /* 背景を暗くする */
  box-sizing:border-box; /* paddingを要素サイズへ含める */
}

/* モーダルを開いた状態 */
.faq-modal_overlay.is-open{
  display:flex; /* モーダルを表示 */
}

/* モーダル本体 */
.faq-modal_content{
  position:relative; /* 閉じるボタンを配置する基準 */
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:520px; /* モーダルの最大横幅 */
  padding:32px; /* モーダルの内側余白 */
  border-radius:16px; /* モーダルの角丸 */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 50px rgba(15,23,42,.2); /* モーダルの影 */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* 閉じるボタン */
.faq-modal_close{
  position:absolute; /* モーダル右上へ配置 */
  top:14px; /* 上から14px */
  right:14px; /* 右から14px */
  display:flex; /* ×を中央へ配置 */
  align-items:center; /* 上下中央へ配置 */
  justify-content:center; /* 左右中央へ配置 */
  width:36px; /* ボタンの横幅 */
  height:36px; /* ボタンの高さ */
  padding:0; /* 内側余白を削除 */
  border:none; /* 枠線を非表示 */
  border-radius:50%; /* 円形にする */
  background:#f1f5f9; /* ボタンの背景色 */
  color:#475569; /* ×の文字色 */
  font-size:22px; /* ×の文字サイズ */
  line-height:1; /* 行間を調整 */
  cursor:pointer; /* マウスポインターを変更 */
}

/* モーダル内の質問 */
.faq-modal_question{
  margin:0 44px 20px 0; /* 右44px・下20pxの余白 */
  color:#111827; /* 質問文の文字色 */
  font-size:19px; /* 質問文の文字サイズ */
  font-weight:700; /* 質問文を太字にする */
  line-height:1.6; /* 質問文の行間 */
}

/* モーダル内の回答 */
.faq-modal_answer{
  margin:0; /* 外側余白を削除 */
  color:#4b5563; /* 回答文の文字色 */
  font-size:16px; /* 回答文の文字サイズ */
  line-height:1.8; /* 回答文の行間 */
}

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

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

  /* FAQ全体 */
  .faq-modal_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* モーダル本体 */
  .faq-modal_content{
    padding:28px 22px; /* モーダルの内側余白を縮小 */
  }

}

// 質問ボタンをすべて取得
const faqModalButtons=
  document.querySelectorAll(".faq-modal_button");

// モーダル全体を取得
const faqModal=
  document.querySelector("[data-faq-modal]");

// 閉じるボタンを取得
const faqModalClose=
  document.querySelector("[data-faq-modal-close]");

// モーダル内の質問表示エリアを取得
const faqModalQuestion=
  document.querySelector("[data-faq-modal-question]");

// モーダル内の回答表示エリアを取得
const faqModalAnswer=
  document.querySelector("[data-faq-modal-answer]");

// 各質問ボタンへクリック処理を設定
faqModalButtons.forEach(function(button){

  button.addEventListener("click",function(){

    // クリックした質問をモーダルへ表示
    faqModalQuestion.textContent=
      button.dataset.question;

    // 対応する回答をモーダルへ表示
    faqModalAnswer.textContent=
      button.dataset.answer;

    // モーダルを表示
    faqModal.classList.add("is-open");

  });

});

// 閉じるボタンをクリックした時
faqModalClose.addEventListener("click",function(){

  // モーダルを閉じる
  faqModal.classList.remove("is-open");

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでFAQのタイトル、説明文、質問一覧、回答を表示するモーダルウインドウを作成し、CSSで質問ボタンやモーダルのデザインを設定します。JavaScriptでは、クリックした質問に対応する質問文と回答文をモーダルへ表示し、「×」ボタンで閉じる処理を行います。

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

各ファイルの役割
index.htmlはFAQ・Q&A全体を構成するファイルです。「施設についてよくある質問」のタイトル、説明文、3つの質問と回答を編集できます。各質問ボタンのdata-questionに質問文、data-answerに対応する回答文を設定します。

style.cssはFAQ一覧とモーダルウインドウのデザインを設定するファイルです。FAQ全体の横幅や背景色、質問ボタンのサイズ、枠線、角丸、？アイコン、モーダルの横幅、背景、余白、影などを変更できます。

script.jsは質問と回答を表示するためのファイルです。質問ボタンをクリックすると、そのボタンに設定されたdata-questionとdata-answerを取得してモーダルへ表示します。「×」ボタンをクリックするとis-openクラスを削除してモーダルを閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。「営業時間を教えてください」「駐車場はありますか？」「予約は必要ですか？」のいずれかをクリックすると、選択した質問と対応する回答がモーダルウインドウへ表示されます。モーダル右上の「×」をクリックすると閉じます。

カスタマイズできる内容
index.htmlではFAQのタイトル、説明文、質問文、回答文を変更できます。質問ボタンのdata-questionと画面に表示する質問文を変更し、data-answerへその質問に対応する回答を設定することで、施設案内やサービス内容など用途に合わせた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;
FAQタイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

gap:14px;
質問ボタン同士の間隔です。値を大きくすると各質問の間隔が広がります。

min-height:60px;
質問ボタンの最小高さです。値を大きくするとボタンが高くなります。

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

width:30px;・height:30px;
？アイコンの大きさです。2つの値を同じ数値で変更すると円形を保ったままサイズを調整できます。

background:rgba(15,23,42,.55);
モーダル表示中に画面全体へ重ねる背景色です。最後の.55を変更すると背景の透明度が変わります。

max-width:520px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。

padding:32px;
モーダル本体の内側余白です。値を大きくすると質問・回答とモーダル端の間隔が広がります。

border-radius:16px;
モーダル本体の角丸です。値を大きくすると丸みが強くなります。

top:14px;・right:14px;
「×」ボタンの位置です。それぞれの値を変更すると、モーダル上端・右端からの距離が変わります。

width:36px;・height:36px;
「×」ボタンの大きさです。2つの値を同じ数値で変更すると円形を保ったままサイズを調整できます。

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