2026年4月14日
HTMLとCSSって何が違うの？
ウェブページを作るときに必ず出てくる「HTML」と「CSS」。どちらもウェブページに関係する言語ですが、役割がまったく違います。
一言で言うと、
- 🏗️ HTML：ページの「骨格・構造」を作る
- 🎨 CSS：ページの「見た目・デザイン」を整える
家に例えると、HTMLは「柱・壁・床」などの建物の構造で、CSSは「壁紙・床の色・家具の配置」などのインテリアです。どちらも必要で、組み合わせて使います。
HTMLとは？
HTML（HyperText Markup Language）は、ウェブページの内容と構造を作るための言語です。
「ここは見出しです」「ここは段落です」「ここはリンクです」というように、タグを使ってページの各部分に意味を持たせます。
HTMLで作れるもの
- 見出し（タイトル・サブタイトル）
- 段落（文章のかたまり）
- リンク（クリックすると別のページへ）
- 画像の表示
- 箇条書きリスト
- ボタン・入力フォーム
HTMLのコード例
<h1>私の自己紹介</h1>
<p>はじめまして！中学2年生の【名前】です。</p>
<h2>好きなもの</h2>
<ul>
<li>ゲーム</li>
<li>音楽</li>
<li>プログラミング</li>
</ul>
<a href="https://example.com">私のサイトへ</a>このHTMLだけでブラウザに表示すると、白い背景に黒い文字が並ぶシンプルなページになります。見た目を整えるにはCSSが必要です。
💡 HTMLで画像を表示する方法で基礎を確認できます。
CSSとは？
CSS（Cascading Style Sheets）は、HTMLで作った構造に見た目・デザインを加えるための言語です。
「この見出しを赤くしたい」「この段落の文字を大きくしたい」「背景色を水色にしたい」といった指示をCSSで書きます。
CSSで変えられるもの
- 文字の色・大きさ・太さ・フォント
- 背景色・背景画像
- 余白（内側・外側）
- ボーダー（枠線）・角の丸み
- 要素の横並び・中央揃えなどのレイアウト
CSSのコード例
h1 {\n color: #0d9488;\n font-size: 32px;\n}\n\np {\n font-size: 18px;\n color: #333;\n line-height: 1.8;\n}\n\nul {\n background-color: #f0f9ff;\n padding: 16px 24px;\n border-radius: 8px;\n}▶ プレビュー
このCSSを先ほどのHTMLに適用すると、見出しが緑色になり、リストに水色の背景がつき、ぐっとおしゃれなページになります。
🔗 あわせてheadタグに書くべき内容もチェックしてみましょう。
HTMLとCSSを組み合わせてみよう
HTMLファイルの <head> の中に <style> タグを書くと、HTMLとCSSを1つのファイルにまとめられます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
<style>
body {
background-color: #f0f9ff;
font-family: sans-serif;
padding: 24px;
}
h1 {
color: #0d9488;
}
.card {
background-color: white;
padding: 24px;
border-radius: 12px;
max-width: 480px;
}
</style>
</head>
<body>
<div class="card">
<h1>私の自己紹介</h1>
<p>はじめまして！【名前】です。</p>
</div>
</body>
</html>💡 ポイント：
- HTMLは「何を表示するか」を決める →
<h1>・<p>・<div>など - CSSは「どう見せるか」を決める →
color・font-size・background-colorなど class="card"のようにHTMLにクラスをつけて、CSSで.cardとして指定する
HTMLとCSSの違い まとめ比較
| 項目 | HTML | CSS |
|---|---|---|
| 正式名称 | HyperText Markup Language | Cascading Style Sheets |
| 役割 | 内容・構造を作る | 見た目・デザインを整える |
| 家で例えると | 柱・壁・床（骨格） | 壁紙・インテリア（装飾） |
| 書き方 | <タグ名>内容</タグ名> |
セレクタ { プロパティ: 値; } |
| 学ぶ順番 | 先に学ぶ（1番目） | HTMLの次に学ぶ（2番目） |
📖 詳しくはHTMLタグ一覧【よく使う20選】で解説しています。
よくある疑問
Q. HTMLだけでもウェブページは作れる？
はい、作れます。ただし、HTMLだけだと白い背景に黒い文字が並ぶだけのシンプルなページになります。見た目を整えるにはCSSが必要です。
Q. CSSだけでページは作れる？
いいえ、作れません。CSSはHTMLの要素に対してスタイルを当てるものなので、HTMLなしでは動きません。必ずHTMLとセットで使います。
Q. どちらを先に学べばいい？
必ず HTMLを先に 学んでください。CSSはHTMLのタグやクラスを指定してスタイルを当てるので、HTMLの基本を知っていないとCSSが理解しにくくなります。
HTMLとCSSを学ぶおすすめの順番
HTMLとCSSはセットで使いますが、学ぶ順番はHTMLが先です。CSSは「HTMLで作った要素の見た目を変える」ものなので、HTMLがわからないとCSSも書けません。
まずはHTMLで簡単なページを作れるようになりましょう。見出し、段落、リスト、リンクが書ければ十分です。HTMLの基本は「HTMLとは？初心者向けにわかりやすく解説」で学べます。
HTMLに慣れたら、次はCSSで見た目を整えます。文字の色、背景色、余白の調整ができれば、見栄えのいいページが作れます。CSSの基本は「CSSとは？初心者向けにわかりやすく解説」で学べます。
この2つを覚えたら、自己紹介ページやクラスのホームページなど、実際に使えるページを作ってみましょう。作りたいものがあると、学習のモチベーションが続きます。
まとめ
- ✅ HTML はページの「骨格・構造」を作る言語
- ✅ CSS はページの「見た目・デザイン」を整える言語
- ✅ HTMLとCSSは別々の言語だが、必ずセットで使う
- ✅ 学ぶ順番は HTML → CSS。HTMLを先に覚えよう
- ✅ HTMLで構造を作り、CSSで色・大きさ・余白などを指定する
HTMLとCSSの違いがわかったら、実際にレッスンで手を動かしながら学んでみましょう。自分のウェブページを作りながら、楽しく身につけられます。