ナビゲーションとリンク

Webサイトに複数のページを作成したら、リンクを使ってページ同士を接続できます。

Essepageでも、一般的なHTMLと同じように<a>要素のhref属性を使ってリンクを作成します。/public内のフォルダーとページファイルの構成からURLが生成されるため、別のルーターをインストールしたり、ナビゲーション設定ファイルを作成したりする必要はありません。

リンクには/publicと+page.essepageを含めず、サイトのルートを基準としたURLパスを入力します。

<a href="/about">About Us</a>

リンクをクリックすると、サイトの/aboutページへ移動します。

ページのURLを確認する

ページをリンクするには、まずそのページのURLを確認する必要があります。

次のようなファイル構成があるとします。

/public
├── +page.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

各ページは次のURLに対応します。

リンクのhrefには、ページファイルのパスではなく、訪問者が使用するURLパスを入力します。

<a href="/about">About Us</a>

次のようにページファイルのパスを入力しないでください。

<a href="/public/about/+page.essepage">About Us</a>

+page.essepageというファイル名はURLに表示されません。

index.htmlのような一般的なHTMLファイルにリンクする場合は、ファイル名まで入力します。

<a href="/about/index.html">About Us</a>

ページファイルとURLの関係について詳しくは、ページの作成とURLをご覧ください。

サイト内のページをリンクする

同じサイト内のページをリンクするときは、サイトのルートを基準としたパスを使用することをおすすめします。

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

各リンクは次のページへ移動します。

ナビゲーションメニューを作成する

複数のリンクを<nav>要素の中に記述すると、基本的なナビゲーションメニューを作成できます。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

<main>
    <h1>Welcome to Our Website</h1>

    <p>Explore our website using the menu above.</p>
</main>

簡単なCSSを追加して、メニューリンクの間隔を調整することもできます。

<style>
    nav {
        display: flex;
        gap: 20px;
    }
</style>

訪問者がサイトの主要なページを見つけやすいように、すべてのページでメニューの順序と名前を統一することをおすすめします。

複数のページでメニューを共有する

各ページに同じメニューを直接記述すると、メニューを変更するたびにすべてのページを修正する必要があります。

ページが増えたら、共通メニューをレイアウトやコンポーネントに分離し、一か所で管理することをおすすめします。

サイト全体で共通メニューを使用する場合は、/public/+layout.essepageファイルにレイアウトを記述できます。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

<essepage-slot></essepage-slot>

<style>
    nav {
        display: flex;
        gap: 20px;
    }
</style>

各ページファイルのコンテンツは、<essepage-slot>が置かれている位置に表示されます。

ページファイルで<main>要素を使用している場合、その要素もスロットの位置にそのまま表示されます。

共通メニューを一か所で管理すると、複数のページを個別に修正せずにリンクを追加または変更できます。

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

外部Webサイトにリンクする

別のWebサイトへ移動するリンクには、https://から始まる完全なURLを入力します。

<a href="https://example.com">Visit Example</a>

次のステップ

ナビゲーションとリンクの作成方法を理解したら、次のドキュメントへ進んでください。

• URLの一部を値として使用するページを作成する: パラメーターフォルダー
• 存在しないURLに表示するページを作成する: カスタム404ページ
• 複数のページで共通メニューを使用する: レイアウト
• メニューや繰り返し使用する要素を別のファイルで管理する: コンポーネント
• Essepageのページ移動の仕組みを確認する: CSRとSSR