結論: ファイルを増やし、nav でつなぎ、CSS は1つにまとめる

POINT2ページ目は、新しい .html ファイルを同じ骨組みで作るだけ。nav の中に a を並べればメニューになり、href はファイル名だけでつながる。CSS は style.css に分けて link で読み込むと、全ページの見た目を1か所で変えられる。

今回、フォルダの中はこの3ファイルになります。全部同じフォルダに置くのがポイントで、同じフォルダにあるファイル同士は、名前だけでつながります。

📁 html-nyumon/
├─ index.html（自己紹介。トップページ）
├─ contact.html（お問い合わせ。今回作る2ページ目）
├─ style.css（見た目の指示書。今回 style タグから引っ越し）
└─ neko.png（猫の画像）

今日のコード（3ファイル。コピーして使えます）

動画の最後にできあがった3つのファイルです。それぞれ右上の「コードをコピー」ボタンで全文が入ります。猫の画像は第2回の記事からダウンロードできます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="index.html">自己紹介</a>
    <a href="contact.html">お問い合わせ</a>
  </nav>
  <h1>はじめてのページ</h1>
  <h2>自己紹介</h2>
  <table>
    <tr>
      <th>好きなもの</th>
      <th>理由</th>
    </tr>
    <tr>
      <td>猫</td>
      <td>かわいいから</td>
    </tr>
    <tr>
      <td>カレー</td>
      <td>おいしいから</td>
    </tr>
  </table>
  <p>IT業界をやさしく案内します。</p>
  <p>これは1行目。<br>
  これは2行目。</p>
  <ol>
    <li>開発の流れ</li>
    <li>職種図鑑</li>
    <li>用語集</li>
    <li>学び方</li>
  </ol>
  <a href="https://it-nyumon.com/">サイトへ</a>
  <a href="https://it-nyumon.com/">
    <img src="neko.png" alt="ねこ" width="200">
  </a>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>お問い合わせ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="index.html">自己紹介</a>
    <a href="contact.html">お問い合わせ</a>
  </nav>
  <h1>お問い合わせ</h1>
  <form>
    <p>
      名前
      <input type="text" placeholder="太郎">
    </p>
    <p>
      年齢
      <input type="number">
    </p>
    <p>
      誕生日
      <input type="date">
    </p>
    <p>
      <label>
        <input type="checkbox">
        お知らせを受け取る
      </label>
    </p>
    <p>
      <button>送信</button>
    </p>
  </form>
</body>
</html>
style.css
h1 { color: tomato; }
p { font-size: 20px; }
body { background: lightcyan; }
h1 { text-align: center; }
th, td { border: 1px solid gray; }
table { border-collapse: collapse; }
th, td { padding: 8px; }
POINTnav は「ここはメニューです」という意味の札。中に a タグ（第2回で覚えたリンク）を並べるだけでメニューになる。
  • <nav>: メニューを入れる箱。見た目は変わりませんが、「ここがメニュー」とブラウザや検索エンジンに伝わります。
  • href="contact.html": 同じフォルダにあるファイルは、ファイル名だけで指定できます。https:// から始まる外のサイトのリンクと違い、自分のフォルダの中を指しています。
  • 全ページに同じ nav を貼る: 2ページ目にもメニューがないと、戻ってこられません。ページを増やしたら、全部の nav に a を足します。

フォームは、index.html から切り取って contact.html に貼り付けました。動画ではこの「引っ越し」をそのまま見せています。ファイルが分かれても、書き方は第5回と同じです。

CSS を別ファイルにする理由

POINTstyle タグの中身を style.css に引っ越し、各ページの head に <link rel="stylesheet" href="style.css"> の1行を入れる。これで全ページが同じ見た目になり、直すのは1か所で済む。

第3回では、CSS を index.html の <style> の中に書きました。でもそれだと、index.html にしか効きません。contact.html を開くと、背景は白いままです。

そこで、style タグの中身をそのまま style.css というファイルに移し、HTML 側には「スタイルシートはこっちを見て」という link タグの1行だけを残します。link タグは <link rel="stylesheet" href="style.css"> の形で、input と同じく閉じタグがいりません。

動画の最後で、style.css の背景色を lightyellow から lightcyan に1か所変えると、自己紹介もお問い合わせも同時に水色になります。ページが10個あっても、直すのは1か所。これが CSS を分ける最大の理由です。

link タグは、スタイルを効かせたい全ページに入れます。新しいページを作ったのに見た目が変わらないときは、head に link タグの1行を入れ忘れていることがほとんどです。

よくある質問

ファイル名は何でもいいですか？

半角の英数字で、拡張子を .html にすれば基本的に自由です。ただし index.html は「そのフォルダで最初に開かれるページ」という決まった名前なので、トップページは index.html にしておきます。日本語や空白はトラブルのもとなので避けます。

3ページ目を増やすには？

同じ骨組みで新しい .html ファイルを作り、head に link タグの1行を入れ、nav の中に a タグを1つ足します。メニューは全ページに同じものを貼るので、増やしたときは全部の nav に足すのを忘れないようにします。

link タグはどこに書きますか？

head の中です。title の後ろに <link rel="stylesheet" href="style.css"> と書きます。スタイルを効かせたいページ全部に、同じ1行を入れます。

ファイルをフォルダに分けたいときは？

href や src にフォルダ名から書きます（例: pages/contact.html、css/style.css）。最初は全部同じフォルダに置くのがいちばん簡単で、名前だけでつながります。