Skip to Content
Lecture第1回：webの仕組み

第 1 回：web の仕組み

🎯 学習目標

  • Web 制作の全体像を理解する
  • 開発環境（VS Code）を構築する
  • HTML の基本概念を理解する
  • 初めての HTML ファイルを作成する

📚 導入（5 分）

自己紹介と講座の目的確認

このコースは、全 13 回で Web 制作の基礎から実践までを学ぶカリキュラムです。HTML・CSS・JavaScript の 3 つの技術を段階的に習得し、最終的には自分の Web サイトを制作できるようになることを目指します。

13 回のカリキュラム概要

  1. 基礎編（第 1-4 回）：HTML・CSS 基礎
  2. CSS 応用編（第 5-7 回）：レイアウトとアニメーション
  3. JavaScript 編（第 8-10 回）：プログラミング基礎から API 連携まで
  4. 総合制作編（第 11-13 回）：オリジナルサイト制作

💡 理論学習（40 分）

Web 制作の基礎知識（15 分）

インターネットの仕組み：クライアント・サーバーモデル

Web ページが表示されるまでの詳細プロセス

各ステップの詳細説明

1. URL 入力 📝

例：https://www.example.com/index.html
├── https:// → プロトコル（通信方式）
├── www.example.com → ドメイン名（サーバーの住所）
└── /index.html → パス（ファイルの場所）

2. DNS による名前解決 🔍

  • 人間が覚えやすいドメイン名（example.com）を
  • コンピュータが理解できる IP アドレス（192.0.2.1）に変換

3. TCP/IP 接続の確立 🤝

[3-way ハンドシェイク]
ブラウザ → サーバー: SYN（接続要求）
サーバー → ブラウザ: SYN-ACK（承認）
ブラウザ → サーバー: ACK（確認）

4. HTTP リクエスト送信 📤

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml...
Accept-Language: ja,en;q=0.9

5. サーバー処理とレスポンス 📥

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
 
<!DOCTYPE html>
<html lang="ja">
<head>...

6. ブラウザのレンダリングプロセス 🎨

詳細なレンダリング手順：

  1. HTML パース：HTML を DOM ツリーに変換
  2. CSS パース：CSS を CSSOM ツリーに変換
  3. レンダーツリー構築：DOM と CSSOM を組み合わせ
  4. レイアウト（リフロー）：要素の位置・サイズ計算
  5. ペイント：ピクセル単位で描画
  6. コンポジット：レイヤーを合成して最終表示

7. JavaScript の実行 ⚡

// DOMContentLoadedイベント後に実行
document.addEventListener("DOMContentLoaded", () => {
  // DOM操作が可能
});
 
// 全リソース読み込み完了後
window.addEventListener("load", () => {
  // 画像なども含めて全て準備完了
});
🔄 追加リソースの読み込み
⏱️ パフォーマンスのタイムライン
時間 →
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DNS解決     [====]
TCP接続          [====]
HTTPリクエスト        [==]
HTML受信               [======]
CSSダウンロード          [====]
JSダウンロード           [=====]
DOM構築                   [========]
CSSOM構築                    [====]
レンダリング                      [======]
ページ表示完了                           ✓

Web 制作の 3 つの柱

技術役割例え
HTML構造（Structure）家の骨組み
CSS装飾（Style）内装・外装
JavaScript動作（Behavior）電気・水道などの機能

フロントエンド vs バックエンド

  • フロントエンド（今回の学習範囲）

    • ユーザーが直接見て操作する部分
    • HTML、CSS、JavaScript
    • ブラウザ上で動作

  • バックエンド

    • サーバー側の処理
    • データベース操作
    • ユーザー認証など

開発環境の構築（20 分）

Visual Studio Code のセットアップ

1. ダウンロードとインストール
  1. VS Code 公式サイト にアクセス
  2. お使いの OS に合わせてダウンロード
  3. インストーラーを実行
2. 基本設定
{
  "editor.fontSize": 16,
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay"
}
3. 必須拡張機能のインストール
拡張機能用途インストールコマンド
Live Serverリアルタイムプレビューext install ritwickdey.LiveServer
Prettierコード整形ext install esbenp.prettier-vscode
HTML CSS Support入力補完ext install ecmel.vscode-html-css

