HTMLとCSSの違いとは？役割・書き方・学ぶ順番を初心者向けに解説

2026年8月22日2026年10月11日

Web制作を学び始めたとき、HTMLとCSSの名前は聞いていても、「何が違うのか」「どちらから書けばよいのか」は迷いやすいところです。

HTMLは文章の役割と構造、CSSは色や余白などの見た目を担当します。同じページで二つを組み合わせると、どちらのファイルを直せばよいかも分かりやすくなります。

この記事では、短いコードで役割の違いを確かめ、HTMLとCSSのファイルをつないで文字色を変えるところまで進めます。練習にはPCを使いますが、まず違いだけ知りたい方は最初の比較表から読めます。Web制作全体の仕事や流れから確認したい方は、「Web制作とは？初心者向けに仕事内容と必要なスキルを解説」も先に読んでおくと理解しやすくなります。

この記事で分かること

HTMLとCSSの役割の違い
HTMLタグとCSSルールの基本的な書き方
HTMLからCSSファイルを読み込む方法
初心者がHTMLとCSSを学ぶ順番
CSSが反映されないときの確認ポイント

HTMLとCSSの役割の違い

HTMLとCSSは、同じWebページを作るために協力する別の言語です。HTMLだけでもページの内容は表示できますが、見た目はブラウザーの標準スタイルが中心になります。CSSを加えると、情報の意味や順序を保ったまま、色・大きさ・余白・配置を調整できます。

比較項目	HTML	CSS
役割	内容に意味を与え、構造を作る	色・余白・配置など見た目を整える
主な対象	見出し、段落、画像、リンクなど	見出しや段落など、見た目を変えたい要素
基本の形	<タグ>内容</タグ>	セレクター { プロパティ: 値; }
代表例	`<h1>ページタイトル</h1>`	`h1 { color: #536048; }`
単独でできること	内容は表示できる	適用先となる文書が必要

HTMLを「骨組み」、CSSを「服や内装」にたとえる説明もあります。ただし、実際にはHTMLは単なる枠ではありません。見出し、段落、リンクなど、情報がどのような役割を持つかを表す点が重要です。

HTMLとは？タグと要素の基本

HTMLは「HyperText Markup Language」の略です。文章、画像、リンクなどを要素として記述し、それぞれが見出しなのか段落なのかといった意味を示します。

この記事のMDNへの資料リンクは新しいタブで開きます。MDNのHTML用語解説では、HTMLはWebページの構造を指定する記述言語と説明されています。すべての内容を最初から読む必要はありませんが、HTMLが見た目だけを作るものではないことは押さえておきましょう。

HTMLのタグと要素の違い

HTMLでは、一般に開始タグと終了タグで内容を囲みます。タグと内容を含むまとまりが「要素」です。たとえば、大見出しはh1要素、段落はp要素で表します。次の短い例は、HTMLの<body>と</body>の間に書きます。なお、画像のimgなど、終了タグと内容を持たない空要素もあります。

<h1>はじめてのWebページ</h1>
<p>HTMLで文章の役割を示します。</p>

ここで重要なのは、文字を大きくしたいから h1 を使うのではなく、そのページの主題を表す大見出しだから h1 を使うことです。見た目はCSSで調整します。

HTMLファイルの作成と保存

ここからはPC上に練習用の2ファイルを作ります。コードを文字として編集・保存するテキストエディターと、ページを表示するブラウザーを用意してください。作業用フォルダーを一つ作り、次のコード全体をindex.htmlという名前で保存します。

保存時の文字コード（文字をファイルへ保存する方式）はUTF-8を選びます。ファイル名の末尾は.htmlとし、.html.txtになっていないか確認してください。この練習は自分のPC内で行うため、サーバーの契約やWordPressへの貼り付けは必要ありません。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのWebページ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>はじめてのWebページ</h1>
    <p>HTMLとCSSを学んでいます。</p>
  </body>
</html>

head 要素にはページの設定やタイトル、CSSファイルの読み込みなどを書きます。ブラウザーに表示する見出しや文章は、body 要素の中に書きます。

HTMLの要素や属性を調べるときは、日本語で読めるMDNのHTMLリファレンスが役立ちます。最初は見出しのh1〜h3、段落のp、リンクのa、画像のimg、箇条書きのulと各項目のliなど、実際に使う要素から覚えれば十分です。

CSSとは？見た目を指定する仕組み

CSSは「Cascading Style Sheets」の略です。HTMLなどの構造化文書を、画面や印刷物でどのように表示するかを指定します。MDNのCSS解説では、CSSはHTMLなどで記述された文書の体裁や見栄えを表現するスタイルシート言語と説明されています。

CSSを使うと、文字色や背景色だけでなく、余白、幅、高さ、並び方、画面幅に応じたレイアウトなども指定できます。

CSSのセレクター・プロパティ・値

CSSの基本は、「どの要素に」「何を」「どの値で」適用するかを一組のルールとして書くことです。

h1 {
  color: #536048;
  font-size: 32px;
}

