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