ブラウザ開発者ツール基本操作

開発者ツールの起動方法
  • Windows/Linux: F12 または Ctrl + Shift + I
  • Mac: Cmd + Option + I
  • 右クリック → 「検証」または「要素を検証」
主要なタブ
  1. Elements（要素）：HTML と CSS の確認・編集
  2. Console（コンソール）：JavaScript のデバッグ
  3. Network（ネットワーク）：通信の確認
  4. Sources（ソース）：ファイルの確認

コース全体の流れ（5 分）

各回の学習目標と制作物

  • 第 1-3 回：自己紹介ページ
  • 第 4-7 回：レスポンシブギャラリーサイト
  • 第 8-10 回：インタラクティブアプリ
  • 第 11-13 回：オリジナル Web サイト

最終制作に向けたロードマップ

🛠️ 実習（40 分）

初めての HTML ファイル作成（35 分）

1. プロジェクトフォルダの作成

# デスクトップに作業フォルダを作成
mkdir ~/Desktop/web-course
cd ~/Desktop/web-course
mkdir lesson01
cd lesson01

2. index.html ファイルの作成

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>Web制作コースへようこそ！</h1>
 
    <p>これは私の最初のWebページです。</p>
 
    <h2>今日学んだこと</h2>
    <ul>
      <li>HTMLの基本構造</li>
      <li>VS Codeの使い方</li>
      <li>開発者ツールの起動方法</li>
    </ul>
 
    <h2>次回の目標</h2>
    <p>HTMLのタグをもっと学んで、自己紹介ページを作ります。</p>
  </body>
</html>

3. 各タグの意味説明

タグ意味役割
<!DOCTYPE html>文書型宣言HTML5 文書であることを宣言
<html>ルート要素HTML 文書の開始と終了
lang="ja"言語属性日本語のページであることを指定
<head>ヘッド要素ページの情報（メタデータ）
<meta charset="UTF-8">文字エンコーディング日本語を正しく表示
<meta name="viewport">ビューポート設定スマホ対応の基本設定
<title>タイトルブラウザタブに表示される
<body>ボディ要素実際に表示される内容
<h1>, <h2>見出しページの構造を示す
<p>段落文章のまとまり
<ul>, <li>リスト箇条書き

4. Live Server での表示確認

  1. VS Code でindex.htmlを開く
  2. 右クリック → 「Open with Live Server」
  3. ブラウザが自動的に開いてページが表示される
  4. HTML を編集すると自動的に更新される

実習のポイント

✅ チェックリスト

  • VS Code が正しくインストールされた
  • 必要な拡張機能がインストールされた
  • HTML ファイルが作成できた
  • Live Server で表示確認ができた
  • 開発者ツールが起動できた

🎨 発展課題

時間に余裕がある方は、以下にチャレンジしてみましょう：

<!-- 好きな色で文字を装飾 -->
<p style="color: blue;">青い文字</p>
 
<!-- 画像を追加（URLを使用） -->
<img src="https://via.placeholder.com/300x200" alt="サンプル画像" />
 
<!-- リンクを追加 -->
<a href="https://www.google.com">Googleへのリンク</a>

📝 まとめ・質疑応答（5 分）

今日のポイント

  1. Web 制作の 3 要素：HTML（構造）、CSS（装飾）、JavaScript（動作）
  2. 開発環境：VS Code + 拡張機能で効率的な開発
  3. HTML の基本構造：<!DOCTYPE>, <html>, <head>, <body>
  4. 開発者ツール：F12 キーで起動、Elements タブで要素確認

環境セットアップの確認

  • VS Code は起動できますか？
  • Live Server は動作しますか？
  • 開発者ツールは開けますか？

次回予告：HTML 基礎

次回は、HTML タグを本格的に学習します：

  • 見出し、段落、リストの詳細
  • リンクと画像の挿入
  • 強調タグとその使い分け
  • 自己紹介ページの作成

📚 自主学習リソース

次回もお楽しみに！ 🚀

Last updated on
TOPページ第2回：HTML基礎