ランディングページ（LP）

ランディングページとはLPとは「1枚完結」の「たてなが」のWebページ

ランディングページ（LP）→1ページ完結で、目的はコンバージョン達成

ホームページ（Webサイト）→複数ページの集合体で、目的は幅広い

今回は「HTMLの基本とCSS／ページのレイアウト」より「1 カラムのフルスクリーン＋トップ固定」の
テンプレートを使って作成しています。

※ヘッダーの固定
※ページ内のバックグラウンドカラー変更

ここでは上の二つを学習していきます。

 

ヘッダーとナビゲーションを固定

position: fixed;を使ってヘッダーとナビゲーションを画面上部に固定しています。
.spaceで高さの調整

HTML

<div class="position-lock">　～　</div>

CSS

@media screen and (min-width: 768px) {
.position-lock {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
}

 

.space{
margin-top: 125px;
}



バックグラウンドカラーをグループごとに変える

ベースのbackground-colorはホワイトで指定しているので
色を変えたいコンテンツのパーツを<section>～</section> で囲ってください。（divでもOK）

例）<section class="yellow-area">～</section>
例）<div class="yellow-area">～</div>

HTML

（例）
<section class="yellow-area">
<div class="inner"> ←コンテンツを入れるサイズを指定しています
コンテンツ
</div>
</section>

CSS

（例）
.yellow-area {
background-color: #fafad2;
padding: 50px 0;
}



各エリアのbackgroundをアレンジ

各エリアのbackgroundの色を変えるだけでなく、写真を入れてみましょう
※「blue-area」に写真を使った場合

画像を大きく入れる／「背景のCSS」を参考にしてください

CSS
.blue-area {
background-image:url("../img/bg1.jpg");
background-position: center;
background-size: cover;
padding: 50px 0;
}