5分でわかる HTML・CSSの基本
HTMLとCSSの基本をコード例つきで図解解説。Webページの仕組み、タグの書き方、CSSでのデザイン方法まで初心者にもわかりやすく紹介します。
HTMLとCSSって何が違うの？
スライド解説
HTMLとCSSって何が違うの？
「HTMLとCSSって何が違うの？」は、プログラミング初心者が最初に抱く疑問の一つです。このスライドでは、Web制作の基本であるHTMLとCSSの違いと役割を、コード例や図解を交えてわかりやすく解説していきます。
Webページの仕組み
あなたが見ているWebページは、3つの技術でできています。
- HTML — ページの「構造」を作る
- CSS — ページの「見た目」を整える
- JavaScript — ページに「動き」をつける
Webページは「HTML」「CSS」「JavaScript」という3つの技術で成り立っています。HTMLがページの構造（骨組み）を作り、CSSが見た目（デザイン）を整え、JavaScriptが動き（インタラクション）を担当します。この3つの役割分担を理解することが、Web制作の第一歩です。
HTMLとは
- HyperText Markup Languageの略
- Webページの「骨組み」を作る言語
- タグ（<h1>, <p>, <img>）で構造を記述
- ブラウザがHTMLを読み取って画面に表示
- HTMLだけだと白黒で味気ない見た目
HTML（HyperText Markup Language）はWebページの骨組みを作る言語です。`<h1>` で見出し、`<p>` で段落、`<img>` で画像というように、タグで囲むことでコンテンツの構造を定義します。HTMLだけで表示すると白黒で味気ない見た目になりますが、それが「構造だけを担当する」HTMLの本来の姿です。
HTMLのコード例
HTMLの実際のコード例を見てみましょう。`<html>` タグの中に `<head>`（メタ情報）と `<body>`（表示内容）があり、`<h1>` で見出し、`<p>` で段落、`<img>` で画像を配置しています。このようにタグを入れ子にすることで、文書の階層構造を表現します。
CSSとは
- Cascading Style Sheetsの略
- Webページの「デザイン」を担当する言語
- 色・大きさ・配置・アニメーションを制御
- HTMLの要素に「どう見せるか」を指定
- レスポンシブ対応も可能
CSS（Cascading Style Sheets）はWebページのデザインを担当する言語です。色・フォントサイズ・配置・アニメーションなど、見た目に関するすべてを制御します。HTMLが「何を表示するか」を決めるのに対し、CSSは「どう見せるか」を定義します。レスポンシブ対応もCSSの仕事です。
CSSのコード例
CSSのコード例では、セレクタ（h1, p, bodyなど）でHTML要素を指定し、プロパティ（color, font-size, backgroundなど）で見た目を変更しています。`h1 { color: #0f5e8b; }` と書くだけで、すべての `<h1>` 要素の文字色が緑色に変わります。この「セレクタ＋プロパティ」のパターンを覚えれば、CSSの基本は理解できます。
HTMLとCSSの役割比較
HTMLとCSSの役割を比較すると、HTMLは「ページの骨組みを作る」「何があるかを定義する」もの（家の間取り図に相当）、CSSは「見た目を美しく整える」「どう見せるかを定義する」もの（壁紙・家具・照明に相当）です。この役割分担により、構造とデザインを独立して管理できるのがWebの強みです。
ブラウザが表示するまで
- 1. URLを入力する
- 2. サーバーにリクエストを送る
- 3. HTMLファイルを受信する
- 4. CSSを適用して見た目を整える
- 5. 画面にページが表示される
ブラウザがWebページを表示するまでの流れは、(1) URLを入力 → (2) サーバーにリクエスト送信 → (3) HTMLファイルを受信 → (4) CSSを適用して見た目を整える → (5) 画面に表示、という5ステップです。この仕組みを理解しておくと、ページの読み込みが遅いときの原因特定にも役立ちます。
まとめ
HTMLとCSSはWebの基本中の基本です。
- HTML = ページの「構造」（骨組み）
- CSS = ページの「見た目」（デザイン）
- この2つだけで静的なWebページは作れる
- JavaScriptを加えると動きのあるページに
- まずはHTMLとCSSから始めよう！
まとめとして、HTML＝構造（骨組み）、CSS＝見た目（デザイン）という役割の違いをしっかり押さえましょう。この2つだけで静的なWebページは作れます。さらにJavaScriptを加えると動きのあるページになります。Web制作の学習は、まずHTMLとCSSから始めるのが王道です。
Webページは HTML で「何を伝えるか」を決め、CSS で「どう伝えるか」を整える。
「Webページは HTML で『何を伝えるか』を決め、CSS で『どう伝えるか』を整える」。この一文がHTMLとCSSの本質を表しています。構造と見た目を分離するという考え方は、Web以外のソフトウェア開発でも通じる重要な設計原則です。
このスライドで学べること
Webページが表示される仕組み、HTMLのタグを使った構造の作り方、CSSによるデザインの指定方法を、実際のコード例とともに学びます。HTMLとCSSの役割の違いも一目で理解できます。
ポイントまとめ
Webページは HTML（構造）・CSS（見た目）・JavaScript（動き）の3つの技術で構成されています。このスライドでは特にHTMLとCSSにフォーカスし、タグの書き方やCSSセレクタの使い方を実際のコード例で紹介。ブラウザがページを表示するまでの流れも図解しています。
もっと学びたい方へ
HTMLとCSSの基本を理解したら、実際にコードを書いて自分のWebページを作ってみませんか？LuaGateなら、ブラウザ上でリアルタイムに結果を確認しながらHTML・CSSを学べます。
本スライドの引用・転載は歓迎です。
出典: LuaGate（https://luagate.com/slides）を明記の上ご活用ください。
