33 KiB
テラリウムプロジェクト パート1: HTML入門
journey
title Your HTML Learning Journey
section Foundation
Create HTML file: 3: Student
Add DOCTYPE: 4: Student
Structure document: 5: Student
section Content
Add metadata: 4: Student
Include images: 5: Student
Organize layout: 5: Student
section Semantics
Use proper tags: 4: Student
Enhance accessibility: 5: Student
Build terrarium: 5: Student
スケッチノート: Tomomi Imura
HTML（HyperText Markup Language）は、これまで訪れたすべてのウェブサイトの基盤です。HTMLはウェブページの骨格のようなもので、コンテンツの配置、構造、各部分の意味を定義します。後でCSSが色やレイアウトでHTMLを「装飾」し、JavaScriptがインタラクティブ性を加えることで「命を吹き込む」役割を果たしますが、HTMLはすべての基礎を提供します。
このレッスンでは、仮想テラリウムインターフェースのHTML構造を作成します。この実践的なプロジェクトを通じて、基本的なHTMLの概念を学びながら、視覚的に魅力的なものを構築します。セマンティック要素を使ってコンテンツを整理し、画像を扱い、インタラクティブなウェブアプリケーションの基盤を作る方法を学びます。
レッスンの終わりには、植物の画像が整理された列に表示されるHTMLページが完成します。次のレッスンでスタイリングを行う準備が整います。最初はシンプルに見えるかもしれませんが、それがCSSで視覚的な仕上げを加える前のHTMLのあるべき姿です。
mindmap
root((HTML Fundamentals))
Structure
DOCTYPE Declaration
HTML Element
Head Section
Body Content
Elements
Tags & Attributes
Self-closing Tags
Nested Elements
Block vs Inline
Content
Text Elements
Images
Containers (div)
Lists
Semantics
Meaningful Tags
Accessibility
Screen Readers
SEO Benefits
Best Practices
Proper Nesting
Valid Markup
Descriptive Alt Text
Organized Structure
レクチャー前のクイズ
📺 視聴して学ぶ: この役立つビデオ概要をチェックしてください
プロジェクトのセットアップ
HTMLコードに取り掛かる前に、テラリウムプロジェクトの適切な作業スペースを設定しましょう。最初から整理されたファイル構造を作成することは、ウェブ開発の旅を通じて役立つ重要な習慣です。
タスク: プロジェクト構造を作成する
テラリウムプロジェクト専用のフォルダーを作成し、最初のHTMLファイルを追加します。以下の2つの方法があります:
オプション1: Visual Studio Codeを使用する場合
- Visual Studio Codeを開く
- 「ファイル」→「フォルダーを開く」をクリックするか、
Ctrl+K, Ctrl+O（Windows/Linux）またはCmd+K, Cmd+O（Mac）を使用 terrariumという新しいフォルダーを作成し、それを選択- エクスプローラペインで「新しいファイル」アイコンをクリック
- ファイル名を
index.htmlにする
オプション2: ターミナルコマンドを使用する場合
mkdir terrarium
cd terrarium
touch index.html
code index.html
これらのコマンドが達成すること:
- プロジェクト用の新しいディレクトリ
terrariumを作成 - テラリウムディレクトリに移動
- 空の
index.htmlファイルを作成 - 編集のためにVisual Studio Codeでファイルを開く
💡 プロのヒント: ファイル名
index.htmlはウェブ開発で特別な意味を持ちます。誰かがウェブサイトを訪れると、ブラウザは自動的にindex.htmlをデフォルトページとして表示します。つまり、https://mysite.com/projects/のようなURLは、URL内でファイル名を指定することなくprojectsフォルダーのindex.htmlファイルを自動的に提供します。
HTMLドキュメント構造の理解
すべてのHTMLドキュメントは、ブラウザが正しく理解して表示するために必要な特定の構造に従います。この構造は正式な手紙のようなもので、特定の順序で必要な要素が含まれており、受信者（この場合はブラウザ）がコンテンツを適切に処理するのを助けます。
flowchart TD
A["<!DOCTYPE html>"] --> B["<html>"]
B --> C["<head>"]
C --> D["<title>"]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> Heading"]
G --> I["<div> Containers"]
G --> J["<img> Images"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
まず、すべてのHTMLドキュメントに必要な基本的な基盤を追加しましょう。
DOCTYPE宣言とルート要素
HTMLファイルの最初の2行は、ブラウザへのドキュメントの「紹介」として機能します:
<!DOCTYPE html>
<html></html>
このコードが何をするか:
<!DOCTYPE html>を使用してドキュメントタイプをHTML5として宣言- ページコンテンツをすべて含むルート
<html>要素を作成 - 適切なブラウザレンダリングのための最新のウェブ標準を確立
- 異なるブラウザやデバイス間で一貫した表示を保証
💡 VS Codeのヒント: VS CodeでHTMLタグにカーソルを合わせると、MDN Web Docsからの使用例やブラウザ互換性の詳細などの役立つ情報が表示されます。
📚 さらに学ぶ: DOCTYPE宣言は、非常に古いウェブサイトをサポートするために使用されていた「クイックスモード」にブラウザが入るのを防ぎます。現代のウェブ開発では、シンプルな
<!DOCTYPE html>宣言を使用して標準準拠のレンダリングを保証します。
🔄 教育的チェックイン
一時停止して振り返る: 続行する前に、以下を理解していることを確認してください:
- ✅ なぜすべてのHTMLドキュメントにDOCTYPE宣言が必要なのか
- ✅
<html>ルート要素が何を含むのか - ✅ この構造がブラウザがページを正しくレンダリングするのを助ける方法
簡単な自己テスト: 「標準準拠のレンダリング」とは何を意味するか、自分の言葉で説明できますか？
必要なドキュメントメタデータの追加
HTMLドキュメントの<head>セクションには、ブラウザや検索エンジンが必要とする重要な情報が含まれていますが、訪問者が直接ページ上で見ることはありません。これは、ウェブページが正しく機能し、異なるデバイスやプラットフォームで正しく表示されるのを助ける「舞台裏」の情報です。
このメタデータは、ブラウザにページの表示方法、使用する文字エンコーディング、異なる画面サイズの処理方法を伝えます。これらは、プロフェッショナルでアクセス可能なウェブページを作成するために不可欠です。
タスク: ドキュメントヘッドを追加する
開いている<html>タグと閉じている<html>タグの間にこの<head>セクションを挿入してください:
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
各要素が達成することの内訳:
- ブラウザタブや検索結果に表示されるページタイトルを設定
- 世界中で適切なテキスト表示を行うためにUTF-8文字エンコーディングを指定
- 最新バージョンのInternet Explorerとの互換性を確保
- ビューポートをデバイス幅に合わせて設定し、レスポンシブデザインを構成
- 初期ズームレベルを設定してコンテンツを自然なサイズで表示
🤔 考えてみてください: もしビューポートメタタグを
<meta name="viewport" content="width=600">のように設定したらどうなるでしょうか？これによりページが常に600ピクセル幅に固定され、レスポンシブデザインが壊れてしまいます！適切なビューポート設定についてさらに学びましょう。
ドキュメントボディの構築
<body>要素にはウェブページのすべての目に見えるコンテンツが含まれています。訪問者が見るものや操作するものすべてがここにあります。<head>セクションがブラウザへの指示を提供したのに対し、<body>セクションには実際のコンテンツ（テキスト、画像、ボタン、その他の要素）が含まれています。
ボディ構造を追加し、HTMLタグがどのように連携して意味のあるコンテンツを作成するかを理解しましょう。
HTMLタグ構造の理解
HTMLはペアタグを使用して要素を定義します。ほとんどのタグには<p>のような開始タグと</p>のような終了タグがあり、その間にコンテンツが入ります: <p>Hello, world!</p>。これにより、「Hello, world!」というテキストを含む段落要素が作成されます。
タスク: ボディ要素を追加する
HTMLファイルを更新して<body>要素を含めてください:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
この完全な構造が提供するもの:
- 基本的なHTML5ドキュメントフレームワークを確立
- 適切なブラウザレンダリングのための重要なメタデータを含む
- 目に見えるコンテンツのための空のボディを作成
- 現代のウェブ開発のベストプラクティスに従う
これで、テラリウムの目に見える要素を追加する準備が整いました。次のレッスンでCSSスタイリングを行うために、コンテンツの異なるセクションを整理するためのコンテナとして<div>要素を使用し、植物の画像を表示するための<img>要素を使用します。
画像とレイアウトコンテナの操作
画像はHTMLでは特別な存在で、「自己閉じタグ」を使用します。<p></p>のようにコンテンツを囲む要素とは異なり、<img>タグはsrc（画像ファイルパス）やalt（アクセシビリティ）のような属性を使用してタグ内に必要な情報をすべて含みます。
画像をHTMLに追加する前に、プロジェクトファイルを適切に整理し、画像フォルダーを作成して植物のグラフィックを追加する必要があります。
まず、画像をセットアップする:
- テラリウムプロジェクトフォルダー内に
imagesというフォルダーを作成 - ソリューションフォルダーから植物画像をダウンロード（合計14枚の植物画像）
- 新しい
imagesフォルダーにすべての植物画像をコピー
タスク: 植物表示レイアウトを作成する
次に、<body></body>タグの間に植物画像を2列に整理して追加してください:
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.ja.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.ja.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.ja.png" />
</div>
</div>
</div>
このコードで何が行われているかステップごとに説明:
- すべてのコンテンツを保持する
id="page"を持つメインページコンテナを作成 - 2つの列コンテナ
left-containerとright-containerを確立 - 左列に7つの植物、右列に7つの植物を整理
- 各植物画像を個別に配置するために
plant-holderdivで囲む - 次のレッスンでCSSスタイリングを行うために一貫したクラス名を適用
- 後でJavaScriptでの操作のために各植物画像にユニークなIDを割り当てる
- 画像フォルダーを指す適切なファイルパスを含む
🤔 考えてみてください: 現在、すべての画像に同じaltテキスト「plant」が設定されています。これはアクセシビリティには理想的ではありません。スクリーンリーダーのユーザーは「plant」という言葉を14回繰り返し聞くことになり、各画像がどの植物を示しているか分かりません。各画像に対してより良い、より具体的なaltテキストを考えることができますか？
📝 HTML要素の種類:
<div>要素は「ブロックレベル」で全幅を占めますが、<span>要素は「インライン」で必要な幅だけを占めます。これらの<div>タグをすべて<span>タグに変更したらどうなると思いますか？
🔄 教育的チェックイン
構造の理解: HTML構造を確認するために少し時間を取ってください:
- ✅ レイアウト内の主要なコンテナを識別できますか？
- ✅ 各画像にユニークなIDがある理由を理解していますか？
- ✅
plant-holderdivの目的をどのように説明しますか？
視覚的検査: HTMLファイルをブラウザで開いてください。以下が表示されるはずです:
- 植物画像の基本リスト
- 2列に整理された画像
- シンプルでスタイリングされていないレイアウト
覚えておいてください: このシンプルな外観は、CSSスタイリング前のHTMLのあるべき姿です！
このマークアップを追加することで、植物が画面に表示されますが、まだ洗練されていません。それは次のレッスンでCSSが担当します！現時点では、コンテンツを適切に整理し、アクセシビリティのベストプラクティスに従った堅実なHTML基盤が完成しています。
アクセシビリティのためのセマンティックHTMLの使用
セマンティックHTMLとは、外観だけでなく意味や目的に基づいてHTML要素を選択することを意味します。セマンティックマークアップを使用すると、ブラウザ、検索エンジン、スクリーンリーダーなどの支援技術にコンテンツの構造と意味を伝えることができます。
flowchart TD
A[Need to add content?] --> B{What type?}
B -->|Main heading| C["<h1>"]
B -->|Subheading| D["<h2>, <h3>, etc."]
B -->|Paragraph| E["<p>"]
B -->|List| F["<ul>, <ol>"]
B -->|Navigation| G["<nav>"]
B -->|Article| H["<article>"]
B -->|Section| I["<section>"]
B -->|Generic container| J["<div>"]
C --> K[Screen readers announce as main title]
D --> L[Creates proper heading hierarchy]
E --> M[Provides proper text spacing]
F --> N[Enables list navigation shortcuts]
G --> O[Identifies navigation landmarks]
H --> P[Marks standalone content]
I --> Q[Groups related content]
J --> R[Use only when no semantic tag fits]
style C fill:#4caf50
style D fill:#4caf50
style E fill:#4caf50
style F fill:#4caf50
style G fill:#2196f3
style H fill:#2196f3
style I fill:#2196f3
style J fill:#ff9800
このアプローチは、障害を持つユーザーにとってウェブサイトをよりアクセスしやすくし、検索エンジンがコンテンツをよりよく理解するのを助けます。これは、すべての人にとってより良い体験を生み出す現代のウェブ開発の基本原則です。
セマンティックなページタイトルの追加
テラリウムページに適切な見出しを追加しましょう。開いている<body>タグのすぐ後にこの行を挿入してください:
<h1>My Terrarium</h1>
セマンティックマークアップが重要な理由:
- スクリーンリーダーがページ構造をナビゲートし理解するのを助ける
- **検索エンジン最適化（SEO）**を改善し、コンテンツの階層を明確化
- 視覚障害や認知障害を持つユーザーのアクセシビリティを向上
- すべてのデバイスやプラットフォームでより良いユーザー体験を提供
- ウェブ標準とプロフェッショナルな開発のベストプラクティスに従う
セマンティックと非セマンティックの選択例:
| 目的 | ✅ セマンティックな選択 | ❌ 非セマンティックな選択 |
|---|---|---|
| メイン見出し | <h1>タイトル</h1> |
<div class="big-text">タイトル</div> |
| ナビゲーション | <nav><ul><li></li></ul></nav> |
<div class="menu"><div></div></div> |
| ボタン | <button>クリックしてください</button> |
<span onclick="...">クリックしてください</span> |
| 記事コンテンツ | <article><p></p></article> |
<div class="content"><div></div></div> |
🎥 実際に見る: スクリーンリーダーがウェブページとどのように対話するかを視聴して、セマンティックマークアップがアクセシビリティにとって重要な理由を理解してください。適切なHTML構造がユーザーの効率的なナビゲーションをどのように助けるかに注目してください。
- **各視覚コンポーネント（上部、壁、土、底部）**を個別の要素として定義
- **ガラスの反射効果（光沢要素）**のためのネストされた要素を含む
- 各要素の目的を明確に示す記述的なクラス名を使用
- ガラステラリウムの外観を作るためのCSSスタイリングの準備として構造を整備
🤔 何か気づきましたか？: このマークアップを追加しても、ページに新しいものは何も表示されません！これは、HTMLが構造を提供し、CSSが外観を提供することを完璧に示しています。この
<div>要素は存在しますが、まだ視覚的なスタイリングがありません – 次のレッスンでそれが登場します！
flowchart TD
A[HTML Document] --> B[Document Head]
A --> C[Document Body]
B --> D[Title Element]
B --> E[Meta Charset]
B --> F[Meta Viewport]
C --> G[Main Heading]
C --> H[Page Container]
H --> I[Left Container with 7 plants]
H --> J[Right Container with 7 plants]
H --> K[Terrarium Structure]
style A fill:#e1f5fe
style B fill:#fff3e0
style C fill:#e8f5e8
style H fill:#f3e5f5
🔄 教育的チェックイン
HTML構造の習得: 次に進む前に、以下を確認してください：
- ✅ HTML構造と視覚的外観の違いを説明できる
- ✅ セマンティックHTML要素と非セマンティックHTML要素を識別できる
- ✅ 適切なマークアップがアクセシビリティにどのように役立つか説明できる
- ✅ 完全なドキュメントツリー構造を認識できる
理解度のテスト: JavaScriptを無効にし、CSSを削除した状態でHTMLファイルをブラウザで開いてみてください。これにより、作成した純粋なセマンティック構造が表示されます！
GitHub Copilot Agent チャレンジ
Agentモードを使用して以下のチャレンジを完了してください：
説明: テラリウムプロジェクトに追加できる植物ケアガイドセクションのセマンティックHTML構造を作成してください。
プロンプト: "Plant Care Guide"というメイン見出し、"Watering"、"Light Requirements"、"Soil Care"という3つのサブセクションを含むセマンティックHTMLセクションを作成してください。それぞれのサブセクションには植物ケア情報の段落を含めます。適切なセマンティックHTMLタグ（<section>、<h2>、<h3>、<p>など）を使用してコンテンツを適切に構造化してください。
Agentモードについて詳しくはこちらをご覧ください。
HTMLの歴史チャレンジ
ウェブ進化について学ぶ
HTMLは、1990年にCERNでTim Berners-Leeが最初のウェブブラウザを作成して以来、大きく進化してきました。古いタグ（例: <marquee>）は、現代のアクセシビリティ基準やレスポンシブデザイン原則に適合しないため、現在では廃止されています。
この実験を試してみてください:
<h1>タイトルを一時的に<marquee>タグで囲む:<marquee><h1>My Terrarium</h1></marquee>- ブラウザでページを開き、スクロール効果を観察
- このタグが廃止された理由を考える（ヒント: ユーザー体験とアクセシビリティについて考えてみてください）
<marquee>タグを削除し、セマンティックマークアップに戻す
反省の質問:
- スクロールするタイトルは視覚障害や動きに敏感なユーザーにどのような影響を与えるでしょうか？
- 同様の視覚効果をよりアクセシブルに実現するための現代的なCSS技術は何でしょうか？
- 廃止された要素ではなく、現在のウェブ標準を使用することがなぜ重要なのでしょうか？
廃止されたHTML要素についてさらに学び、ウェブ標準がどのように進化してユーザー体験を向上させているかを理解してください。
講義後のクイズ
復習と自己学習
HTMLの知識を深める
HTMLは30年以上にわたりウェブの基盤となり、単純な文書マークアップ言語からインタラクティブなアプリケーションを構築するための高度なプラットフォームへと進化してきました。この進化を理解することで、現代のウェブ標準をより深く理解し、より良い開発判断を下すことができます。
おすすめの学習パス:
-
HTMLの歴史と進化
- HTML 1.0からHTML5までのタイムラインを調査
- 特定のタグが廃止された理由（アクセシビリティ、モバイル対応性、保守性）を探る
- 新しいHTML機能や提案を調査
-
セマンティックHTMLの深掘り
- HTML5セマンティック要素の完全なリストを学ぶ
<article>、<section>、<aside>、<main>を使用するタイミングを練習- アクセシビリティを向上させるARIA属性について学ぶ
-
現代のウェブ開発
- レスポンシブウェブサイトの構築をMicrosoft Learnで探る
- HTMLがCSSやJavaScriptとどのように統合されるかを理解
- ウェブパフォーマンスとSEOのベストプラクティスを学ぶ
反省の質問:
- 発見した廃止されたHTMLタグは何ですか？それらが削除された理由は何ですか？
- 将来のバージョンに向けて提案されている新しいHTML機能は何ですか？
- セマンティックHTMLはウェブアクセシビリティとSEOにどのように貢献しますか？
⚡ 次の5分間でできること
- DevTools（F12）を開き、お気に入りのウェブサイトのHTML構造を調査
<h1>、<p>、<img>の基本タグを使用して簡単なHTMLファイルを作成- W3C HTML ValidatorオンラインでHTMLを検証
<!-- コメント -->を使用してHTMLにコメントを追加してみる
🎯 この1時間で達成できること
- 講義後のクイズを完了し、セマンティックHTMLの概念を復習
- 適切なHTML構造を使用して自分についての簡単なウェブページを作成
- 異なる見出しレベルやテキストフォーマットタグを試す
- 画像やリンクを追加してマルチメディア統合を練習
- 試したことのないHTML5機能を調査
📅 1週間のHTML学習計画
- セマンティックマークアップを使用してテラリウムプロジェクト課題を完了
- ARIAラベルと役割を使用してアクセシブルなウェブページを作成
- 様々な入力タイプを使用してフォーム作成を練習
- localStorageやgeolocationなどのHTML5 APIを探る
- レスポンシブHTMLパターンとモバイルファーストデザインを学ぶ
- 他の開発者のHTMLコードをレビューしてベストプラクティスを学ぶ
🌟 1か月間のウェブ基礎学習
- HTMLの習得を示すポートフォリオウェブサイトを作成
- Handlebarsのようなフレームワークを使用してHTMLテンプレートを学ぶ
- オープンソースプロジェクトに貢献し、HTMLドキュメントを改善
- カスタム要素などの高度なHTML概念を習得
- CSSフレームワークやJavaScriptライブラリとHTMLを統合
- HTMLの基本を学んでいる他の人を指導
🎯 HTML習得のタイムライン
timeline
title HTML Learning Progression
section Foundation (5 minutes)
Document Structure: DOCTYPE declaration
: HTML root element
: Head vs Body understanding
section Metadata (10 minutes)
Essential Meta Tags: Character encoding
: Viewport configuration
: Browser compatibility
section Content Creation (15 minutes)
Image Integration: Proper file paths
: Alt text importance
: Self-closing tags
section Layout Organization (20 minutes)
Container Strategy: Div elements for structure
: Class and ID naming
: Nested element hierarchy
section Semantic Mastery (30 minutes)
Meaningful Markup: Heading hierarchy
: Screen reader navigation
: Accessibility best practices
section Advanced Concepts (1 hour)
HTML5 Features: Modern semantic elements
: ARIA attributes
: Performance considerations
section Professional Skills (1 week)
Code Organization: File structure patterns
: Maintainable markup
: Team collaboration
section Expert Level (1 month)
Modern Web Standards: Progressive enhancement
: Cross-browser compatibility
: HTML specification updates
🛠️ HTMLツールキットのまとめ
このレッスンを完了した後、以下を習得しました：
- ドキュメント構造: 適切なDOCTYPEを含む完全なHTML5基盤
- セマンティックマークアップ: アクセシビリティとSEOを向上させる意味のあるタグ
- 画像統合: 適切なファイル構成とaltテキストの実践
- レイアウトコンテナ: 説明的なクラス名を使用したdivの戦略的活用
- アクセシビリティ意識: スクリーンリーダーのナビゲーションの理解
- 現代の標準: 現在のHTML5の実践と廃止されたタグの知識
- プロジェクト基盤: CSSスタイリングとJavaScriptのインタラクティビティのための堅実な基盤
次のステップ: HTML構造はCSSスタイリングの準備が整いました！構築したセマンティック基盤は、次のレッスンをより理解しやすくします。
課題
免責事項:
この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。