はじめに 🚀

この記事は、HTML/CSSの超初心者向け実習ガイドです。
「Webページってどうやって作るの？」と思っている方に向けて、30分で「なるほど！」「できた！」が体感できる内容になっています。

この記事でわかること 🎯

HTMLとCSSって何？という疑問がスッキリする
VSCodeでWebページを実際に作ってみる
シンプルだけど感動できる「はじめの一歩」

Webページの仕組みって？🤔

実はたった2つの要素でできてます：

要素	役割	例えると…
🧱HTML	ページの内容・構造を作る	建物の骨組みや間取り
🎨CSS	見た目やデザインを整える	壁紙・インテリア・照明など

HTMLとは？ 📖

HTMLは「タグ（記号）」で構造を作る言語です。以下のコードを見てください👇

<h1>こんにちは、世界！</h1>
<p>これは、はじめてのWebページです。</p>
<img src="images/cat.jpg" alt="かわいい猫の写真">

タグの意味

<h1>：ページのタイトル（大見出し）
<p>：文章（段落）
<img>：画像を表示

💡ポイント：HTMLタグは <タグ名>～</タグ名> で囲みます（一部例外あり）。

CSSとは？ 🎨

CSSは、HTMLで作った構造に「色・形・デザイン」を追加するためのものです。

例えば…

h1 {
  color: royalblue;
  font-size: 36px;
  font-weight: bold;
}

このコードを加えると、<h1>のタイトルが青くて大きく、強調された文字になります！

HTML＋CSS：実際に作ってみよう 💻

フォルダ構成

my-website/
├── index.html      ← ページ本体
├── style.css       ← デザイン設定
└── images/
    └── cat.jpg     ← 表示する画像

`index.html`

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>わたしのWebサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは、世界！</h1>
  <p>はじめてのHTMLページへようこそ。</p>
  <img src="images/cat.jpg" alt="かわいい猫の写真">
</body>
</html>

`style.css`

body {
  background-color: #f0f8ff;
  font-family: "Noto Sans JP", sans-serif;
}

h1 {
  color: royalblue;
  font-size: 36px;
  text-align: center;
}

p {
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

img {
  display: block;
  margin: 20px auto;
  width: 300px;
  border-radius: 8px;
}

よくあるミス＆解決法 🔍

よくあるミス	解決方法
ファイルが開かない	拡張子が `.txt` → `.html` に変更しよう
日本語が文字化け	`<meta charset="UTF-8">` を忘れずに
CSSが反映されない	`<link>` でCSSを正しく読み込んでるか確認
画像が表示されない	`images/cat.jpg`のファイルパスや名前に注意

練習課題 ✍️

自分の名前と趣味を入れたHTMLページを作ろう
好きな色をCSSで設定してみよう
写真をもう1枚追加してみよう

次のステップへ 🚀

✅ レベル2：リンクをつけてみる（<a>タグ）
✅ レベル3：レイアウトに挑戦（Flexbox入門）
✅ レベル4：スマホでもきれいに見える（レスポンシブデザイン）

よくある質問 💬

Q：「保存したのに反映されません」
A：ブラウザで[Ctrl] + [R] で再読み込みしてみましょう。キャッシュが原因かも。

Q：「CSSが反映されない」
A：link rel="stylesheet" のパスに間違いがないか確認してください。

まとめ 🌟

HTMLはページの構造
CSSはページの見た目
保存→ブラウザで確認が基本の流れ
最初の1歩が踏み出せれば、Webの世界はすぐそこ！

おわりに 🎉

このページを見て、少しでも「Webページって楽しいかも」と思えたら嬉しいです！
次は画像・リンク・ボタンを追加して、もっとカラフルなページを作ってみましょう！

📌 おすすめツール

Visual Studio Code
Live Server（拡張機能）
→ ブラウザが自動更新されて便利！