LoginSignup
1
0
@miya71

【HTML/CSS】LPの作り方を覚える①

Last updated at Posted at 2024-08-25

HTML/CSSの勉強として、LPの作り方を覚えるための自分用メモです。

LP（ランディングページ）とは？

LP（ランディングページ）とは、商品やサービスの魅力・情報をまとめ、訪問者にコンバージョン（目的となる行動）を起こしてもらうための縦長のWebページです。

SarasaraShampooのLPを制作する

今回は、架空のシャンプー「SarasaraShampoo」のLPを制作します（あくまで自分流の作り方です）。

index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>SarasaraShampoo</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>
style.css
@charset "UTF-8";

a {
    text-decoration: none;
    color: inherit;
}
ul {
    padding-left: 0;
}
li {
    list-style: none;
}
h1 {
    font-weight: normal;
}
h2 {
    font-weight: normal;
}
h3 {
    font-weight: normal;
}
body {
    background-color: #ffffff;
    color: #333333;
    font-size: 80%;
    margin: 0 auto;
}
.wrapper {
    width: 1000px;
    margin: 0 auto;
}
.text {
    font-size: 14px;
    line-height: 2;
    text-align: center;
    margin-bottom: 100px;
}
.img {
    background-color: #696969;
}
.icon {
    background-color: #696969;
}
.black-button {
    background-color: #000000;
    color: #ffffff;
    text-align: center;
    padding: 5px 0px;
    border-radius: 10px;
}
.black-button a {
    display: block;
}
.white-button {
    background-color: #ffffff;
    color: #333333;
    text-align: center;
    padding: 5px 0px;
    border-radius: 10px;
    border: 1px solid #333333;
}
.white-button a {
    display: block;
}
.text-right {
    text-align: right;
}
.button-right {
    margin: 0 0 0 auto;
}

ファーストビューを作成する

ファーストビューとは、Webページにアクセスした際に1番最初に表示されるエリアで、スクロールしなくても閲覧することができます。

index.html
    <body>
        <header id="header">
        </header>
        <main>
            <div id="mainvisual">
            </div>
        <main>
    </body>

ヘッダーを作成する

ヘッダーには、サイトタイトルとグローバルナビゲーション（コンバージョンボタン）を設置します。

index.html
    <body>
        <header id="header">
            <h1><a href="index.html">SarasaraShampoo</a></h1>
            <nav>
                <ul>
                    <li><a href="">購入はこちら</a></li>
                    <li><a href="">お問い合わせ</a></li>
                </ul>
            </nav>
        </header>
    </body>
style.css
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header ul {
    display: flex;
}
header li {
    margin-left: 30px;
}

メインビジュアルを作成する

メインビジュアルには、メインビジュアル用の画像とキャッチコピーを設置します。

index.html
    <body>
        <main>
            <div id="mainvisual">
                <div class="img"></div>
                <h2>パサつく髪にうるおいを</h2>
            </div>
        </main>
    </body>
style.css
/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
#mainvisual {
    height: 600px;
    width: 100%;
    position: relative;
}
#mainvisual .img {
    height: 600px;
    width: 100%;
}
#mainvisual h2 {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    font-size: 2em;
    color: #ffffff;
}

ボディを作成する

ボディとは、商品やサービスの特徴を伝えるエリアです。

index.html
    <body>
        <section id="introduction" class="wrapper">
        </section>
    </body>

導入文を作成する

導入文には、導入文のテキストと商品の特徴を丸背景のリストで設置します。

index.html
    <body>
        <section id="introduction" class="wrapper">
            <h2>SarasaraShampooとは</h2>
            <p class="text">
                SarasaraShampooは、<br>
                パサつく髪の悩みを改善するために作られた<br>
                うるおいケアシャンプーです。
            </p>
            <ul>
                <li>
                    <div class="circle">
                        <p class="number">01</p>
                        <h3>
                            植物由来の<br>
                            うるおい成分<br>
                            配合
                        </h3>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <p class="number">02</p>
                        <h3>
                            ダメージヘア<br>
                            を補修
                        </h3>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <p class="number">03</p>
                        <h3>
                            癒される<br>
                            フルーティな<br>
                            香り
                        </h3>
                    </div>
                </li>
            </ul>
        </section>
    </body>
