【解説10】PC幅-Webデザイナースキルが～部分の作成 | SkillhubAI（スキルハブエーアイ）

見出しまわりの調整

さっそく、見出し部分から調整して行きましょう。前回、共通で使っている「h2box」クラスの設定はしているので、微調整ですね。

hタグ内の<br>に、d-pc-noneクラスを加えて改行をなくします。

<h2 class="mb-0">
    Webデザイナースキルが<br class="d-pc-none">上がる理由
</h2>

file

カンプに合わせて、余白を調整します。

/* ---------------------- */
/* Why Qbase Web
/* ---------------------- */
.why{
    margin-top: 30px;
}

.why .h2box{
    padding-top: 80px;
}

.why .h2box h2{
    letter-spacing: 0.18em;
}

file

3カラム部分の作成

1.幅と配置を合わせる

理由１～３のブロックを作ります。写真とテキストを囲んでいるdiv（.why-item_desc）をdisplay:flex;にすると、３つのブロックは横並びになりますね。

file

ただ、このまま横並びにするだけでは、幅が広がりすぎます。 why-itemクラスをもつdivに「container」クラスを加えます。

<div class="why-item d-flex container px-0">

左右paddingをつけたくないので、「px-0」というクラスも作りました。 CSSファイルで、余白クラスのほうを上に書いていると効きません。 .conteinerよりも下に移動します。

file

div.why-itemの幅は合いました。

file

why-item_descクラスのdivに「d-tb-flex」クラスを追加します。

file

写真部分の幅は広いですが、横並びにはなりました。

file

2.各要素のサイズを合わせる

それぞれのサイズをカンプに合わせていきます。

  .why-item_num {
    flex: 0 0 135px;
  }

  .why-item_desc_img {
    max-width: 340px;
    height: 270px;
  }  

  .why-item_desc_text{
    padding: 50px 30px;
  }

file

h3タグの中にある<br>を<br class="d-pc-none">にして、改行を無くします。見出しのフォントサイズも合わせましょう。

.why-item_desc_text h3 {
    font-size: 32px;
}

.why-item_desc_text p {
    margin-top: 13px;
}

file

数字の部分のズレを調整します。検証ツールで見てみると、カンプの数字はleftでもcenterでもない微妙な位置にありますね（薄く見えるオレンジの数字がカンプの位置）。

file

padding-rightを使って、デザインの位置まで押す形にします。

file

更に、画像（why-item_num1クラス）のmargin-topの値を上書き。縦方向の位置も揃えます。

file

3.白背景を端まで伸ばす

横並びにしたブロックは、幅が広がってもコンテンツはconteiner幅で固定されます。しかし、テキスト部分+画面端まで白背景は繋がったデザインです。

file

こうした場合、作り方は何通りかあります。今回はシンプルなデザインで、conteinerは常に画面中央に配置されます。なので、グラデーションを作る時に使う「background: linear-gradient()」を使って白い部分を作ります。

why-itemを囲うdivの作成

背景を設定するために、why-itemクラスのdivを囲います。「why-item-bg」というクラス名を付けました。

file

cssで背景を指定する

50%の位置で背景色透明と、背景色白をパッキリと分けます。

.why-item-bg {
    background: linear-gradient(90deg, transparent 0%, transparent 50%, #FFF 50%, #FFF 100%);
}

file

重なっているので分かりにくいですが、背景色は下記のように入っています。

file

「2」のブロック(逆位置)を作る

２番めは配置順が逆になるので、CSSで合わせましょう。

file

背景色の配置を逆にするために、「why-item-bg-reverse」クラスを作りました。

<div class="why-item-bg-reverse">
    <div class="why-item why-item-reverse d-flex container px-0">

/* 逆位置  */
.why-item-bg-reverse {
    background: linear-gradient(90deg, #FFF 0%, #FFF 50%, transparent 50%, transparent 100%);
}

.why-item-reverse .why-item_num {
    padding-left: 48px;
    padding-right: 0;
}

.why-item-reverse .why-item_desc_img{
    order: 2;
}

.why-item-reverse .why-item_desc_text{
    order: 1;
    width: 630px;
    margin-top: 5px;
    margin-left: auto;
}