第2回：HTML基礎
🎯 学習目標
- HTMLの基本構造を理解する
- 主要なHTMLタグの使い方をマスターする
- 画像とリンクを含むページを作成できる
- 自己紹介ページを完成させる
📚 導入（5分）
前回課題の確認
前回作成した index.html を確認しましょう。以下の要素が含まれているか確認してください：
<!DOCTYPE html>宣言<html>,<head>,<body>の基本構造<title>タグによるページタイトル- 簡単な見出しと段落
HTMLタグの基本概念復習
HTMLタグは「開始タグ」と「終了タグ」のペアで要素を囲みます：
<タグ名>内容</タグ名>一部のタグは「空要素」で、終了タグを持ちません：
<img src="画像.jpg" alt="説明">
<br>
<hr>💡 理論学習（30分）
HTMLの基本構造（15分）
DOCTYPE宣言の意味と重要性
<!DOCTYPE html>- HTML5文書であることをブラウザに伝える
- 標準モードでレンダリングすることを保証
- 常にHTMLファイルの最初に記述
html要素：lang属性の設定
<html lang="ja">| lang属性値 | 言語 | 用途 |
|---|---|---|
ja | 日本語 | 日本向けサイト |
en | 英語 | 国際サイト |
zh-CN | 中国語（簡体字） | 中国向けサイト |
ko | 韓国語 | 韓国向けサイト |
重要性：
- 検索エンジンが言語を認識
- スクリーンリーダーが適切に読み上げ
- 自動翻訳の精度向上
head要素：ページの情報設定
<head>
<!-- 文字エンコーディング：日本語を正しく表示 -->
<meta charset="UTF-8">
<!-- レスポンシブデザインの基本設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページの説明（検索結果に表示） -->
<meta name="description" content="これは私の自己紹介ページです">
<!-- ページのキーワード（SEO用） -->
<meta name="keywords" content="自己紹介, ポートフォリオ, Web制作">
<!-- ページの作者 -->
<meta name="author" content="山田太郎">
<!-- ブラウザタブに表示されるタイトル -->
<title>山田太郎の自己紹介</title>
</head>body要素：実際に表示される内容
<body>
<!-- ここにページの内容を記述 -->
</body>基本タグの紹介（40分）
見出しタグ（h1-h6）：情報の階層化
<h1>大見出し（ページに1つ）</h1>
<h2>中見出し（セクションタイトル）</h2>
<h3>小見出し（サブセクション）</h3>
<h4>より小さい見出し</h4>
<h5>さらに小さい見出し</h5>
<h6>最小の見出し</h6>使用ルール：
- h1は1ページに1つだけ（メインタイトル）
- 階層を飛ばさない（h1→h3はNG）
- 見た目ではなく構造で選ぶ
段落タグ（p）：文章のまとまり
<p>これは段落です。段落は文章のまとまりを表します。</p>
<p>新しい段落は自動的に改行され、上下に余白ができます。</p>強調タグ：重要度とニュアンス
<!-- 重要性を示す強調（太字表示） -->
<strong>重要：締切は明日です</strong>
<!-- 強調・強勢（斜体表示） -->
<em>これは本当に素晴らしい</em>
<!-- 見た目だけの装飾（非推奨） -->
<b>太字</b>
<i>斜体</i>改行と水平線：レイアウト調整
<!-- 改行 -->
<p>1行目<br>2行目<br>3行目</p>
<!-- 水平線（区切り線） -->
<hr>リストタグ：情報の整理
順序なしリスト（箇条書き）
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3
<ul>
<li>サブ項目1</li>
<li>サブ項目2</li>
</ul>
</li>
</ul>順序付きリスト（番号付き）
<ol>
<li>最初にすること</li>
<li>次にすること</li>
<li>最後にすること</li>
</ol>
<!-- type属性で番号の種類を変更 -->
<ol type="A">
<li>選択肢A</li>
<li>選択肢B</li>
</ol>説明リスト（定義リスト）
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Languageの略。Webページの構造を定義する言語。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheetsの略。Webページの見た目を定義する言語。</dd>
</dl>リンクタグ（a）：ページ間移動
<!-- 外部サイトへのリンク -->
<a href="https://www.google.com">Googleへ</a>
<!-- 同じサイト内のページへのリンク -->
<a href="about.html">私について</a>
<!-- メールアドレスへのリンク -->
<a href="mailto:info@example.com">メールを送る</a>
<!-- 電話番号へのリンク（スマホでタップすると電話アプリが起動） -->
<a href="tel:090-1234-5678">090-1234-5678</a>
<!-- 新しいタブで開く -->
<a href="https://www.google.com" target="_blank">新しいタブでGoogleを開く</a>
<!-- ページ内リンク -->
<a href="#section1">セクション1へ</a>
<h2 id="section1">セクション1</h2>画像タグ（img）：画像の表示
<!-- 基本的な画像表示 -->
<img src="profile.jpg" alt="プロフィール写真">
<!-- サイズ指定 -->
<img src="logo.png" alt="会社ロゴ" width="200" height="100">
<!-- 外部URLから画像を読み込む -->
<img src="https://via.placeholder.com/300x200" alt="ダミー画像">
<!-- 相対パスと絶対パス -->
<img src="./images/photo.jpg" alt="相対パス">
<img src="/images/photo.jpg" alt="絶対パス">alt属性の重要性：
- 画像が表示されない時の代替テキスト
- スクリーンリーダーが読み上げる
- SEOにも影響
- アクセシビリティの観点から必須
🛠️ 実習（30分）
自己紹介ページの作成（30分）
プロジェクト構造
lesson02/
├── index.html
└── images/
└── profile.jpg（任意）完成版コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web制作を学んでいる山田太郎の自己紹介ページです">
<title>山田太郎の自己紹介</title>
</head>
<body>
<h1>山田太郎の自己紹介ページ</h1>
<hr>
<h2>プロフィール</h2>
<img src="https://via.placeholder.com/200x200" alt="プロフィール写真" width="200" height="200">
<p>
はじめまして、<strong>山田太郎</strong>です。<br>
現在、Web制作の勉強をしています。
</p>
<h2>基本情報</h2>
<dl>
<dt>名前</dt>
<dd>山田 太郎（やまだ たろう）</dd>
<dt>出身地</dt>
<dd>東京都</dd>
<dt>誕生日</dt>
<dd>1月1日</dd>
<dt>職業</dt>
<dd>Webデザイナー志望</dd>
</dl>
<h2>趣味</h2>
<ul>
<li>プログラミング
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</li>
<li>読書</li>
<li>映画鑑賞</li>
<li>旅行</li>
</ul>
<h2>好きな食べ物ランキング</h2>
<ol>
<li>寿司</li>
<li>ラーメン</li>
<li>カレー</li>
<li>焼肉</li>
<li>パスタ</li>
</ol>
<h2>学習目標</h2>
<p>
このコースを通じて、<em>プロフェッショナルなWebサイト</em>を
作れるようになることが目標です。
</p>
<h3>身につけたいスキル</h3>
<ul>
<li>レスポンシブデザイン</li>
<li>アクセシビリティ対応</li>
<li>SEO対策</li>
<li>JavaScriptでのインタラクション実装</li>
</ul>
<h2>連絡先</h2>
<p>
お仕事のご依頼は以下からお願いします：
</p>
<ul>
<li>Email: <a href="mailto:taro@example.com">taro@example.com</a></li>
<li>Twitter: <a href="https://twitter.com" target="_blank">@taro_yamada</a></li>
<li>GitHub: <a href="https://github.com" target="_blank">github.com/taro-yamada</a></li>
</ul>
<hr>
<p>
<small>© 2024 山田太郎. All rights reserved.</small>
</p>
</body>
</html>発展課題
1. テーブルを追加
<h2>スキルレベル</h2>
<table border="1">
<tr>
<th>技術</th>
<th>レベル</th>
<th>経験年数</th>
</tr>
<tr>
<td>HTML</td>
<td>初級</td>
<td>1ヶ月</td>
</tr>
<tr>
<td>CSS</td>
<td>初級</td>
<td>1ヶ月</td>
</tr>
<tr>
<td>JavaScript</td>
<td>未経験</td>
<td>-</td>
</tr>
</table>2. 引用文を追加
<h2>好きな言葉</h2>
<blockquote>
<p>「Stay hungry, stay foolish.」</p>
<cite>- Steve Jobs</cite>
</blockquote>3. コード表示を追加
<h2>初めて書いたコード</h2>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html></code></pre>📝 まとめ・質疑応答（5分）
今日のポイント
✅ マスターしたタグ一覧
| カテゴリ | タグ | 用途 |
|---|---|---|
| 構造 | h1-h6 | 見出し |
| テキスト | p, br, hr | 段落、改行、区切り線 |
| 強調 | strong, em | 重要性、強調 |
| リスト | ul, ol, li, dl, dt, dd | 各種リスト |
| リンク | a | ハイパーリンク |
| 画像 | img | 画像表示 |
| その他 | small, blockquote, cite, pre, code | 補足情報 |
作成したページの相互確認
- HTMLの構造は正しいか？
- すべてのタグは閉じられているか？
- alt属性は適切に設定されているか？
- リンクは正しく動作するか？
次回予告：HTML応用とセマンティクス
次回学習する内容：
- セマンティックHTML要素
header,nav,main,section,article,aside,footer
- フォーム要素
form,input,textarea,select,button
- テーブルの詳細
table,thead,tbody,tfoot,caption
- HTMLベストプラクティス
- アクセシビリティ
- SEO対策
- 構造化データ
🏠 宿題
-
自己紹介ページの改良
- 最低10種類のHTMLタグを使用
- 3階層以上の見出し構造を作成
- 外部リンクと内部リンクを含める
-
追加ページの作成
hobby.html（趣味の詳細ページ）を作成index.htmlから相互リンク
-
バリデーションチェック
- W3C Markup Validator でエラーがないか確認
📚 参考リソース
次回もお楽しみに！ 🚀
Last updated on