大枠・見出し部分の作成
まずはパート全体の背景色を設定し、見出し部分を作ります。
見出しは、前回作った見出し「実力をアップする 3ステップ」の色違いのようなものですね。
<!-- ======================
/ Why Qbase Web
======================== -->
<article class="why">
<div class="h2box text-center text-white">
<img src="images/h2-why.svg" class="h2-img" alt="Why Qbase Web">
<h2 class="mb-0">
Webデザイナースキルが<br>上がる理由
</h2>
</div>
</article>
前回書いたCSSだと、改行したときのline-heightが合いません。 line-heightを増やして、padding-topを削ります。
3カラム部分の作成
理由がそれぞれ書いてあるパーツを作ります。
前回とは違い、数字が真ん中に来るようなレイアウト変更はありません。 flexでシンプルに作れそうです。
「1」の部分を作る
まず、３つの要素を並べるためのブロックを組んでいきます。
全体を囲うdivに「why-item」クラスをつけ、その中の要素にもクラスを作成します。
<div class="why-item d-flex">
<div class="why-item_num d-flex align-items-center justify-content-center"></div>
<div class="why-item_desc">
<img src="">
<div class="why-item_desc_text"></div>
</div>
</div>
ここに中身を入れていきます。
<div class="why-item d-flex">
<div class="why-item_num d-flex align-items-center justify-content-center">
<img src="images/t-why1.svg" width="36" height="112" alt="1">
</div>
<div class="why-item_desc">
<img src="images/why-img1@2x-80.jpg" alt="自分のレベルを知るイメージ画像">
<div class="why-item_desc_text">
<h3 class="my-0">
自分のレベルを知る<br>ことができるから
</h3>
<p>
自分の実力を証明できるから、仕事は未経験でも実力をアピールできます。
</p>
</div>
</div>
</div>
ブラウザで見てみましょう。 画像が大きくはみ出していますが、配置はイメージに近いのではないでしょうか。
CSSで見た目を整える
CSSで背景色を付けたり、各divのサイズを指定したり、見た目を整えていきます。
画像（写真）が入っている箇所は、サイズを合わせるために「why-item_desc_img」というクラスを加えました。
黄色の線で囲った.why-item_desc_textのheight指定は、
テキスト量に関係なく、高さが決められているデザインのためです。
計算が面倒なのでpxで入れましたが、remやemで指定しても良いと思います。
【Pタグの設定】
前回作った.whats-item_text pと、今回の.why-item_desc_text pは、line-heightとletter-spacingの設定が同じです。
この先にコーディングするユーザーの声なども、pタグは同じ設定が使われているようです。いちいち書くのは面倒なので、pタグ全体に指定し直してしまいましょう。
「1」を反転させた「2」を作る
ここまでで作ったwhy-itemクラスのdivを生かして、反転したレイアウトを作ります。
まずは<div class="why-item d-flex"> ~ </div>までをコピー＆ペースト。
why-itemのあとに「why-item-reverse」というクラスを加えます。
<div class="why-item why-item-reverse d-flex">
・・・中身・・・
</div>
cssで、flex-directionを使って逆順配置にします。
/* 逆配置 */
.why-item-reverse{
flex-direction: row-reverse;
}
画像やテキストをデザイン通りに入れ替えれば完成です。
画像が多い「3」部分の作成
「3」の部分は、今まで作ってきた部分の下に更に２枚画像が入ります。
PCレイアウトでは多い画像部分が下の段に入りますが、ここも「flex-wrap: wrap;」で配置できそうです。今の構成のままで、画像だけ追加しておきましょう。
<div class="why-item d-flex">
<div class="why-item_num d-flex align-items-center justify-content-center">
<img src="images/t-why3.svg" width="58" height="112" alt="3">
</div>
<div class="why-item_desc">
<img src="images/why-img3@2x-80.jpg" alt="使いやすいUIイメージ画像" class="why-item_desc_img">
<div class="why-item_desc_text">
<h3 class="my-0">
使いやすいUIが<br>あるから
</h3>
<p>
学習サイクルと目標ができ挫折しなくなることで、フリーランスとしてのスキルが劇的に上がります。
</p>
</div>
<img src="images/why-img4@2x-80.jpg" alt="使いやすいUIイメージ画像2" class="why-item_desc_img">
<img src="images/why-img5@2x-80.jpg" alt="QbaseWebのUIイメージ" class="why-item_desc_img">
</div>
</div>
カンプに合わせてCSSを調整
最後にカンプと見合わせながらCSSを調整します。
完成したコードは素材欄にアップロードしています。