最終更新日：2021.04.01
公開日：2021.03.30

ワークショップ

HTML&CSS入門 WEBサイトを作る

VOL17ページをリンクで繋ぐ

今回は作成した3ページにそれぞれリンクを設定して、ページ間の行き来ができるように設定していきます。

この記事のポイント

サイト内で移動できるようにリンクを設定する
左上の「PROFILE」はトップページにリンク

各ページのリンクを設定してページを繋ぐ

前回までで、全3ページのHTMLとCSSのコーディングが完了しました。
それぞれのページをブラウザで表示すると、見た目は全てデザイン案の通りになっていると思います。

しかしまだa要素のリンクを設定していないため、3ページは全て孤立したページのままになっています。
そこで今回は仕上げとして、これらの3つのページにそれぞれリンクを設定してページ間の移動ができるようにしていきます。

リンクの設定は全てa要素のhref属性に指定してきます。

トップページのリンク設定

まずはトップページのリンクを設定していきましょう。
トップページでは以下のa要素に対してリンクを設定します。

「index.html」を開いて、以下の赤字のコードを記述してください。

index.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PROFILE</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header id="header">
      <div class="wrapper">
        <p class="logo"><a href="index.html">PROFILE</a></p>
        <nav>
          <ul>
            <li><a href="index.html">トップ</a></li>
            <li><a href="information.html">お知らせ</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <section id="content1">
        <div class="wrapper">
          <figure><img src="./fox.png" alt="プロフィール画像"></figure>
          <div class="text_area">
            <h1>こんにちは！</h1>
            <p>わたしはキツネです。<br>HTMLとCSSがちょっとだけ得意。<br>よかったら仲良くしてください！</p>
          </div>
        </div>
      </section>
      <section id="content2">
        <div class="wrapper">
          <h2>お知らせ</h2>
          <ol>
            <li><a href="information.html#part1"><time datetime="2021-04-12">2021.04.12</time>お問い合わせページを追加しました。</a></li>
            <li><a href="information.html#part2"><time datetime="2021-04-05">2021.04.05</time>プロフィールを更新しました。</a></li>
            <li><a href="information.html#part3"><time datetime="2021-04-01">2021.04.01</time>PROFILEサイトを公開しました！</a></li>
          </ol>
          <p class="link_contact"><a href="contact.html">お問い合わせはこちら</a></p>
        </div>
      </section>
    </main>
    <footer id="footer">
      <p>Copyright&copy;2021 GRAYCODE.</p>
    </footer>
  </body>
</html>

href属性に記述する内容は、移動先のページのファイル名です。
お知らせページなら「information.html」、お問い合わせページなら「contact.html」、トップページは「index.html」を指定することで、それぞれのページに移動するリンクを設定することができます。

「お知らせ」では、「information.html#part1」とファイル名の後ろに「#part1」を付けています。
このシャープはアンカーと呼び、リンク先のページに一致するid属性のHTML要素まで移動させることができます。
例えば「information.html#part1」であれば、お知らせページの1つ目のarticle要素を表示することができます。

information.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お知らせ | PROFILE</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header id="header">
      <div class="wrapper">
        <p class="logo"><a href="#">PROFILE</a></p>
        <nav>
          <ul>
            <li><a href="#">トップ</a></li>
            <li><a href="#">お知らせ</a></li>
            <li><a href="#">お問い合わせ</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="information">
      <div class="wrapper">
        <h1>お知らせ</h1>
        <article id="part1">
          <p class="text_date"><time datetime="2021-04-12">2021.04.12</time></p>
          <h2>お問い合わせページを追加しました。</h2>
          <p class="text_content">お問い合わせページを追加しました。<br>当サイトについてのお問い合わせは、記載した電話番号、またはメールアドレスまでお寄せください。</p>
        </article>
        <article id="part2">
          <p class="text_date"><time datetime="2021-04-05">2021.04.05</time></p>
          <h2>プロフィールを更新しました。</h2>
          <p class="text_content">プロフィールを更新しました。</p>
        </article>
        <article id="part3">
          <p class="text_date"><time datetime="2021-04-01">2021.04.01</time></p>
          <h2>PROFILEサイトを公開しました！</h2>
          <p class="text_content">サイトを公開しました。<br>今後も更新ができるよう頑張ります。</p>
        </article>
        <p class="link_contact"><a href="#">お問い合わせはこちら</a></p>
      </div>
    </main>
    <footer id="footer">
      <p>Copyright©2021 GRAYCODE.</p>
    </footer>
  </body>
