HTML+CSS研修（２）　HTMLの基礎

詳しく解説いたします。初心者にもわかりやすいように、ひとつずつ順を追って説明します。

✅ 1. HTMLの基本構造とは？

HTML（HyperText Markup Language）は、Webページの骨組みを作る言語です。
HTMLでは、タグ（<タグ名>）で要素を囲んで意味を持たせるのが基本です。

✅ 2. HTML文書の基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>私の初めてのページ</title>
  </head>
  <body>
    <h1>こんにちは、HTML！</h1>
    <p>これはHTMLの基本構造を示したサンプルです。</p>
  </body>
</html>

📌 解説：

  • <!DOCTYPE html>：この文書はHTML5ですという宣言（最初に必ず書きます）
  • <html>：HTML文書の開始。lang="ja"は日本語のページであることを示します
  • <head>：ページの情報（メタ情報）を記述
    • <meta charset="UTF-8">：文字コードの指定（日本語が文字化けしないように）
    • <title>：ブラウザのタブに表示されるタイトル
  • <body>：実際にブラウザに表示される内容

✅ 3. 基本的なHTMLタグとその例

① 見出しタグ（<h1>〜<h6>）

<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>
<h3>見出しレベル3</h3>

📌 意味：見出しの大きさ・重要度を示します（<h1>が最も重要）

② 段落タグ（<p>）

<p>これは段落（パラグラフ）です。文章のまとまりに使います。</p>

📌 意味：文章のまとまりを表す

③ リンクタグ（<a>）

<a href="https://www.example.com">Exampleサイトへ</a>

📌 意味：href属性でリンク先を指定。クリックするとそのURLに飛びます。

④ 画像タグ（<img>）

<img src="image.jpg" alt="サンプル画像" width="300">

📌 意味：画像を表示するタグ。srcが画像のURL、altは代替テキスト（画像が表示されないときに表示される）
📌 注意：<img>は**閉じタグが不要な「空要素」**です。

⑤ 箇条書き（<ul>・<ol>・<li>）

■ 順不同リスト（<ul>）

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>ぶどう</li>
</ul>

■ 順序付きリスト（<ol>）

<ol>
  <li>ステップ1</li>
  <li>ステップ2</li>
  <li>ステップ3</li>
</ol>

📌 意味：<ul>は「順番がないリスト」、<ol>は「順番があるリスト」
<li>で各項目を表します。

⑥ 表（テーブル）のタグ（<table>, <tr>, <th>, <td>）

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>25</td>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>30</td>
  </tr>
</table>

📌 解説：

  • <table>：表の開始
  • <tr>：テーブルの行
  • <th>：見出しセル（太字・中央寄せ）
  • <td>：普通のセル（データ）

🎯 総まとめ（初心者がまず押さえるべきポイント）

タグ内容よく使う属性
<h1>〜<h6>見出し–
<p>段落–
<a>リンクhref（リンク先）
<img>画像src, alt, width
<ul>, <ol>, <li>箇条書き–
<table>, <tr>, <th>, <td>表border（※練習用）

📝 HTML基礎 練習問題セット（1日目用）

📌 目的

HTMLの基本構造、主要なタグ、属性の使い方を理解し、簡単なWebページが作成できることを目指します。

【例題1】HTML文書の構造

🔹問題：

次の内容をブラウザで表示するHTML文書を完成させてください。

表示イメージ：

ページタイトル：はじめてのHTML
本文見出し：HTML練習
本文段落：これはHTMLの練習ページです。

🔹解答欄（不完全なコードを補完する）：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>__________</title>
  </head>
  <body>
    <h1>__________</h1>
    <p>____________________________________</p>
  </body>
</html>

【例題2】リンクを作る

🔹問題：

「Googleで検索」というリンクを作り、クリックすると https://www.google.com に移動するようにしてください。

🔹解答欄：

<a href="____________________________">_____________________</a>

【例題3】画像を表示する

🔹問題：

画像ファイル sample.jpg を幅300pxで表示し、代替テキストは「風景の画像」としてください。

🔹解答欄：

<img src="__________" alt="__________" width="__________">

【例題4】箇条書きの作成

🔹問題：

好きなフルーツを3つ、順不同のリストで表示してください。

🔹解答欄（タグを埋める）：

<ul>
  <li>__________</li>
  <li>__________</li>
  <li>__________</li>
</ul>

【課題問題1】自己紹介ページの作成

🔹課題内容：

以下の条件に従って、自己紹介ページを作ってください（1ページHTML）。

✅ 内容に含める要素（すべて必須）：

  • <!DOCTYPE html> から始まるHTML5の基本構造
  • 自己紹介の「見出し（h1）」
  • 名前や趣味を紹介する段落（<p>）
  • 好きな食べ物を<ul>で列挙
  • SNSなどへのリンク（<a>タグ）
  • 自分の写真またはイメージ画像（<img>タグ）

🔹ページ例（構成イメージ）：

<!DOCTYPE html>
<html>
  <head>
    <title>自己紹介</title>
  </head>
  <body>
    <h1>私の自己紹介</h1>
    <p>こんにちは、〇〇です。〇〇が趣味です。</p>
    <ul>
      <li>ラーメン</li>
      <li>ピザ</li>
      <li>すし</li>
    </ul>
    <a href="https://twitter.com/〇〇">Twitterはこちら</a>
    <img src="myphoto.jpg" alt="自分の写真" width="200">
  </body>
</html>

🔹提出形式：

  • self_intro.htmlという名前で保存
  • ファイルにコメントで各タグの説明をつけてもOKです

【発展課題】会社紹介ページの骨組みを作ろう（任意）

内容：

  • 架空の会社を1つ作り、その会社の紹介ページを作る
  • 使うタグ：<h1>, <p>, <ul>, <img>, <a>, <table> など自由に使用可
  • 表（社員リストなど）を含めると加点