こんにちは、Kredo Blog編集部です！HTMLとCSSの違いは、HTMLが「Webページの構造（骨組みと中身）」を作る言語で、CSSが「その見た目（色・大きさ・配置）」を決める言語だという点です。家にたとえると、HTMLが柱や部屋割り、CSSが壁紙や家具の配置にあたります。
この記事では、「HTMLとは」「CSSとは」という基本から、役割と書き方の違い、よく迷う # と . の違い、HTMLにCSSを適用する方法、JavaScript・PHPとの関係、学ぶ順番までを、実際に試せるコード例つきで解説します。
この記事でわかること
- HTMLとCSSの違いがひと目でわかる比較表
- HTMLとは何か、CSSとは何か
- タグとプロパティ、書き方（構文）の違い
- CSSの
#（ID）と.（クラス）の違い - HTMLにCSSを適用する3つの方法とサンプルコード
- JavaScript・PHPとの違いと、HTML・CSSの学ぶ順番
HTMLとCSSの違いをひとことで比較
HTMLとCSSは、どちらもWebページを作るために欠かせない言語ですが、役割も書き方もまったく違います。まずは違いを表で整理しましょう。
| 比較 | HTML | CSS |
|---|---|---|
| 正式名称 | HyperText Markup Language | Cascading Style Sheets |
| 言語の種類 | マークアップ言語 | スタイルシート言語 |
| 役割 | ページの構造と中身を作る（見出し・文章・画像・リンクなど） | 見た目を整える（色・文字の大きさ・余白・レイアウトなど） |
| 書き方 | タグで囲む（<h1>見出し</h1>） | セレクタ＋プロパティと値（h1 { color: blue; }） |
| ファイル | .html | .css |
| なかったら | ページそのものが作れない | ページは表示されるが、飾りのない素の見た目になる |
つまり、HTMLだけでもページは作れますが、CSSだけではページは作れません。HTMLで作った中身に、CSSで見た目を当てはめる、という関係です。どちらが上ということではなく、2つをセットで使うのが基本です。
HTMLとは？Webページの構造を作る言語
HTMLは「HyperText Markup Language」の略で、Webページの構造と中身を作るマークアップ言語です。マークアップとは、文章に「ここは見出し」「ここは段落」「ここはリンク」といった意味の印（タグ）をつけることを指します。
ブラウザ（ChromeやSafariなど）はHTMLを読み取り、タグの意味に従って画面に表示しています。次のコードは、HTMLだけで作ったシンプルなページです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのWebページ</title>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは。Webサイト作りを勉強しています。</p>
<a href="https://example.com/">リンクを見る</a>
</body>
</html><h1> は大見出し、<p> は段落、<a> はリンクを表すタグです。多くのタグは <p> と </p> のように開始タグと終了タグで中身を囲み、このまとまりを「要素」と呼びます。
HTMLでできること・書くもの
- ページのタイトル（ブラウザのタブに表示される名前）
- 見出し（h1〜h6）と段落（p）
- 画像（img）や動画の埋め込み
- リンク（a）やボタン、入力フォーム
- ヘッダー・メイン・フッターなどページの区切り
昔はHTMLの中で文字の色や大きさを指定することもありましたが、今はHTMLは「何が書いてあるか」だけを表し、見た目はCSSに任せるのが基本的な考え方です。
CSSとは？Webページの見た目を決める言語
CSSは「Cascading Style Sheets」の略で、HTMLで作った要素の見た目を指定するスタイルシート言語です。文字の色や大きさ、背景色、余白、横並びなどのレイアウトは、CSSで指定します。
CSSは「どの要素に（セレクタ）」「何を（プロパティ）」「どうする（値）」の3つで書きます。
h1 {
color: #1e90ff;
font-size: 32px;
}この例は「h1の文字色を青（#1e90ff）にし、文字の大きさを32pxにする」という意味です。h1 がセレクタ、color や font-size がプロパティ、#1e90ff や 32px が値です。#1e90ff のような書き方は、色を16進数で表すカラーコードです。
CSSはプログラミング言語？
CSSについて調べると、プログラミング言語かどうかで迷う人も多いです。CSSは計算や条件分岐で処理を行うというより、見た目のルールを宣言する「スタイルシート言語」に分類されます。詳しくはCSSはプログラミング言語？スタイルシート言語との違いと書き方で解説しています。
CSSを使うメリット
CSSを別ファイルにまとめておくと、複数のページで同じデザインを使い回せます。たとえば見出しの色を変えたいとき、CSSを1か所直すだけで、そのCSSを読み込んでいるすべてのページの見出しの色が変わります。見た目の管理が楽になり、修正ミスも減らせるのがCSSを使う大きな理由です。
HTMLとCSSの書き方（構文）の違い
HTMLとCSSは、書き方のルール（構文）もまったく違います。
| 比較 | HTML | CSS |
|---|---|---|
| 基本の形 | <タグ名>中身</タグ名> | セレクタ { プロパティ: 値; } |
| 記号 | < > と / を使う | { } と : と ; を使う |
| 追加の情報 | 属性（class=”…” や href=”…”） | 複数のプロパティを ; で区切って並べる |
| コメント | <!– コメント –> | /* コメント */ |
CSSの「#」と「.」の違い
CSSの「#」と「.」の違いは、HTMLとCSSをつなぐときに多くの人がつまずくポイントです。HTML側で class や id という名前をつけ、CSS側でその名前を指定して見た目を当てはめます。
HTML
<p class="note">クラスをつけた段落</p>
<p id="lead">IDをつけた段落</p>CSS
/* タグ名で指定：すべてのp要素 */
p {
line-height: 1.8;
}
/* .（ドット）はクラスを指定 */
.note {
color: #d2691e;
}
/* #（シャープ）はIDを指定 */
#lead {
font-weight: bold;
}| 書き方 | 意味 | 使い方の目安 |
|---|---|---|
| p | タグ名で指定（そのタグすべて） | サイト全体の基本の見た目 |
| .note | クラスで指定（class=”note” の要素） | 同じ見た目を何か所にも使うとき |
| #lead | IDで指定（id=”lead” の要素） | ページ内で1つだけの要素に使うとき |
「.」はクラス、「#」はIDと覚えましょう。同じIDは1ページに1つだけ使うのがルールなので、見た目を指定するときは使い回せるクラスを中心にするのが一般的です。ほかの記号（> や * など）の意味はCSSの記号の意味一覧にまとめています。
HTMLにCSSを適用する3つの方法
CSSをHTMLに当てはめる方法は、次の3つがあります。
1. style属性に直接書く（インライン）
<p style="color: red;">この段落だけ赤くする</p>その要素だけにすぐ効きますが、同じ指定をあちこちに書くことになり、管理が大変になります。
2. styleタグにまとめて書く
<head>
<style>
p {
color: red;
}
</style>
</head>HTMLファイルの <head> の中にCSSをまとめて書く方法です。1ページだけの練習には便利ですが、複数のページで同じデザインを使い回せません。
3. 別のCSSファイルを読み込む（おすすめ）
<head>
<link rel="stylesheet" href="style.css">
</head>CSSを「style.css」のような別ファイルに書き、HTMLの <link> タグで読み込む方法です。複数のページで同じCSSを共有でき、デザインの修正も1か所で済むため、実際のWeb制作ではこの方法が基本です。
| 方法 | メリット | デメリット |
|---|---|---|
| style属性 | すぐ試せる | 使い回せず管理が大変 |
| styleタグ | 1ファイルで完結する | 他のページと共有できない |
| CSSファイルを読み込む | 共有・修正が楽 | ファイルが2つになる（慣れれば問題なし） |
HTMLとCSSでページを作ってみよう
違いがわかったら、実際にHTMLとCSSでページを作ってみましょう。Windowsなら「メモ帳」、Macなら「テキストエディット」（標準テキストで保存）や、無料のコードエディタで作れます。次の2つのコードを、同じフォルダに「index.html」と「style.css」という名前で保存してください。
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTMLとCSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<h1>わたしのプロフィール</h1>
</header>
<main class="container">
<section class="card">
<h2>好きなこと</h2>
<p>旅行と写真、新しいことを学ぶことが好きです。</p>
</section>
<section class="card">
<h2>今の目標</h2>
<p>HTMLとCSSで自分のWebサイトを作ることです。</p>
<a class="button" href="https://example.com/">ブログを見る</a>
</section>
</main>
</body>
</html>CSS（style.css）
body {
margin: 0;
font-family: sans-serif;
background-color: #f5f7fa;
color: #333;
}
.site-header {
background-color: #1e90ff;
color: #fff;
padding: 24px 16px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
max-width: 960px;
margin: 24px auto;
padding: 0 16px;
}
.card {
flex: 1 1 280px;
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.button {
display: inline-block;
padding: 8px 16px;
background-color: #ff7043;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
.button:hover {
background-color: #f4511e;
}保存した「index.html」をブラウザで開くと、青いヘッダーの下に白いカードが2枚並んだページが表示されます。試しに「style.css」の <link> の行をHTMLから消して開き直すと、飾りのない文字だけのページになります。中身はHTML、見た目はCSSという違いが、実際に目で確かめられるはずです。
色の値や padding の数字を変えて、見た目がどう変わるか試してみてください。
JavaScript・PHPとの違いと関係
HTMLとCSSを調べていると、JavaScriptやPHPもよく出てきます。それぞれの役割の違いは次のとおりです。
| 言語 | 種類 | 役割 | 例 |
|---|---|---|---|
| HTML | マークアップ言語 | ページの構造と中身 | 見出し、文章、画像、リンク |
| CSS | スタイルシート言語 | 見た目 | 色、文字の大きさ、レイアウト |
| JavaScript | プログラミング言語 | ブラウザ上での動き | メニューの開閉、スライドショー、入力チェック |
| PHP | プログラミング言語 | サーバー側での処理 | ログイン、問い合わせフォームの送信、データベースとの連携 |
家にたとえると、HTMLが骨組みと部屋、CSSが内装や外観、JavaScriptが自動ドアや照明のスイッチ、PHPが家の外にある管理室や郵便の仕組みのようなものです。HTMLとCSSだけでも見た目の整ったページは作れますが、JavaScriptやPHPを組み合わせると、動きや機能のあるWebサイトやWebサービスが作れるようになります。
HTMLとCSSの勉強方法と順番
HTMLとCSSは、プログラミングの中でも最初に学ぶ人が多い分野です。次の順番で進めると、つまずきにくくなります。
- HTMLの基本タグ（見出し・段落・リンク・画像・リスト）を覚える
- CSSの基本（セレクタ・色・文字・余白）で見た目を変えてみる
- クラスと
#・.の使い分けに慣れる - FlexboxやGridで横並びなどのレイアウトを組む
- 好きなサイトをまねて、1ページを最後まで作ってみる
- JavaScriptで動きをつける
無料で学べるサイトはHTML勉強サイト8選｜初心者が無料で学べる学習サイト【2026年】、手元に置いて学べる本はHTML・CSSのおすすめ本11選｜初心者向け参考書【2026年】で紹介しています。
独学でつまずきやすいポイント
HTMLとCSSは始めやすい一方で、レイアウトが思いどおりにならない、エラーの原因がわからない、といったところで手が止まりやすい分野でもあります。わからないところを質問できる環境や、決まった時間に集中して手を動かす環境があると、学習を続けやすくなります。
Kredoのフィリピン・セブ島のIT留学では、ITレッスンをすべて英語で行い、1日8時間（英語マンツーマン4時間＋ITグループ4時間）で英語とWeb制作を同時に学べます。受講生の92%が英語もITも未経験からのスタートです。HTML・CSSから英語とあわせて学びたい方は、IT留学とは？費用・国別比較・1日の流れと選び方で費用や1日の流れを確認してみてください。
よくある質問
Q. HTMLとCSSはどちらから学べばいいですか？
A. HTMLから学びましょう。CSSはHTMLで作った要素に見た目を当てはめるものなので、先にHTMLで中身を作れるようになると、CSSの役割が理解しやすくなります。実際には、HTMLの基本を覚えたらすぐにCSSも並行して試すのがおすすめです。
Q. CSSはHTMLのファイルの中に書いてもいいですか？
A. styleタグやstyle属性で書くこともできます。ただし複数のページで同じデザインを使い回すなら、別のCSSファイルにまとめて <link> で読み込む方法が管理しやすく、実際のWeb制作でも一般的です。
Q. HTMLとCSSだけでWebサイトは作れますか？
A. 会社案内やプロフィールのような、情報を見せるためのWebサイトは作れます。メニューの開閉などの動きにはJavaScript、ログインやお問い合わせフォームの送信などの機能にはPHPなどのサーバー側の言語が必要になります。
Q. HTMLとCSSの「バージョン」の違いは気にするべきですか？
A. 初心者のうちは、今のブラウザで使われている書き方で学べば十分です。古い教材では大文字のタグや、HTMLで色を指定する書き方が出てくることがありますが、今はこの記事のように小文字のタグで書き、見た目はCSSで指定するのが一般的です。
まとめ
HTMLとCSSの違いは、HTMLが「ページの構造と中身」を作るマークアップ言語、CSSが「見た目」を決めるスタイルシート言語だという点です。書き方も、HTMLはタグで囲み、CSSはセレクタ・プロパティ・値で指定するという違いがあります。CSSの . はクラス、# はIDを指定する記号です。
実際のWeb制作では、HTMLで中身を作り、別ファイルのCSSを読み込んで見た目を整えるのが基本です。この記事のサンプルを保存してブラウザで開き、HTMLとCSSをそれぞれ書き換えながら、違いを手で確かめてみてください。
英語でIT・AIを学べるKredo
英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？
