ファーストビューのレスポンシブコーディング

今回はファーストビュー、<section class="firstview"> 部分をコーディングしていきます。

• スマホ幅（共通CSS)で背景画像設定
• 背景画像の指定
• 背景画像のサイズと位置を指定する
• テキスト部分の作成
• HTMLを書く
• CSSの記述と、クラス作成
• タブレット幅、PC幅表示のCSS
• タブレット幅以上の場合
• PC幅以上の場合

スマホ幅（共通CSS)で背景画像設定

まず、ファーストビュー部分全面に表示されている画像を指定しましょう。

背景画像の指定

ファーストビューに表示されている画像を、CSSで背景画像として指定します。
背景画像の指定には、CSSプロパティbackground-imageを使います。

style.css

.firstview{
  background-image: url('images/top@2x-50.jpg');
}

ファイル名が違う方は、プロパティ値の(' と ') の中に書いかれている画像パスを変更してください。
画像パスを囲うクオートは、シングルクォーテーション'でもダブルクオーテーション"でも良いです。

背景画像は<section class="firstview">に高さがないと表示されません。
合わせてmin-height（最低でも確保したい高さ）も、セットで指定しておきましょう。
値はスマホ幅デザインの、ファーストビュー画像の高さに設定しておきます。

style.css

.firstview{
  background-image: url('images/top@2x-50.jpg');
  min-height: 360px;
}

ブラウザで表示を見てみましょう。

画像の大きさそのままで表示されています。キリンが見えませんね。
画面幅に合わせて、ちょうど良く表示してくれるように、更にCSSの指定が必要です。

背景画像のサイズと位置を指定する

● 背景画像のサイズを指定する「background-size」

背景画像の表示サイズを、画面幅に応じて変更するには、CSSプロパティbackground-sizeを使います。
値には「cover」と書いてください。

style.css

.firstview{
  background-image: url('images/top@2x-50.jpg');
  background-size: cover;
  min-height: 360px;
}

下図のように背景画像のサイズが変わっていたら、指定が効いています。

【background-sizeプロパティの値について】
background-sizeのプロパティ値は、キーワード値での指定と、％やpxを使った数値指定が出来ます。
キーワード値での指定は、今回使ったcoverとcontainの2つがあります。

• cover：画像を表示領域いっぱいに拡大。画像の比率が要素と異なる場合は、はみ出る部分は非表示。
• contain：縦横比を崩さず、画像全体を表示領域いっぱいに表示する。

● 背景画像の位置を指定する「background-position」

今、背景画像は左端に合わせて表示されています。
この背景画像の表示位置は、CSSプロパティbackground-positionを指定することで変更可能です。

background-position: center; をCSSに追加してみましょう。

style.css

.firstview{
  background-image: url('images/top@2x-50.jpg');
  background-size: cover;
  background-position: center;
  min-height: 360px;
}

【background-sizeプロパティの値について】
background-sizeプロパティの値も、キーワード値での指定と、％やpxを使った数値指定が出来ます。
キーワード値での指定は、以下５つがあります。

• top：上辺を基準にする
• bottom：下辺を基準にする
• left：左端を基準にする
• right：右端を基準にする
• center：中央を基準にする

値を2つ以上組み合わせる、キーワード値と数値を組み合わせることもできます。

テキスト部分の作成

幅が違うだけで、ファーストビュー内のレイアウト（並べ方）はどの画面幅でも共通です。
タブレット幅以上のサイズは一旦置いておいて、<section class="firstview">の中身を作ります。

HTMLを書く

最初に既存のクラスを使って、コンテンツ幅と余白を確保。
<div class="container">の中に、画像上に表示する文字などの幅を設定するdivを作ります。
これは、下図で黄色い線で囲った部分です。

新しく加えたdivには、スタイル指定を行えるように「firstview-lead」クラスを追加します。

index.html

<section class="firstview section-padding">
  <div class="container">
    <div class="firstview-lead">

    </div>
  </div>
</section>

作成した<div class="firstview-lead">の中に、表示させたい文字や画像を書いていきましょう。
ファーストビューのコピーはPC幅でサイズがかなり大きくなるので、専用のクラスを作ります。

5色線の画像のwidthとheightは、PC幅デザインのサイズを書きます。
ボタン風デザインの「詳細はこちら」は、spanタグで囲み「btn-more」クラスを指定します。

index.html

<section class="firstview section-padding">
  <div class="container">
    <div class="firstview-lead">
      <h2 class="firstview-title">キリンに乗って<br>散歩しよう！</h2>
      <img src="images/line@2x-8.png" width="404" height="5" alt="">
      <p>
        世界で一番スリリングな冒険、キリンに乗って園内を散歩できます
      </p>
      <img src="images/line@2x-8.png" width="404" height="5" alt="">
      <a href="#">詳細はこちら</a>
    </div>
  </div>
</section>

CSSを書く前に、ブラウザで確認すると以下のようになります。

CSSの記述と、クラス作成

CSSを書いて、ブラウザ表示をデザインに合わせていきます。

