ランディングページを作る

このチュートリアルでは、製品やサービスを紹介するシンプルなランディングページを作成します。

短いHTMLコードから始め、CSSでデザインを追加し、機能紹介セクションとモバイル画面に対応するスタイルを順番に作っていきます。

このチュートリアルで作成するページには、次の内容が含まれます。

製品やサービスを紹介するファーストビュー
訪問者の行動を促すボタン
主な機能を紹介するセクション
モバイル画面に対応するデザイン
インターネットへの公開

全体のコード

このチュートリアルを最後まで進めると、以下のようなページが完成します。

始める前に、完成したページとコード全体を軽く確認してみましょう。今の段階ですべてのコードを理解する必要はありません。コードを一つずつ書いたり修正したりしながら、それぞれの部分がどのような役割を持つのかを学びます

始める前に

Essepageにログインし、空のテンプレート（Blank）を選択して新しいプロジェクトを作成します。

プロジェクトを作成すると、次のトップページ用ファイルが生成されます。

/public
└── +page.essepage

/publicフォルダー内の+page.essepageは、Webサイトの標準のトップページです。

プロジェクトのダッシュボードでコードエディター（Code Editor）を選択し、/public/+page.essepageを開きます。

1. ファーストビューを作る

既存のコードをすべて削除し、次のコードを貼り付けてください。

<div id="_main">
    <h1>Turn Your Ideas Into Reality</h1>

    <p>
        We provide simple and efficient solutions
        to help you build better services.
    </p>

    <a href="#">Learn More</a>
</div>

ファイルを保存します。

WindowsまたはLinux：Ctrl + S
macOS：Cmd + S

右側のプレビュー画面に、見出し、説明、リンクが表示されます。

ライブプレビューを使用する

最初の行では、アンダースコア（_）で始まるidを使用しています。

<div id="_main">

Essepageでは、要素のidをアンダースコア（_）で始めると、その領域にライブプレビュー（Live Preview）が適用されます。

これ以降は、ファイルを毎回保存しなくても、コードを入力するたびに右側のプレビュー画面がすぐに更新されます。

h1の文章を少し変更して、プレビュー画面がどのように変化するか確認してみましょう。

2. CSSでデザインを追加する

現在のページには内容だけがあり、デザインは適用されていません。

先ほど作成したHTMLの下に、次のコードを追加してください。

<style id="_css">
    body {
        font-family: system-ui;
        padding: 20px;
    }

    h1 {
        font-size: 64px;
        margin-bottom: 20px;
    }

    p {
        line-height: 1.7;
    }

    a {
        display: inline-block;
        margin-top: 32px;
        padding: 14px 28px;
        color: white;
        background: #111;
        border-radius: 999px;
        text-decoration: none;
    }
</style>

見出しが大きくなり、Learn Moreリンクが丸い黒色のボタンに変わります。

<style>にも、アンダースコアで始まるidが指定されています。

<style id="_css">

そのため、CSSの色やサイズを編集している間も、変更結果がライブプレビューにすぐ表示されます。

たとえば、ボタンの背景色を次のように変更してみましょう。

background: royalblue;

Essepageでは、ページファイル内に<style>を記述できます。ページを構成するとき、スタイルコードは自動的に<head>領域へ配置されます。

3. コンテンツを画面中央に配置する

現在、コンテンツは画面の左上に表示されています。

CSSで既存のbody部分を探し、次のコードに置き換えてください。

body {
    box-sizing: border-box;
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    align-items: center;
    justify-content: center;
    font-family: system-ui;
    text-align: center;
}

コンテンツが画面の水平方向と垂直方向の中央に配置されます。

4. 機能紹介セクションを追加する

多くのランディングページには、製品やサービスの利点を説明するセクションがあります。

HTMLのLearn Moreボタンの下に、次のコードを追加してください。

<section>
    <h2>Our Strengths</h2>

    <ul>
        <li>Fast and intuitive experience</li>
        <li>Fully responsive on all devices</li>
        <li>Reliable customer support</li>
    </ul>
</section>

HTML全体は次のような構造になります。

<div id="_main">
    <h1>Turn Your Ideas Into Reality</h1>

    <p>
        We provide simple and efficient solutions
        to help you build better services.
    </p>

    <a href="#">Learn More</a>

    <section>
        <h2>Our Strengths</h2>

        <ul>
            <li>Fast and intuitive experience</li>
            <li>Fully responsive on all devices</li>
            <li>Reliable customer support</li>
        </ul>
    </section>
</div>

プレビュー画面に、3つの利点を紹介する新しいセクションが表示されます。

5. 機能セクションの間隔を調整する

機能の一覧が少し詰まっているので、CSSで間隔を調整します。

<style id="_css">内の既存のCSSの下に、次のコードを追加してください。

section {
    margin-top: 80px;
}

ul {
    padding: 0;
    list-style: none;
}

li {
    margin: 16px 0;
}

6. モバイル画面に対応する

PC画面では大きな見出しがよく見えますが、モバイル画面では大きすぎる場合があります。

<style id="_css">の一番下に、次のコードを追加してください。

@media (max-width: 640px) {
    h1 {
        font-size: 42px;
    }
}

プレビュー領域の幅を狭くして、見出しのサイズが変わるか確認してください。

画面サイズに応じてデザインを変更する方法をレスポンシブデザイン（Responsive Design）と呼びます。

7. 公開サイトに変更を適用する

ページが完成したら、最初にファイルを保存します。

WindowsまたはLinux：Ctrl + S
macOS：Cmd + S

プレビューで最終結果を確認してから、変更内容を公開サイトに反映します。

トップページはすでに公開されているため、変更を適用（Apply Changes）を使用します。

ファイルエクスプローラーで/public/+page.essepageを右クリックします。
変更を適用（Apply Changes）を選択します。
適用が完了したら、もう一度ファイルを右クリックします。
ページを開く（Open Page）を選択します。

完成したランディングページが新しいタブで開きます。

変更を適用した後、キャッシュが更新されるまで最大1分程度かかる場合があります。公開ページに以前の内容が表示される場合は、少し待ってから再読み込みしてください。

Webサイトが完成しました

ここまで、次の作業を行いました。

HTMLで見出し、説明、ボタンを作成する
CSSで文字とボタンをデザインする
コンテンツを画面中央に配置する
製品やサービスの機能を紹介する
コンテンツ間の余白を調整する
モバイル画面に合わせて見出しのサイズを変更する
変更内容を公開サイトに適用する

短いコードから始め、内容を一つずつ追加しながらレスポンシブ対応のランディングページを完成させました。

次は、サンプルの見出し、説明、ボタンの色、機能一覧を、紹介したい製品やサービスに合わせて変更してみましょう。

次のステップ

ランディングページが完成したら、次のドキュメントに進んでください。

複数のページで構成されたサイトを作成する：個人Webサイトを作る
HTML要素とページ構造を詳しく学ぶ：ページ構造
ファイルとURLの関係を確認する：ページとURL
共通のメニューやフッターを複数ページで使用する：レイアウトとコンポーネント

言語

目次

Title