第1章

基礎の基礎

Web開発の環境を整えて、基本的なページを作ろう

3 週間
9-12 時間
4 スキル
Week 1

環境準備とHTML/CSSの書き方の基本

学習時間目安：週3-4時間（1日30-45分）

🛠️開発環境をセットアップしよう

  • Visual Studio Code（無料）のインストール
  • Google Chrome（無料）の準備
  • 作業フォルダ「my-website」を作成
  • Live Server拡張機能のインストール
  • HTML CSS Support拡張機能のインストール

🏗️初めてのHTMLファイルを作ろう

<!-- 基本的なHTML構造 --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>私の初めてのWebサイト</title> </head> <body> <h1>こんにちは！</h1> <p>これは私が作った初めてのWebサイトです。</p> </body> </html>

💡 比喩で理解：HTMLは建物の骨組み

HTMLは建物の骨組みのようなものです。部屋（要素）を作って、その中に家具（コンテンツ）を置いていく感じです。

Week 2

文字や画像を表示してみよう

学習時間目安：週3-4時間

📝様々な文字要素を使おう

  • 見出しの使い分け（h1〜h6）
  • 段落と改行（p要素）
  • 箇条書きリスト（ul, li）
  • 番号付きリスト（ol, li）
  • 強調（strong, em）

🖼️画像とリンクを表示しよう

<!-- 画像の表示 --> <img src="my-photo.jpg" alt="私の写真"> <!-- リンクの作成 --> <a href="https://www.google.com">Googleへのリンク</a> <a href="mailto:your@email.com">メールを送る</a>

🎯 Week 2 実習プロジェクト

簡単な自己紹介ページを作成します。プロフィール写真、基本情報、趣味リスト、連絡先を含む完全なページを完成させましょう。

Week 3

色や配置を変えて見た目を整えよう

学習時間目安：週3-4時間

🎨色の指定方法

/* 分かりやすい色の名前で指定 */ h1 { color: red; background-color: yellow; } /* より詳細な色の指定 */ .modern-colors { color: #333333; background-color: #f0f0f0; }

📦余白の概念

  • margin（マージン）：箱と箱の間の空間
  • padding（パディング）：箱の中の緩衝材
  • border（ボーダー）：箱の壁
  • 文字のスタイリング（font-size, font-weight）
  • 文字の配置（text-align）

📦 比喩で理解：要素は商品の箱のようなもの

Webページの要素は、商品を梱包する箱のようなものです。margin（箱と箱の間の空間）、padding（箱の中の緩衝材）、border（箱の壁）を理解しましょう。

✅ 第1章 総合理解度チェック

第1章を完了しました！🎉

HTML/CSSの基礎をマスターしました。次は見た目を整える技術を学びましょう。