各ページのリンクを設定してページを繋ぐ
前回までで、全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.webp" 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©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>以上で全てのページにリンクが設定できたので、どのページからも他のページに移動することができるようになりました。
次回からはサイトを公開するための準備に入っていきます。
実際に無料のレンタルサーバーを用意する方法についても解説します。