# テラリウムプロジェクト パート1: HTML入門 ```mermaid 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 ``` ![HTML入門](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ja.png) > スケッチノート: [Tomomi Imura](https://twitter.com/girlie_mac) HTML（HyperText Markup Language）は、これまで訪れたすべてのウェブサイトの基盤です。HTMLはウェブページの骨格のようなもので、コンテンツの配置、構造、各部分の意味を定義します。後でCSSが色やレイアウトでHTMLを「装飾」し、JavaScriptがインタラクティブ性を加えることで「命を吹き込む」役割を果たしますが、HTMLはすべての基礎を提供します。 このレッスンでは、仮想テラリウムインターフェースのHTML構造を作成します。この実践的なプロジェクトを通じて、基本的なHTMLの概念を学びながら、視覚的に魅力的なものを構築します。セマンティック要素を使ってコンテンツを整理し、画像を扱い、インタラクティブなウェブアプリケーションの基盤を作る方法を学びます。 レッスンの終わりには、植物の画像が整理された列に表示されるHTMLページが完成します。次のレッスンでスタイリングを行う準備が整います。最初はシンプルに見えるかもしれませんが、それがCSSで視覚的な仕上げを加える前のHTMLのあるべき姿です。 ```mermaid 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 ``` ## レクチャー前のクイズ [レクチャー前のクイズ](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **視聴して学ぶ**: この役立つビデオ概要をチェックしてください > > [![HTML基礎ビデオ](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## プロジェクトのセットアップ HTMLコードに取り掛かる前に、テラリウムプロジェクトの適切な作業スペースを設定しましょう。最初から整理されたファイル構造を作成することは、ウェブ開発の旅を通じて役立つ重要な習慣です。 ### タスク: プロジェクト構造を作成する テラリウムプロジェクト専用のフォルダーを作成し、最初のHTMLファイルを追加します。以下の2つの方法があります: **オプション1: Visual Studio Codeを使用する場合** 1. Visual Studio Codeを開く 2. 「ファイル」→「フォルダーを開く」をクリックするか、`Ctrl+K, Ctrl+O`（Windows/Linux）または`Cmd+K, Cmd+O`（Mac）を使用 3. `terrarium`という新しいフォルダーを作成し、それを選択 4. エクスプローラペインで「新しいファイル」アイコンをクリック 5. ファイル名を`index.html`にする ![VS Codeエクスプローラで新しいファイル作成を表示](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ja.png) **オプション2: ターミナルコマンドを使用する場合** ```bash 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ドキュメントは、ブラウザが正しく理解して表示するために必要な特定の構造に従います。この構造は正式な手紙のようなもので、特定の順序で必要な要素が含まれており、受信者（この場合はブラウザ）がコンテンツを適切に処理するのを助けます。 ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] 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行は、ブラウザへのドキュメントの「紹介」として機能します: ```html <!DOCTYPE html> <html></html> ``` **このコードが何をするか:** - `<!DOCTYPE html>`を使用してドキュメントタイプをHTML5として宣言 - ページコンテンツをすべて含むルート`<html>`要素を作成 - 適切なブラウザレンダリングのための最新のウェブ標準を確立 - 異なるブラウザやデバイス間で一貫した表示を保証 > 💡 **VS Codeのヒント**: VS CodeでHTMLタグにカーソルを合わせると、MDN Web Docsからの使用例やブラウザ互換性の詳細などの役立つ情報が表示されます。 > 📚 **さらに学ぶ**: DOCTYPE宣言は、非常に古いウェブサイトをサポートするために使用されていた「クイックスモード」にブラウザが入るのを防ぎます。現代のウェブ開発では、シンプルな`<!DOCTYPE html>`宣言を使用して[標準準拠のレンダリング](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)を保証します。 ### 🔄 **教育的チェックイン** **一時停止して振り返る**: 続行する前に、以下を理解していることを確認してください: - ✅ なぜすべてのHTMLドキュメントにDOCTYPE宣言が必要なのか - ✅ `<html>`ルート要素が何を含むのか - ✅ この構造がブラウザがページを正しくレンダリングするのを助ける方法 **簡単な自己テスト**: 「標準準拠のレンダリング」とは何を意味するか、自分の言葉で説明できますか？ ## 必要なドキュメントメタデータの追加 HTMLドキュメントの`<head>`セクションには、ブラウザや検索エンジンが必要とする重要な情報が含まれていますが、訪問者が直接ページ上で見ることはありません。これは、ウェブページが正しく機能し、異なるデバイスやプラットフォームで正しく表示されるのを助ける「舞台裏」の情報です。 このメタデータは、ブラウザにページの表示方法、使用する文字エンコーディング、異なる画面サイズの処理方法を伝えます。これらは、プロフェッショナルでアクセス可能なウェブページを作成するために不可欠です。 ### タスク: ドキュメントヘッドを追加する 開いている`<html>`タグと閉じている`<html>`タグの間にこの`<head>`セクションを挿入してください: ```html <head> <title>Welcome to my Virtual Terrarium ``` **各要素が達成することの内訳:** - ブラウザタブや検索結果に表示されるページタイトルを設定 - 世界中で適切なテキスト表示を行うためにUTF-8文字エンコーディングを指定 - 最新バージョンのInternet Explorerとの互換性を確保 - ビューポートをデバイス幅に合わせて設定し、レスポンシブデザインを構成 - 初期ズームレベルを設定してコンテンツを自然なサイズで表示 > 🤔 **考えてみてください**: もしビューポートメタタグを``のように設定したらどうなるでしょうか？これによりページが常に600ピクセル幅に固定され、レスポンシブデザインが壊れてしまいます！[適切なビューポート設定](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)についてさらに学びましょう。 ## ドキュメントボディの構築 ``要素にはウェブページのすべての目に見えるコンテンツが含まれています。訪問者が見るものや操作するものすべてがここにあります。``セクションがブラウザへの指示を提供したのに対し、``セクションには実際のコンテンツ（テキスト、画像、ボタン、その他の要素）が含まれています。 ボディ構造を追加し、HTMLタグがどのように連携して意味のあるコンテンツを作成するかを理解しましょう。 ### HTMLタグ構造の理解 HTMLはペアタグを使用して要素を定義します。ほとんどのタグには`

