ページファイルの構造

Essepageでは通常、+page.essepageファイルを使ってWebページを作成します。

一般的なHTMLファイルと同じ方法で、HTML、CSS、JavaScriptを記述できます。

index.htmlのように、任意の名前のHTMLファイルを作成して使用することもできます。ただし、+page.essepageはファイルが置かれているフォルダーのパスでアクセスしますが、一般的なHTMLファイルはURLにファイル名まで入力する必要があります。

ページファイル	URL
/public/about/+page.essepage	/about
/public/about/index.html	/about/index.html

URLにファイル名を表示せず、フォルダーのパスをページアドレスとして使用する場合は、+page.essepageファイルを使用してください。

HTML文書の基本構造は省略できます

Essepageはページを構成するときに、省略されたHTML文書の基本構造を自動的に補います。

完全なHTML文書を記述することもできますが、一般的なページファイルでは繰り返し使用する基本タグを省略し、ページに必要な内容だけを記述できます。

一般的なHTML文書は次のような構造で記述します。

<!doctype html>
<html>
    <head>
        <title>About Us</title>
    </head>

    <body>
        <h1>About Us</h1>
        <p>Learn more about our website.</p>
    </body>
</html>

Essepageでは、この完全な構造を毎回記述する必要はありません。

次のように、ページタイトルとブラウザーに表示する内容だけを記述すれば十分です。

<head>
    <title>About Us</title>
</head>

<h1>About Us</h1>

<p>Learn more about our website.</p>

省略した<!doctype html>、<html>、<body>は、ページを構成するときに自動的に追加されます。

完全なHTML文書の構造を直接記述しても問題ないため、プロジェクトや作業方法に合った書き方を選択できます。

HTML

ページに表示する見出し、文章、画像、リンクなどのコンテンツは、一般的なHTMLと同じ方法で記述します。

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>

    <a href="/contact">Contact Us</a>
</main>

Essepageを使用するために、独自のHTML構文を新しく学ぶ必要はありません。すでに知っている標準的なHTML要素と属性をそのまま使用できます。

CSS

ページで使用するCSSは、同じファイル内の<style>要素に記述できます。

<h1>About Us</h1>

<p>Learn more about our website.</p>

<style>
    h1 {
        color: royalblue;
    }

    p {
        line-height: 1.7;
    }
</style>

ページファイル内に記述した<style>要素は、ページを構成するときに文書の<head>内へ自動的に配置されます。

そのため、CSSファイルを別に作成しなくても、現在のページに必要なデザインをすぐに追加できます。

複数のページで同じデザインを使用する場合は、CSSを別のファイルやレイアウトに分離することをおすすめします。詳しい方法はCSSとアセットをご覧ください。

JavaScript

一般的なWebページと同じように、<script>要素も同じファイル内に記述できます。

<button id="messageButton">Show Message</button>

<p id="message"></p>

<script>
    const button = document.getElementById("messageButton");
    const message = document.getElementById("message");

    button.addEventListener("click", () => {
        message.textContent = "Hello from Essepage!";
    });
</script>

ボタンをクリックすると、次のメッセージが表示されます。

Hello from Essepage!

一般的なWebページで使用するJavaScriptやブラウザーAPIをそのまま使用できます。

一般的なHTML文書では、<script>の位置によって実行されるタイミングが変わることがあります。Essepageでは、ページファイルに直接記述した<script>は、基本的にページのコンテンツがすべて表示された後に実行されます。

そのため、関連するHTML要素が先に作成されていることを確認するために、<script>の位置を調整する必要はありません。ただし、コードの構造を分かりやすくするため、関連するHTMLの下に<script>を記述することをおすすめします。

ページが表示される前にコードを実行する場合は、<script>要素にdata-essepage-before-render属性を追加します。

<script data-essepage-before-render>
    // ページが表示される前に実行するコード
</script>

ただし、コードが長くなる場合や、複数のページで同じJavaScriptを使用する場合は、別のファイルに分離することをおすすめします。

JavaScriptのメッセージやエラーを確認する方法については、コンソールとデバッグをご覧ください。

コードの記述順序

Essepageのページファイル内で、HTML、<style>、<script>を必ず次の順序で記述する必要はありません。

ただし、次のように整理すると、ページの構造を理解して管理しやすくなります。

<head>に記述するタイトルとメタデータ
画面に表示するHTML
ページで使用するCSS
ページで実行するJavaScript

<head>
    <title><!-- タイトル --></title>
</head>

<main>
    <!-- HTML -->
</main>

<style>
    /* CSS */
</style>

<script>
    // JavaScript
</script>

この順序で記述すると、ページが長くなっても、ページ情報、コンテンツ、デザイン、動作を区別して確認できます。

ページ全体の例

これまでに説明した内容を一つのページファイルにまとめると、次のようになります。

<head>
    <title>About Us</title>
</head>

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>

    <button id="messageButton">Learn More</button>

    <p id="message"></p>
</main>

<style>
    main {
        max-width: 640px;
        margin: 80px auto;
        padding: 20px;
        font-family: system-ui;
    }

    h1 {
        color: royalblue;
    }

    p {
        line-height: 1.7;
    }

    button {
        padding: 12px 20px;
        color: white;
        background: royalblue;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }
</style>

<script>
    const button = document.getElementById("messageButton");
    const message = document.getElementById("message");

    button.addEventListener("click", () => {
        message.textContent = "Thank you for visiting our website.";
    });
</script>

このページファイルには、次の内容が含まれています。

<head>: ページタイトルとメタデータ
<main>: 訪問者に表示するコンテンツ
<style>: ページに適用するCSS
<script>: ページの動作を実装するJavaScript

HTML、CSS、JavaScriptを一つのファイルで確認できるため、ページをすばやく作成して編集できます。

レイアウトとコンポーネントを使用する

Webサイトが大きくなると、メニュー、ヘッダー、フッターなど、複数のページで共通するコードを毎回記述するのは不便です。

このような共通コードは、レイアウトやコンポーネントに分離できます。

レイアウトを使用すると、ページファイルのコンテンツはレイアウトで指定された位置に表示されます。そのため、ページファイルにはページごとに異なるコンテンツだけを記述できます。

コンポーネントを使用すると、メニュー、ボタン、カードなど、繰り返し使用する要素も別のファイルで管理できます。

詳しい使用方法については、レイアウトとコンポーネントをご覧ください。

次のステップ

ページファイルの基本構造を理解したら、次のドキュメントへ進んでください。

メニューやリンクでページを接続する: ナビゲーションとリンク
複数のページで共通構造を使用する: レイアウト
繰り返し使用する要素を別のファイルで管理する: コンポーネント
CSSと画像ファイルを管理する: CSSとアセット
<head>の詳しい動作を確認する: <head>を理解する
Essepage独自の要素の使用方法を確認する: Essepageタグ

言語

目次

Title