【HTML】クリックで開閉するメニューを作る方法【JS不要】

2026年7月21日

どうも、くじらいどです。

「クリックすると答えがパカッと開くFAQ」みたいなやつ、JavaScriptを書かないと作れないと思っていませんか。

実はHTMLの<details>と<summary>というタグだけで、クリックで開閉するメニューが作れます。この記事では、基本の書き方から見た目の調整、よくあるFAQ形式まで、コピペで使える形で紹介します。

details・summaryとは？

結論から言うと、<details>は「開閉できる箱」、<summary>はその「見出し（常に見えている部分）」です。<summary>をクリックすると、中身が開いたり閉じたりします。

ブラウザに最初から備わっている機能なので、JavaScriptもライブラリも一切いりません。三角マーク（▶）も自動で付きます。

くじらいど

アコーディオンメニューって難しそうな名前ですけど、これに関しては拍子抜けするくらい簡単なんですよね。

クリックで開閉するメニューを作る方法

まずは一番シンプルな形です。<details>で全体を囲み、その一番上に<summary>で見出しを書くだけ。あとは開いたときに見せたい中身を続けて書きます。

<details>
  <summary>クリックで開く見出し</summary>
  <p>ここに隠れている本文が入ります。クリックするまでは見えません。</p>
</details>

▼ 表示例（クリックで開きます）

クリックで開く見出し

ここに隠れている本文が入ります。クリックするまでは見えません。

最初から開いた状態にしておきたいときは、<details>にopenを付けます。

<details open>
  <summary>最初から開いている見出し</summary>
  <p>ページを表示した時点で、すでに中身が見えています。</p>
</details>

CSSで見た目を整える

そのままだと少し素っ気ないので、CSSで枠線や背景を付けると一気にそれらしくなります。下のコードをコピペすれば、FAQでよく見るカード風の見た目になります。

/* 箱ぜんたい */
details {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* 見出し部分 */
summary {
  padding: 14px 18px;
  background: #f5f7fa;
  font-weight: bold;
  cursor: pointer; /* マウスを乗せると指マークに */
}

/* 開いたときの中身 */
details p {
  padding: 14px 18px;
  margin: 0;
}

▼ 表示例

三角マークを自分で付け替える

デフォルトの三角マーク（▶）を消して、自分の好きな記号に変えることもできます。list-style: noneで元のマークを消し、::beforeで新しい記号を付けるのが定番です。

/* 元の三角マークを消す */
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

/* 自分でプラス記号を付ける */
summary::before {
  content: "＋";
  margin-right: 8px;
  font-weight: bold;
}

/* 開いているときはマイナス記号に */
details[open] summary::before {
  content: "－";
}

▼ 表示例

Point

details[open]は「開いている状態のdetails」を指す書き方です。これを使うと、開いているときだけ見た目を変えられます。

FAQで「1つ開くと他が閉じる」ようにする

FAQをいくつも並べると、開きっぱなしで画面がごちゃつくことがあります。「1つ開いたら他は自動で閉じる」ようにしたいときは、複数の<details>に同じnameを付けます。

<details name="faq">
  <summary>質問1：送料はかかりますか？</summary>
  <p>全国どこでも送料無料です。</p>
</details>

<details name="faq">
  <summary>質問2：返品はできますか？</summary>
  <p>到着後7日以内であれば返品可能です。</p>
</details>

nameを同じ値（この例ではfaq）でそろえるのがポイントです。これだけで、どれか1つを開くと他が自動的に閉じるようになります。

▼ 表示例（1つ開くと、開いていた方が閉じます）

質問1：送料はかかりますか？

全国どこでも送料無料です。

質問2：返品はできますか？

到着後7日以内であれば返品可能です。

Point

このnameによる排他制御は比較的新しい機能です。古いブラウザでは「他が自動で閉じる」動きにならないことがありますが、その場合でも開閉自体は普通に動くので、そのまま使って問題ありません。