HTML・CSS の違い
初級読み方：エイチティーエムエル・シーエスエス のちがい｜英語：HTML vs CSS
HTMLはページの「内容と構造」を作る言語、CSSは「見た目」を整える言語。セットで使う。
やさしい説明
HTMLはWebページの「内容と構造」を作る言語。CSSはその「見た目（色・大きさ・配置）」を整える言語です。セットで使います。
家に例えると、HTMLは「骨組み・間取り」、CSSは「壁紙・家具・照明」です。骨組みだけでは住めないし、家具だけでは家になりません。両方必要です。
HTMLで「ここに見出しがある」「ここに段落がある」と構造を作り、CSSで「見出しは青色で大きく」「段落は灰色で小さく」と見た目を指定します。
HTML・CSS・JavaScriptの役割分担
- HTML — 内容と構造。「何がある」を決める（見出し・段落・画像・リンクなど）
- CSS — 見た目とレイアウト。「どう見える」を決める（色・フォント・配置・余白など）
- JavaScript — 動きとインタラクション。「どう動く」を決める（クリック処理・アニメーション・データ取得など）
Webページは「構造（HTML）」「見た目（CSS）」「動き（JS）」の3層に分けるのが基本です。この分離によって、デザイン変更やバグ修正がしやすくなります。
具体例・使い方
<!-- HTML: 内容と構造を書く -->
<h1 class="title">こんにちは</h1>
<p class="description">今日はいい天気です。</p>
<button class="btn">クリック</button>/* CSS: 見た目を整える */
.title { color: blue; font-size: 2rem; }
.description { color: gray; line-height: 1.8; }
.btn { background: blue; color: white; padding: 8px 16px; border-radius: 4px; }HTMLとCSSを分けて書くメリット
- デザイン変更が楽 — HTMLを触らずCSSだけ変更してデザインを全ページ一括変更できる
- コードが読みやすい — 構造と見た目が混在しないので、どこに何があるか把握しやすい
- 再利用しやすい — 同じCSSクラスを複数のHTML要素に適用できる
- チーム開発しやすい — デザイナーとエンジニアが別々のファイルを担当できる
いつ使う？
Webページを作るときは必ず両方使います。HTMLだけだと白黒で味気ないページになり、CSSだけでは内容がありません。
まずHTMLで構造を作り、次にCSSで見た目を整えるのが基本の順番です。JavaScriptはその後、動きが必要になったタイミングで追加します。
間違いやすいポイント
❌ HTMLの中に見た目の指定を書く
<font color="red"> や style="color: red" をHTMLに直接書くのは古いやり方です。CSSファイルで管理することで変更が楽になります。
<!-- ❌ HTMLに色を直接書く（古いやり方） -->
<font color="red">赤い文字</font>
<p style="color: red;">赤い文字</p>
<!-- ✅ CSSクラスで見た目を指定する -->
<p class="text-red">赤い文字</p>
/* .text-red { color: red; } */❌ CSSとHTMLを混同する
HTMLタグの中にCSSのプロパティを書いたり、CSSファイルにHTMLを書いたりするミスがあります。それぞれ役割が違うファイルに書きましょう。
よくある疑問
Q: HTMLだけでWebページは作れる？
A: 表示はできますが、見た目がとてもシンプルになります。CSSで色や配置を整えるのが普通です。
Q: CSSだけでWebページは作れる？
A: いいえ。CSSは見た目を指定するだけなので、表示する内容（文章や画像）はHTMLで書く必要があります。
関連用語
- HTML — Webページの構造を作るマークアップ言語
- CSS — Webページの見た目を整えるスタイル言語
- JavaScript — Webページに動きをつけるプログラミング言語
📖 関連レッスン
レッスンを見る →