2026年4月15日
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 {
color: #0d9488;
font-size: 32px;
}
p {
font-size: 18px;
color: #333;
line-height: 1.8;
}
ul {
background-color: #f0f9ff;
padding: 16px 24px;
border-radius: 8px;
}▶ プレビュー
この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として指定する
CSSを書く3つの方法
CSSには、HTMLへの書き方が3種類あります。それぞれ使う場面が違うので、順番に見ていきましょう。
① インラインスタイル（要素に直接書く）
HTMLタグの中に style 属性で直接書く方法です。
<h1 style="color: #0d9488;">私の自己紹介</h1>手軽ですが、1つの要素にしか効かず、ページ全体のデザインを管理しづらいので、基本的にはおすすめしません。
② 内部スタイルシート（<style>タグにまとめる）
<head> の中に <style> タグを書いて、そのページ全体のCSSをまとめる方法です。先ほどの「組み合わせ例」がこの書き方でした。1ページだけの練習や小さなページに向いています。
③ 外部スタイルシート（別ファイルに分ける・実務での標準）
CSSだけを別の .css ファイルに書き、HTMLから <link> タグで読み込む方法です。実際のウェブサイト制作では、この方法が標準です。
<!-- index.html -->
<head>
<link rel="stylesheet" href="style.css">
</head>/* style.css */
h1 {
color: #0d9488;
}HTMLとCSSをファイルごと分けることで、複数のページから同じCSSファイルを使い回せます。デザインを変えたいときも、CSSファイル1つを直せば全ページに反映されるので管理が楽になります。
📝 まずはHTMLから手を動かして学ぼう
HTMLとCSSの役割の違いは、実際に書いてみると一気に腑に落ちます。記事の最後でも触れるとおり、最初の一歩はHTML。ブラウザだけで進められる無料レッスンから始めましょう。登録不要。
HTMLレッスン1から始める →HTMLとCSSの違い まとめ比較
| 項目 | HTML | CSS |
|---|---|---|
| 正式名称 | HyperText Markup Language | Cascading Style Sheets |
| 役割 | 内容・構造を作る | 見た目・デザインを整える |
| 家で例えると | 柱・壁・床（骨格） | 壁紙・インテリア（装飾） |
| 書き方 | <タグ名>内容</タグ名> | セレクタ { プロパティ: 値; } |
📖 詳しくはHTMLタグ一覧【よく使う20選】で解説しています。
よくある疑問
Q. HTMLだけでもウェブページは作れる？
はい、作れます。ただし、HTMLだけだと白い背景に黒い文字が並ぶだけのシンプルなページになります。見た目を整えるにはCSSが必要です。
Q. CSSだけでページは作れる？
いいえ、作れません。CSSはHTMLの要素に対してスタイルを当てるものなので、HTMLなしでは動きません。必ずHTMLとセットで使います。
Q. どちらを先に学べばいい？
必ず HTMLを先に 学んでください。CSSはHTMLのタグやクラスを指定してスタイルを当てるので、HTMLの基本を知っていないとCSSが理解しにくくなります。HTMLの基本は「HTMLとは？初心者向けにわかりやすく解説」、CSSの基本は「CSSとは？初心者向けにわかりやすく解説」で学べます。2つを覚えたら、自己紹介ページやクラスのホームページなど、実際に使えるものを作ってみましょう。作りたいものがあると学習のモチベーションが続きます。
Q. CSSが効かないときは何を確認すればいい？
初心者がつまずきやすいポイントは主に3つです。
- セレクタのミス：
class="card"に対して.cardと書くべきところを#card（IDの記号）にしてしまう - 閉じ忘れ：CSSの
{と}の数が合っていない - スペルミス：
colour（英）ではなくcolor（米）が正しいなど、プロパティ名の綴り
ブラウザの開発者ツール（右クリック→「検証」）を開くと、どのCSSが適用されているか、エラーがないかを確認できます。
まとめ
- ✅ HTML はページの「骨格・構造」を作る言語
- ✅ CSS はページの「見た目・デザイン」を整える言語
- ✅ HTMLとCSSは別々の言語だが、必ずセットで使う
- ✅ 学ぶ順番は HTML → CSS。HTMLを先に覚えよう
- ✅ HTMLで構造を作り、CSSで色・大きさ・余白などを指定する
HTMLとCSSの違いがわかったら、実際にレッスンで手を動かしながら学んでみましょう。自分のウェブページを作りながら、楽しく身につけられます。