見出しまわりの調整
「Qbase WEBで無料で実力を試しましょう」周辺をカンプに合わせていきます。
スマホ幅のときは見出しに背景画像を付けました。 しかし、PCデザインではその下の文字部分まで背景画像が表示されていますね。
見出しまわりを囲っているdivにクラスを加え、背景画像を設定しなおしましょう。
また、見出しも、その下のテキストも、PC幅では改行が無くなっています。 それぞれ、フォントサイズも大きくなっていますよね。
フォントサイズを大きくして、かつ改行をなくしてしまうと、TB幅では一行に収まるか微妙ですね。収まったとしても、横に伸びすぎてちょっと変かもしれません。
後々調整しても良いですが、面等なので先に「PC幅になったら改行しない」というクラスを作ってしまいましょう。
ブラウザで表示してみます
ここから、カンプと重ねながら、余白や字間を設定していけば完成です。
（特にwindowsの場合は)文字をピッタリ重ねるのは難しいです。 最低限、幅だけ合うように調整しておきましょう。
【CSSの例】
/* ----------------------
/ free tests
/ ---------------------- */
.freetest{
margin-top: 70px;
}
.freetest_tittle{
width: fit-content;
max-width: 1180px;
background: url('images/why-bg@2x.png') no-repeat;
background-size: contain;
background-position: 99.5% center;
padding-top: 35px;
}
.freetest h2{
background: none;
font-size: 36px;
letter-spacing: 0.17em;
}
.freetest_subttl{
margin-top: 12px;
padding-bottom: 10px;
font-size: 16px;
letter-spacing: 0.1em;
}
カードと並びの調整
８つのテストを紹介するカードが並んでいるエリアです。
カードのレイアウト自体は変わっていませんが、各パーツのサイズなどが変わっています。横並びにする枚数も4枚に増えています。
変更が必要な箇所のCSSを、@media (min-width: 768px) {}に書いていきましょう。
1.カードの幅・配置を決める
カードの幅や配置を固めたほうが、中身部分のCSSも書きやすいそうですね。 カンプに重なるようにCSSを書いていきます。
.testcard-wrapper {
margin: 50px 5px;
justify-content: space-between;
}
.testcard {
flex: 0 0 25%;
max-width: 230px;
padding: 0;
}
上記のCSSでカードの幅、位置は整いました。
2.各パーツの調整
<div class="testcard">の中を調整していきます。
カンプに合うように、試行錯誤しながらCSSを書いていくイメージです。
marginやpaddingの付け方は人によって違いが出ると思います。 デモコードとは違うスタイル指定をしても、カンプと重なればOKです。 効率の良い合わせ方を考えてみてください。
※CSS3の画像に関しては、大きさが違うままで進めてください
【CSSの例（min-width: 768px部分）】
/* ----------------------
/ カード型リンクパーツ
/ ---------------------- */
.testcard-wrapper {
margin: 50px 5px;
justify-content: space-between;
}
.testcard {
flex: 0 0 25%;
max-width: 230px;
margin-bottom: 44px;
padding: 0;
font-size: 16px;
}
.testcard-inner{
border-radius: 10px;
box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.25);
}
.testcard_top {
padding: 15px 0 8px 0;
}
.testcard_middle {
padding: 15px 5px;
}
.testcard_middle p{
font-weight: bold;
letter-spacing: 0.15em;
line-height: 24px;
}
.testcard_icon {
width: 52px;
height: 52px;
left: -26px;
top: -25px;
font-size: 15px;
font-weight: bold;
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.testcard_img{
width: 119px;
height: 119px;
}
.testcard_img img {
height: 70px;
}
.testcard_middle .btn {
font-size: 14px;
margin-top: 7px;
padding: 5px 13px;
}
.card_score {
margin-top: 0;
padding: 7px 13px;
line-height: 1.17;
}
.card_score li {
font-size: 13px;
}
.card_score .text-bold {
font-size: 15px;
}
.card_score .small {
font-size: 11px;
}
タブレット幅の調整
最後に幅768pxで見て、必要に応じてPC幅とCSSを分けていきます。 タブレット幅に決まりはないので、見られる程度に整えましょう。
【CSSの調整例】
レッスンで使用、調整したコードは素材にアップロードしています。