「SkIllhubアントレの特徴」「よくある質問」をそれぞれ作っていきましょう。
SkIllhubアントレの特徴の作成
SkIllhubアントレの特徴セクションは、今までの復習のようなデザインです。
構成もシンプルなので、さくっとコーディングしてしまいましょう。
1.見出しと大まかな構成
特徴セクションは12グリッドをそのまま使えるレイアウト。
中身は置いておいて、大まかな構成（枠組み）を先に作ってしまいましょう。
背景画像の設定などを行うため、sectionタグに「features」クラスを加えます。
lp.html
<!-- ============================
/ SkIllhubアントレの特徴
/============================= -->
<section class="features">
<div class="container px-0 text-center">
<h2>
<span class="marker-pink">SkIllhubアントレの特徴</span>
</h2>
<p class="col-10 mx-auto">
スキルハブでは担任制を採用しています。一人のコーチが最初から最後まで学習をサポート、あなたの力を最大限に伸ばします。「就転職のためには何が必要なのか？」「フリーランスとして仕事のとりかたは？」「成功する起業は？」など「結果を出すための超実践的なスキル」を直に教えてもらうことができます。
</p>
</div><!-- /.container -->
<div class="container">
<!-- 特徴1 -->
<div class="row mt-5rem">
<div class="col-3"></div>
<div class="col-9"></div>
</div>
<!-- 代表紹介 -->
<div class="row mt-5rem">
<div class="col-10 mx-auto bg-white round-border"></div>
</div>
</div><!-- /.container -->
</section>
Skillhubメソッドの箇所と同じように、背景画像を2つ指定します。
style.css
/* ---------------------- */
/* SkIllhubアントレの特徴
/* ---------------------- */
.features {
padding-top: 2rem;
background-image: url("images/fbg-top@2x-8.png"), url("images/fbg-btm@2x-8.png");
background-size: 300px auto, 260px auto;
background-position: top left, bottom right;
}
2.横並びの“特徴”紹介
画像とテキストが横並びで配置されている、特徴01～03を作っていきます。
特徴01
まずは、1つめの横並びを作りましょう。
新しくクラスを作る必要があるのは、ピンク色の「特徴」と「01」の部分です。
lp.html
<div class="container">
<!-- 特徴1 -->
<div class="row mt-5rem">
<div class="col-3">
<img src="images/feature1@2x-8.png" alt="圧倒的にわかりやすいコンテンツイメージ" class="w-max100">
</div>
<div class="col-9">
<p class="text-pink mt-0">
<span class="feature-underline">特徴</span>
<span class="feature-number">01</span>
</p>
<h3 class="my-0">
圧倒的にわかりやすいコンテンツ
</h3>
<p>
わかりやすさが自慢のスキルハブビデオを制限期間なしで閲覧することができます。今まで有料で見られなかったものもすべて閲覧可能になります。さらに後から追加される講座も無料で受講できるので、非常にお得です。
</p>
</div>
</div>
<!-- 代表紹介 -->
<div class="row mt-5rem">
<div class="col-10 mx-auto bg-white round-border"></div>
</div>
</div><!-- /.container -->
style.css
.feature-underline{
font-size: 18px;
border-bottom: 2px solid #ff0069;
}
.feature-number{
font-size: 42px;
font-weight: bold;
line-height: 1;
}
特徴02と特徴03
特徴01をコピーして3つに増やし、それぞれ特徴02と特徴03の内容に変更します。
上図のように各div.rowの間隔が広すぎるので、mt-5remクラスを変更しましょう。
margin-topの値が少し小さい、mt-3remクラスを新しく作ります。
lp.html
style.css
.mt-3rem{
margin-top: 3rem;
}
3.代表紹介
代表紹介は外枠こそ.col-10に収まっていますが、中身はグリッド通りの配置ではありません。
専用のクラスも作りつつ、作っていきましょう。
まず、大まかに枠組みを作ります。
右側のテキスト部分は、一旦保留で空にしておきましょう。
lp.html
<!-- 代表紹介 -->
<div class="teacher col-10 px-0 mx-auto mt-5rem bg-white round-border">
<h3 class="mt-0">Web起業家だからこそ教えられることを</h3>
<div class="d-flex flex-wrap">
<img src="images/teacher@2x-8.png" alt="吉田 光利">
<div class="col">
</div>
</div>
</div><!-- /.teacher -->
style.css
/* 代表紹介 */
.teacher {
padding: 2rem;
border: 2px solid #F4F4F2;
}
.teacher img{
width: 320px;
max-width: 100%;
height: auto;
}
写真の隣、colクラスのdivの中は下図のように作ります。
lp.html
<div class="col">
<div class="teacher-info d-flex justify-content-between">
<h4 class="my-0">
吉田 光利
</h4>
<p class="my-0 fw-bold fsize-18">
株式会社スキルハブ代表/コンテンツ総監修
</p>
</div>
<p class="mt-0 fw-bold fsize-18">
起業家・フルスタックエンジニア
</p>
<p>
企画・運営、デザインからプログラミング、システム構築までを手掛けているオールラウンドなクリエイター。Skillhubのシステムをひとりで構築。<br>
著書に「起業のWeb技術：日本実業出版社」がある。
</p>
</div><!-- /.col -->
style.css
/* 共通クラスとして追加 */
.fsize-18 {
font-size: 18px;
}
.fw-bold{
font-weight: bold;
}
/* 代表紹介に追加 */
.teacher-info h4{
font-size: 21px;
}
.teacher-info{
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #000;
}
大体できました。
デザインに近付けるために、下図で青くマークした部分に余白を加えます。
style.css
.features {
padding-top: 2rem;
padding-bottom: 7rem; /* ここを追加 */
background-image: url("images/fbg-top@2x-8.png"), url("images/fbg-btm@2x-8.png");
background-size: 300px auto, 260px auto;
background-position: top left, bottom right;
}
.teacher .col{
padding-left: 2rem;
}
よくある質問の作成
1.２カラムレイアウトと見出し
右側に配置されるQ&Aのところは空けておいて、それ以外を先に作ります。
lp.html
<!-- ============================
/ よくある質問
/============================= -->
<section class="bg-lgray pt-5rem">
<div class="container">
<div class="row">
<div class="col-4">
<h2>よくある質問</h2>
</div><!-- /.col-4 -->
<div class="col-8">
</div><!-- /.col-8 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
2.Q&Aパネル部分の考え方
質問とアンサーが書かれているブロックは、本来は開いたり閉じたりする部分。
最終的な動作イメージは下記のようになります。
現時点では、この動作（Javascript）は作りません。
ですが、コーディングをするときに「どうやってスタイルを切り替えるか」は意識する必要があります。
閉じている時と開いている時のスタイルの違いは、基本のスタイルを作っておいて「開いた時」もしくは「閉じた時」用のクラスを使って上書きすることが大半です。
今回は閉じているときを基本のスタイルとして、開いた時用のクラスを追加します。
- ベースとなるCSSを書く
- 変化させるためのクラスを決める（.active）
- activeクラスが加わったときのスタイルを指定する
3.Q&A - ベースレイアウトの作成
最初にベースとなるスタイル、閉じたボックスのレイアウトを作ります。
ただし、クリックして開いたときに表示する部分も、用意しておかなくてはいけません。
１つ目の質問（開いている部分）と２つ目の質問（閉じている部分）を見合わせながら作っていきましょう。
画像や×マークは入れずに、まず枠組みと見出しだけ作ります。
lp.html
<div class="col-8">
<div class="faqbox">
<div class="faqbox-question d-flex align-items-center">
<div class="faqbox-circle"></div>
<h3>
コーチングを受けるのには、PCとウェブカメラ・マイク以外に何が必要になりますか？
</h3>
<div class="faqbox-toggle"></div>
</div>
<div class="faqbox-answer align-items-center">
<div class="faqbox-circle"></div>
<p>
本講座で講師よりアサインされる課題をを完成させるには、Adobeが提供するillustratorが必要になってきます。（月々２１８０円になります。）こちらから体験版をダウンロードできます。
</p>
<div class="faqbox-toggle"></div>
</div>
</div><!-- /.faqbox -->
</div><!-- /.col-8 -->
style.css
/* ---------------------- */
/* よくある質問
/* ---------------------- */
.faqbox{
background-color: white;
border-radius: 12px;
}
.faqbox-question,
.faqbox-answer{
padding: 10px 15px;
}
.faqbox-circle{
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 1rem;
}
.faqbox-question .faqbox-circle{
background-color: #ffe20d;
}
.faqbox-answer .faqbox-circle{
border: 3px solid #ffe20d;
}
.faqbox-toggle{
width: 40px;
height: 40px;
margin-left: 1rem;
}
.faqbox-question h3{
flex: 1;
font-size: 18px;
}
.faqbox-circle内に画像（faq-q.svg、faq-a.svg）をそれぞれ挿入。
CSSの方で画像サイズを指定します。
lp.html
style.css
.faqbox-circle img{
width: auto;
height: 36px;
}
ここまで確認出来たら、.faqbox-answerは非表示にします。
style.css
.faqbox-answer{
display: none;
}
疑似要素で＋マークを作る
最後に.faqbox-toggleの部分を作ります。
ここは画像を挿入してしまうと、開いたときと閉じたときで変更がしにくいです。
CSSだけで変更できるように、疑似要素（beforeとafter）を使って作ります。
faqbox-question内にある、faqbox-toggleクラスのdivに「position-relative」クラスを追加します。
lp.html
<div class="faqbox-question">
<div class="faqbox-circle">
<img src="images/faq-q.svg" alt="question">
</div>
<h3>
コーチングを受けるのには、PCとウェブカメラ・マイク以外に何が必要になりますか？
</h3>
<div class="faqbox-toggle position-relative"></div>
</div>
cssで疑似要素を設定します。
style.css
/* ＋マーク部分*/
.faqbox-question .faqbox-toggle::before,
.faqbox-question .faqbox-toggle::after{
content:'';
position: absolute;
top: 50%;
right: 18px;
width: 18px;
height: 3px;
background-color: #ffe20d;
}
.faqbox-question .faqbox-toggle::after{
transform: rotate(90deg);
}
::afterでは、要素を回転させるCSS「transform: rotate()」を使って90度向きを変え、十字マークのように見せています。
4.他の質問部分も作成する
作成した <div class="faqbox"> ～ </div>までを複製して、残り3つの質問部分も作成してください。
2つめ以降は<div class="faqbox mt-3rem">にして間隔を作ります。
質問並びの下に空間を作りたいですね、
sectionタグにfaqクラスを追加して、paddingを設定しておきましょう。
5.Q&A - 開いた時の設定
1つめの質問を使って、アンサーが見えている状態のスタイルを書いていきます。
5-1.アンサー部分を見せる
開いている状態にするため、faqboxクラスと並べてactiveクラスを追加。
activeクラスを使って、アンサー部分が見えるようにしましょう。
lp.html
style.css
/* -----開いた時----- */
.faqbox.active{
box-shadow: 2px 2px 1px rgb(0, 0, 0,0.6);
}
.active .faqbox-answer{
display: flex;
}
5-2.調整する
- 「A」部分が変形してしまっているのを直す
- 「Q」の背景色をピンクにする
- 質問部分の背景色をグレーに変える
.faqbox-answer p{
flex: 1;
}
.active .faqbox-question{
background-color: #F4F4F2;
border-radius: 12px 12px 0 0;
}
.active .faqbox-question .faqbox-circle{
background-color: #FF0069;
}
5-3.＋を×に変える
疑似要素で作った黄色の「＋」マークを「×」に変更します。
することは、rotate（回転）を使って要素を斜めにするだけ。
/* ＋を×に変更する */
.active .faqbox-toggle::before{
transform: rotate(45deg);
}
.active .faqbox-toggle::after{
transform: rotate(-45deg);
}
このCSS transform を使った表示の変化は、Webサイトで多く使われています。
スマホの折りたたみメニュー作成時にもよく使うので、覚えておくと便利ですよ。