本ページはプロモーションが含まれています

モダンなHTMLで実装！コピペで使える「Q&A（アコーディオン）

公開日

ブログの「よくある質問」や「補足説明」などでよく使われる、クリックするとビヨーンと開く「アコーディオン（Q&A）」。

少し前までは、専用の重いプラグインを入れたり、JavaScript（jQuery）を記述しないと実装できませんでしたが、現在はHTML5の標準タグだけで超簡単に作れるのをご存知ですか？

この記事では、表示速度を一切落とさずにモダンなHTMLでアコーディオンを実装する方法と、コピペで使えるおしゃれなCSSデザイン3選をご紹介します。

💡 なぜプラグイン・JSを使わない方がいいの？

アコーディオンのためだけにプラグインを入れると、サイトの読み込み速度（Core Web Vitals）が低下し、SEOに悪影響を及ぼします。HTMLの標準機能を使えば、ブラウザネイティブの機能で動くため動作が超高速かつ安全です。

【基本】details と summary タグの仕組み

HTML5から追加された <details> と <summary> タグを使えば、たった数行で開閉する仕組みが作れます。

<!-- 基本のHTML構造 -->
<details>
  <summary>ここをクリックすると開きます（質問文など）</summary>
  <div>ここに開いた中身（回答や解説）を記述します。</div>
</details>

本当にこれだけです！あとはCSSで見た目を整えるだけで、立派なQ&Aセクションが完成します。

コピペで使える！Q&A（アコーディオン）デザイン3選

今回は実務のWeb制作でもそのまま使える、汎用性の高い3パターンのデザインをご用意しました。

1. シンプル＆ミニマル（＋ － 切り替え）

どんなサイトにも馴染む、一番スタンダードな下線デザインです。右側の「＋」が開くと「－」に変わります。

アコーディオンはスマホでも動きますか？
はい。iPhone（Safari）やAndroid（Chrome）など、すべてのモダンブラウザで問題なく動作します。
中に画像やリンクを入れることはできますか？
もちろん可能です。回答エリアのdivタグの中には、テキストだけでなく画像タグやaタグも自由に入れられます。
<!-- 1. シンプル＆ミニマルのHTML -->
<div class="kz-qna-wrap">
  <details class="kz-details-01">
    <summary>質問文を入力</summary>
    <div class="kz-answer">回答文を入力</div>
  </details>
</div>

2. ポップなアイコン型（Q & A）

「よくある質問」のコーナーに最適な、自動で「Q」と「A」のアイコンが付くデザインです。（色はサイトに合わせて変更してください）

プラグインなしで実装するメリットは何ですか？
一番のメリットは「サイトの表示速度が速くなること」です。余計なファイル（JSファイルなど）を読み込まないため、読者にもGoogleにも優しいサイトになります。
<!-- 2. ポップなアイコン型のHTML -->
<div class="kz-qna-wrap">
  <details class="kz-details-02">
    <summary>質問文を入力</summary>
    <div class="kz-answer">回答文を入力</div>
  </details>
</div>

3. モダンな矢印回転スタイル（ボックス型）

背景色で区切りをつけ、右側の「∨」矢印がクリックするとクルッと上を向く、今どきのスタイリッシュなデザインです。

初期状態で開いておくことはできますか？
はい、可能です。<details open> のように、「open」属性を追記するだけで、ページを読み込んだ最初から開いた状態にしておくことができます。
<!-- 3. モダンな矢印回転スタイルのHTML -->
<div class="kz-qna-wrap">
  <details class="kz-details-03">
    <summary>質問文を入力</summary>
    <div class="kz-answer">回答文を入力</div>
  </details>
</div>

【必須】ベース用のCSS（コピペ用）

以下のコードをWordPressの「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。

/* =========================================
   Q&A（アコーディオン）共通＆デザインCSS
========================================= */
.kz-qna-wrap { margin: 2em 0; }
/* デフォルトの三角形アイコンを消す */
.kz-qna-wrap details summary { list-style: none; cursor: pointer; }
.kz-qna-wrap details summary::-webkit-details-marker { display: none; }

/* 1. シンプル＆ミニマル */
.kz-details-01 { border-bottom: 1px solid #ddd; margin-bottom: 10px; }
.kz-details-01 summary { padding: 15px 10px; font-weight: bold; position: relative; color: #333; }
.kz-details-01 summary::after { content: "＋"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #999; transition: 0.3s; }
.kz-details-01[open] summary::after { content: "－"; }
.kz-details-01 .kz-answer { padding: 0 10px 20px 10px; color: #555; line-height: 1.6; }

/* 2. ポップなアイコン型 */
.kz-details-02 { background: #fff; border: 2px solid #7C974C; border-radius: 8px; margin-bottom: 15px; overflow: hidden; }
.kz-details-02 summary { padding: 15px 15px 15px 50px; background: #f2f5ec; font-weight: bold; position: relative; color: #333; }
.kz-details-02 summary::before { content: "Q"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: #7C974C; color: #fff; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-size: 14px; }
.kz-details-02 .kz-answer { padding: 15px 15px 15px 50px; position: relative; color: #333; }
.kz-details-02 .kz-answer::before { content: "A"; position: absolute; left: 15px; top: 15px; background: #ffdb58; color: #fff; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-size: 14px; font-weight: bold; }

/* 3. モダンな矢印回転スタイル */
.kz-details-03 { background: #f9f9f9; border-radius: 5px; margin-bottom: 10px; }
.kz-details-03 summary { padding: 15px 20px; font-weight: bold; position: relative; color: #222; }
.kz-details-03 summary::after { content: ""; position: absolute; right: 20px; top: 40%; width: 8px; height: 8px; border-right: 2px solid #666; border-bottom: 2px solid #666; transform: translateY(-50%) rotate(45deg); transition: 0.3s; }
.kz-details-03[open] summary::after { transform: translateY(-50%) rotate(-135deg); top: 50%; }
.kz-details-03 .kz-answer { padding: 0 20px 20px 20px; color: #444; border-top: 1px dashed #ccc; margin-top: 5px; padding-top: 15px; }
ℹ️ 補足：アニメーション（フワッと開く）について

現在、HTML5の details タグ単体では「高さをフワッと開かせる（アニメーション）」のが仕様上少し難しい状態です。そのため、今回は実務で最もトラブルが起きにくい「パッと開く」シンプルで堅牢なスタイルを採用しています。

まとめ

「脱プラグイン」はサイトを強く育てるための第一歩です。
この <details> タグは、記事内の「ネタバレ防止」や「長すぎる補足説明を折りたたむ」のにも非常に便利です。ぜひ色々な場面で活用してみてくださいね！

一覧へ!