【解説03】実力をアップする3ステップ部分を作成 | SkillhubAI（スキルハブエーアイ）

見出し部分を作る

見出し部分はとてもシンプルですね。

file

見出しの文字色が黒ではなく濃いグレー。
そこだけ注意すれば、素直に作って問題なさそうです。

見出し部分の余白を設定する「h2box」
見出しの上に表示する英語(svg)に使用する「h2-img」
は、他の箇所でも使いたいので共通クラスとして使える形にします。

file

STEPブロックを作る

次は青背景の、STEP1,2,3の３ブロックです。

スマホレイアウトだと簡単に見えますが、PCレアウトだと配置が変わります。
Flexを使って、orderで表示位置を変える場合は注意が必要です。

file

orderプロパティでは、親要素が同じflexアイテム間でのみ並び順を変更できます。
下図のように、上下それぞれを囲ってしまうと、真ん中にテキストを入れることは出来ません。

file

PCで並び替えられるように作っていきましょう。

1.大枠を作る

<div class="bg-midblue text-white">
    <div class="whats-item container d-flex">
        <div class="whats-item_icon"></div>
        <div class="whats-item_img"></div>
        <div class="whats-item_text"></div>
    </div>
</div>

/* 背景色 */
.bg-midblue{
  background-color: #039dd2;
}

背景色は他にも使い所があるので、別にクラスを作りました。ちなみに「bg-blue」にしなかったのは、背景色として複数の青系の色が使われているためです。

whats-item、whats-item_〇〇はこのセクション専用のクラスです。

2.中身を入れる

３つのdivにそれぞれ中身を入れていきます。

<div class="bg-midblue text-white">
    <div class="whats-item container d-flex">
        <div class="whats-item_icon">
             <img src="images/t-what1.svg" alt="STEP1">
        </div>
        <div class="whats-item_img">
             <img src="images/what-img1@2x-80.jpg" class="img-fluid" alt="デジタルテストを受ける">
        </div>
        <div class="whats-item_text">
            <h3 class="mb-0">
                デジタルテストを<br>受ける
            </h3>
            <p class="mb-0">
                親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。
            </p>
        </div>
    </div>
</div>