ゆめさくコード

HTMLとCSSって何が違うの？

luagate/html-css-basicsWeb制作の基本10 枚Web 開発
スライド103触れる図解124レッスンの導入6

上から下へ、全 10 枚そのまま並べています。

発表モードで開く

Web制作の基本

図解5分でわかる

HTMLとCSSって何が違うの？

1
1
Web制作の基本

Webページの仕組み

あなたが見ているWebページは、3つの技術でできています。

  • HTML — ページの「構造」を作る
  • CSS — ページの「見た目」を整える
  • JavaScript — ページに「動き」をつける
2
2
Web制作の基本

HTMLとは

HTMLはWebページの骨組みを作る言語です。

  • HyperText Markup Languageの略
  • Webページの「骨組み」を作る言語
  • タグ（<h1>, <p>, <img>）で構造を記述
  • ブラウザがHTMLを読み取って画面に表示
  • HTMLだけだと白黒で味気ない見た目
3
3
Web制作の基本

HTMLのコード例

・タグで囲んで構造を表現します。

HTML
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>はじめてのWebページ</p>
    <img src="photo.jpg" />
  </body>
</html>
4
4
Web制作の基本

CSSとは

CSSはWebページの見た目を整える言語です。

  • Cascading Style Sheetsの略
  • Webページの「デザイン」を担当する言語
  • 色・大きさ・配置・アニメーションを制御
  • HTMLの要素に「どう見せるか」を指定
  • レスポンシブ対応も可能
5
5
Web制作の基本

CSSのコード例

・セレクタでHTML要素を指定し、プロパティで見た目を変えます。

CSS
h1 {
  color: #05B45B;
  font-size: 32px;
}

p {
  line-height: 1.8;
}

body { background: #F5F4ED; }
6
6
Web制作の基本

HTMLとCSSの役割比較

HTMLとCSSの役割の違いを比較します。

HTML（構造）

  • ページの骨組みを作る
  • 見出し・段落・画像を配置
  • 「何があるか」を定義
  • 例：家の間取り図

CSS（デザイン）

  • 見た目を美しく整える
  • 色・フォント・配置を指定
  • 「どう見せるか」を定義
  • 例：壁紙・家具・照明
7
7
Web制作の基本

ブラウザが表示するまで

ブラウザがWebページを表示するまでの流れ。

  • 1. URLを入力する
  • 2. サーバーにリクエストを送る
  • 3. HTMLファイルを受信する
  • 4. CSSを適用して見た目を整える
  • 5. 画面にページが表示される
8
8
Web制作の基本

まとめ

HTMLとCSSはWebの基本中の基本です。

  • HTML = ページの「構造」（骨組み）
  • CSS = ページの「見た目」（デザイン）
  • この2つだけで静的なWebページは作れる
  • JavaScriptを加えると動きのあるページに
  • まずはHTMLとCSSから始めよう！
9
9
"

Webページは HTML で「何を伝えるか」を決め、CSS で「どう伝えるか」を整える。

— Web制作の基本

10
10