はじめに 🚀
この記事は、HTML/CSS基礎実習の内容をまとめたものです。30分で「はじめの一歩」をマスターできるよう、わかりやすく解説しています (๑•̀ㅂ•́)و✧
今日のゴール 🎯
- HTMLとCSSの正体を知る 📚
- 実際にWebページを作る 💻
- 「できた！」を体験する ✨
すべてのサンプルコードはコピペで動作するよう作成していますので、安心して進めてください ( ´∀｀)b
Webページって何でできてるの？ 🤔
Webページの正体 = 「文書」+「見た目」
Webページは実は、たった2つの要素で構成されています：
🧱 HTML：内容・構造をつくる（骨組み）
- 文章、見出し、画像を配置 📝
- 「何を表示するか」を決める ✍️
🎨 CSS：見た目・色・レイアウトを整える（服・化粧）
- 色、大きさ、配置を決める 🌈
- 「どう見せるか」を決める 💄
例：建物で例えると 🏠
- HTML = 鉄骨・コンクリート（構造） 🔧
- CSS = 壁紙・塗装・インテリア（装飾） 🎨
HTMLの基本を理解しよう 📖
HTMLはタグでできている！ (｡>﹏<｡)
HTMLは「タグ」という特殊な記号を使って構造を作ります。
<h1>こんにちは、世界！</h1>
<p>はじめてのHTMLページです。</p>
<img src="cat.jpg" alt="かわいい猫">
重要ポイント ⭐
-
<h1>= タイトル（大見出し） 📢 -
<p>= 段落（文章） 📄 -
<img>= 画像を表示 🖼️
覚え方のコツ 💡
タグは「< >」で囲む → 終了は「 >」 ( •̀ ω •́ )✧
CSSでデザインを整えよう 🎨
CSSはデザイン担当！ページに色をつけよう ✨
HTMLだけだと、このように表示されます：
Before（HTMLのみ） 😑
こんにちは、世界！（黒い普通の文字）
しかし、CSSを追加することで：
h1 {
color: blue;
font-size: 36px;
}
After（CSS追加） 🎉
こんにちは、世界！（青くて大きな文字に変身！）
CSSの基本ルール 📏
- セレクター（h1）= どの要素を 🎯
- プロパティ（color）= 何を変更 🔧
- 値（blue）= どう変更 💙
HTML + CSSを組み合わせる 🤝
Webページはこの2つで完成！ (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
実際のWebページは、HTMLとCSSを組み合わせて作成します。
index.html（内容） 📄
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>わたしのWebサイト</h1>
<p>ようこそ！これが私の最初のページです。</p>
</body>
</html>
style.css（見た目） 💅
css
h1 {
color: green;
}
p {
font-size: 18px;
}
ファイル構成を理解しよう 📁
作業はフォルダの中で完結！ (｡•̀ᴗ-)✧
Webサイトは以下のような構成で作成します：
my-website/
├── index.html ← ページの本体 📄
├── style.css ← デザインルール 🎨
└── images/ ← 画像フォルダ 🖼️
└── cat.jpg
重要な約束事 📋
-
index.html= メインページの名前 🏠 -
style.css= CSSファイルの名前 💄 - 必ず同じフォルダに保存する 📂
よくあるミス ⚠️
- ファイル名のスペルミス (>_<)
- 拡張子を忘れる（.html, .css） 💦
まとめと次のステップ 🎓
今日わかったこと ✅
重要ポイント 🌟
- Webページは HTML + CSS でできてる！ 🤝
- タグで構造をつくる（
<h1>,<p>） 🏗️ - CSSで見た目を変える（
color,font-size） 🎨 - 「書いて→保存→ブラウザで確認」 が基本の流れ 🔄
次回までの宿題 📚
- 自分の名前でページを作ってみる ✍️
- 好きな色を調べてCSSに追加 🌈
- 友達や家族に作ったページを見せる 👨👩👧👦
次のステップ 🚀
- レベル2：画像を追加、リンクを作る 🖼️🔗
- レベル3：美しいレイアウト作成 ✨
- レベル4：スマホ対応ページ 📱
皆さん、最初の一歩完了です！おめでとうございます！ ヾ(≧▽≦*)o
よくある質問とトラブル対処法 🆘
よくある質問と回答 💬
Q1：「ファイルが開けません」 😥
A：拡張子が「.txt」になっていませんか？必ず「.html」で保存してください。(´･ω･`)
Q2：「文字が変になります」 😵
A：日本語の文字化けですね。ファイル保存時に「UTF-8」を選択してください。(๑•﹏•)
Q3：「何も表示されません」 😰
A：タグの書き間違いをチェック。<h1>なら必ず</h1>で閉じましょう。( •̀ ω •́ )✧
トラブル対処チェックリスト 📝
- ファイル名は正しい？（index.html） ✔️
- 拡張子は正しい？（.html） ✔️
- タグは正しく閉じている？ ✔️
- 保存を忘れていない？ ✔️
- 正しいファイルを開いている？ ✔️
学習時間の目安 ⏰
- 基本概念の理解：10分 📚
- HTMLの基礎：8分 🧱
- CSSの基礎：7分 🎨
- 実践とまとめ：5分 ✨
合計30分で基礎をマスター！ ( ´∀｀)b