HTMLで複数のページを作成してindex.html以外も作成していこうと思います。
基本的な作成しかしないので、HTMLで複数のページを作成するときはファイル作成や共通部分を同じやり方を繰り返すだけで作れます。
そして2ページ目以降はindex.htmlにリンクしてトップページから複数のページに移動できるように作成していこうと思います。
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のリストタグで記述しています。
li要素の中にaタグでhref属性を使用して複数ページをリンク先に指定します。
このときには、これから複数ページにするHTMLファイル名をリンク先にするので、どんなファイル名にするか決めておき、リンク先名とファイル名は統一できるようにしておきます。
複数ページをリンクするaタグの書き方
<a href=”リンク先URL”>表示する文章</a>
例えば複数ページにするファイル名が「contact.html」だとしたら
<a href=”contact.html”>お問い合わせ</a>
のように書きます。
aタグに挟まれた部分がリンクテキストです。
フォルダの中のファイル位置が違うとリンクが機能しないので注意です。
今回はメインフォルダの下に複数作成するファイルを置いてるのでファイル名だけを書けばリンク先に飛べるようにしてます。
このリンクするaタグの書き方は、現在見てるブラウザの画面でリンク先のページを開く方法です。
リンクする書き方の方法はもう一つあり、リンクをクリックするとリンク先が別タブで開く書き方があります。
リンクを別タブで開く書き方
複数のページを作成したページを繋ぐリンクをクリックしたら、リンク先のページが別タブで開く書き方です。
<a href=”リンク先パス” target=”_blank”>リンクテキスト</a>
href=””とtarget=”_blank”の間は半角スペースを空けます。
リンクする書き方が変わってもブラウザの実際の表示には違いはないですが書き方が変わることでリンク先の開き方だけが変わります。
コンテンツの文章を読む途中でリンクしてる場合、リンク先からまた元のコンテンツに戻りやすいようにする感じで使うのかもしれません。
それぞれのウェブサイトによって使い分けしてみてください。
index.htmlをコピペして増やす
先にindex.htmlに複数ページをリンクしておいたので、あとはindex.htmlをコピペしてページを複数にして増やしていくだけです。
まずはメインフォルダの中にあるindex.htmlを同じフォルダ内にコピペします。
index.htmlをコピペしたらコピペしたほうのindex.htmlのファイル名を複数のページとして使用したい「ファイル名.html」に変更します。
例えばお問い合わせを作成するファイルなら「contact.html」のようにします。
それぞれ作成する目的の複数ページは異なるので適宜、名前変更してください。
2ページ目以降のコンテンツは削除
index.htmlを丸ごとコピペしたので同じコンテンツが存在してます。
重複するページにならないように複数のページにするHTMLファイル側のコンテンツをバッサリ削除します。
このときにheaderやnavのグローバルメニュー、footerなどは複数のページでも共通して使用するなら削除しないで効率良く使いまわします。
複数ページで共通部分を効率良く使い回すときには共通になる部分(例：ヘッダー)をインクルードして使い回すやり方を検討しても良いかと思います。
そして最終的には複数ページ作成が終わったら、その複数ページごとに必要なコンテンツ部分を作成していきます。
まとめ
HTMLで複数のページを作成してindex.htmlのグローバルメニューに作成した複数のページをリンクしました。
index.htmlはサイトの基点になっていて、基点にあるグローバルメニューから作成した主要な複数のページをリンクで繋ぐことで、ユーザーにも検索エンジンにも、それぞれの複数ページの重要度を伝えながら辿りつきやすいHTML構造にすることができます。
HTMLで複数ページの作成にはリンク構造で伝えやすさが重要ということになります。
複数のページを作成してindex.htmlにアーカイブでリンクをまとめるような場合にはサイトが成長するごとにindex.htmlがアーカイブに埋め尽くされてしまうのでページネーションの実装を検討して2ページ、3ページとページ移動を可能にしても良いかと思います。