H1見出しのサイズ、ファーストビュー全体の文字色。
下のセクションでも文字色が白の見出しがあるので、文字色を白にする「text-white」クラスを別に作っておきます。
(※ firstview や firstview-leadをセレクタに、CSSを書いても問題ありません）

index.html

<section class="firstview section-padding">
  <div class="container">
    <div class="firstview-lead text-white">
      <h2 class="firstview-title">キリンに乗って<br>散歩しよう！</h2>

style.css

.text-white{
  color: #FFFFFF;
}

.firstview-title{
  font-size: 26px;
}

font-sizeの値に迷ったら、デザインデータで設定されている文字のpt数・px数をそのまま使いましょう。

次に、firstview-leadクラスに対してwidth指定をします。
こちらも、デザインデータの数値をそのまま使ってしまいましょう。

style.css

.firstview-lead{
  width: 182px;
}

詳細はこちら 部分

ファーストビュー下部にある「詳細はこちら」のボタン風リンク。
このデザインは、お知らせのセクションにある「もっとみる」と同じデザインです。
ボタン風の表示を作るための「btn-more」クラスを作って、お知らせセクションでも使えるようにしましょう。

HTMLでは、aタグに「btn-more」クラスを追加。
文字を白にしたいので、text-whiteクラスも入れます。

index.html

<a href="#" class="btn-more text-white">詳細はこちら</a>

CSSで、背景色と余白を設定します。

style.css

a.btn-more{
  background-color: #F15A24;
  margin-top: 1em;
  padding: 0.5em 2em;
}

margin-topが効いていませんね。
これは、a要素がインラインレベルの要素のためです。
margin-topが聞くように、display: inline-block; の指定を追加しましょう。

style.css

a.btn-more{
  display: inline-block;
  background-color: #F15A24;
  margin-top: 1em;
  padding: 0.5em 2em;
}

角を丸くするために、border-radiusプロパティも指定します。
値は大体でも、Illustratorで確認して設定しても良いです。

style.css

a.btn-more{
  display: inline-block;
  background-color: #F15A24;
  margin-top: 1em;
  padding: 0.5em 2em;
  border-radius: 18px;
}

スマホ幅での表示は完成です。

タブレット幅、PC幅表示のCSS

タブレット幅とPC幅でのデザインに合わせたCSSを書きます。

タブレット幅以上の場合

ファーストビューがタブレット幅になった時の、変更箇所は以下の5点です。

• .firstviewの高さ（506 px）
• .firstview-leadの幅（320 px）
• .firstview-titleのフォントサイズ（42px）
• pタグで囲ったテキストのフォントサイズ（18px）
• 詳細はこちらのフォントサイズ（21px）

各要素の大きさについては、Illustrator上でサイズを確認しても、目見当で良さそうなサイズを指定してもOKです。
上で（）内に書いているのは、Illustrator上のサイズです。

それぞれの指定を、@media (min-width: 600px) { }の中に書いていきます。
なお、タブレット幅以上では「詳細はこちら」のフォントサイズは大きくなるものの、お知らせセクションの「もっとみる」の文字サイズは変わっていません。ですので、CSSセレクタはfirstview-leadクラスの中の...という書き方をします。

style.css - @media (min-width: 600px) { } 内

.firstview{
    min-height: 506px;
}

.firstview-lead{
    font-size: 42px;
}

.firstview-title{
    width: 320px;
    font-size: 18px;
}

.firstview-lead a.btn-more{
    font-size: 21px;
}

PC幅以上の場合

最後に、PC幅でのCSSを書きます。

背景画像の変更

Illustratorからの画像書き出しの時に、PC用の画像は別に書き出しましたので、そちらを使いましょう。
ファーストビュー部分の高さも、PCデザインだと大きくなっているのでmin-heightも上書きます。

PC幅以上のメディアクエリ、@media (min-width: 1024px) { }の中に書きます。

style.css

@media (min-width: 1024px) {
  .firstview{
    background-image: url('images/top-pc@2x-50.jpg');
    min-height: 706px;
  }

} /* end @media */

firstview-leadクラス

次に、firstview-leadクラス。
firstview-leadクラスは、タブレット幅よりも幅が広くなっています。
また、下図で水色の点線分だけ、コンテンツ幅の左端よりも右に寄っています。

メディアクエリ内でスタイル指定が必要なのは、以下4つ。

• .firstview-leadの左に余白
• .firstview-leadの幅を広くする
• pタグで囲ったテキストのフォントサイズ（21px）

style.css - @media (min-width: 1024px) { } 内

.firstview-lead{
    width: 420px;
    margin-left: 150px;
    font-size: 21px;
}

表示するディスプレイのサイズによって、背景画像の見え方は変わります。
デザインと同じ1500px幅だと、以下のように見えます。

firstview-titleクラス

ファーストビューの見出し部分も、PCデザインだとフォントサイズが大きくなっています。

style.css - @media (min-width: 1024px) { } 内

.firstview-title{
  font-size: 60px;
}

フォントサイズを大きくすると、余白も大きくなります。

下の線との距離が空きすぎているので、margin-bottomをゼロにします。

style.css - @media (min-width: 1024px) { } 内

.firstview-title{
  font-size: 60px;
  margin-bottom: 0;
}

↓

これで、ファーストビューのコーディングは完了です。
お疲れ様でした。