クロージング
1.配置変更
縦並びのブロックを横並びに切り替えます。 位置が変わるボタンの表示・非表示も切り替えましょう。
この状態でブラウザ表示を確認してみましょう。
重ねている画像部分をタブレット幅から横並びにすると狭そうですよね。 試しに768px幅で見てみると、２ブロック横並びでもギリギリです。
あとで移動するのも面倒なので、２つの画像（.signup_img）の配置変更はPC幅からにしましょう。
.img-fluidに固定値のwidthを設定してしまうと分かりにくいので、Qbase WEBイメージ画像をdivで囲います。
まずは、配置のための簡単なCSSだけ書いてみましょう。
↓
2.それぞれの位置・サイズを調整
それぞれの要素の大きさや位置をカンプに合わせていきます。
ここも、PC幅用のメディアクエリ @media (min-width: 1200px) {} の中に書きます。
セクショントップとテキスト部分
横並びにした３つの要素は、縦方向中央揃えにすると位置を合わせやすそうですね。 まずは、align-items-centerクラスを追加します。
CSSで見出しのフォントサイズを変更し、位置を合わせます。
「今すぐテストを受ける」の位置を合わせます。
PC幅表示のボタンは左寄せですね。
aタグを囲っているdivは使わないので、削除してしまいましょう。
.signup_button-pc{
margin-top: 16px;
padding: 11px 34px;
letter-spacing: 0.07em;
}
テキスト部分（左側）が揃いました。
画像部分
右側の画像部分のサイズと位置を合わせます。
右側のブロック div.signup_img には既に余白が付いています。
.signup_img のmargin-topをゼロにして、中央配置を解除します。
左右マージンを無くすために「mx-pc-0」クラスを新たに作りました。
一旦、表示を見てみましょう。 全体的に左に寄っていますね。
全体を囲っている<div class="container d-tb-flex">に、両端配置になるように「justify-content-between」クラスを追加します。
「未経験Webデザイナーのための～」と書いてある画像（ .signup_img_icon ）のサイズと位置も合わせます。
.signup_img_icon{
position: relative;
width: 265px;
height: 265px;
top: -4px;
right: -37px;
}
Qbase WEBイメージ画像を右にずらして、カンプと重ねましょう。
.signup_img_qbase{
max-width: 355px;
margin-right: -25px;
}
セクションの下paddingを、カンプに合わせて調整すれば完成です。
フッターの調整
フッターをカンプと重なるように調整していきましょう。
こちらはクロージング部分と違い、タブレット幅でも圧迫するような要素はなさそうです。通常通りにタブレット幅 @media (min-width: 768px) {}を基準にスタイルを書いていきます。
まず、footerの高さを確保する必要がありますね。 文字の位置は、縦方向中央……というわけでも無いですね。
崩れる心配の少ない箇所ですから、上paddingを追加して位置を合わせたほうが早そうです。
見出しとコピーライトの文字サイズも変更しましょう、 H3の改行は要らないので、d-pc-noneクラスを使って無くします。
↓
コピーライトを右寄せに直します。 .containerの幅だと広すぎるので、最大幅を少し小さめに設定。 字間もカンプに近づくように調整すれば完成です。
タブレット幅の表示調整
今回作った部分を、幅768pxで見てみます。
いきなりPC幅にスタイルを書いたクロージング部分、 padding-topに大きな値を入れているfooter部分、 このあたりがちょっと歪ですね。
クロージング調整
先程クロージング部分は、ほとんど@media (min-width: 1200px) {}内にスタイルを書きました。特に大きな崩れも無いので、.signupのpaddingだけ調整しましょう。
/* @media (min-width: 768px) {} の中 */
.signup{
padding: 38px 0 0 0;
}
.signup_button {
display: none;
}
.signup_button-pc {
display: inline-block;
}
フッター部分
footerに指定しているpadding-top,heightを変更します。
先程書いた分は@media (min-width: 1200px) {}内に移動して、タブレット幅ではもう少し控えめな値を入れました。
（※heightに関しては、お好みでそのままでも良いです）
/* @media (min-width: 768px) {} の中 */
footer{
height: 230px;
padding-top: 55px;
}
↓
最初よりは落ち着いたのではないでしょうか。
タブレットとのCSS振り分けまでを終えたデモコードは、素材からダウンロードして確認いただけます。