h1が対象を指定するセレクター、colorやfont-sizeが変更する項目を示すプロパティ、#536048や32pxが値です。プロパティと値をコロンで区切り、一つの指定をセミコロンで区切ります。最後の指定のセミコロンは省略できますが、追記時の間違いを避けるため付けておきましょう。

#536048は深緑を表す色コード、32pxは文字サイズの練習値です。長さの32だけでは単位が足りないため、この例ではpxまで書きます。margin: 0;のように長さが0の場合は単位を省略できます。上の短い例は構文の説明で、次の完成CSSとは別の例です。

CSSファイルの作成と表示確認

同じ作業用フォルダーに新しいテキストファイルを作り、次のコード全体をstyle.cssとしてUTF-8で保存します。.cssファイルにはCSSだけを書き、<style>タグでは囲みません。

body {
  margin: 0;
  padding: 40px;
  background-color: #f5f6f2;
  color: #3d433b;
  font-family: sans-serif;
}

h1 {
  color: #536048;
}

両方のファイルを保存したら、index.htmlをブラウザーへドラッグして開きます。見出し「はじめてのWebページ」と文章が表示され、背景が淡い灰緑、周囲の余白が40px、見出しが深緑になれば、CSSを読み込めています。CSSの基本構文やプロパティは、MDNのCSS入門で日本語の例を確認できます。

HTMLとCSSを組み合わせる方法

CSSを適用する方法には、別ファイルを読み込む方法、HTMLのhead内のstyle要素に書く方法、要素のstyle属性に書く方法があります。ここでは、HTMLとCSSを別々のファイルに分ける方法で練習します。内容と見た目を分けておくと、同じCSSを複数ページで使いやすく、修正する場所も見つけやすくなります。

HTMLからCSSファイルを読み込む

HTMLファイルとCSSファイルを同じフォルダーへ置く場合は、HTMLのhead要素内に次のlink要素を書きます。

<link rel="stylesheet" href="style.css">

rel="stylesheet"は読み込むファイルがスタイルシートであること、href="style.css"は同じフォルダーにあるファイルの場所を表します。relやhrefのように、開始タグの中で追加情報を指定するものを「属性」と呼びます。上の完成HTMLにはこの行が入っているので、もう一行追加する必要はありません。

CSSが反映されないときは、まずファイル名と保存場所を確認してください。たとえば実際の名前が styles.css なのに、HTMLで style.css と指定していると読み込めません。大文字と小文字、拡張子、フォルダー階層も一致させます。

同じフォルダーのindex.htmlからstyle.cssを読み込み、文章の構造と文字色・余白の指定を分ける関係

同じHTMLで文字色を変更する

練習として、style.cssのh1にあるcolor: #536048;をcolor: red;へ変更して保存し、ブラウザーを再読み込みします。見出しだけが赤くなり、文章の内容と順序が同じなら、この練習は完了です。元の深緑へ戻すときはcolor: #536048;へ書き戻し、保存して再読み込みします。paddingは要素の内側の余白で、この例ではページの周囲に付く余白です。

一方、見出しを段落へ変更するなど、情報の意味や構造を変えたい場合はHTMLを修正します。この切り分けができると、「どちらのファイルを直せばよいか」を判断しやすくなります。

HOAI Point

文章の役割や順序を変えるならHTML、色・余白・配置などの見た目を変えるならCSS、と考えるのが基本です。

HTMLとCSSはどちらから学ぶ？

初心者は、HTMLの基本を先に学び、そのページへCSSを加える順番がおすすめです。ただし、HTMLをすべて暗記してからCSSへ進む必要はありません。短いHTMLを書いたらすぐにCSSで見た目を変え、両者のつながりを確かめましょう。

最初にHTMLの基本を学ぶ

まずは、見出し、段落、リンク、画像、箇条書きといった基本要素を使い、情報の順序を作ります。ブラウザーで開き、書いた内容が表示されることを確認してください。

この段階では、細かなデザインを気にしすぎなくて構いません。「どの内容を、どの要素で表すか」を考えることが目的です。

HTMLを完璧にする前にCSSへ進む

基本要素を数種類使えたら、同じページへCSSを加えます。最初は文字色、背景色、文字サイズ、余白から始めると、変更と結果の関係を確認しやすくなります。

その後の発展学習として、枠線や幅、要素を一列に並べる仕組みのFlexboxなどへ少しずつ範囲を広げます。新しいタグやプロパティは、必要になったときに公式リファレンスで調べる習慣を付けましょう。

小さな1ページを完成させる

学習の区切りとして、自己紹介ページや好きなものを紹介するページなど、小さな1ページを完成させます。

STEP

HTMLで内容を組み立てる

練習用のHTMLに、紹介したい内容を見出し・文章・画像・リンクで配置します。保存して開き、内容と順序を確認します。

STEP

CSSで見た目を整える

同じページに読み込ませたCSSで、色・文字サイズ・余白を一つずつ変えます。保存・再読み込みのたびに、狙った部分だけが変わるか確認します。

