HTML講座 / 複数ページで小さなWebサイトを作る

小さな複数ページサイトは、HTMLファイルを分けて保存し、各ページの共通メニューで相互に接続すると作れます。この実習ではホーム、紹介、問い合わせ練習の三ページを作ります。フォームはHTMLの入力とGET値の確認用で、実際にメッセージを届ける機能は含みません。

三つのファイルを用意する

新しいsmall-siteフォルダーを作り、次の構成でUTF-8のプレーンテキストファイルを保存します。名前と拡張子を正確にそろえ、余分な.txtが付いていないか確認します。

small-site/
  index.html
  about.html
  contact.html

同じ場所にあるためabout.htmlで紹介ページへ移動できます。後で別のフォルダーへ移した場合はリンクも直します。相対位置の考え方は相対パスの実習で確認できます。まず文字だけの基本版を完成させ、画像などはその後に追加します。

ホームページを作る

次のコード全体をindex.htmlへ保存します。header、nav、mainはページ領域の役割に合わせています。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home | Small Garden</title>
  <meta name="description" content="Home of the Small Garden practice site, with links to About and a contact-form exercise.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html" aria-current="page">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Small Garden</h1>
    <p>A short guide for people starting to grow plants.</p>
  </main>
  <footer><p>Small Garden practice</p></footer>
</body>
</html>

開くと「Small Garden」の見出しとメニューが表示されます。紹介と問い合わせのファイルをまだ作っていない段階では、そのリンク先は開けません。メニューのURLは三ページで同じにし、現在のページだけにaria-current="page"を付けます。コード内のh1は実習用の文書の見出しです。

紹介と問い合わせ練習のページを作る

次の二つを順にabout.html、contact.htmlとして保存します。各コードは完全な文書です。他の文書のhtmlやmainの中へ貼り足さず、ファイル全体を置き換えてください。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About | Small Garden</title>
  <meta name="description" content="An introduction to the Small Garden practice site for people beginning to grow plants.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html" aria-current="page">About</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <h1>About</h1>
    <p>Small Garden is a practice site for people beginning to grow plants.</p>
  </main>
  <footer><p>Small Garden practice</p></footer>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact | Small Garden</title>
  <meta name="description" content="Practice entering and validating a name and test message without delivering a real contact request.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html" aria-current="page">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Contact-form practice</h1>
    <p>This example does not deliver a message. Use test text only.</p>
    <form method="get">
      <p><label for="visitor-name">Name</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">Message</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">Inspect entered values</button>
    </form>
  </main>
  <footer><p>Small Garden practice</p></footer>
</body>
</html>

各ページに固有のtitle、説明、見出しを使います。メニューは同じ移動先でも、aria-currentを付ける位置をそのページへ合わせます。見た目の太字だけでなく、現在位置の意味も伝える指定です。

問い合わせ練習では、空の必須欄で送信を試し、次に架空の値を入れてGETの値を確認します。「Inspect entered values」は誰かにメッセージを送る機能ではありません。URLに値が出るため実在の個人情報を使いません。受信サービスにはサーバー、プライバシー対策、スパム対策、明確な成功・失敗表示が必要です。フォームの送信と受信の違いも参照できます。

完成条件と追加練習を決める

基本版を完成させたら、紹介へ役立つリストを追加、適切なalt付きの画像を追加、任意の補足をdetailsにする、と一つずつ拡張できます。変更ごとに移動と文法、キーボードを再確認すると原因を追いやすくなります。共通メニューの変更は三つすべてへ反映し、現在位置の指定は各ページで変えます。

完成したサイトを点検する

ホームからだけでなく紹介と問い合わせからも、他の二ページへ移動します。タブの題名とh1がそのページを説明するか、Tabでリンクとフォームへ移動できるかを確認します。空欄の送信と架空の入力後のURLを比較してください。

各ファイルをNu HTML Checkerで検査し、修正後に再確認します。公開先ではファイル名の大文字・小文字や配置場所が違う場合もあるので、相対パスを再び点検します。文法検査と実際の操作はHTMLの検査の方法で分けて記録します。この実習ではメッセージが配送されないことは想定どおりで、HTMLの画面と移動を作って確認することが目標です。