style.css
/*-------------------------------------------
導入文
-------------------------------------------*/
#introduction {
    padding: 50px 0px;
}
#introduction h2 {
    text-align: center;
    margin-bottom: 100px;
}
#introduction ul {
    display: flex;
    justify-content: space-between;
}
#introduction li {
    width: 32%;
}
#introduction .circle {
    width: 100%;
    padding-top: 100%;
    background-color: #f5f5f5;
    border-radius: 50%;
    text-align: center;
    position: relative;
}
#introduction .number {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    font-size: 60px;
    color: #ffffff;
}
#introduction h3 {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    font-size: 2em;
}

クロージングを作成する

クロージングとは、商品やサービスの特徴を把握したユーザーをコンバージョンに誘導するエリアです。

index.html
    <body>
        <section id="goods" class="wrapper">
        </section>
        <section id="contact">
        </section>
    </body>

商品一覧を作成する

商品一覧には、商品画像と商品情報、コンバージョンボタンを横並びで設置します。

index.html
    <body>
        <section id="goods" class="wrapper">
            <h2>商品一覧</h2>
            <div class="flex-item">
                <div class="item">
                    <div class="img"></div>
                </div>
                <div class="item">
                    <h3>
                        SarasaraShampoo<br>
                        シャンプー&トリートメント
                    </h3>
                    <p>シャンプー 500ml/トリートメント 500g</p>
                    <p>4000円（税込）</p>
                    <div class="black-button"><a href="">購入はこちら</a></div>
                </div>
            </div>
            <div class="flex-item">
                <div class="item text-right">
                    <h3>
                        SarasaraShampoo<br>
                        ヘアオイル
                    </h3>
                    <p>200g</p>
                    <p>2000円（税込）</p>
                    <div class="black-button button-right"><a href="">購入はこちら</a></div>
                </div>
                <div class="item">
                    <div class="img"></div>
                </div>
            </div>
        </section>
    </body>
style.css
/*-------------------------------------------
商品一覧
-------------------------------------------*/
#goods {
    padding: 50px 0px;
}
#goods h2 {
    text-align: center;
    margin-bottom: 100px;
}
#goods .flex-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
#goods .item {
    height: 480px;
    width: 48%;
}
#goods .img {
    height: 480px;
    width: 100%;
}
#goods .black-button {
    width: 150px;
}

お問い合わせを作成する

お問い合わせには、テキストとコンバージョンボタンを設置します。

index.html
    <body>
        <section id="contact">
            <h2>お問い合わせ</h2>
            <p class="text">
                商品へのご質問は、以下のページから<br>
                お気軽にお問い合わせください。
            </p>
            <div class="white-button">
                <a href="">
                    <div class="icon"></div>
                    <p>お問い合わせはこちら</p>
                </a>
            </div>
        </section>
    </body>
style.css
/*-------------------------------------------
お問い合わせ
-------------------------------------------*/
#contact {
    padding: 50px 0px;
    background-color: #f5f5f5;
}
#contact h2 {
    text-align: center;
    margin-bottom: 100px;
}
#contact .white-button {
    width: 250px;
    margin: 0 auto;
}
#contact .icon {
    height: 50px;
    width: 50px;
    margin: 10px auto;
}

フッターを作成する

フッターとは、Webページの1番下に表示される領域です。

index.html
    <footer id="footer">
    </footer>

フッターには、コピーライトを設置します。

index.html
    <footer id="footer">
        <p class="copyright">&copy; SarasaraShampoo</p>
    </footer>
style.css
/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
    padding: 10px  0px;
    background-color: #000000;
}
#footer .copyright {
    text-align: center;
    color: #ffffff;
}

完成イメージ

SarasaraShampoo.jpg

次回の学習に向けて

次回は、レスポンシブデザインを実装するためにviewportやメディアクエリなどを記述します。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0