`のような開始タグと`

`のような終了タグがあり、その間にコンテンツが入ります: `

Hello, world!

`。これにより、「Hello, world!」というテキストを含む段落要素が作成されます。 ### タスク: ボディ要素を追加する HTMLファイルを更新して``要素を含めてください: ```html Welcome to my Virtual Terrarium ``` **この完全な構造が提供するもの:** - 基本的なHTML5ドキュメントフレームワークを確立 - 適切なブラウザレンダリングのための重要なメタデータを含む - 目に見えるコンテンツのための空のボディを作成 - 現代のウェブ開発のベストプラクティスに従う これで、テラリウムの目に見える要素を追加する準備が整いました。次のレッスンでCSSスタイリングを行うために、コンテンツの異なるセクションを整理するためのコンテナとして`
`要素を使用し、植物の画像を表示するための``要素を使用します。 ### 画像とレイアウトコンテナの操作 画像はHTMLでは特別な存在で、「自己閉じタグ」を使用します。`

`のようにコンテンツを囲む要素とは異なり、``タグは`src`（画像ファイルパス）や`alt`（アクセシビリティ）のような属性を使用してタグ内に必要な情報をすべて含みます。 画像をHTMLに追加する前に、プロジェクトファイルを適切に整理し、画像フォルダーを作成して植物のグラフィックを追加する必要があります。 **まず、画像をセットアップする:** 1. テラリウムプロジェクトフォルダー内に`images`というフォルダーを作成 2. [ソリューションフォルダー](../../../../3-terrarium/solution/images)から植物画像をダウンロード（合計14枚の植物画像） 3. 新しい`images`フォルダーにすべての植物画像をコピー ### タスク: 植物表示レイアウトを作成する 次に、``タグの間に植物画像を2列に整理して追加してください: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **このコードで何が行われているかステップごとに説明:** - すべてのコンテンツを保持する`id="page"`を持つメインページコンテナを作成 - 2つの列コンテナ`left-container`と`right-container`を確立 - 左列に7つの植物、右列に7つの植物を整理 - 各植物画像を個別に配置するために`plant-holder`divで囲む - 次のレッスンでCSSスタイリングを行うために一貫したクラス名を適用 - 後でJavaScriptでの操作のために各植物画像にユニークなIDを割り当てる - 画像フォルダーを指す適切なファイルパスを含む > 🤔 **考えてみてください**: 現在、すべての画像に同じaltテキスト「plant」が設定されています。これはアクセシビリティには理想的ではありません。スクリーンリーダーのユーザーは「plant」という言葉を14回繰り返し聞くことになり、各画像がどの植物を示しているか分かりません。各画像に対してより良い、より具体的なaltテキストを考えることができますか？ > 📝 **HTML要素の種類**: `
`要素は「ブロックレベル」で全幅を占めますが、``要素は「インライン」で必要な幅だけを占めます。これらの`
`タグをすべて``タグに変更したらどうなると思いますか？ ### 🔄 **教育的チェックイン** **構造の理解**: HTML構造を確認するために少し時間を取ってください: - ✅ レイアウト内の主要なコンテナを識別できますか？ - ✅ 各画像にユニークなIDがある理由を理解していますか？ - ✅ `plant-holder`divの目的をどのように説明しますか？ **視覚的検査**: HTMLファイルをブラウザで開いてください。以下が表示されるはずです: - 植物画像の基本リスト - 2列に整理された画像 - シンプルでスタイリングされていないレイアウト **覚えておいてください**: このシンプルな外観は、CSSスタイリング前のHTMLのあるべき姿です！ このマークアップを追加することで、植物が画面に表示されますが、まだ洗練されていません。それは次のレッスンでCSSが担当します！現時点では、コンテンツを適切に整理し、アクセシビリティのベストプラクティスに従った堅実なHTML基盤が完成しています。 ## アクセシビリティのためのセマンティックHTMLの使用 セマンティックHTMLとは、外観だけでなく意味や目的に基づいてHTML要素を選択することを意味します。セマンティックマークアップを使用すると、ブラウザ、検索エンジン、スクリーンリーダーなどの支援技術にコンテンツの構造と意味を伝えることができます。 ```mermaid flowchart TD A[Need to add content?] --> B{What type?} B -->|Main heading| C["

"] B -->|Subheading| D["

,

, etc."] B -->|Paragraph| E["

"] B -->|List| F["

    ,
      "] B -->|Navigation| G["