【解説09】PC幅-実力をアップする～部分の作成

見出しを合わせる

見出し部分の位置を合わせていきましょう。 余白や文字サイズなど、かなり違いがありますね。

「Webデザイナースキルが上がる理由」と共通で使っているクラス部分です。

/* 見出し */
.h2box {
    padding: 60px 20px;
}

.h2box h2{
    font-size: 36px;
    margin-top: 35px;
    letter-spacing: 0.155em;
    line-height: 53px;
}

.h2-img {
    height: 37px;
}

3つのブロックを配置

1.3つのブロックを横並びにする

スマホ幅で作った時に、PCレイアウトに組み替えやすいようにdivの構成を考えましたね。

まずは３つのブロックが、順番通り横に並ぶようにCSSを書きます。

/* ---------------------- */
/* What is Qbase Web
/* ---------------------- */
.whats-item_img {
    order: 3;
}

.whats-item_text {
    flex: 2;
    order: 2;
}

2.各ブロックのサイズを合わせる

横並びにした３つのブロック、それぞれのサイズを合わせていきます。

そのまえに、brタグに「d-pc-none」クラスを加えて改行を無くしておきます。

現在、３つのdivは下記のようになっています。

PC幅のデザインをと比べて、違う部分を直していきます。 左のアイコンは中央ではなく左寄せで配置したいので、「text-tb-left」という共通クラスを作りました。

3.STEP1のテキストを調整

STEP1の真ん中、テキスト部分の配置を整えます。 カンプに重なるように調整しましょう。

今回はシンプルにmarginとpaddingで調整しました。

【CSSの例】

.whats-item_text {
    flex: 2;
    order: 2;
    padding: 0 5px 50px 5px;
}

.whats-item_text h3 {
    font-size: 32px;
    margin-top: 75px;
}

.whats-item_text p {
    padding-top: 50px;
    max-width: 465px;
}

4.STEP2以降をチェック

STEP１を合わせて、STEP2・STEP3の並びを見てみると、アイコンの位置がズレています。

これは、アイコン（SVG）のサイズが違うためですね。 合わせるために、max-widthで調整していたサイズを「高さ」を基準に合わせるようにします。

【元のCSS】

  .whats-item_icon img{
    max-width: 75px;
  }

↓

【変更後のCSS】

  .whats-item_icon img{
    max-width: 100%;
    max-height: 200px;
    margin-left: 3px;
  }

タブレット幅の調整

最後に幅768pxで見て、必要に応じてPC幅とCSSを分けていきます。

• 左端、右端の
• .whats-item_text内の余白

あたりを調整すれば、見られる配置になりそうですね。

タブレットとのCSS振り分けまでを終えたデモコードは、素材からダウンロードして確認いただけます。

タブレット幅のレイアウトは指定されていませんので、レッスンと別の配置になるようコーディングしても構いません。