複数のWebページをリンクでつなぐ

ハイパーリンク、いわゆる「リンク」を張るには、<a>タグを使います。

今回は、企業サイト風に、

・TOPページ
・会社案内
・お問い合わせ

の3ページを用意して、それぞれを繋いでみたいと思います。

ページの数だけhtmlファイルを用意する

まずは3つのhtmlファイルを用意します。

・TOPページは index.html
・会社案内ページは about.html
・お問い合わせページは inquiry.html

として、同じディレクトリに配置します。

index.htmlの中身は一旦下記のようにしておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TOPページ</title>
  </head>
  <body>
    <h1>TOPページ</h1>
    <ul>
      <li>TOPページ</li>
      <li>会社案内</li>
      <li>お問い合わせ</li>
    </ul>
  </body>
</html>

ulタグ、liタグは、要素をリスト表示するときに使用します。
ブラウザで見るとこんなふうになります。

このリスト内のテキストを、それぞれリンクにします。簡単です。
基本的にはリンクにしたい要素を<a>タグで囲むだけです。

例えば、会社案内へのテキストリンクだとこうなります。

<li><a href="about.html">会社案内</a></li>

href属性では、リンク先のファイルの場所を指定します。

例えば仮に、companyフォルダの中にabout.htmlがあれば、href=”company/about.htmlとします。

index.html全体のコードはこうです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TOPページ</title>
  </head>
  <body>
    <h1>TOPページ</h1>
    <ul>
      <li><a href="index.html">TOPページ</a></li>
      <li><a href="about.html">会社案内</a></li>
      <li><a href="inquiry.html">お問い合わせ</a></li>
    </ul>
  </body>
</html>

ほぼ一緒なのですが、念のため、ほか2つのコードも載せておきます。

about.htmlです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>会社案内</title>
  </head>
  <body>
    <h1>会社案内</h1>
    <ul>
      <li><a href="index.html">TOPページ</a></li>
      <li><a href="about.html">会社案内</a></li>
      <li><a href="inquiry.html">お問い合わせ</a></li>
    </ul>
  </body>
</html>

inquiry.htmlです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>お問い合わせ</title>
  </head>
  <body>
    <h1>お問い合わせ</h1>
    <ul>
      <li><a href="index.html">TOPページ</a></li>
      <li><a href="about.html">会社案内</a></li>
      <li><a href="inquiry.html">お問い合わせ</a></li>
    </ul>
  </body>
</html>

ブラウザでTOPページを見てみましょう。