FAQアコーディオン（構造化データ対応）
details / summary だけで動くFAQアコーディオン。schema.org の FAQPage に対応し、JavaScriptは一切使っていません。
プレビュー
<section class="faq" itemscope itemtype="https://schema.org/FAQPage">
<h2 class="faq__title">よくある質問</h2>
<div class="faq__item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<details class="faq__details" open>
<summary class="faq__summary">
<span itemprop="name">スニペットは商用利用できますか？</span>
</summary>
<div class="faq__answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p>できます。クレジット表記も不要です。ただしスニペットそのものを再配布する形での利用はご遠慮ください。</p>
</div>
</div>
</details>
</div>
<div class="faq__item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<details class="faq__details">
<summary class="faq__summary">
<span itemprop="name">対応ブラウザを教えてください。</span>
</summary>
<div class="faq__answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p>各ブラウザの最新版2バージョンを対象にしています。Internet Explorer には対応していません。</p>
</div>
</div>
</details>
</div>
<div class="faq__item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<details class="faq__details">
<summary class="faq__summary">
<span itemprop="name">1つ開いたら他を閉じるようにできますか？</span>
</summary>
<div class="faq__answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p>
すべての <code><details></code> に同じ <code>name</code> 属性
（例 <code>name="faq"</code>）を付けると、JavaScriptなしで排他的な開閉になります。
</p>
</div>
</div>
</details>
</div>
</section>/* このスニペット配下だけ box-sizing を揃える（既存のリセットとは競合しません） */
.faq,
.faq *,
.faq *::before,
.faq *::after {
box-sizing: border-box;
}
.faq {
--faq-fg: #111827;
--faq-muted: #4b5563;
--faq-border: #e5e7eb;
--faq-accent: #2563eb;
--faq-hover: #f9fafb;
max-width: 720px;
margin: 0 auto;
color: var(--faq-fg);
font-size: 0.9375rem;
}
.faq__title {
margin: 0 0 1.25rem;
font-size: 1.25rem;
font-weight: 700;
}
.faq__item + .faq__item {
margin-top: 0.625rem;
}
.faq__details {
border: 1px solid var(--faq-border);
border-radius: 10px;
background: transparent;
overflow: hidden;
}
.faq__summary {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.125rem;
font-weight: 600;
line-height: 1.6;
cursor: pointer;
list-style: none;
transition: background-color 0.15s;
}
/* デフォルトの三角マーカーを消す */
.faq__summary::-webkit-details-marker {
display: none;
}
.faq__summary:hover {
background: var(--faq-hover);
}
.faq__summary:focus-visible {
outline: 2px solid var(--faq-accent);
outline-offset: -2px;
}
/* 自前の＋アイコン。開くと×になる */
.faq__summary::after {
content: "";
flex: none;
width: 12px;
height: 12px;
margin-left: auto;
background: currentColor;
color: var(--faq-accent);
transition: transform 0.2s;
clip-path: polygon(
42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%,
58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%
);
}
.faq__details[open] .faq__summary::after {
transform: rotate(45deg);
}
.faq__answer {
padding: 0 1.125rem 1.125rem;
color: var(--faq-muted);
line-height: 1.9;
}
.faq__answer p {
margin: 0;
}
.faq__answer code {
padding: 0.1em 0.35em;
border-radius: 4px;
background: var(--faq-hover);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.875em;
}
@media (prefers-color-scheme: dark) {
.faq {
--faq-fg: #f9fafb;
--faq-muted: #d1d5db;
--faq-border: #374151;
--faq-accent: #60a5fa;
--faq-hover: #1f2937;
}
}
/* ここから下はプレビュー表示用です。コピーして使うときは不要です */
body {
margin: 0;
background: #ffffff;
font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
"Noto Sans JP", sans-serif;
color: #111827;
}
@media (prefers-color-scheme: dark) {
body {
background: #111827;
color: #f9fafb;
}
}