【解説07】PC幅-ファーストビューの作成

ヘッダーナビゲーションを調整

ページ最上部、ヘッダーナビゲーションを調整します。

スマホ幅以上の場合の、ナビゲーションのCSSは既にありますね。

文字色や幅など、必要な箇所をデザインに合わせて直しましょう。 左側に表示するロゴと[キューベースウェブ]の文字のスタイルも指定します。

@media (min-width: 768px) {
  /* ---------------------- */
  /* 共通クラス
  /* ---------------------- */


  /* ---------------------- */
  /* 共通headernav
  /* ---------------------- */
  #navbtn{
    display:none;
  }

  header{
    padding-top: 25px;
    max-width: 1070px;
  }

  .logo {
    width: 175px;
  }

  header .d-none{
    display: block;
    margin-left: 10px;
  }

  .nav{
    /* 右寄せ */
    margin-left: auto;
  }

  .nav ul{
    display: flex;
    line-height: 1;
  }

  .nav ul li{
    font-weight: 600;
    margin: 0px 15px 0 20px;
  }

  .nav ul li a { 
    color: #FFF;
  }
}

このCSSでカンプと大体重なりました。

ファーストビューの作成

ファーストビューは縦並びだったブロックを横並びに変更します。 背景画像やキャッチコピーのサイズ等も違いますね。

1.大まかな配置を決める

まずは大きなところのCSSを書いてみましょう。

1. .topの余白と背景画像を調整
2. .top_copyのサイズ等を調整
3. .containerの最大幅を設定
4. .top_imgboxと.top_stepboxを囲っているdivに、横並びにするためのクラス「d-tb-flex」を追加
5. .d-tb-flexに「display: flex;」を指定

ブラウザで見てみると、下図のようになりました。

.containerに最大幅を設定すると、ヘッダーナビゲーションの幅が変わってしまいます。セレクタの書き方をちょっと変えておきましょう。

header{
    padding-top: 25px;
    max-width: 1070px;
}

　↓

header.container{
    padding-top: 25px;
    max-width: 1070px;
}

2.横並び画像の配置を整える

.top_imgboxと.top_stepboxの配置を左右逆にします。

また、イラストレーターファイルを見ると、ここにはpaddingが付いていません。 タブレット幅以上で左右paddingをゼロにする「px-tb-0」クラスを追加します。

あとはカンプに合うように、各アイテムの大きさを調整していきましょう。

Qbase WEBの操作画面の画像は、positionで位置指定してカンプの位置に配置します。ハードコードになってしまいますが、このあたりはブラウザの検証ツール+PerfectPixelでカンプに重なる位置を探すのが手っ取り早いです。

画面左側、STEP4の位置が画像と合いません。

olにつけている「align-items-end」が影響して、位置を調整しにくくなっています。

TB幅以上の場合はflex-start（上端揃え）になるようにクラスを作ります。 そして、疑似要素（:last-child）でスタイルの適用先を限定し、位置と大きさを合わせました。

　↓

3.今すぐテストを受ける、を調整

「今すぐテストを受ける」ボタンと、その下の余白を合わせます。

下のセクションとかぶっていますが、ここは次のセクション作成時に調整しましょう。

4.画像のはみ出しを抑える

rightに負の値を入れて位置を調整した、Qbase WEB画面イメージ。

大きなサイズのモニターであれば問題ありませんが、表示領域の幅によってはマイナスで指定した値の分だけ右にはみ出してしまいます。 実際の幅は1200px + rightの値分ありますからね。

幅1200～1350pxという半端な幅で見る方は、あまり居ないでしょう。 なので、今回は簡単に@media (min-width: 1200px) {} の中で#toppageに対して「overflow-x: hidden;」を指定しておきます。

/* @media (min-width: 1200px) {} の中 */

  #toppage{
    overflow-x: hidden;
  }

これを最初からbodyに指定しておくと、スマホ幅でのはみ出し防止にもなります。 が、横スクロールが出ない＝部分的に見切れていても気づかない可能性があるので使用していません。

全体を見直して、必要に応じてCSSを微調整します。 次ページのタブレット幅の表示調整を行えば、完成です。