HTML 複数ページの作成は2ページ目以降をindex.htmlにリンク

HTMLで複数のページを作成してindex.html以外も作成していこうと思います。

基本的な作成しかしないので、HTMLで複数のページを作成するときはファイル作成や共通部分を同じやり方を繰り返すだけで作れます。

そして2ページ目以降はindex.htmlにリンクしてトップページから複数のページに移動できるように作成していこうと思います。

1. HTMLで複数ページ作成に使うindex.html
2. HTMLファイルを増やして複数のページ作成
3. まとめ

HTMLで複数ページ作成に使うindex.html

HTMLで複数のページを作成するときに使うファイルがindex.htmlです。

index.htmlはウェブサイトの基点として使えるHTMLファイルなので、index.htmlを作成して複数のページでも使いまわすことができます。

複数ページで共通して使えるヘッダーやフッター、グローバルメニューはindex.htmlの記述をそのまま使って複数ページに使います。

<!DOCTYPE html>
<html lang="ja">
    <head>　
        <meta charset="utf-8">　
        <title>サイトタイトル</title>　
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>　
        <header>ヘッダー</header>　
        <nav>ナビ</nav>　
        <article>　
            <h1>タイトル</h1>　　
            <section>　　
                <h2>タイトル</h2>　　
                <p>コンテンツの内容</p>　　
            </section>　
        </article>
        <footer>フッター</footer>
    </body>
</html>

HTMLのサンプルとしては上記のように簡単にしてみましたが、それぞれのindex.htmlを作成してあればheader要素、nav要素、article要素、footer要素にいろいろ記述がはいってると思いますが、複数のページを作成するときには複数ページ用のファイルを作成してindex.htmlを丸ごとコピペします。

HTMLファイルを増やして複数のページ作成

作成したindex.htmlをホームページとして使用するので、例えばホームページを起点として「店舗案内」「アクセス」「メニュー」「お問い合わせ」のような4つのHTMLファイルを作成して複数のページを作成していくイメージです。

index.htmlをコピペして複数ページを作成するときに、複数ページで共通するグローバルメニューなどでリンク経路を先に作っておき、最後に丸ごとindex.htmlをコピペするだけの状態にしておきます。

2ページ目以降はindex.htmlにリンク

複数のファイルを作成したときに2ページ目以降の次のページが開けないので、HTMLで作成した複数ページをindex.htmlにリンクしてリンク先に飛べるようにすることから始めます。

ウェブサイトのメインになるindex.htmlのグローバルメニューの部分で複数ページをリンクします。

<nav>　
    <ul>　　
        <li><a href="index.html">ホーム</a></li>　　
        <li><a href="about.html">店舗案内</a></li>　　
        <li><a href="access.html">アクセス</a></li>　　
        <li><a href="menu.html">メニュー</a></li>　　
        <li><a href="contact.html">お問い合わせ</a></li>　
    </ul>
</nav>

上記のHTML記述はグローバルメニューにするためにHTMLのリストタグで記述しています。

関連【HTML】ul ol liの使い方を覚えてリストを作れるようにする

li要素の中にaタグでhref属性を使用して複数ページをリンク先に指定します。

このときには、これから複数ページにするHTMLファイル名をリンク先にするので、どんなファイル名にするか決めておき、リンク先名とファイル名は統一できるようにしておきます。