MENU
SWELLを使用したサイト構築（HTML、CSS、JavaScript、PHP、ツール）に関するメモ帳
  1. ホーム
  2. SWELL
  3. 【SWELL】アコーディオンブロックをFAQ風にカスタマイズ（CSSのみ）

【SWELL】アコーディオンブロックをFAQ風にカスタマイズ（CSSのみ）

SWELL
【SWELL】アコーディオンブロックをFAQ風にカスタマイズのサムネイル

SWELLアコーディオンブロックをFAQ風（よくある質問）にカスタマイズしてみました。

実際に触れるようにアコーディオンブロックを配置しています。
またコピペで実装できるようにHTMLとCSSのコードも配置していますので活用して下さい。

SWELLでCSSとクラス名をどこに記述するか分からない場合はこの記事を参考にしてください。

目次

丸形アイコンのアコーディオンブロック

質問には「Q」、回答には「A」を表示した丸形アイコンのアコーディオンブロックです。

デフォルトスタイル

デフォルトスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion01 is-style-default"} -->
<div class="swell-block-accordion tctc-accordion01 is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion01 .swell-block-accordion__title,
.tctc-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion01 .swell-block-accordion__title::before,
.tctc-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.tctc-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

シンプルスタイル

シンプルスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"tctc-accordion01 is-style-simple"} -->
<div class="swell-block-accordion tctc-accordion01 is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion01 .swell-block-accordion__title,
.tctc-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion01 .swell-block-accordion__title::before,
.tctc-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.tctc-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

囲い枠スタイル

囲い枠スタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"tctc-accordion01 is-style-border"} -->
<div class="swell-block-accordion tctc-accordion01 is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion01 .swell-block-accordion__title,
.tctc-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion01 .swell-block-accordion__title::before,
.tctc-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.tctc-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

メインカラースタイル

メインカラースタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion01 is-style-main"} -->
<div class="swell-block-accordion tctc-accordion01 is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>丸形アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion01 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion01 .swell-block-accordion__title,
.tctc-accordion01 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion01 .swell-block-accordion__title::before,
.tctc-accordion01 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion01 .swell-block-accordion__title::before {
	content: "Q";
	background: var(--color_faq_q);
	color: #fff;
}
/* A アイコン */
.tctc-accordion01 .swell-block-accordion__body::before {
	content: "A";
	background: var(--color_faq_a);
	color: #fff;
}

枠線アイコンのアコーディオンブロック

質問には「Q」、回答には「A」を表示した枠線アイコンのアコーディオンブロックです。

デフォルトスタイル

デフォルトスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion02 is-style-default"} -->
<div class="swell-block-accordion tctc-accordion02 is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion02 .swell-block-accordion__title,
.tctc-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion02 .swell-block-accordion__title::before,
.tctc-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.tctc-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

シンプルスタイル

シンプルスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"tctc-accordion02 is-style-simple"} -->
<div class="swell-block-accordion tctc-accordion02 is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion02 .swell-block-accordion__title,
.tctc-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion02 .swell-block-accordion__title::before,
.tctc-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.tctc-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

囲い枠スタイル

囲い枠スタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"tctc-accordion02 is-style-border"} -->
<div class="swell-block-accordion tctc-accordion02 is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion02 .swell-block-accordion__title,
.tctc-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion02 .swell-block-accordion__title::before,
.tctc-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.tctc-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

メインカラースタイル

メインカラースタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion02 is-style-main"} -->
<div class="swell-block-accordion tctc-accordion02 is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>枠線アイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion02 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion02 .swell-block-accordion__title,
.tctc-accordion02 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* QAアイコンの共通スタイル */
.tctc-accordion02 .swell-block-accordion__title::before,
.tctc-accordion02 .swell-block-accordion__body::before {
	position: absolute;
	top: 50%;
	left: var(--gap-x);
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	font-size: 1em;
}
/* Q　アイコン */
.tctc-accordion02 .swell-block-accordion__title::before {
	content: "Q";
	background: #fff;
	color: var(--color_faq_q);
	border: 1px solid var(--color_faq_q);
}
/* A アイコン */
.tctc-accordion02 .swell-block-accordion__body::before {
	content: "A";
	background: #fff;
	color: var(--color_faq_a);
	border: 1px solid var(--color_faq_a);
}

QAテキストのみのアコーディオンブロック

質問には「Q」、回答には「A」のテキストのみを表示したアコーディオンブロックです。

デフォルトスタイル

デフォルトスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion03 is-style-default"} -->
<div class="swell-block-accordion tctc-accordion03 is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.tctc-accordion03 .swell-block-accordion__title,
.tctc-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.tctc-accordion03 .swell-block-accordion__title::before,
.tctc-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.tctc-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.tctc-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.tctc-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

シンプルスタイル

シンプルスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"tctc-accordion03 is-style-simple"} -->
<div class="swell-block-accordion tctc-accordion03 is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.tctc-accordion03 .swell-block-accordion__title,
.tctc-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.tctc-accordion03 .swell-block-accordion__title::before,
.tctc-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.tctc-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.tctc-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.tctc-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

囲い枠スタイル

囲い枠スタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"tctc-accordion03 is-style-border"} -->
<div class="swell-block-accordion tctc-accordion03 is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.tctc-accordion03 .swell-block-accordion__title,
.tctc-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.tctc-accordion03 .swell-block-accordion__title::before,
.tctc-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.tctc-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.tctc-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.tctc-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

メインカラースタイル

メインカラースタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion03 is-style-main"} -->
<div class="swell-block-accordion tctc-accordion03 is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>QAテキストのみ</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion03 {
	--icon-size: 1.5em;
	--gap-x: 1rem;
}
.tctc-accordion03 .swell-block-accordion__title,
.tctc-accordion03 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 1em !important;
}
/* QAアイコンの共通スタイル */
.tctc-accordion03 .swell-block-accordion__title::before,
.tctc-accordion03 .swell-block-accordion__body::before {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: var(--gap-x);
	font-size: var(--icon-size);
}
/* Q　アイコン */
.tctc-accordion03 .swell-block-accordion__title::before {
	content: "Q";
	color: var(--color_faq_q);
}
.tctc-accordion03.is-style-main .swell-block-accordion__title::before {
	color: #fff;
}

/* A アイコン */
.tctc-accordion03 .swell-block-accordion__body::before {
	content: "A";
	color: var(--color_faq_a);
}

SWELLアイコンのアコーディオンブロック

質問に「SWELLアイコン」を表示させたアコーディオンブロックです。

参考サイト

SWELL公式サイトでアイコン一覧を確認する

CSS用のSWELLアイコン一覧を確認する – WAZA

デフォルトスタイル

デフォルトスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion04 \u002d\u002dbubble is-style-default"} -->
<div class="swell-block-accordion tctc-accordion04 --bubble is-style-default"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">デフォルトスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion04 .swell-block-accordion__title,
.tctc-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.tctc-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.tctc-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.tctc-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.tctc-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.tctc-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

シンプルスタイル

シンプルスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","className":"tctc-accordion04 \u002d\u002dinfo is-style-simple"} -->
<div class="swell-block-accordion tctc-accordion04 --info is-style-simple"><!-- wp:loos/accordion-item {"iconOpened":"icon-chevron-up","iconClosed":"icon-chevron-down","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">シンプルスタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-chevron-down"></i><i class="__icon--opened icon-chevron-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion04 .swell-block-accordion__title,
.tctc-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.tctc-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.tctc-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.tctc-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.tctc-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.tctc-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

囲い枠スタイル

囲い枠スタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"iconOpened":"icon-minus","iconClosed":"icon-plus","className":"tctc-accordion04 \u002d\u002dmegaphone is-style-border"} -->
<div class="swell-block-accordion tctc-accordion04 --megaphone is-style-border"><!-- wp:loos/accordion-item {"iconOpened":"icon-minus","iconClosed":"icon-plus","isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">囲い枠スタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-plus"></i><i class="__icon--opened icon-minus"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion04 .swell-block-accordion__title,
.tctc-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.tctc-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.tctc-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.tctc-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.tctc-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.tctc-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

メインカラースタイル

メインカラースタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

<!-- wp:loos/accordion {"className":"tctc-accordion04 \u002d\u002dlight-bulb is-style-main"} -->
<div class="swell-block-accordion tctc-accordion04 --light-bulb is-style-main"><!-- wp:loos/accordion-item {"isDefultOpen":true} -->
<details class="swell-block-accordion__item is-opened" open data-swl-acc="wrapper"><summary class="swell-block-accordion__title" data-swl-acc="header"><span class="swell-block-accordion__label">メインカラースタイル</span><span class="swell-block-accordion__icon c-switchIconBtn" data-swl-acc="icon" aria-hidden="true" data-opened="true"><i class="__icon--closed icon-caret-down"></i><i class="__icon--opened icon-caret-up"></i></span></summary><div class="swell-block-accordion__body" data-swl-acc="body"><!-- wp:paragraph -->
<p><strong>SWELLアイコン</strong>のアコーディオンブロックにカスタマイズしたよ！</p>
<!-- /wp:paragraph --></div></details>
<!-- /wp:loos/accordion-item --></div>
<!-- /wp:loos/accordion -->
.tctc-accordion04 {
	--icon-size: 1.5em;
	--gap-x: 1em;
}
.tctc-accordion04 .swell-block-accordion__title,
.tctc-accordion04 .swell-block-accordion__body {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding-left: calc(var(--gap-x) * 2 + var(--icon-size)) !important;
}

/* Qアイコンの共通スタイル */
.tctc-accordion04 .swell-block-accordion__title::before {
	position: absolute;
	top: 50%;
	left: 0.75em;
	transform: translateY(-50%);
	color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--icon-size);
	font-family: icomoon !important;
	font-weight: 400;
}
.tctc-accordion04.--bubble .swell-block-accordion__title::before {
	content: "\e96b";
}
.tctc-accordion04.--info .swell-block-accordion__title::before {
	content: "\e91d";
}
.tctc-accordion04.--megaphone .swell-block-accordion__title::before {
	content: "\e913";
}
.tctc-accordion04.--light-bulb .swell-block-accordion__title::before {
	content: "\e915";
}

SWELLアコーディオンブロック一覧

丸形アイコン

デフォルトスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

丸形アイコンのアコーディオンブロックにカスタマイズしたよ！

枠線アイコン

デフォルトスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

枠線アイコンのアコーディオンブロックにカスタマイズしたよ！

QAテキスト

デフォルトスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

QAテキストのみのアコーディオンブロックにカスタマイズしたよ！

SWELLアイコン

デフォルトスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

シンプルスタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

囲い枠スタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

メインカラースタイル

SWELLアイコンのアコーディオンブロックにカスタマイズしたよ！

SWELL
CSS アコーディオン
よかったらシェアしてね！
  • URLをコピーしました！
目次