はじめに：なぜ、今HTMLを学ぶべきなのか？
「ホームページ作りには、まずHTMLから」 あなたも、そんな言葉を聞いたことがあるかもしれません。
こんにちは！あなたのコーディングパートナーです。 この講座は、プログラミング経験ゼロの方でも、1日たった10分の学習を7日間続けるだけで、Webサイトの「骨格」であるHTMLを完全に理解し、自分の手でWebページの設計図を描けるようになることを目指します。
CSS（デザイン）やJavaScript（動き）といった派手さはありませんが、HTMLはすべてのWebページの土台となる、最も重要で普遍的な言語です。この土台がしっかりしていると、
Webサイトがどのように作られているか、その構造が根本から理解できる。
WordPressなどのブログツールで、他の人とは一味違うカスタマイズができるようになる。
今後CSSや他の言語を学ぶ際に、挫折しにくくなる。
という、非常に大きなメリットがあります。
この講座では、あなたが7日後に「HTMLのことは、もう怖くない！」と自信を持って言えるように、全力でサポートします。 さあ、Web世界の「設計図」を読み解く旅へ出発しましょう！
Day 1：HTMLって何？
1. HTMLの役割
まず、「HTMLとは何か？」から始めましょう。
HTMLは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ひと言で言うと「Webページの骨格を作るための言語」です。
家に例えると分かりやすいかもしれません。
つまり、今から学ぶHTMLは、Webページに「これは見出しです」「これは段落です」「これは画像です」といった、意味の骨格を与えていく作業になります。
2. HTMLの基本構造
どんなWebページも、必ずこの「基本の型」に沿って書かれています。これから毎回書くことになるおまじないのようなものなので、まずはこの形に慣れましょう。
さっそく、VS Codeでファイルを作って、この基本構造を書いてみます。
【準備】
VS Codeで、新しく学習用のフォルダ（例：html-css-practice）を開きましょう。
その中にday1というフォルダを作り、さらにその中にindex.htmlというファイルを作成してください。
【コードを書いてみよう！】 index.htmlファイルに、以下のコードをコピー＆ペーストするか、自分で打ち込んでみてください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の最初のページ</title>
</head>
<body>
こんにちは、世界！
</body>
</html>
✨VS Codeの超便利ワザ！✨ 実は、この基本構造は一瞬で呼び出せます。 index.htmlファイルの中で、半角の!（エクスクラメーションマーク）を1文字だけ入力して、そのままTabキーを押してみてください。一瞬で基本構造が展開されます！これはプロも使う技なので、ぜひ覚えてくださいね。
3. タグの解説
それぞれの行が何をしているのか、簡単に解説します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
<body>
【今日のミッション】
VS Codeの!+TabキーでHTMLの基本構造を呼び出してみましょう。
<title>タグの中身を「（あなたの名前）の練習ページ」に変えてみましょう。
<body>タグの中身を「HTMLの勉強スタート！」という文章に変えてみましょう。
ファイルを保存（Ctrl + S または Cmd + S）して、ブラウザで開いてみてください。
【確認ポイント】
これができれば、今日のミッションは完璧にクリアです！
Day 2：テキストを表示しよう
昨日はHTMLの「骨格」を学びましたね。<body>タグの中に書いたものが画面に表示される、ということがポイントでした。
今日は、その<body>の中に、文章の「役割」を示すための基本的なタグ、見出し (<h1>) と 段落 (<p>) を学んでいきます。ただ文字を書くだけでなく、「これは見出しです」「これは普通の文章です」と意味を持たせることで、人間にも、そして検索エンジンなどのコンピュータにも分かりやすいページを作ることができます。
1. 見出し (<h1> 〜 <h6>)
見出しタグは、その名の通り「文章の見出し」を作るためのタグです。本の「第1章」や新聞の「ヘッドライン」のような役割を果たします。
見出しには、重要度に応じて<h1>から<h6>までの6段階があります。
はじめに：なぜ、今HTMLを学ぶべきなのか？
「ホームページ作りには、まずHTMLから」 あなたも、そんな言葉を聞いたことがあるかもしれません。
こんにちは！あなたのコーディングパートナーです。 この講座は、プログラミング経験ゼロの方でも、1日たった10分の学習を7日間続けるだけで、Webサイトの「骨格」であるHTMLを完全に理解し、自分の手でWebページの設計図を描けるようになることを目指します。
CSS（デザイン）やJavaScript（動き）といった派手さはありませんが、HTMLはすべてのWebページの土台となる、最も重要で普遍的な言語です。この土台がしっかりしていると、
Webサイトがどのように作られているか、その構造が根本から理解できる。
WordPressなどのブログツールで、他の人とは一味違うカスタマイズができるようになる。
今後CSSや他の言語を学ぶ際に、挫折しにくくなる。
という、非常に大きなメリットがあります。
この講座では、あなたが7日後に「HTMLのことは、もう怖くない！」と自信を持って言えるように、全力でサポートします。 さあ、Web世界の「設計図」を読み解く旅へ出発しましょう！
Day 1：HTMLって何？
1. HTMLの役割
まず、「HTMLとは何か？」から始めましょう。
HTMLは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、ひと言で言うと「Webページの骨格を作るための言語」です。
家に例えると分かりやすいかもしれません。
HTML：柱、壁、屋根、ドアといった「家の構造（骨格）」そのもの。
CSS：壁紙の色、家具のデザインや配置といった「インテリア（装飾）」
つまり、今から学ぶHTMLは、Webページに「これは見出しです」「これは段落です」「これは画像です」といった、意味の骨格を与えていく作業になります。
2. HTMLの基本構造
どんなWebページも、必ずこの「基本の型」に沿って書かれています。これから毎回書くことになるおまじないのようなものなので、まずはこの形に慣れましょう。
さっそく、VS Codeでファイルを作って、この基本構造を書いてみます。
【準備】
VS Codeで、新しく学習用のフォルダ（例：html-css-practice）を開きましょう。
その中にday1というフォルダを作り、さらにその中にindex.htmlというファイルを作成してください。
【コードを書いてみよう！】 index.htmlファイルに、以下のコードをコピー＆ペーストするか、自分で打ち込んでみてください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私の最初のページ</title>
</head>
<body>
こんにちは、世界！
</body>
</html>
✨VS Codeの超便利ワザ！✨ 実は、この基本構造は一瞬で呼び出せます。 index.htmlファイルの中で、半角の!（エクスクラメーションマーク）を1文字だけ入力して、そのままTabキーを押してみてください。一瞬で基本構造が展開されます！これはプロも使う技なので、ぜひ覚えてくださいね。
3. タグの解説
それぞれの行が何をしているのか、簡単に解説します。
<!DOCTYPE html>
「このファイルはHTML5というルールで作られていますよ！」という、ブラウザへの宣言文です。最初のおまじないだと思ってください。
<html>
ここからここまでがHTMLですよ、という全体の範囲を示します。すべての要素の親玉です。
lang="ja"は、このページが日本語（Japanese）で書かれていることを示します。
<head>
ページの「設定情報」を入れる部分です。ここに書いた内容は、ページの画面には直接表示されません。
ブラウザのタブに表示されるタイトルや、文字化けを防ぐ設定など、裏方の重要な情報を書きます。
<meta charset="UTF-8">
「文字コードはUTF-8を使います」という指定です。これがないと日本語が「???」のように文字化けすることがあるので、必ず入れておきましょう。これもおまじないの一つです。
<title>
このページのタイトルです。ブラウザのタブに表示される名前になります。
<body>
実際にブラウザの画面に表示される内容を書く部分です。ユーザーに見せたい文章や画像は、すべてこの<body>タグの中に書いていきます。
【今日のミッション】
VS Codeの!+TabキーでHTMLの基本構造を呼び出してみましょう。
<title>タグの中身を「（あなたの名前）の練習ページ」に変えてみましょう。
<body>タグの中身を「HTMLの勉強スタート！」という文章に変えてみましょう。
ファイルを保存（Ctrl + S または Cmd + S）して、ブラウザで開いてみてください。
【確認ポイント】
ブラウザのタブに、自分で変えたタイトルが表示されていますか？
ページの白い画面に、「HTMLの勉強スタート！」と表示されていますか？
これができれば、今日のミッションは完璧にクリアです！
Day 2：テキストを表示しよう
昨日はHTMLの「骨格」を学びましたね。<body>タグの中に書いたものが画面に表示される、ということがポイントでした。
今日は、その<body>の中に、文章の「役割」を示すための基本的なタグ、見出し (<h1>) と 段落 (<p>) を学んでいきます。ただ文字を書くだけでなく、「これは見出しです」「これは普通の文章です」と意味を持たせることで、人間にも、そして検索エンジンなどのコンピュータにも分かりやすいページを作ることができます。
1. 見出し (<h1> 〜 <h6>)
見出しタグは、その名の通り「文章の見出し」を作るためのタグです。本の「第1章」や新聞の「ヘッドライン」のような役割を果たします。
見出しには、重要度に応じて<h1>から<h6>までの6段階があります。