第6章メインメニューのリンクを指定する：仮のリンク先ページを作る

HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / ウェブ制作チュートリアル / 第6章メインメニューのリンクを指定する：仮のリンク先ページを作る

第6章　メインメニューのリンクを指定する

サンプルサイトのメインメニュー部分をクリックできるリンクにしていきます。リンクを指定するには、リンク先のファイル名が必要になります。

サンプルサイト制作では、現時点ではHTMLファイルはindex.htmlしか作っておらず、リンク先となる予定の「製品紹介」「会社概要」「お問合せ」の各ページに該当するHTMLファイルは、まだありません。

そこで、ハイパーリンクの指定をする前に、まずリンク先の各ページとなる仮のHTMLファイルを作ってしまうことにします。作成するファイル名は、それぞれproduct.html、profile.html、contact.htmlとしましょう。

現在作成している途中のindex.htmlをコピーしても良いですし、新規作成で作っても構いません。リンク切れを起こさないための仮ファイルですので、HTMLソースの内容は以下のようなごく簡単な記述で十分です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>製品紹介｜ウェブサンプル株式会社</title>
</head>
<body>
<h1>製品紹介</h1>
</body>
</html>

上記のHTMLソースはproduct.htmlの作成例です。同様にprofile.html・contact.htmlについても、「製品紹介」の部分を「会社概要」・「お問合せ」にしたものをそれぞれ作成してください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会社概要｜ウェブサンプル株式会社</title>
</head>
<body>
<h1>会社概要</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お問合せ｜ウェブサンプル株式会社</title>
</head>
<body>
<h1>お問合せ</h1>
</body>
</html>

product.html、profile.html、contact.htmlは、index.htmlと同じフォルダ内に保存します。

リンク先となる3つのHTMLファイルを作成したフォルダは上図のような状態になっています。

まとめ