Day 1: HTMLの世界へようこそ

今日学ぶこと

HTMLとは何か、Webにおける役割
開発環境のセットアップ
HTMLドキュメントの基本構造
最初のWebページを作成する

HTMLとは何か

HTML（HyperText Markup Language）は、Webページの構造を定義する言語です。私たちが毎日見ているWebサイト——ニュース、SNS、ショッピングサイト——はすべてHTMLで構造が記述されています。

flowchart LR
    subgraph Web["🌐 Webページの3つの技術"]
        HTML["📄 HTML<br>構造・内容"]
        CSS["🎨 CSS<br>見た目・デザイン"]
        JS["⚡ JavaScript<br>動き・機能"]
    end
    HTML --> CSS --> JS
    style HTML fill:#3b82f6,color:#fff
    style CSS fill:#8b5cf6,color:#fff
    style JS fill:#f59e0b,color:#fff

HTMLは「プログラミング言語」ではなく「マークアップ言語」です。コンピュータに計算の指示を出すのではなく、テキストに意味と構造を与えるための言語です。

HTMLの役割

技術	役割	例え
HTML	構造と内容	家の骨組み
CSS	見た目とデザイン	壁紙や塗装
JavaScript	動きと機能	電気・水道の設備

開発環境のセットアップ

HTMLの学習に必要なものは、たった2つです。

1. テキストエディタ

おすすめは Visual Studio Code（VS Code） です。

code.visualstudio.com にアクセス
お使いのOS用のインストーラをダウンロード
インストールして起動

ポイント: メモ帳でもHTMLは書けますが、VS Codeにはシンタックスハイライト（コードの色分け）や自動補完など、効率的に書くための機能が揃っています。

2. Webブラウザ

Google Chrome を推奨します。開発者ツール（DevTools）が充実しており、HTMLの構造を確認するのに便利です。

flowchart TB
    subgraph Setup["開発環境"]
        Editor["📝 VS Code<br>コードを書く"]
        Browser["🌐 Chrome<br>結果を確認する"]
    end
    Editor -->|"ファイルを保存"| File["index.html"]
    File -->|"ブラウザで開く"| Browser
    style Editor fill:#3b82f6,color:#fff
    style Browser fill:#22c55e,color:#fff
    style File fill:#f59e0b,color:#fff

HTMLドキュメントの基本構造

すべてのHTMLページは、同じ基本構造を持っています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
</head>
<body>
    <h1>こんにちは、HTML！</h1>
    <p>これは最初のWebページです。</p>
</body>
</html>

各部分の説明

flowchart TB
    subgraph Document["HTMLドキュメント構造"]
        DOCTYPE["&lt;!DOCTYPE html&gt;<br>HTML5であることを宣言"]
        HTML["&lt;html&gt;<br>ルート要素"]
        HEAD["&lt;head&gt;<br>メタ情報（非表示）"]
        BODY["&lt;body&gt;<br>表示される内容"]
    end
    DOCTYPE --> HTML
    HTML --> HEAD
    HTML --> BODY
    style DOCTYPE fill:#ef4444,color:#fff
    style HTML fill:#3b82f6,color:#fff
    style HEAD fill:#8b5cf6,color:#fff
    style BODY fill:#22c55e,color:#fff

要素	説明
`<!DOCTYPE html>`	このファイルがHTML5であることをブラウザに伝える
`<html lang="ja">`	HTMLドキュメント全体を囲む。`lang`で言語を指定
`<head>`	ページのメタ情報（タイトル、文字コードなど）
`<meta charset="UTF-8">`	文字エンコーディング。日本語を正しく表示するために必要
`<meta name="viewport" ...>`	スマートフォンでの表示を適切にする
`<title>`	ブラウザのタブに表示されるタイトル
`<body>`	実際にページに表示される内容

要素（Element）とタグ（Tag）

HTMLは要素で構成されています。要素は通常、開始タグと終了タグで囲まれます。

<p>これは段落です。</p>

flowchart LR
    Open["&lt;p&gt;<br>開始タグ"] --> Content["これは段落です。<br>内容"] --> Close["&lt;/p&gt;<br>終了タグ"]
    style Open fill:#3b82f6,color:#fff
    style Content fill:#22c55e,color:#fff
    style Close fill:#ef4444,color:#fff

要素の入れ子（ネスト）

要素は他の要素の中に入れることができます。

<body>
    <h1>見出し</h1>
    <p>これは<strong>重要な</strong>テキストです。</p>
</body>

ルール: 開始タグと終了タグは正しい順序で閉じる必要があります。

✅ <p><strong>テキスト</strong></p>

❌ <p><strong>テキスト</p></strong>

属性（Attribute）

要素に追加情報を与えるために属性を使います。

<a href="https://example.com" target="_blank">リンクテキスト</a>
<img src="photo.jpg" alt="写真の説明">

部分	例	説明
属性名	`href`	属性の種類
属性値	`"https://example.com"`	属性の値（ダブルクォートで囲む）

最初のWebページを作ろう

実際にHTMLファイルを作成してみましょう。

ステップ1: フォルダを作成

デスクトップにhtml-practiceというフォルダを作成します。

ステップ2: HTMLファイルを作成

VS Codeでフォルダを開き、index.htmlというファイルを作成します。

ステップ3: コードを書く

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのWebページ</title>
</head>
<body>
    <h1>はじめてのWebページ</h1>
    <p>HTMLを学び始めました！</p>
    <p>これは私が作った最初のWebページです。</p>

    <h2>今日学んだこと</h2>
    <ul>
        <li>HTMLはWebページの構造を作る言語</li>
        <li>HTMLドキュメントの基本構造</li>
        <li>要素、タグ、属性の違い</li>
    </ul>
</body>
</html>

ステップ4: ブラウザで確認

index.htmlファイルをChromeにドラッグ＆ドロップするか、ダブルクリックして開きます。

Tips: VS Codeの拡張機能「Live Server」をインストールすると、ファイルを保存するたびに自動でブラウザが更新されて便利です。

ブラウザ開発者ツール

Chromeの開発者ツールを使うと、Webページの構造を詳しく調べることができます。

開き方

Windows/Linux: F12 または Ctrl + Shift + I
Mac: Cmd + Option + I

Elements パネル

Elementsパネルでは、HTMLの構造をツリー形式で確認できます。任意の要素をクリックすると、その要素の詳細が表示されます。

まとめ

概念	説明
HTML	Webページの構造を定義するマークアップ言語
要素（Element）	開始タグ + 内容 + 終了タグ
タグ（Tag）	要素の始まりと終わりを示す記号
属性（Attribute）	要素に追加情報を与える
`<!DOCTYPE html>`	HTML5文書であることの宣言
`<head>`	メタ情報を記述する領域
`<body>`	表示される内容を記述する領域

重要ポイント

HTMLはWebページの構造と内容を担当する
すべてのHTMLページは同じ基本構造を持つ
要素は正しい順序でネストする必要がある
開発者ツールはHTMLの学習に欠かせないツール

練習問題

問題1: 基本

自分の自己紹介ページを作成してください。名前、趣味、好きな食べ物を含めましょう。

問題2: 応用

以下の要素をすべて使ったHTMLページを作成してください：<h1>, <h2>, <p>, <ul>, <li>

チャレンジ問題

お気に入りのWebサイトを開発者ツールで調べ、使われているHTML要素を5つ以上見つけてメモしてください。

参考リンク

次回予告: Day 2では「テキストの構造化」について学びます。見出し、段落、強調、引用など、テキストコンテンツを適切にマークアップする方法を習得しましょう。