FAQ・折りたたみ（details/summary）

アフィリエイトリンク(広告)がありますのでご了承ください。

※ 下記のCSSはそのままコピーしてご利用いただけます。他テーマでも使用可能です。

Lilac Bloom FAQ・折りたたみデザイン集（全10種）

クリックすると内容が表示されるアコーディオン形式のデザインです。detailsとsummaryタグを使用しています。

💡 FAQ共通ベース設定
アコーディオンの動作を安定させるため、以下のCSSを必ず記述してください。


[title]FAQ共通ベース設定[/title]
details {
	margin: 15px 0;
	transition: 0.3s;
}

summary {
	padding: 15px;
	cursor: pointer;
	font-weight: bold;
	list-style: none;
	outline: none;
	position: relative;
}

summary::-webkit-details-marker {
	display: none;
}

.lb-faq-content {
	padding: 15px;
	border-top: 1px solid transparent;
}

1. シンプルな枠線タイプ

ここに質問が入ります

ここに回答が入ります。シンプルでどんな記事にも合います。


[title]HTML: シンプル枠[/title]
<details class="lb-faq-simple">
	<summary>ここに質問が入ります</summary>
	<div class="lb-faq-content">ここに回答が入ります。シンプルでどんな記事にも合います。</div>
</details>


[title]CSS: シンプル枠[/title]
.lb-faq-simple {
	border: 1px solid #bd93f9;
	border-radius: 5px;
}

2. Q&Aアイコン付き

Q AIを使ってブログを書くメリットは？

A 執筆時間の短縮と、客観的な視点での構成案作成が可能になります。


[title]HTML: アイコン付き[/title]
<details class="lb-faq-icon">
	<summary><span class="q-mark">Q</span> AIを使ってブログを書くメリットは？</summary>
	<div class="lb-faq-content"><span class="a-mark">A</span> 執筆時間の短縮と、客観的な視点での構成案作成が可能になります。</div>
</details>


[title]CSS: アイコン付き[/title]
.lb-faq-icon {
	border: 2px solid #f1e9ff;
	border-radius: 8px;
}
.q-mark {
	color: #bd93f9;
	margin-right: 10px;
	font-size: 1.2em;
}
.a-mark {
	color: #ff79c6;
	margin-right: 10px;
	font-weight: bold;
}

3. 背景塗りつぶしタイプ

クリックして詳細を確認

背景を淡いライラック色にして視認性を高めています。


[title]HTML: 背景塗り[/title]
<details class="lb-faq-bg">
	<summary>クリックして詳細を確認</summary>
	<div class="lb-faq-content">背景を淡いライラック色にして視認性を高めています。</div>
</details>


[title]CSS: 背景塗り[/title]
.lb-faq-bg summary {
	background: #f1e9ff;
	border-radius: 5px;
	color: #6a5acd;
}

.lb-faq-bg[open] summary {
	border-radius: 5px 5px 0 0;
}

.lb-faq-bg .lb-faq-content {
	background: #fdfbff;
}

4. 回転矢印アニメーション

もっと詳しく見る

CSSアニメーションで矢印が回転する仕組みです。


[title]HTML: 矢印回転[/title]
<details class="lb-faq-arrow">
	<summary>もっと詳しく見る</summary>
	<div class="lb-faq-content">CSSアニメーションで矢印が回転する仕組みです。</div>
</details>


[title]CSS: 矢印回転[/title]
.lb-faq-arrow summary::after {
	content: '▼';
	position: absolute;
	right: 15px;
	transition: 0.3s;
	color: #bd93f9;
}

.lb-faq-arrow[open] summary::after {
	transform: rotate(180deg);
}

.lb-faq-arrow summary {
	border-bottom: 2px solid #bd93f9;
}

5. 吹き出し風アコーディオン

ヒントをチェック

回答部分が吹き出しのように見えるデザインです。


[title]HTML: 吹き出し風[/title]
<details class="lb-faq-speech">
	<summary>ヒントをチェック</summary>
	<div class="lb-faq-content">回答部分が吹き出しのように見えるデザインです。</div>
</details>


[title]CSS: 吹き出し風[/title]
.lb-faq-speech .lb-faq-content {
	background: #f9f5ff;
	border-radius: 10px;
	position: relative;
	margin-top: 5px;
}

.lb-faq-speech .lb-faq-content::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 20px;
	border: 5px solid transparent;
	border-bottom: 5px solid #f9f5ff;
}

6. 下線のみのスッキリ型

よくある質問1

余計な装飾を省いた、清潔感のあるデザインです。


[title]HTML: 下線のみ[/title]
<details class="lb-faq-line">
	<summary>よくある質問1</summary>
	<div class="lb-faq-content">余計な装飾を省いた、清潔感のあるデザインです。</div>
</details>


[title]CSS: 下線のみ[/title]
.lb-faq-line summary {
	border-bottom: 1px solid #ddd;
	padding-left: 0;
}

.lb-faq-line[open] summary {
	border-bottom: 2px solid #bd93f9;
}

7. 二重線タイプ

注意事項はこちら

重要な補足説明など、目を引きたい場所に使います。


[title]HTML: 二重線[/title]
<details class="lb-faq-double">
	<summary>注意事項はこちら</summary>
	<div class="lb-faq-content">重要な補足説明など、目を引きたい場所に使います。</div>
</details>


[title]CSS: 二重線[/title]
.lb-faq-double {
	border: 4px double #bd93f9;
}

8. 浮き出しカード型

よくある質問：料金について

全体をカードのように浮かび上がらせた高級感のあるデザインです。


[title]HTML: カード型[/title]
<details class="lb-faq-card">
	<summary>よくある質問：料金について</summary>
	<div class="lb-faq-content">全体をカードのように浮かび上がらせた高級感のあるデザインです。</div>
</details>


[title]CSS: カード型[/title]
.lb-faq-card {
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	border-radius: 10px;
	overflow: hidden;
}

.lb-faq-card summary {
	background: #fff;
}

9. 左ライン強調（付箋風）

カスタマイズの方法

CSSをコピペするだけで簡単に適用できます。


[title]HTML: サイドライン[/title]
<details class="lb-faq-side">
	<summary>カスタマイズの方法</summary>
	<div class="lb-faq-content">CSSをコピペするだけで簡単に適用できます。</div>
</details>


[title]CSS: サイドライン[/title]
.lb-faq-side {
	border-left: 5px solid #bd93f9;
	background: #fdfbff;
}

10. グラデーション見出し

プレミアムな情報

見出し部分にグラデーションを適用した特別なスタイルです。


[title]HTML: グラデーション[/title]
<details class="lb-faq-grad">
	<summary>プレミアムな情報</summary>
	<div class="lb-faq-content">見出し部分にグラデーションを適用した特別なスタイルです。</div>
</details>


[title]CSS: グラデーション[/title]
.lb-faq-grad summary {
	background: linear-gradient(45deg, #bd93f9, #ff79c6);
	color: #fff;
	border-radius: 30px;
	margin-bottom: 5px;
}

.lb-faq-grad[open] summary {
	border-radius: 30px 30px 5px 5px;
}

💡 調整のコツ
色は #bd93f9（標準的なライラック）を使用しています。サイトのメインカラーに合わせてカラーコードを書き換えてください。