</html>

2つ目のarticle要素を表示させたいときは「information.html#part2」を指定します。
同じ要領で、「#id属性名」を指定してアンカーを設定することができます。

以上でトップページのリンク設定は完了しました。
続いて、お知らせページとお問い合わせページのリンクを設定していきましょう。

お知らせページのリンク設定

続いて、お知らせページのリンクを設定します。
お知らせページでは以下のa要素に対してリンクを設定します。

「information.html」を開いて、以下の赤字のコードを記述してください。

information.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お知らせ | PROFILE</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header id="header">
      <div class="wrapper">
        <p class="logo"><a href="index.html">PROFILE</a></p>
        <nav>
          <ul>
            <li><a href="index.html">トップ</a></li>
            <li><a href="information.html">お知らせ</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="information">
      <div class="wrapper">
        <h1>お知らせ</h1>
        <article id="part1">
          <p class="text_date"><time datetime="2021-04-12">2021.04.12</time></p>
          <h2>お問い合わせページを追加しました。</h2>
          <p class="text_content">お問い合わせページを追加しました。<br>当サイトについてのお問い合わせは、記載した電話番号、またはメールアドレスまでお寄せください。</p>
        </article>
        <article id="part2">
          <p class="text_date"><time datetime="2021-04-05">2021.04.05</time></p>
          <h2>プロフィールを更新しました。</h2>
          <p class="text_content">プロフィールを更新しました。</p>
        </article>
        <article id="part3">
          <p class="text_date"><time datetime="2021-04-01">2021.04.01</time></p>
          <h2>PROFILEサイトを公開しました！</h2>
          <p class="text_content">サイトを公開しました。<br>今後も更新ができるよう頑張ります。</p>
        </article>
        <p class="link_contact"><a href="contact.html">お問い合わせはこちら</a></p>
      </div>
    </main>
    <footer id="footer">
      <p>Copyright©2021 GRAYCODE.</p>
    </footer>
  </body>
</html>

これでお知らせページからトップページとお問い合わせページに移動できるようになりました。

お問い合わせページのリンク設定

最後にお問い合わせページのリンクを設定します。
お問い合わせページでは以下のa要素に対してリンクを設定します。

「contact.html」を開いて、以下の赤字のコードを記述してください。

contact.html コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お問い合わせ | PROFILE</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header id="header">
      <div class="wrapper">
        <p class="logo"><a href="index.html">PROFILE</a></p>
        <nav>
          <ul>
            <li><a href="index.html">トップ</a></li>
            <li><a href="information.html">お知らせ</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main id="contact">
      <div class="wrapper">
        <h1>お問い合わせ</h1>
        <p class="text_lead">お問い合わせはメール、または電話番号へお寄せください。</p>
        <article>
          <h2>メールでのお問い合わせ</h2>
          <p class="text_content">メールアドレス：<a href="mailto:test@gray-code.com">test@gray-code.com</a><br>お問い合わせいただく際は、本文にお名前とお問い合わせ内容を忘れずにご記入ください。<br>3日を目安にご連絡いたします。</p>
        </article>
        <article>
          <h2>電話でのお問い合わせ</h2>
          <p class="text_content">電話番号：<a href="tel:080-xxxx-xxxx">080-xxxx-xxxx</a><br>電話での受付は平日10時〜17時のみとなります。<br>時期によって繋がりづらいことがあるため、その際は上記のメールアドレスへご連絡いただきますようお願い申し上げます。</p>
        </article>
      </div>
    </main>
    <footer id="footer">
      <p>Copyright©2021 GRAYCODE.</p>
    </footer>
  </body>
</html>

以上で全てのページにリンクが設定できたので、どのページからも他のページに移動することができるようになりました。

次回からはサイトを公開するための準備に入っていきます。
実際に無料のレンタルサーバーを用意する方法についても解説します。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

VOL17ページをリンクで繋ぐ

この記事のポイント

目次

各ページのリンクを設定してページを繋ぐ

トップページのリンク設定

index.html コード例

information.html コード例

お知らせページのリンク設定

information.html コード例

お問い合わせページのリンク設定

contact.html コード例

こちらの記事は役に立ちましたか？

記事一覧