スタイリングの準備をする
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;
}
}
}
}
}