Web制作の全体像

Web制作の全体像

Webサイトを作るとき、何から始めればよいのか迷う人は多いです。HTMLを書き始める前に、Web制作全体の流れと、使われる技術の役割を把握することが重要です。このレッスンでは、HTML・CSS・JavaScriptがそれぞれ何を担当するのか、開発環境をどう整えるのか、ブラウザの開発者ツールをどう使うのか、そして実際の制作フローの5ステップを学びます。全体像を先に頭に入れることで、個々の技術を学ぶときに「なぜそれが必要か」が明確になります。

---

HTML・CSS・JavaScriptの役割

Webサイトは3つの言語が連携して動いています。それぞれの役割を明確に理解しましょう。

Web制作の3本柱：HTML・CSS・JavaScript の役割

HTML（HyperText Markup Language）

HTMLはWebページの構造と内容を定義する言語です。「何を表示するか」を決めます。

• ◆見出し・段落・リスト・表などのコンテンツ配置
• ◆画像・動画・リンクの埋め込み
• ◆フォーム（入力欄・ボタン）の設置
• ◆ページの意味的な構造（セマンティクス）

家に例えると「柱・壁・床」に相当します。 建物の形は決まりますが、見た目は素朴なままです。

CSS（Cascading Style Sheets）

CSSはHTMLにデザインと見た目を適用するスタイルシート言語です。「どう見せるか」を決めます。

• ◆色・フォント・サイズ・余白・境界線の設定
• ◆フレックスボックスやグリッドによるレイアウト構築
• ◆スマートフォン対応（レスポンシブデザイン）
• ◆ホバー効果やトランジションなどのアニメーション

家に例えると「壁紙・塗装・インテリア」に相当します。

JavaScript

JavaScriptはWebページに動きとインタラクションを追加するプログラミング言語です。「どう動かすか」を決めます。

• ◆ボタンクリックやフォーム送信時の処理
• ◆サーバーとのデータ通信（Ajax・Fetch API）
• ◆コンテンツの動的な書き換え
• ◆スライダー・モーダル・タブ切り替えなどのUI制御

家に例えると「電気・水道・エアコン」に相当します。

💡 学習順序の原則: HTML → CSS → JavaScript の順に学ぶのが基本です。構造が理解できてから装飾を覚え、動きは最後に加えます。いきなりJavaScriptから始めると、HTMLの基礎がないため躓きやすくなります。

---

3言語の連携と分業

実際の現場では、これら3つを1人が担当することもあれば、専門家が分担することもあります。フリーランスや個人制作では3つすべてを扱います。

---

開発環境の構築：VSCode

Web制作の開発環境として、現在業界標準となっているのが**Visual Studio Code（VSCode）**です。Microsoft製の無料エディタで、Web開発に必要な機能がすべて揃っています。

VSCodeのインストール

1. ◆公式サイトにアクセス: code.visualstudio.com を開く
2. ◆OSに合わせてダウンロード: Windows・Mac・Linux版が用意されている
3. ◆インストール: ダウンロードしたインストーラーを実行
4. ◆日本語化: 拡張機能「Japanese Language Pack for VS Code」をインストール

必須の拡張機能5選

💡 Live Serverの使い方: HTMLファイルを開いた状態で右クリック→「Open with Live Server」を選ぶと、ブラウザで自動プレビューが始まります。ファイルを保存するたびにブラウザが自動更新されるため、確認作業が大幅に効率化されます。

VSCodeの基本操作

---

ブラウザ開発者ツール（DevTools）

**ブラウザの開発者ツール（DevTools）**は、Webページのデバッグ・検証・パフォーマンス計測ができる必須ツールです。Chromeブラウザに標準搭載されています。

開き方

• ◆Windows: F12キー、または Ctrl+Shift+I
• ◆Mac: Cmd+Option+I
• ◆右クリックメニュー: ページ上で右クリック→「検証」

よく使うパネル4つ

⚠️ DevToolsの変更は一時的: Elements パネルでCSSを変更しても、それはブラウザ上での一時的な変更です。ページをリロードすると元に戻ります。確認したらソースファイルに同じ変更を加えましょう。

Elementsパネルの活用法

Elementsパネルでは、ページ上の要素をクリックするとHTMLのどの部分に対応するかがハイライトされます。右側の「Styles」タブでそのCSSが確認でき、値をクリックして数値を変えるとリアルタイムでページに反映されます。この機能を使うと、試行錯誤しながらCSSを調整できるため、スタイル調整の時間を大幅に短縮できます。

---

Web制作フロー5ステップ

実際のWeb制作は以下の5つのステップで進みます。

ステップ1: 企画・設計

制作を始める前に、目的・ターゲット・必要なページ・コンテンツを整理します。この段階でサイトマップ（ページ構成図）を作り、何をどこに置くかを決めます。設計が曖昧なままコーディングを始めると、後で大きな手戻りが発生します。

ステップ2: デザイン

Figmaなどのデザインツールでワイヤーフレームとビジュアルデザインを作成します。ここで色・フォント・レイアウトを決定します。デザインが確定してからHTMLを書き始めることで、コードの迷いが減ります。

ステップ3: コーディング

デザインをもとに、HTML・CSS・JavaScriptを記述します。HTMLで構造を作り、CSSでデザインを適用し、JavaScriptで動きを加えます。このレッスンで学ぶのは主にこのステップです。

ステップ4: テスト・確認

複数のブラウザ（Chrome・Safari・Edge）とデバイス（PC・スマートフォン・タブレット）で表示を確認します。リンク切れ・画像の表示崩れ・フォームの動作確認も行います。

ステップ5: 公開・運用

サーバーにファイルをアップロードし、ドメインと紐付けてWebサイトを公開します。公開後も定期的にコンテンツを更新し、アクセス解析で改善を続けます。

💡 最初から完璧を目指さない: Web制作はステップ3のコーディング段階で悩みがちです。まず構造（HTML）を完成させてからデザイン（CSS）を適用するという順序を守ることで、作業が格段に効率化されます。

---

🏋️実践ワーク

以下のワークを実施してください。

1. ◆VSCodeのインストール: 公式サイトからVSCodeをダウンロードしてインストールする。Japanese Language PackとLive Serverの拡張機能を追加する。
2. ◆最初のHTMLファイルを作る: VSCodeで新しいファイルを作成し、「index.html」という名前で保存する。「!」を入力してTabキーを押すとEmmetがHTMLの雛形を自動生成することを確認する。
3. ◆DevToolsを開く: Chromeブラウザで任意のWebサイト（例：yahoo.co.jp）を開き、F12キーでDevToolsを起動する。Elementsパネルで見出しタグ（h1やh2）を探し、右側のStylesタブでフォントサイズを確認する。
4. ◆3言語の役割を整理する: 自分がよく見るWebサイトを開き、「このデザインはCSS」「このテキストはHTML」「このボタンの動きはJavaScript」と要素を分類してみる。

📝まとめ

Web制作はHTML（構造）・CSS（デザイン）・JavaScript（動作）の3言語が連携して成り立っています。開発環境はVSCodeとChrome DevToolsを組み合わせることで、効率よく学習・制作を進められます。制作フローは企画→デザイン→コーディング→テスト→公開の5ステップで進み、各ステップの役割を理解することが重要です。次のレッスンではHTMLの基本タグを学び、実際にページ構造を作ります。