2025.08.03 2025.08.09

30日で学ぶWEB開発１日目（HTML・CSS 編）- WEB開発の世界へようこそ

mattabi2013

Day 01: Web開発の世界へようこそ

Contents

プロローグ：運命の出会い
Web制作って何？なぜ学ぶの？
インターネットとWebページの仕組み
Webページの骨組みを理解しよう
基本構造を実際に書いてみよう
5時限目: 基本タグをマスターしよう – 文章を構造化する {#5時限目}
6時限目: 総合演習 – 今日の振り返りと明日への準備 {#6時限目}
エピローグ：新しい世界への第一歩

プロローグ：運命の出会い

朝の陽射しが差し込むPixel Café。カフェのマスターが、いつものように豆を挽きながら、アルバイトの休憩中にカウンターで勉強している天野美来（アマノミライ）に声をかけた。

マスター

ミライちゃん、ちょっといいかな？実はね、うちのWebサイトをリニューアルしたいんだけど…

ミライは顔を上げた。大学でデザインを学んでいる彼女にとって、Webデザインは興味はあるものの、まだ未知の領域だった。

ミライ

でも、私、Webページの作り方とか全然わからないです…

すると急に大きく強い声が響いた。隣のテーブルから立ち上がったのは、いつもノートPCを開いている常連客だった。

コード先輩

大丈夫！　俺、ケンスケ。みんなからは『コード先輩』って呼ばれてる。よかったら教えてあげるよ！

その時、ケンスケの肩に小さな光る何かが現れた。

ピクセル

やあ！僕はピクセル。Web世界に住むロボットさ！僕もミライちゃんの学習をサポートするよ！

こうして、ミライの30日間の冒険が始まった。

オリエンテーション

Web制作って何？なぜ学ぶの？

🎯 この時限で学ぶこと

Web制作の全体像を理解し、なぜHTML&CSSを学ぶのか、30日後にどんな自分になれるのかを明確にします。学習への動機づけと、成功への道筋を描きます。

今日から始まる新しい世界

「さあ、ミライちゃん。まずはWeb制作がどんな仕事か、なぜ学ぶ価値があるのか話そうか」とコード先輩が優しく語りかけた。

ピクセルがミライの前でくるくると回りながら言った。

ピクセル

Webデザイナーって、インターネット上の『家』を作る建築家みたいなものだよ！

ミライが首を傾げた。

ミライ

建築家…？

ピクセルが嬉しそうに説明を続けた。「

ピクセル

そう！建築家が設計図を描いて家を建てるように、Webデザイナーはコードを書いてWebサイトを作るんだ。そこで、使うのが、HTMLとCSSとJavaScriptだよ。

コード先輩

HTMLが骨組みで、CSSが装飾。そしてJavaScriptが動きを加えるんだ。

Webデザイナーの仕事とは？

コード先輩がラップトップを開き、いくつかのWebサイトを見せ始めた。「実際のWebデザイナーの仕事を見てみよう」

Webデザイナーの仕事は、単に「きれいなサイトを作る」だけではありません。ユーザーが使いやすく、目的を達成できるWebサイトを設計・制作することが本質です。

主な仕事内容：

企画・設計：クライアントの要望を聞き、サイトの構成を考える
デザイン：見た目の美しさと使いやすさを両立させる
コーディング：HTMLとCSSを使って実際のWebページを作る
運用・改善：公開後も継続的に改善していく

「でも、フロントエンドとバックエンドって何が違うの？」ミライが質問した。

コード先輩が笑顔で答えた。「いい質問だね！フロントエンドはユーザーが直接見て操作する部分。今回学ぶHTMLとCSSはまさにこれ。バックエンドはサーバー側でデータを処理する部分で、PHPやPythonなどを使うんだ」

「つまり」ピクセルが図を空中に描きながら説明した。「フロントエンドは『お店の内装』、バックエンドは『厨房』みたいなものだよ！」

なぜHTML&CSSを学ぶのか

現代社会において、Webの知識は特別なスキルではなく、基礎教養になりつつあります。

学ぶメリット：

すべてのWebページの基礎
- どんなに複雑なWebサイトも、最終的にはHTMLとCSSで表示される
- ReactやVue.jsなどのフレームワークも、結局はHTMLとCSSを生成している
即効性がある
- プログラミング言語の中で最も学習曲線が緩やか
- 学んだことをすぐに実践でき、結果が目に見える
需要が高い
- Web制作の仕事は常に需要があり、フリーランスとしても活動しやすい
- 副業としても始めやすく、在宅ワークにも適している
創造性を発揮できる
- 技術と芸術が融合した分野
- 自分のアイデアを形にできる喜び

ピクセルが付け加えた。「それに、自分で作ったWebサイトが世界中の人に見てもらえるなんて、わくわくしない？」

「確かに…！」ミライの目が輝き始めた。

30日後の到達目標

「じゃあ、30日後にミライちゃんがどうなっているか、具体的に見てみよう」コード先輩がノートPCの画面を見せた。

30日後のあなた：

✅ HTMLとCSSの基礎を完全にマスター
✅ レスポンシブデザインが作れる
✅ Flexbox、Gridを使いこなせる
✅ アニメーションやトランジションを実装できる
✅ 実践的なWebサイトを3つ以上制作
✅ ポートフォリオサイトを公開
✅ Git/GitHubでバージョン管理ができる
✅ 実務レベルの基礎スキルを習得

「すごい…！本当に私がこんなことできるようになるの？」

「もちろん！」コード先輩とピクセルが同時に答えた。

効果的な学習方法

成功への秘訣は、正しい学習方法を身につけることです。

学習の3つの柱：

インプット（知識）
- 講義を聞いて理解する
- 参考書や動画で補強する
- 基礎概念をしっかり押さえる
アウトプット（実践）
- 実際に手を動かして作る
- サンプルコードを改造してみる
- オリジナル作品に挑戦する
フィードバック（改善）
- エラーから学び、改善する
- 他の人の作品を参考にする
- コードレビューを受ける

ピクセルが追加した。「僕の統計では、成功する人の90%は、毎日コードを書いているんだ。『読むだけ』では身につかないよ」

日々の学習リズム：

朝：前日の復習（15分）
昼：新しい内容の学習（45分）
夜：実践演習（30分）

「特に大切なのは、エラーを恐れないことだよ」コード先輩が強調した。「エラーは敵じゃない。むしろ最高の先生なんだ」

開発環境の準備

「よし、じゃあ実際に準備を始めよう！」コード先輩が立ち上がった。

必要なツール：

テキストエディタ：VS Code
- 無料で高機能
- 豊富な拡張機能
- 初心者にも使いやすい
Webブラウザ：Google Chrome
- 開発者ツールが充実
- 最新のWeb標準に対応
- デバッグがしやすい
拡張機能：
- Live Server：リアルタイムプレビュー
- Japanese Language Pack：日本語化
- Prettier：コード整形
- HTML CSS Support：入力補完

[コード: code01-1-01]

# VS Codeのインストール後、以下の拡張機能をインストール
1. Live Server
2. Japanese Language Pack for VS Code
3. Prettier - Code formatter
4. HTML CSS Support

「これで準備完了！」ピクセルが喜んだ。「次の時限からは、いよいよWebの仕組みについて学ぶよ！」

Webの基礎知識

インターネットとWebページの仕組み

🎯 この時限で学ぶこと

インターネットとWebの違いを理解し、Webサイトがどのように動作するのか、その仕組みを学びます。HTML、CSS、JavaScriptの役割分担についても明確にします。

普段使うWebサイトの裏側

「ミライちゃん、普段どんなWebサイトを使ってる？」コード先輩が尋ねた。

「えーと、InstagramとかTwitter、あとはAmazonとか…」

「じゃあ、それらがどうやって動いているか、考えたことある？」

ミライは首を横に振った。「魔法みたいに表示されるものだと思ってました」

ピクセルが笑いながら飛び跳ねた。「魔法じゃないけど、仕組みを知ると魔法みたいに感じるよ！」

インターネットとWebの違い

まず、よく混同される「インターネット」と「Web」の違いを理解しましょう。

インターネット：

コンピュータ同士をつなぐネットワークの集合体
1969年のARPANETが起源
メール、ファイル転送、Webなど様々なサービスの基盤
道路や鉄道のような「インフラ」

Web（World Wide Web）：

インターネット上で動作するサービスの一つ
1989年にティム・バーナーズ・リーが発明
HTML、URL、HTTPという3つの技術が基盤
インターネットという道路を走る「車」のようなもの

「なるほど！」ミライが理解し始めた。「インターネットが道路で、Webがその上を走る車なんですね」

「その通り！」コード先輩が褒めた。「そして、HTMLはその車の設計図みたいなものだよ」

Webサイトが表示される仕組み

ピクセルが小さなプロジェクターを出して、壁に図を映し出した。「Webサイトが表示されるまでの流れを見てみよう！」

Webページ表示の流れ：

URLを入力
- ブラウザのアドレスバーにURLを入力
- 例：https://www.example.com
DNSサーバーへ問い合わせ
- URLからIPアドレスを取得
- 例：www.example.com → 93.184.216.34
HTTPリクエスト送信
- ブラウザがWebサーバーにページを要求
- GET /index.html HTTP/1.1
サーバーからレスポンス
- HTMLファイルが返される
- 関連するCSS、JavaScript、画像も取得
ブラウザがレンダリング
- HTMLを解析して構造を作る
- CSSを適用してデザインを整える
- JavaScriptを実行して動きを加える

[コード: code01-2-01]

ユーザー「https://pixel-cafe.com を見たい！」
    ↓
ブラウザ「DNSさん、pixel-cafe.comのIPアドレス教えて」
    ↓
DNS「それは203.0.113.10だよ」
    ↓
ブラウザ「203.0.113.10のサーバーさん、index.htmlください」
    ↓
サーバー「はい、どうぞ！CSSとJavaScriptもあるよ」
    ↓
ブラウザ「よし、組み立てて表示するね」
    ↓
ユーザー「きれいなサイトが見れた！」

HTML/CSS/JavaScriptの役割

「Web制作の三銃士を紹介するよ！」ピクセルが元気よく言った。

HTML（HyperText Markup Language）：

Webページの構造を定義
見出し、段落、リンク、画像などの要素を配置
建物で例えると「骨組み」
拡張子：.html

CSS（Cascading Style Sheets）：

Webページの見た目を装飾
色、フォント、レイアウト、アニメーション
建物で例えると「内装・外装」
拡張子：.css

JavaScript：

Webページに動きを追加
ユーザーの操作に反応、データの処理
建物で例えると「電気・水道・エレベーター」
拡張子：.js

[コード: code01-2-02]

HTML

<!-- HTML：構造 -->
<h1>Pixel Café</h1>
<p>最高のコーヒーと学びの場</p>
<button>注文する</button>

<!-- CSS：装飾 -->
<style>
h1 { color: brown; font-size: 32px; }
p { color: gray; }
button { background: orange; }
</style>

<!-- JavaScript：動き -->
<script>
button.onclick = function() {
  alert('ご注文ありがとうございます！');
}
</script>

<!-- HTML：構造 -->
<h1>Pixel Café</h1>
<p>最高のコーヒーと学びの場</p>
<button>注文する</button>

<!-- CSS：装飾 -->
<style>
h1 { color: brown; font-size: 32px; }
p { color: gray; }
button { background: orange; }
</style>

<!-- JavaScript：動き -->
<script>
button.onclick = function() {
  alert('ご注文ありがとうございます！');
}
</script>

ブラウザの種類と特徴

「ところで、ブラウザって色々あるよね」コード先輩が続けた。「それぞれ特徴があるんだ」

主要なブラウザ：

Google Chrome
- シェア率No.1（約65%）
- 高速で安定
- 開発者ツールが充実
- 拡張機能が豊富
Safari
- Apple製品に標準搭載
- 省電力で高速
- iOSでは唯一のエンジン
- Macとの連携が優秀
Firefox
- プライバシー重視
- オープンソース
- 開発者に人気
- カスタマイズ性が高い
Microsoft Edge
- Windows標準ブラウザ
- Chromiumベース
- Microsoft製品との連携
- 垂直タブが便利

「開発にはChromeがおすすめだよ」ピクセルがアドバイスした。「でも、作ったサイトは全部のブラウザで確認する必要があるんだ」

レンダリングエンジンとWeb標準

「ブラウザの中身には『レンダリングエンジン』というものがあってね」コード先輩が説明を続けた。

レンダリングエンジン：

HTMLとCSSを解釈して画面に表示する部分
Blink（Chrome、Edge）
WebKit（Safari）
Gecko（Firefox）

Web標準の重要性：

W3C（World Wide Web Consortium）が策定
すべてのブラウザで同じように表示されることを目指す
HTML5、CSS3などのバージョン管理
新機能の追加と古い機能の廃止

「標準に従って書けば、どのブラウザでも同じように見えるんだね！」ミライが理解した。

開発者ツールで覗いてみよう

「じゃあ、実際にWebサイトの裏側を見てみよう！」コード先輩がChromeを開いた。

[コード: code01-2-03]

開発者ツールの開き方：
1. Windows: F12 または Ctrl + Shift + I
2. Mac: Cmd + Option + I
3. 右クリック → 「検証」を選択

開発者ツールの主な機能：

Elements：HTMLとCSSの確認・編集
Console：JavaScriptのエラー確認
Network：通信の詳細
Sources：ファイルの中身
Performance：パフォーマンス分析

「すごい！普段見ているサイトの裏側ってこんなにコードがあるんだ」ミライが驚いた。

「これから30日間で、君もこういうコードが書けるようになるよ」コード先輩が励ました。

HTML入門

Webページの骨組みを理解しよう

🎯 この時限で学ぶこと

HTMLとは何か、その基本概念を理解します。タグと要素の違い、よく使うHTMLタグの一覧、そして基本的なHTML文書の構造について学びます。

いよいよHTMLの学習開始

「さあ、いよいよHTMLの勉強を始めるよ！」ピクセルが張り切って言った。

ミライは少し緊張した面持ちで答えた。「ドキドキする…でも楽しみ！」

「その気持ち、よくわかるよ」コード先輩が優しく微笑んだ。「僕も最初はそうだった。でも大丈夫、一つずつ理解していけばいいんだ」

HTMLとは何か

**HTML（HyperText Markup Language）**は、Webページの構造を記述するマークアップ言語です。

HTMLの特徴：

プログラミング言語ではなく、マークアップ言語
文書に「意味」を与える
1993年に最初のバージョンが登場
現在の最新版はHTML5（正確にはHTML Living Standard）

「マークアップって何？」ミライが質問した。

ピクセルが本を取り出して見せた。「例えば、本には『見出し』『段落』『注釈』があるよね。HTMLも同じように、文書に『これは見出し』『これは段落』という印をつけるんだ」

マークアップの例：

普通の文章：
Pixel Caféへようこそ
最高のコーヒーと学びの場

HTMLでマークアップ：
<h1>Pixel Caféへようこそ</h1>
<p>最高のコーヒーと学びの場</p>

タグと要素の概念

HTMLの基本単位は「タグ」と「要素」です。この違いを理解することが重要です。

タグ（Tag）：

<>で囲まれた命令
開始タグ：
終了タグ：
単独タグ：（終了タグ不要）

要素（Element）：

タグとその中身全体
開始タグ + コンテンツ + 終了タグ
例：Hello World

[コード: code01-3-01]

<!-- これはタグ -->
<p></p>

<!-- これは要素（タグ + コンテンツ） -->
<p>これは段落要素です</p>

<!-- 入れ子構造も可能 -->
<div>
  <p>外側のdiv要素の中にある段落要素</p>
</div>

属性（Attribute）：

タグに追加情報を付与
属性名=”値”の形式
複数指定可能

[コード: code01-3-02]

<!-- 属性の例 -->
<a href="https://example.com">リンク</a>
<img src="photo.jpg" alt="写真の説明">
<p class="important" id="first">重要な段落</p>

よく使うHTMLタグ一覧

「じゃあ、よく使うタグを分類して見てみよう」コード先輩がホワイトボードに書き始めた。

文書構造タグ：

<!DOCTYPE html>  <!-- HTML5宣言 -->
<html>          <!-- HTML文書のルート -->
<head>          <!-- メタ情報 -->
<body>          <!-- 表示内容 -->

テキスト関連タグ：

<h1>〜<h6>      <!-- 見出し（h1が最大） -->
<p>             <!-- 段落 -->
<br>            <!-- 改行 -->
<hr>            <!-- 水平線 -->
<strong>        <!-- 重要（太字） -->
<em>            <!-- 強調（斜体） -->

リスト関連タグ：

<ul>            <!-- 順序なしリスト -->
<ol>            <!-- 順序付きリスト -->
<li>            <!-- リスト項目 -->
<dl>            <!-- 説明リスト -->
<dt>            <!-- 説明する言葉 -->
<dd>            <!-- 説明内容 -->

リンク・メディアタグ：

<a>             <!-- リンク -->
<img>           <!-- 画像 -->
<video>         <!-- 動画 -->
<audio>         <!-- 音声 -->

グループ化タグ：

<div>           <!-- ブロック要素のグループ -->
<span>          <!-- インライン要素のグループ -->
<header>        <!-- ヘッダー部分 -->
<nav>           <!-- ナビゲーション -->
<main>          <!-- メインコンテンツ -->
<footer>        <!-- フッター部分 -->
<article>       <!-- 記事 -->
<section>       <!-- セクション -->

HTMLの基本構造

「HTMLドキュメントには決まった型があるんだ」コード先輩が説明を続けた。

[コード: code01-3-03]

<!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>こんにちは、世界！</h1>
    <p>これが私の最初のWebページです。</p>
</body>
</html>

各部分の説明：

- HTML5文書であることを宣言
- 必ず最初に書く
- 大文字小文字は区別しない
- HTML文書のルート要素
- lang属性で言語を指定（日本語=”ja”）
- アクセシビリティのために重要
- ページのメタ情報を記述
- ブラウザには表示されない
- タイトル、文字コード、CSSなど
- 実際に表示される内容
- すべての表示要素はここに記述
- headの後に必ず配置

セマンティックHTMLの重要性

ピクセルが重要そうに言った。「HTMLには『セマンティック（意味的）』という考え方があるんだ」

セマンティックHTMLとは：

タグに意味を持たせる
正しいタグを正しい用途で使う
機械（検索エンジン）にも理解しやすい
アクセシビリティの向上

良い例と悪い例： [コード: code01-3-04]

<!-- ❌ 悪い例：すべてdivで構成 -->
<div>
  <div>Pixel Café</div>
  <div>
    <div>ホーム</div>
    <div>メニュー</div>
    <div>アクセス</div>
  </div>
  <div>最高のコーヒーをお届けします</div>
</div>

<!-- ✅ 良い例：適切なタグを使用 -->
<header>
  <h1>Pixel Café</h1>
  <nav>
    <a href="/">ホーム</a>
    <a href="/menu">メニュー</a>
    <a href="/access">アクセス</a>
  </nav>
  <p>最高のコーヒーをお届けします</p>
</header>

「なるほど！タグにはそれぞれ意味があるんですね」ミライが理解し始めた。

「その通り！」コード先輩が頷いた。「見出しにはh1〜h6、段落にはp、ナビゲーションにはnavを使う。これがプロの書き方だよ」

実践：簡単なマークアップ

「じゃあ、実際に簡単なHTMLを書いてみよう」ピクセルが提案した。

[コード: code01-3-05]

<!-- 練習：自己紹介をHTMLで書いてみよう -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ミライの自己紹介</title>
</head>
<body>
    <h1>天野ミライです</h1>
    <p>大学でデザインを学んでいます。</p>
    
    <h2>好きなもの</h2>
    <ul>
        <li>カフェラテ</li>
        <li>読書</li>
        <li>散歩</li>
    </ul>
    
    <h2>目標</h2>
    <p>30日後には素敵なWebサイトを作れるようになりたいです！</p>
</body>
</html>

「できた！」ミライが嬉しそうに画面を見せた。

「素晴らしい！」コード先輩とピクセルが同時に褒めた。「もうHTMLの基本は理解できているね」

初めてのHTML

基本構造を実際に書いてみよう

🎯 この時限で学ぶこと

VS Codeを使って実際にHTMLファイルを作成し、ブラウザで表示するまでの流れを体験します。DOCTYPE宣言、head要素、body要素の役割を深く理解します。

初めてのコーディング

「いよいよ実際にコードを書く時間だよ！」ピクセルが興奮気味に言った。

ミライは深呼吸をした。「緊張する…でもワクワクする！」

「その気持ち、大切にして」コード先輩が励ました。「プログラマーは皆、最初の『Hello World』を覚えているものだよ」

VS Codeでファイル作成

まずは開発環境のVS Codeでファイルを作成しましょう。

手順：

VS Codeを起動
「ファイル」→「新規ファイル」
「ファイル」→「名前を付けて保存」
ファイル名：index.html
保存場所：デスクトップにpixel-cafeフォルダを作成

[コード: code01-4-01]

フォルダ構造：
pixel-cafe/
  └── index.html

「なぜindex.htmlという名前にするの？」ミライが質問した。

「いい質問！」コード先輩が答えた。「Webサーバーは、フォルダにアクセスされたとき、自動的にindex.htmlを探すんだ。だから、トップページは通常index.htmlという名前にするよ」

DOCTYPE宣言の意味

HTMLファイルの最初に必ず書く宣言があります。

[コード: code01-4-02]

<!DOCTYPE html>

DOCTYPE宣言の役割：

HTML5で書かれていることを宣言
ブラウザに正しい解釈モードを指示
標準モードでのレンダリングを保証
後方互換性の問題を回避

歴史的背景：

<!-- 昔のHTML4.01の宣言（複雑！） -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- 現在のHTML5（シンプル！） -->
<!DOCTYPE html>

ピクセルが補足した。「HTML5になってすごくシンプルになったんだ。覚えやすいでしょ？」

head要素の役割

head要素は、ページの「頭脳」に相当する部分です。

[コード: code01-4-03]

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Pixel Caféの公式サイト">
    <title>Pixel Café - 最高のコーヒーと学びの場</title>
    <link rel="stylesheet" href="style.css">
</head>

必須のmeta要素：

文字エンコーディング

<meta charset="UTF-8">

日本語を正しく表示するために必須
UTF-8は世界中の文字を扱える
必ずheadの最初の方に記述

ビューポート設定

<meta name="viewport" content="width=device-width, initial-scale=1.0">

レスポンシブデザインに必須
スマホでの表示を最適化
ピンチズームの制御も可能

ページの説明

<meta name="description" content="ページの説明文">

検索結果に表示される説明文
120文字程度が理想
SEOに重要

body要素の役割

body要素は、実際にブラウザに表示される内容を記述します。

[コード: code01-4-04]

<body>
    <!-- ここに表示したい内容をすべて記述 -->
    <header>
        <h1>Pixel Café</h1>
    </header>
    
    <main>
        <p>ようこそ、Pixel Caféへ！</p>
    </main>
    
    <footer>
        <p>&copy; 2024 Pixel Café</p>
    </footer>
</body>

body内の構造化：

header：ページの上部、ロゴやナビゲーション
main：メインコンテンツ（1ページに1つだけ）
footer：ページの下部、著作権表示など

文字化け対策

「日本語を使うときは、文字化けに注意が必要だよ」コード先輩が重要なポイントを説明した。

文字化けを防ぐ3つのポイント：

HTMLファイルの文字コード
- ファイル自体をUTF-8で保存
- VS Codeの右下で確認・変更可能
meta charsetの指定

<meta charset="UTF-8">

サーバーの設定
- 通常は問題ないが、古いサーバーでは注意
- .htaccessで設定可能

[コード: code01-4-05]

<!-- 文字化けのテスト用HTML -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>文字化けテスト</title>
</head>
<body>
    <h1>日本語の表示テスト</h1>
    <p>ひらがな：あいうえお</p>
    <p>カタカナ：アイウエオ</p>
    <p>漢字：日本語表示</p>
    <p>記号：！？￥＠＃</p>
    <p>絵文字：😊🎉✨</p>
</body>
</html>

最初のHTMLファイル作成

「さあ、実際に最初のHTMLファイルを完成させよう！」ピクセルが応援した。

[コード: code01-4-06]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="私の最初のWebページ">
    <meta name="author" content="天野ミライ">
    <title>Hello World - 私の最初のWebページ</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>こんにちは、世界！</p>
    <p>私の名前は天野ミライです。</p>
    <p>今日からWeb開発の勉強を始めました！</p>
    
    <hr>
    
    <p>作成日：<time datetime="2024-01-01">2024年1月1日</time></p>
</body>
</html>

ブラウザで確認

「できた！じゃあブラウザで見てみよう」コード先輩が次の手順を示した。

Live Serverで確認：

VS Codeでindex.htmlを開く
右クリック→「Open with Live Server」
ブラウザが自動で開く
リアルタイムで変更が反映

「わあ！本当にWebページが表示された！」ミライが感動した。

「これが君の最初の作品だよ」コード先輩が微笑んだ。「シンプルだけど、すべてのWebサイトはここから始まるんだ」

よくあるミスと対処法

ピクセルが注意点をまとめた。「初心者がよくやるミスを知っておこう」

よくあるミス：

タグの閉じ忘れ

<!-- ❌ 悪い例 -->
<p>段落です
<p>次の段落です</p>

<!-- ✅ 良い例 -->
<p>段落です</p>
<p>次の段落です</p>

入れ子の順序間違い

<!-- ❌ 悪い例 -->
<p><strong>太字です</p></strong>

<!-- ✅ 良い例 -->
<p><strong>太字です</strong></p>

属性値の引用符忘れ

<!-- ❌ 悪い例 -->
<img src=photo.jpg>

<!-- ✅ 良い例 -->
<img src="photo.jpg">

「エラーが出ても慌てないで」コード先輩がアドバイスした。「一つずつ確認すれば必ず解決できるから」

↑目次に戻る

5時限目: 基本タグをマスターしよう – 文章を構造化する {#5時限目}

🎯 この時限で学ぶこと

実際のWebページで最もよく使う基本的なHTMLタグをマスターします。見出し、段落、リスト、リンク、画像の正しい使い方を、Pixel Caféの紹介ページを作りながら学びます。

Pixel Caféの紹介ページ作成開始

「さて、基本タグを使って、実際にPixel Caféの紹介ページを作ってみよう！」コード先輩が提案した。

ミライは目を輝かせた。「本格的なページが作れるんですね！」

「そうだよ！」ピクセルが飛び跳ねた。「マスターも喜ぶような素敵なページを作ろう」

見出しタグ（h1〜h6）

見出しタグは文書の構造を明確にする重要な要素です。

見出しタグの特徴：

h1が最も重要（大きい）
h6が最も重要度が低い（小さい）
階層構造を守る（h1→h3のようなスキップはNG）
SEOにも重要な影響

[コード: code01-5-01]

<!-- 見出しの正しい使い方 -->
<h1>Pixel Café</h1>
  <h2>私たちについて</h2>
    <h3>こだわりのコーヒー</h3>
    <h3>快適な空間</h3>
  <h2>メニュー</h2>
    <h3>ドリンク</h3>
      <h4>コーヒー</h4>
      <h4>ティー</h4>
    <h3>フード</h3>
  <h2>アクセス</h2>

見出しタグのルール：

h1は1ページに1つが基本
順序を守る（h1→h2→h3）
見た目ではなく重要度で選ぶ
装飾目的で使わない（CSSを使う）

段落と改行（p、br）

文章を適切に区切ることで、読みやすいコンテンツを作ります。

[コード: code01-5-02]

<!-- 段落の使い方 -->
<p>Pixel Caféは、最高のコーヒーと快適な空間を提供する、
Web開発者のためのカフェです。</p>

<p>店内では無料Wi-Fiを完備し、電源も自由にお使いいただけます。
集中して作業したい方も、仲間と議論したい方も、
どなたでも歓迎いたします。</p>

<!-- 改行の使い方（詩や住所など） -->
<p>
営業時間：<br>
平日 8:00-22:00<br>
土日祝 9:00-21:00
</p>

p要素とbr要素の使い分け：

p要素：意味的なまとまりのある段落
br要素：段落内での強制改行（住所、詩など）
brの連続使用は避ける（余白はCSSで調整）

リスト（ul、ol、li）

情報を整理して表示するにはリストが最適です。

[コード: code01-5-03]

<!-- 順序なしリスト（ul） -->
<h3>Pixel Caféの特徴</h3>
<ul>
    <li>挽きたてのスペシャルティコーヒー</li>
    <li>高速Wi-Fi完備</li>
    <li>電源完備の作業スペース</li>
    <li>プログラミング関連書籍の閲覧可能</li>
</ul>

<!-- 順序付きリスト（ol） -->
<h3>コーヒーの淹れ方</h3>
<ol>
    <li>新鮮な豆を中挽きにする</li>
    <li>お湯を93度に温める</li>
    <li>30秒間蒸らす</li>
    <li>ゆっくりと円を描くように注ぐ</li>
    <li>3分で抽出完了</li>
</ol>

<!-- 入れ子のリスト -->
<ul>
    <li>ドリンクメニュー
        <ul>
            <li>コーヒー
                <ul>
                    <li>エスプレッソ</li>
                    <li>カプチーノ</li>
                    <li>カフェラテ</li>
                </ul>
            </li>
            <li>ティー</li>
        </ul>
    </li>
    <li>フードメニュー</li>
</ul>

リンク（a）

Webの本質は文書同士をつなぐリンクにあります。

[コード: code01-5-04]

<!-- 基本的なリンク -->
<a href="https://example.com">外部サイトへ</a>

<!-- 同じサイト内のリンク -->
<a href="menu.html">メニューページへ</a>
<a href="/about/">私たちについて</a>

<!-- ページ内リンク -->
<a href="#access">アクセス情報へジャンプ</a>

<!-- メールリンク -->
<a href="mailto:info@pixel-cafe.com">お問い合わせ</a>

<!-- 電話リンク -->
<a href="tel:03-1234-5678">03-1234-5678</a>

<!-- 新しいタブで開く -->
<a href="https://example.com" target="_blank" rel="noopener">
    外部サイト（新規タブ）
</a>

リンクのベストプラクティス：

リンクテキストは内容がわかるように
「こちら」「ここ」は避ける
target=”_blank”使用時はrel=”noopener”も追加
訪問済みリンクの色も考慮（CSSで）

画像（img）

ビジュアル要素は、Webページを魅力的にする重要な要素です。

[コード: code01-5-05]

<!-- 基本的な画像の挿入 -->
<img src="coffee.jpg" alt="挽きたてのコーヒー">

<!-- サイズ指定（レスポンシブ対応） -->
<img src="cafe-interior.jpg" 
     alt="Pixel Caféの店内" 
     width="800" 
     height="600">

<!-- 相対パスと絶対パス -->
<img src="images/logo.png" alt="Pixel Caféロゴ">           <!-- 相対パス -->
<img src="/images/logo.png" alt="Pixel Caféロゴ">          <!-- ルート相対パス -->
<img src="https://example.com/logo.png" alt="ロゴ">       <!-- 絶対パス -->

<!-- figure要素でキャプション付き -->
<figure>
    <img src="latte-art.jpg" alt="ラテアート">
    <figcaption>バリスタが描く美しいラテアート</figcaption>
</figure>

alt属性の重要性：

スクリーンリーダーで読み上げられる
画像が表示されない時の代替テキスト
SEOにも影響
装飾的な画像はalt=""（空）にする

実践：カフェ紹介ページ作成

「よし、学んだタグを使って、実際のページを作ってみよう！」コード先輩が促した。

[コード: code01-5-06]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Café - Web開発者のためのカフェ</title>
</head>
<body>
    <h1>Pixel Café</h1>
    <p>最高のコーヒーと快適な開発環境を提供する、Web開発者のためのカフェ</p>
    
    <h2>私たちについて</h2>
    <p>Pixel Caféは2024年にオープンした、プログラマーとデザイナーのためのカフェです。
    美味しいコーヒーを飲みながら、快適にコーディングできる環境を提供しています。</p>
    
    <h3>3つの約束</h3>
    <ol>
        <li>挽きたての香り高いコーヒー</li>
        <li>高速で安定したインターネット環境</li>
        <li>集中できる快適な作業スペース</li>
    </ol>
    
    <h2>人気メニュー</h2>
    <ul>
        <li>
            <strong>デバッグブレンド</strong><br>
            深煎りの力強い味わい - ¥500
        </li>
        <li>
            <strong>リファクタリングラテ</strong><br>
            すっきりとした後味 - ¥600
        </li>
        <li>
            <strong>コミットカプチーノ</strong><br>
            ふわふわフォームが自慢 - ¥550
        </li>
    </ul>
    
    <h2>アクセス</h2>
    <p>
        〒150-0001<br>
        東京都渋谷区神宮前1-2-3<br>
        Pixelビル 1F
    </p>
    <p>
        <a href="tel:03-1234-5678">📞 03-1234-5678</a><br>
        <a href="mailto:info@pixel-cafe.com">✉️ info@pixel-cafe.com</a>
    </p>
    
    <h2>SNS</h2>
    <p>最新情報はこちらから：</p>
    <ul>
        <li><a href="https://twitter.com/pixelcafe" target="_blank" rel="noopener">Twitter</a></li>
        <li><a href="https://instagram.com/pixelcafe" target="_blank" rel="noopener">Instagram</a></li>
        <li><a href="https://github.com/pixelcafe" target="_blank" rel="noopener">GitHub</a></li>
    </ul>
    
    <hr>
    <p><small>&copy; 2024 Pixel Café. All rights reserved.</small></p>
</body>
</html>

「すごい！本物のWebサイトみたい！」ミライが完成したページを見て感動した。

「これでHTMLの基本タグは一通り使えるようになったね」コード先輩が褒めた。「明日からはこれをもっと美しくデザインしていくよ」

↑目次に戻る

6時限目: 総合演習 – 今日の振り返りと明日への準備 {#6時限目}

🎯 この時限で学ぶこと

今日学んだすべての内容を振り返り、知識を定着させます。自己紹介ページを作成する課題に挑戦し、明日のCSS学習への期待を高めます。

初日の達成感

「お疲れさま！」マスターがコーヒーを運んできた。「初日はどうだった？」

ミライは充実感に満ちた表情で答えた。「最初は不安だったけど、もうHTMLでページが作れるようになりました！」

「それは素晴らしい」マスターが微笑んだ。「Webサイトのリニューアル、期待してるよ」

コード先輩とピクセルも嬉しそうに見守っていた。

今日学んだことの総復習

「じゃあ、今日学んだことをまとめてみよう」コード先輩がホワイトボードに書き始めた。

Day 1で学んだこと：

Web開発の基礎知識
- インターネットとWebの違い
- HTML/CSS/JavaScriptの役割
- ブラウザの仕組み
- 開発者ツールの使い方
HTMLの基本概念
- マークアップ言語の意味
- タグと要素の違い
- 属性の書き方
- セマンティックHTMLの重要性
HTML文書の構造
- DOCTYPE宣言
- html要素とlang属性
- head要素（メタ情報）
- body要素（表示内容）
基本的なHTMLタグ
- 見出し（h1〜h6）
- 段落（p）と改行（br）
- リスト（ul、ol、li）
- リンク（a）
- 画像（img）
実践的なスキル
- VS Codeでのファイル作成
- Live Serverでの確認
- 文字化け対策
- 正しいファイル構成

「すごい量を学んだんだね」ミライが驚いた。

ピクセルが補足した。「でも、ミライちゃんは全部理解できてるよ。素晴らしい吸収力だ！」

よくある間違いと対処法

「初心者がやりがちな間違いをもう一度確認しておこう」コード先輩が重要なポイントをまとめた。

HTMLでよくある間違い：

構造の間違い

<!-- ❌ 間違い：headとbodyの順序 -->
<body>
    <h1>タイトル</h1>
</body>
<head>
    <title>ページタイトル</title>
</head>

<!-- ✅ 正解 -->
<head>
    <title>ページタイトル</title>
</head>
<body>
    <h1>タイトル</h1>
</body>

タグの閉じ忘れ

<!-- ❌ 間違い -->
<div>
    <p>段落1
    <p>段落2</p>
</div>

<!-- ✅ 正解 -->
<div>
    <p>段落1</p>
    <p>段落2</p>
</div>

不適切なタグの使用

<!-- ❌ 間違い：見た目のためにタグを選ぶ -->
<h3>小さい文字にしたいからh3を使う</h3>

<!-- ✅ 正解：意味に応じてタグを選ぶ -->
<p class="small-text">小さい文字はCSSで調整</p>

効果的な復習方法

「復習は記憶の定着に欠かせないよ」ピクセルがアドバイスした。

おすすめの復習方法：

実際に手を動かす
- 今日作ったページを再現してみる
- 新しいページを作ってみる
- 既存のWebサイトの構造を分析
エラーから学ぶ
- わざと間違えて、エラーを確認
- 修正方法を身につける
- デバッグスキルの向上
他の人のコードを読む
- GitHubで公開されているHTML
- 好きなWebサイトのソースコード
- 良いコードと悪いコードの違い
質問をまとめる
- 分からなかった点をメモ
- 次回質問する準備
- 自分で調べてみる習慣

実践課題：自己紹介ページ作成

「じゃあ、今日の総仕上げとして、自己紹介ページを作ってみよう！」コード先輩が課題を出した。

課題の要件：

適切なHTML構造を使用
見出し、段落、リストを含む
画像を1枚以上使用
外部リンクを含む
セマンティックHTMLを意識

[コード: code01-6-01]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="天野ミライの自己紹介ページ">
    <title>天野ミライ - Web開発を学ぶ大学生</title>
</head>
<body>
    <header>
        <h1>天野ミライの自己紹介</h1>
        <p>Web開発の世界に飛び込んだ大学生です！</p>
    </header>
    
    <main>
        <section>
            <h2>プロフィール</h2>
            <img src="mirai-photo.jpg" alt="天野ミライの写真" width="200">
            <dl>
                <dt>名前</dt>
                <dd>天野ミライ（あまの みらい）</dd>
                
                <dt>所属</dt>
                <dd>〇〇大学 デザイン学部 3年</dd>
                
                <dt>誕生日</dt>
                <dd>4月15日</dd>
                
                <dt>出身地</dt>
                <dd>東京都</dd>
            </dl>
        </section>
        
        <section>
            <h2>好きなもの</h2>
            <ul>
                <li>カフェラテ（特にPixel Caféの！）</li>
                <li>読書（最近はWeb技術の本ばかり）</li>
                <li>散歩（アイデアが浮かぶ）</li>
                <li>音楽（作業中はローファイヒップホップ）</li>
            </ul>
        </section>
        
        <section>
            <h2>学習の目標</h2>
            <ol>
                <li>HTMLとCSSの基礎をマスター（30日間）</li>
                <li>JavaScriptで動きのあるサイトを作る</li>
                <li>自分のポートフォリオサイトを公開</li>
                <li>フリーランスとして活動開始</li>
            </ol>
        </section>
        
        <section>
            <h2>今日の学び</h2>
            <p>初めてHTMLを書いて、Webページが表示された瞬間の感動は忘れられません。
            タグ一つ一つに意味があることを知り、Webの奥深さを感じました。</p>
            
            <p>特に印象的だったのは、セマンティックHTMLの考え方です。
            見た目だけでなく、構造や意味を大切にすることで、
            誰にとっても使いやすいWebサイトが作れることを学びました。</p>
        </section>
        
        <section>
            <h2>リンク</h2>
            <nav>
                <ul>
                    <li><a href="https://github.com/mirai" target="_blank" rel="noopener">GitHub</a></li>
                    <li><a href="https://twitter.com/mirai" target="_blank" rel="noopener">Twitter</a></li>
                    <li><a href="portfolio.html">ポートフォリオ（準備中）</a></li>
                </ul>
            </nav>
        </section>
    </main>
    
    <footer>
        <p>お問い合わせ: <a href="mailto:mirai@example.com">mirai@example.com</a></p>
        <p><small>&copy; 2024 Amano Mirai. All rights reserved.</small></p>
    </footer>
</body>
</html>

デバッグのコツ

「エラーが出たときの対処法も覚えておこう」ピクセルが重要なスキルを教えた。

デバッグの手順：

エラーメッセージを読む
- ブラウザの開発者ツールを確認
- 行番号をチェック
- エラーの種類を理解
よくある原因を確認
- タグの閉じ忘れ
- スペルミス
- 全角スペースの混入
- ファイルパスの間違い
一つずつ確認
- 問題の箇所を特定
- コメントアウトで切り分け
- 最小限のコードで再現
バリデーターの活用
- W3C Markup Validator
- VS Codeの拡張機能
- 自動的にエラーを検出

明日への期待とエール

「今日は本当によく頑張ったね」コード先輩が締めくくった。「明日はCSSを学んで、今日作ったページを美しくデザインしていくよ」

「CSSかあ…楽しみ！」ミライがわくわくした表情を見せた。

ピクセルが励ました。「明日は色やレイアウトを自由に操れるようになるよ。まるで魔法使いになったような気分が味わえる！」

明日（Day 2）の予告：

HTMLの構造をより深く理解
セマンティックHTMLの実践
リストとメディアの活用
本格的なページ構築

「今日作ったページを、明日はもっと素敵にしていこう」コード先輩が約束した。

「はい！今日は本当にありがとうございました」ミライが深々と頭を下げた。

マスターが優しく声をかけた。「初日でここまでできれば上出来だよ。明日も楽しみにしてるね」

こうして、ミライのWeb開発学習の第1日目は幕を閉じた。明日への期待を胸に、彼女は家路についた。きっと今夜は、HTMLタグの夢を見ることだろう。

↑目次に戻る

エピローグ：新しい世界への第一歩

夕暮れ時のPixel Café。ミライは今日作った自己紹介ページを何度も眺めていた。

「たった1日で、こんなことができるようになるなんて」

シンプルなHTMLだけのページだが、それは彼女にとって特別な意味を持っていた。何もないところから、自分の手で何かを作り出せたという実感。

「明日はどんなことを学べるんだろう」

窓の外を見ると、街のネオンが輝き始めていた。その一つ一つが、Webサイトのように思えた。裏側にはきっと、今日学んだようなコードがあるのだろう。

ピクセルが肩に止まって囁いた。「ミライちゃん、これはまだ始まりに過ぎないよ。30日後には、もっとすごいものが作れるようになってる」

「うん、頑張る！」

ミライはノートPCを閉じて、大切そうにバッグにしまった。明日もまた、この場所で新しい学びが待っている。

Web開発者への道は、今日、確かに始まったのだった。

← 目次へ | Day 02へ →

#CSS #HTML #ストーリーで学ぶ #プログラミング

ABOUT ME