Chapter 11

faqセクションのコーディング

ゆるけー
ゆるけー
2022.04.19に更新

スタイリングの準備をする

objectフォルダ内のprojectフォルダ内に_faq.scssファイルを作成します。

そして、style.scssに_faq.scssを呼び出すよう文面を追加します。

style.scss
/*--------------------------------------*
 * foundation
 *--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";

/*--------------------------------------*
 * layout
 *--------------------------------------*/
@use "./layout/header";

/*--------------------------------------*
 * object
 *--------------------------------------*/
/*-------------------
 * component
 -------------------*/
@use "./object/component/button";
@use "./object/component/inner";

/*-------------------
 * project
 -------------------*/
@use "./object/project/fv";
@use "./object/project/theme";
@use "./object/project/solution";
+ @use "./object/project/faq";

/*-------------------
 * object
 -------------------*/
@use "./object/utility/display";

HTMLを振り返る

まずHTMLの構造を振り返っておきます。index.htmlのp-faq部分をスタイリングしていきます。

index.html
<!-- .p-faq -->
<section class="p-faq c-section">
<div class="c-inner">
	<h2 class="c-section__title">よくある質問</h2>
	<div class="p-faq__content">
		<details class="p-faq__details">
			<summary class="p-faq__summary">お金はかかりますか?</summary>
			<div class="p-faq__answer">
				かかりません。Zennにて0円で出版します。
			</div>
		</details>
		<details class="p-faq__details">
			<summary class="p-faq__summary">
				作成したLPをTwitterで共有しても大丈夫でしょうか?
			</summary>
			<div class="p-faq__answer">
				もちろん、大丈夫です!<br />
				ZennのURLや@yurukei20をメンションしてもらえるとリツイートします!
			</div>
		</details>
		<details class="p-faq__details">
			<summary class="p-faq__summary">
				作成したLPはポートフォリオにしていいですか?
			</summary>
			<div class="p-faq__answer">
				はい!もちろんです。<br />
				もし可能であれば、書籍の題名やZennのURLなどを一緒に記載していただけると幸いです。
			</div>
		</details>
		<details class="p-faq__details">
			<summary class="p-faq__summary">試し読みはできますか?</summary>
			<div class="p-faq__answer">
				全編無料なので試し読みもなにも全部無料で読めますよ!
			</div>
		</details>
	</div>
</div>
</section>
<!-- /.p-faq -->

p-faqのアコーディオン部分のスタイリング

まず、アコーディオン部分の構造を再度見直します。

index.html
<div class="p-faq__content">
	<details class="p-faq__details">
		<summary class="p-faq__summary">お金はかかりますか?</summary>
		<div class="p-faq__answer">
			かかりません。Zennにて0円で出版します。
		</div>
	</details>
	// 省略
</div>

まず、アコーディオンメニュー全体の最大幅と中央寄せをするために、p-faq__contentのスタイリングをします。

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	&__content {
		max-width: 700px;
		margin: 0 auto;
	}
}

次に、各アコーディオンメニューのスタイリングをしていきます。

index.html
<details class="p-faq__details">
	<summary class="p-faq__summary">お金はかかりますか?</summary>
	<div class="p-faq__answer">
		かかりません。Zennにて0円で出版します。
	</div>
</details>

とはいえ、p-faq__details自体は、下のアコーディオンメニューとの余白を設定するだけです。

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	// 中略
	&__details {
		margin-bottom: 5px;
	}
}	

続いて、.p-faq__summaryです。
余白やホバー時の動きを設定します。

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	// 中略
	&__summary {
		display: block;
		padding: 10px 20px;
		font-weight: bold;
		background-color: $color-main-200;
		cursor: pointer;
		transition: 0.2s;
		&:hover {
			background-color: $color-main-300;
		}
	}
}

そして、.p-faq__summaryのafter属性のスタイリングです。
positionを使うので、p-faq__summaryにposition:relative;を設定します。
そして、p-faq__summary:afterとして、左端に配置しつつ、fontawesomeのプラスマーク(+)を実装していきましょう。

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	// 中略
	&__summary {
		position: relative;
		// 中略
		// デフォルトの▼を消す
		&::-webkit-details-marker {
			display: none;
		}
		&:after {
			position: absolute;
			font-family: "Font Awesome 5 Free";
			content: "\f067";
			font-weight: bold;
			font-size: 20px;
			color: $color-main;
			margin: auto;
			top: 16%;
			right: 3%;
			transition: 0.4s;
		}
	}
}

最後に、p-faq__answer部分のスタイリングです。
アコーディオンメニューが開いている際に表示される部分ですね。
主に背景色や余白を調整していきます。

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	// 中略
	&__answer {
		padding: 10px 20px;
		margin-bottom: 20px;
		background-color: $color-base;
	}
}

p-faqのアコーディオン部分のスタイリング(open時)

次に、p-faqのアコーディオンメニューが開いている際の表示をスタイリングします。
開いているときの表示をスタイリングする際は、p-faq__details[open]のなかでCSSを書くと実装できます。

p-faq__summaryの背景色や、プラスマークを回転させるようにスタイリングします。

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	// 中略

	&__details[open] {
		.p-faq__summary {
			background-color: $color-main-300;
			&:after {
				transform: rotate(45deg);
			}
		}
	}
}

また、このままだと動きがカクカクしているので、CSSアニメーションを使ってふわっと登場させるCSSも書いていきます。

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	// 中略

	&__details[open] {
		// 中略
		.p-faq__answer {
			animation: fadeIn 0.5s ease;
			@keyframes fadeIn {
				0% {
					opacity: 0;
					transform: translateY(-10px);
				}
				100% {
					opacity: 1;
					transform: none;
				}
			}
		}
	}
}

最終的なコード

最終的に、p-faq部分は以下のようなコードになります。
次は最後のセクションであるp-cv部分を実装していきます!

object/project/_faq.scss
@use "./../../foundation/variable" as *;

.p-faq {
	&__content {
		max-width: 700px;
		margin: 0 auto;
	}
	&__details {
		margin-bottom: 5px;
	}
	&__summary {
		position: relative;
		display: block;
		padding: 10px 20px;
		font-weight: bold;
		background-color: $color-main-200;
		cursor: pointer;
		transition: 0.2s;
		&:hover {
			background-color: $color-main-300;
		}
		&::-webkit-details-marker {
			display: none;
		}
		&:after {
			position: absolute;
			font-family: "Font Awesome 5 Free";
			content: "\f067";
			font-weight: bold;
			font-size: 20px;
			color: $color-main;
			margin: auto;
			top: 16%;
			right: 3%;
			transition: 0.4s;
		}
	}
	&__answer {
		padding: 10px 20px;
		margin-bottom: 20px;
		background-color: $color-base;
	}

	&__details[open] {
		.p-faq__summary {
			background-color: $color-main-300;
			&:after {
				transform: rotate(45deg);
			}
		}
		.p-faq__answer {
			animation: fadeIn 0.5s ease;
			@keyframes fadeIn {
				0% {
					opacity: 0;
					transform: translateY(-10px);
				}
				100% {
					opacity: 1;
					transform: none;
				}
			}
		}
	}
}