トップページ  > ウェブ制作チュートリアル  > 仮のリンク先ページを作る
第6章 メインメニューのリンクを指定する

★仮のリンク先ページを作る

仮のリンク先ページを作る

広告

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

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

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

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

HTMLソース(product.html)

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

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

HTMLソース(profile.html)

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

HTMLソース(contact.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ファイルを作成したフォルダは上図のような状態になっています。

まとめ
  1. ハイパーリンクは、a要素でマークアップする
  2. ハイパーリンクを指定するには、リンク先のファイル名が必要
  3. 指定したリンク先にファイルが存在していなければ、リンク切れとなる
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