「初心者からでもプロ並みのWebサービス作成、収益化を可能にするSkillhubメソッド」のセクションを作成していきます。
1.セクション囲いと見出し
下記部分を作っていきます（背景を除く）。
1-1.大まかな構成を作る
まず、htmlで大まかな枠組みを書いていきましょう。
01～03のアイコンが並んでいる部分は、基本グリッドと重ならないので空けておきます。
lp.html
<!-- ============================
/ Skillhubメソッド
/============================= -->
<section class="method">
<div class="container px-0">
<h2 class="col-10 mx-auto text-center">
初心者からでもプロ並みのWebサービス作成、収益化を可能にするSkillhubメソッド
</h2>
<p class="text-center">
「まったくの初心者ですが大丈夫かな？」「まったくプログラミングしたことないし」と思いとどまる必要なありません。<br>
スキルハブのほとんどの生徒は初心者から始めています。3つのステップを学ぶことで、最短距離で夢のフリーランスデビューを実現します。
</p>
<!-- top icons -->
<div class="col-10 mt-5rem mx-auto">
</div>
</div><!-- /.container -->
</section>
style.css
/* ---------------------- */
/* Skillhubメソッド
/* ---------------------- */
.method h2{
margin-bottom: 1.5em
}
これだけで、見出し部分はできました。
CTAセクションとの余白は、背景画像の設定と合わせて調整します。
今はこのまま進めてください。
1-2.３つ横並びのアイコンパネル
上で作った<div class="col-10 mx-auto"></div>の中身を入れていきます。
今回は下図のように、5つのボックスをflexで横並びにして作ります。
それぞれスタイル指定を行えるように、「method-icon」と「method-arrow」クラスを命名しておきます。
lp.html
<div class="col-10 mt-5rem mx-auto d-flex align-items-center justify-content-between">
<div class="method-icon"></div>
<div class="method-arrow"></div>
<div class="method-icon"></div>
<div class="method-arrow"></div>
<div class="method-icon"></div>
</div><!-- /.col-10 -->
スペースを均等割り付けにする「justify-content-between」クラスも追加しました。
他の箇所でも使えるように、共通クラスにしておきます。
style.css
/* 共通クラスに追加 */
.justify-content-between {
justify-content: space-between;
}
/* Skillhubメソッドに追加 */
.method-icon{
width: 250px;
max-width: 100%;
}
.method-arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 32.5px 0 32.5px 32px;
border-color: transparent transparent transparent #FF0069;
}
.method-arrow、ピンク色の三角形だけ表示されました。
.method-icon部分を作成していきます。
これまでに作ったクラスで配置はほぼ作ることが出来ますね。
ピンク色の数字はpositionを使って、絶対配置で位置を決めます。
また、ドロップシャドウは、下の詳細説明の枠部分と同じ設定になってます。
使い回せるように「shadow」クラスを作って、スタイル指定を書いています。
lp.html
<div class="method-icon round-border shadow text-center position-relative">
<span class="method-num text-pink">01</span>
<p class="material-icons-outlined">
ondemand_video
</p>
<p class="method-ttl mt-0">基礎スキル習得</p>
</div>
style.css
.shadow{
box-shadow: 4px 4px 2px rgba(0,0,0,0.6);
}
.method-num{
top: -0.5em;
left: 0;
font-size: 60px;
}
.method .material-icons-outlined{
font-size: 150px;
margin: 0;
padding-top: 25px;
}
.method-ttl{
font-size: 26px;
font-weight: bold;
}
1つめができました。
コピー＆ペーストして必要なところを差し替え、「03」まで作成してください。
2.詳細が書かれたカード部分
step01～step03までの部分を作っていきます。
構成はシンプルですが、一つの.conteinerの中で作ろうとすると背景の設定が難しくなります。
背景を設定しやすいよう、下図のようにブロックを分けて制作します。
2-1.step1部分の配置と背景
まず、step1部分を作ってみましょう。
lp.html
<!-- step01 -->
<div class="method-content method-content-bgleft mt-10rem">
<div class="container">
<div class="row bg-white round-border shadow">
<div class="col-7">
<span class="text-pink">step</span>
<span class="text-pink">01</span>
<h3>わかりやすいビデオで基礎的なスキルを学びます</h3>
<p>
いままで本を読んだりビデオを見たりしても「あー、難しくてわからない」とあきらめていた人も多いと思います。しかしSkillhubなら大丈夫！初心者にもっともわかりやすいSkillhubビデオであれば、いままで難しいとあきらめていた人でも、すぐに理解できることでしょう。
</p>
</div>
<div class="col-5 text-center">
<img src="images/method01@2x-8.png" alt="わかりやすいビデオ講座イメージ" class="w-max100">
</div>
</div>
</div>
</div>
全体を囲っている背景設定用のdivには「method-content」と「method-content-bgleft」２つのクラスを加えました。
それぞれ、スタイルを指定します。
style.css
.method-content{
margin-bottom: 3rem;
padding-bottom: 3rem;
}
.method-content-bgleft{
background-image: url("images/mbg-left@2x-8.png");
background-size: auto 200px;
background-position: left bottom;
}
下図のように背景画像が表示されます。
2-2.角丸ボックス内の設定
外側の背景や余白は設定できたので、次は.container内側を作っていきましょう。
Step01の文字サイズを変更できるよう、spanタグに「method-content-step」「method-content-num」クラスを新たに追加。
画像も「method-content-img」クラスを作成して、大きくなりすぎないようにします。
lp.html
<div class="col-7">
<span class="method-content-step text-pink">step</span>
<span class="method-content-num text-pink">01</span>
<h3>わかりやすいビデオで基礎的なスキルを学びます</h3>
<p>
いままで本を読んだりビデオを見たりしても「あー、難しくてわからない」とあきらめていた人も多いと思います。しかしSkillhubなら大丈夫！初心者にもっともわかりやすいSkillhubビデオであれば、いままで難しいとあきらめていた人でも、すぐに理解できることでしょう。
</p>
</div>
<div class="col-5 text-center">
<img src="images/method01@2x-8.png" alt="わかりやすいビデオ講座イメージ" class="w-max100 method-content-img">
</div>
style.css
.method-content .row{
margin: 0;
padding-top: 4rem;
padding-bottom: 2rem;
}
.method-content-step{
font-size: 28px;
text-decoration: underline;
}
.method-content-num{
font-size: 48px;
font-weight: bold;
line-height: 0;
}
.method-content-img{
width: 400px;
}
2-3.step2と3を作る
step01のパートを使って、step2とstep3を作っていきましょう。
テキスト・画像部分の他に、<div class="method-content ...">部分のクラスを変更して背景画像を合わせていきます。
lp.html
style.css
.method-content-bgright{
background-image: url("images/mbg-right@2x-8.png");
background-size: auto 200px;
background-position: right bottom;
}
3.背景画像の設定と調整
最後にセクション全体の右上、左下に背景を加えます。
今まで背景画像は一つのみ設定してきしたが、半角カンマで区切ることで複数の画像を指定することが出来ます。
サイズや位置も同様に、半角カンマで区切って指定します。
style.css
.method {
background-image: url("images/mbg-top@2x-8.png"), url("images/mbg-btm@2x-8.png");
background-size: 220px auto, 420px auto;
background-position: top right, bottom left;
}
二箇所に背景画像が表示されたら、背景画像の設定は成功です。
.methodの上下にpaddingをつけて、余白・背景画像の位置を調整しましょう。
hタグのmarginでCTAとの間に出来ている隙間も、paddingを指定すれば落ち着きます。
style.css
.method {
padding-top: 8rem;
padding-bottom: 11rem;
background-image: url("images/mbg-top@2x-8.png"), url("images/mbg-btm@2x-8.png");
background-size: 220px auto, 420px auto;
background-position: top right, bottom left;
}
