解説02：ファーストビュー部分の作成

ファーストビュー（ヒーロー）部分をコーディングしていきます。
なお、今回はピンク色のフチ等も込みで一枚の画像（fv-pc@2x-80.jpg）として使います。

ファーストビュー

1.背景画像を表示する場所を確保

まず、ファーストビュー用の画像を表示する場所を確保しましょう。
ここからメインコンテンツですよ、という主張を込めて<main>タグも入れておきます（※なくてもレイアウトには影響しません）。

lp.html

cssで「fv」クラスを使って、背景画像の設定とサイズ指定を行います。

style.css

/* ============================================== */
/* main contents
/* ============================================== */
/* ---------------------- */
/* first view
/* ---------------------- */
.fv{
  background-image: url('images/fv-pc@2x-80.jpg');
  background-size: cover;
  background-position: center;
  width:100%;
  height: 650px;
}

2.テキストなどを配置する

ファーストビュー、背景画像の上に表示させる要素を配置していきます。 画像は全幅ですが、中身はコンテンツ幅内に収まるようにcontainerクラスのdivで囲いましょう。

画像サイズや余白を設定できるように、divで囲って「fv-award」「btn」というクラスを加えています。

lp.html

<!-- ============================
/ first view
/============================= -->
<div class="fv">
    <div class="container">
        <h1>
            Web起業して<br>大きく稼ぐ
        </h1>
        <p>
            Web起業に必要なこと、ぜんぶ学べる
        </p>
        <div class="fv-award">
            <img src="images/award1@2x-8.png" alt="生徒数5000人突破">
            <img src="images/award2@2x-8.png" alt="満足度99.2％達成">
            <p class="fsize-10">
                ※1 マクロミルの調査2021/9/1 ~ 2021/10/31 による
            </p>
        </div>
        <div class="btn">
            <span class="col text-center">Web資料請求</span>
            <img src="images/btn-chevron.svg" alt="">
        </div>
    </div>
</div><!-- /.fv -->

今回使用するimagesフォルダ内の画像ファイルは2倍サイズで切り出されています。
ボタンのような部分（.btn）で「Web資料請求」の横に表示させたいsvgファイルも、かなり大きく表示されます。

画像の大きさも含め、デザインに近いレイアウトになるようにCSSを書き加えていきましょう。

3.共通クラス化する部分を決める

ファーストビュー部分には、他の箇所でも使いそうな設定がいくつかあります。
「文字色を白にする」などは、.fv h1{}など個別に指定するのではなく、そのためのクラスを作っておくと使い回しが出来そうですね。

今回は3つ、共通して使えそうなクラスを追加しました。
色違い等のデザインが出てくるボタンは、配色のためのクラス.bg-yellowと２つのクラスに分けました。

.btnに指定しているプロパティでは、以下の内容を設定しています。

• border-radiusプロパティ：角を丸くする設定
• letter-spacingプロパティ：字間を設定

デザインデータがある場合、border-radiusの値は角丸の設定（px数）と同じにすればデザイン通りになります。
letter-spacingは、ブラウザ表示と検証ツールを使って調整すると分かりやすいです。

ファーストビューと、ページ下部のフォームに使われている黄色いボタンだけはドロップシャドウが入っています。
が、２のドロップシャドウは設定が違いそうです。

ファーストビューの「Web資料請求」のボタンはサイズも違いますね。
このあたりは、個別にスタイルを書いていきましょう。

4.ファーストビューだけで使うスタイルの設定

先程のボタンのところを書いてしまいましょう。
幅・高さ・影（ドロップシャドウ）の３つを指定します。

style.css

影をつけるためにbox-shadowというCSSプロパティを使います。
box-shadowでは影の位置、大きさ、色などをまとめて指定します。必須の２つ以外は省略することもできます。

詳細解説：box-shadow | MDN
　↓

「Web資料請求」の部分はデザイン通りになりました。

トップコピーなどの文字部分、画像の大きさ、余白を合わせていきましょう。

style.css

かなりデザインに近い仕上がりになりました。

最後に、上図でマークした二箇所の余白を調整します。
ここはstyle.cssで余白を指定していないのに、間隔が空いてしまっています。
こういうときは、ブラウザの検証ツールで原因を調べると良いです。

例えば、ヘッダーとファーストビューの間。
ここはsanitize.cssによって、h1タグに設定されたmargin-topが影響しています。

<div class="fv">で囲った部分のmargin-topが、その中身のh1についている分……というのは分かりにくいですね。

h1タグはmt-0クラスを加えてmargin-topをゼロにしてしまいましょう。
画像下のpタグも同じくmt-0クラスを加えます。

ナビゲーションとの間隔分は、style.cssで「header」に加えます。

　↓

ファーストビュー完成です！