HTMLの基本｜最初のページを作ろう【ホームページ制作入門 第4回】

シリーズ第4回は、いよいよ制作のスタートです。Webページの骨組みを作る言語「HTML」を、実際に手を動かして学びます。

HTMLとは

HTML（HyperText Markup Language）は、文章に「これは見出し」「これは段落」「これはリンク」といった意味づけをする言語です。プログラミング言語ではなく、「マークアップ言語」と呼ばれます。

準備：ファイルを作る

1. パソコンに「my-site」というフォルダを作る
2. Visual Studio Code でそのフォルダを開く
3. 「index.html」という名前のファイルを作る（トップページのファイル名の定番です）
4. Windowsでは、エクスプローラーの設定で「ファイル名拡張子」を表示しておく（「index.html.txt」になる失敗を防げます）

最小のHTMLを書いてみる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ヘアサロン サンプル | 小さな美容室</title>
</head>
<body>
  <header>
    <h1>ヘアサロン サンプル</h1>
    <nav>
      <a href="index.html">トップ</a>
      <a href="menu.html">メニュー</a>
    </nav>
  </header>
  <main>
    <p>こんにちは。駅から徒歩3分の小さな美容室です。</p>
    <img src="images/salon.jpg" alt="明るい店内の様子">
  </main>
  <footer>
    <p>&copy; Hair Salon Sample</p>
  </footer>
</body>
</html>

題材は、第2回で決めた美容室サイトです（自分のサイトに置き換えてもOKです）。保存して、index.html をブラウザにドラッグすると表示されます。画像は、images フォルダに入れたファイルを、フォルダ名から書く「相対パス」（images/salon.jpg）で指定しています。画像がまだなければ、枠だけ表示されても問題ありません。

各部分の役割

• <head>：ページの情報（タイトルや文字コードなど）。画面には表示されない
• <body>：画面に表示される中身
• <title>：ブラウザのタブや検索結果に表示されるタイトル

よく使うタグ

つまずきやすいポイント

• タグは基本的に「開始タグ」と「終了タグ」のペアで書く
• h1はページに1つが基本。見出しは大きさでなく「構造」で選ぶ
• 内容を伝える画像には alt（代替テキスト）を書く。読み上げソフトや検索エンジンが内容を理解する手がかりになる（飾りだけの画像は alt=”” でもOK）
• 文字化けしたら、ファイルの文字コードを UTF-8 で保存し直す

練習問題

自己紹介ページを作ってみましょう。h1に名前、p に紹介文、ul で好きなもの3つ、a で好きなサイトへのリンクを入れてください。

まとめと次回予告

HTMLで、ページの骨組みができました。ただ、まだ見た目は素っ気ないですよね。次回は「CSS」で色や文字、余白を整えていきます。