Web制作の全体像

Web制作の全体像

はじめに

Webサイトがどのような仕組みで表示されているのかを理解することは、HTML/CSSの学習の第一歩です。この章では、Webの基本的な仕組み、HTML/CSSの役割、開発環境の準備まで、コーディングを始める前に知っておくべき全体像を学びます。

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

ブラウザにURLを入力してWebサイトが表示されるまでの流れを理解しましょう。

• 1ユーザーがブラウザにURLを入力する
• 2ブラウザがDNSサーバーにアクセスし、ドメイン名をIPアドレスに変換する
• 3ブラウザがWebサーバーにHTTPリクエストを送信する
• 4Webサーバーがリクエストに対応するHTML、CSS、画像などのファイルを返送する
• 5ブラウザが受け取ったファイルを解析し、画面にWebページを描画する

HTML、CSS、JavaScriptの役割

Webページは主に3つの技術で構成されています。それぞれの役割を明確に理解しましょう。

• 1HTML（HyperText Markup Language）: Webページの「構造」と「内容」を定義する。見出し、段落、画像、リンクなどの要素をマークアップする。人間の体に例えると「骨格」にあたる
• 2CSS（Cascading Style Sheets）: Webページの「見た目」を装飾する。色、フォント、レイアウト、アニメーションなどを指定する。人間の体に例えると「衣服や化粧」にあたる
• 3JavaScript: Webページに「動き」と「機能」を追加する。ボタンクリック時の処理、フォームの入力チェック、スライドショーなどを実装する。この講座ではHTML/CSSに集中し、JavaScriptは扱わない

開発環境の準備

HTML/CSSのコーディングに必要なツールを準備しましょう。

• 1テキストエディタ: Visual Studio Code（VS Code）が最もおすすめ。無料で高機能、拡張機能も豊富
• 2ブラウザ: Google Chrome推奨。DevTools（開発者ツール）が充実しており、デバッグに便利
• 3VS Codeの拡張機能: Live Server（リアルタイムプレビュー）、Prettier（コード整形）、Auto Rename Tag（タグの自動リネーム）を導入する
• 4フォルダ構成: プロジェクトフォルダを作成し、index.html、style.css、imagesフォルダの基本構成を用意する

HTMLファイルの基本構造

HTMLファイルにはお決まりの基本構造があります。まずはこの型を覚えましょう。

• 1DOCTYPE宣言: HTMLのバージョンを宣言する。現在はHTML5が標準
• 2htmlタグ: HTML文書全体を囲むルート要素。lang属性に「ja」を指定する
• 3headタグ: メタ情報（文字コード、タイトル、CSS読み込み）を記述する。画面には表示されない部分
• 4bodyタグ: 画面に表示されるコンテンツをすべて記述する部分
• 5metaタグ: 文字エンコーディング（UTF-8）、ビューポート設定を必ず記述する
• 6titleタグ: ブラウザのタブに表示されるページタイトルを設定する

ブラウザのDevToolsの使い方

Chrome DevToolsは、Web開発に欠かせないデバッグツールです。

• 1F12キーまたは右クリック→「検証」で開く
• 2Elementsパネル: HTMLの構造とCSSの適用状況をリアルタイムで確認・編集できる
• 3コンソールパネル: エラーメッセージの確認やJavaScriptの実行が可能
• 4Networkパネル: ファイルの読み込み状況と表示速度を確認できる
• 5DevToolsでの変更は一時的なもので、ファイルには保存されない。試行錯誤に最適

🏋️実践ワーク

以下の課題に取り組んでみましょう。

📝まとめ

この章では、Webの仕組み、HTML/CSSの役割、開発環境の準備、HTMLファイルの基本構造を学びました。これらの基礎知識があることで、次の章からのHTML学習がスムーズに進みます。次の章では、HTMLの基本タグを学んでいきます。