第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章 総合理解度チェック