STEP

狭い画面幅で確認する

ブラウザーのウィンドウ幅を狭くし、文章が読めるか、画像やリンクが横にはみ出していないか確認します。実際のスマートフォンでも確認できる場合は表示を比べます。

STEP

修正して完成を確かめる

気になる点を一つ直して保存し、再読み込みします。文章の順序、文字の読みやすさ、画像の表示、リンクの移動先を確認できたら一区切りです。

一つのページを最後まで作ると、HTMLとCSSの役割だけでなく、保存、再読み込み、エラー確認という制作の流れも経験できます。

HOAI Point

HTMLとCSSは「片方を終えてから次へ進む科目」ではありません。HTMLで小さく作り、CSSで整え、表示を確認する短いサイクルを繰り返すと、両者の関係を理解しやすくなります。

HTML・CSSの学習でつまずいたときの確認

HTMLとCSSのコードが短くても、記号やファイル名が一つ違うだけで意図した表示にならないことがあります。うまくいかないときは、やみくもに書き換えず、確認する範囲を分けることが大切です。

見た目を変えるときの修正先

見出しを大きくしたい、文字色を変えたい、横並びにしたい、といった目的は基本的にCSSで扱います。見た目だけを理由にHTML要素を選ぶと、文書の意味と構造が分かりにくくなります。

先にHTMLで情報の役割を決め、その後でCSSを適用してください。

CSSが反映されないときの確認順

最初に両方のファイルを保存し、編集したindex.htmlをブラウザーで再読み込みします。それでも変わらない場合は、画面の状態に合う項目から確認してください。背景や余白が変わっているなら、CSS全体が読み込まれていない状態とは区別できます。

見出しや文章も表示されない：開いているファイルが練習用のindex.htmlか確認し、HTMLのbody内に見出しと段落があるか照合します。
文章は出るが、背景・余白・文字色がすべて変わらない：head内のlink要素と、実際のstyle.cssの名前・拡張子・保存場所を照合します。
背景や余白は変わるが、見出しの色だけ変わらない：HTMLのh1とCSSのh1など、対象の名前が合っているか確認します。
ファイルや対象が合っていても変わらない：反映されない指定の半角コロン・セミコロン・波かっこ、プロパティ名、値の単位をコード例と照合します。
自分でコードを追加した後に変わらない：同じ対象・プロパティを別の場所にも書いていないか確認します。追加したコードを控えてからいったん外し、掲載例の状態へ戻して比べます。

直すたびに保存して再読み込みし、練習例どおりの背景・余白・見出し色になれば確認は終了です。解決後に残りの項目を試す必要はありません。一度に複数箇所を変更しないようにすると、どこを直して改善したかを追えます。CSSの無効なプロパティや値は、その指定が無視されます。ほかの有効な指定まで必ず消えるわけではありません。ただし、波かっこの欠落など構造の誤りは後続の読み取りにも影響するため、区切りも確認します。読み込み方は、前の章のMDN「CSS入門」の外部スタイルシートの説明でも確認できます。

タグ・プロパティの調べ方

HTML要素やCSSプロパティは数が多いため、最初からすべて覚える必要はありません。よく使うものを実際のページで繰り返し、分からないものはMDNなどのリファレンスで調べます。

暗記量ではなく、「何を変えたいかを言葉にし、該当する要素やプロパティを調べ、結果を確認できること」を目標にしてください。

HOAI Point

見出しや文章そのものが出ないならHTMLを確認します。文章は出るのに色や余白が変わらないなら、保存とCSSの読み込み先から確認すると、調べる場所を絞れます。

よくある質問

HTMLとCSSはプログラミング言語ですか？: 一般に、HTMLはマークアップ言語、CSSはスタイルシート言語と呼ばれます。どちらもWeb制作のコードとして書きますが、条件分岐や計算などの処理を記述するJavaScriptのようなプログラミング言語とは役割が異なります。
HTMLだけでもWebページは作れますか？: はい。HTMLだけでも文章や画像、リンクを持つWebページは作れます。ただし、見た目はブラウザーの標準スタイルが中心になるため、色・余白・配置などを意図どおりに整えるにはCSSを組み合わせます。
CSSだけでもWebページは作れますか？: 通常、CSSは適用先となるHTMLなどの文書と組み合わせて使います。CSSだけでは、ページの見出しや文章といった内容・構造を作れません。
JavaScriptはいつ学べばよいですか？: まずHTMLとCSSで小さなページを作れるようになってから進むと理解しやすくなります。ボタン操作に応じて表示を変えるなど、ページへ動きや処理を加えたい段階でJavaScriptの基礎を学びましょう。
HTMLとCSSはどこまで学べば次へ進めますか？: 基本要素を使って1ページを組み立て、CSSで文字・色・余白・簡単な配置を調整できたら、次の内容へ進んで構いません。分からない項目を調べながら直せる状態を目安にし、完璧な暗記を待つ必要はありません。