【1-1】HTMLとCSSの役割の違いをざっくり理解しよう

前の記事

この記事がスタート

次の記事

次の記事

【1-2】HTML・CSSを書くための開発環境をととのえよう

2025年12月6日

「 HTML と CSS ってよく聞くけど、何がどう違うの？」

そんな疑問を持ったまま勉強を始めると、最初の数日でほぼ必ずつまずきます。

実は、 HTML と CSS にはそれぞれはっきりとした役割があるんですが、最初にそこをおさえておかないと、「これって HTML で書くの？ CSS で書くの？」と毎回迷うことに…

この記事では、専門用語なしで” HTML と CSS の違い”だけをサクッと理解することを目標にしています。

難しいことはまだ覚えなくて大丈夫。

「あ、そういうことかも」とイメージがつかめれば、それだけで次のステップに進む準備はバッチリです。

ではさっそく、2つの役割の違いから見ていきましょう。

HTMLとCSSって何が違うの？

まず最初におさえたいのは、

HTML ＝ 中身（骨組み）
CSS ＝ 見た目（デザイン）

という、とてもシンプルな役割分担です。

HTMLは”中身をつくるもの”

HTML は、ページの中に何を書くかを決めます。

といった”内容そのもの”が HTML の担当です。

イメージで言うと、家の”柱・壁・部屋の配置”みたいな骨組み部分。

HTML なしではページは何も表示されません。

1つの例で見るともっとわかりやすい

たとえば、これが HTML だけの状態です。

<p>こんにちは！これはHTMLの文章です。</p>

<p>こんにちは！これはHTMLの文章です。</p>

見た目はとてもシンプル。

ここに CSS をつけると……

p {
  color: blue;
  font-size: 20px;
}

p {
  color: blue;
  font-size: 20px;
}

文字の色やサイズが変わって、ぐっと読みやすくなります。

中身（ HTML ）はそのまま、見た目（ CSS ）だけが変わる。

これが2つの役割の大きな違いです。

よくある勘違い

どちらが欠けてもページは成立しません。

ここまでのまとめ

Webページが表示される流れをイメージしよう

HTML と CSS の役割がわかったら、次は“その2つがどうやって画面に表示されるのか”をざっくりイメージしておきましょう。

むずかしい仕組みを覚える必要はありません。

ここでは“流れだけ”をふんわり理解できればOKです。

ブラウザがHTMLとCSSを読んで表示してくれる

Chrome や Safari などのブラウザは、 HTML ファイルや CSS ファイルを読み取って画面に表示してくれる”表示係”です。

イメージとしては、

という流れ。

ブラウザがいなかったら、 HTML も CSS もただの文字データです。

URLを開いてから表示されるまでのカンタンな流れ

普段わたしたちは URL をクリックするだけですが、裏側ではこんな感じで処理されています。

めちゃくちゃ簡単に言うと、“HTML → CSS → 画面に表示”という順番です。

HTMLファイルとCSSファイルのイメージ

ここで”ファイル”という言葉だけ先に登場させておきます。

どちらもただの”文字が書かれたファイル”です。

後で実際に作りますが、今は“HTML と CSS は別々のファイルになる”というイメージだけ持っておけばOK。

ここまでのまとめ

ブラウザ・エディタ・ファイルって何者？

HTML や CSS を学ぶときによく出てくるのがブラウザ・エディタ・ファイルの3つ。

まずは名前と役割だけざっくり理解しておきましょう。

「へぇ、そういうものなんだ」くらいで十分です。

ブラウザとは？

ブラウザは、Web ページを見るためのアプリです。

などが有名ですね。

ブラウザは、あなたが書いた HTML と CSS を画面に映してくれる”表示係”です。

つまり、” Web ページを見る → ブラウザの仕事”です。

エディタとは？

エディタは、 HTML や CSS を書くためのノートのようなもの。

普段のメモ帳でも書けるけど、プログラムを書くなら VS Code （無料）が使いやすいので定番です。

つまり、“コードを書く → エディタの仕事”です。

ファイルとは？

HTML や CSS は、特別なものではなく“文字を書いたファイル”のことです。

例えば、

といった名前のファイルを作り、その中にコードを書いていきます。

中身はただのテキスト（文字データ）なので、ファイル自体はとてもシンプルです。

ここまでのまとめ

コーディングってどんな作業？

“コーディング”という言葉、なんとなく”難しそう”に聞こえませんか？

でも実は、とてもシンプルで、

決まったルールにそって文字（コード）を書く作業

これだけです。

コーディング＝文字を書く作業のこと

コーディングというと”プログラミング”みたいな複雑なイメージを持ちやすいですが、 HTML や CSS のコーディングはもっとやさしい世界です。

など、ひとつひとつの作業は”文字を書く”だけ。

タイピングができれば、誰でも始められます。

HTMLとCSSを書くのもコーディングの一種

HTML はページの中身を書くもの、 CSS は見た目を整えるものですが、どちらも“文字で書く”という点は同じ。

<p>こんにちは</p>

<p>こんにちは</p>

p {
  color: red;
}

p {
  color: red;
}

こんなふうに、英語っぽい単語を組み合わせて書いていきます。

“プログラミング”との違い

よくある勘違いとして、” HTML ＝ プログラミング”と思われがちですが、実は違います。

HTML と CSS は、 Web サイトの”文章＋デザイン”を作るための言語と覚えておけばOK。

“動きをつけるのはプログラミング（ JavaScript ）”という別の世界です。

ここまでのまとめ

コードを書く前に知っておきたいルール

いよいよ HTML や CSS を書いていくわけですが…

その前に初心者が必ずつまずきやすいポイントを先にちょっとだけ知っておくと、後のストレスがぐっと減ります。

どれもすぐ覚えられるので、軽い気持ちで読んでください。

タグは必ず”半角”で書く”全角は禁止”

初心者がいちばんやりがちなミスが、全角でタグを書いてしまうこと。

これです

<!-- Pが全角になっている -->
<ｐ>こんにちは</ｐ>
<!-- Pが半角になっている -->
<p>こんにちは</p>

<!-- Pが全角になっている -->
<ｐ>こんにちは</ｐ>
<!-- Pが半角になっている -->
<p>こんにちは</p>

見た目は似てるけど、ブラウザは正しく理解できません。

タグ・記号・英数字はぜんぶ半角で書く！

これは最初に覚えておくと◎です。

ファイル名は”英数字＋ハイフン”が安心

こんにちは.html や わたしのサイト.html のように日本語のファイル名も作れますが、 Web 制作ではトラブルの原因になりやすいため避けます。

おすすめはこの形

ポイントは、

これならほぼ安全です。

コピペするときに壊れやすいポイント

初心者がほぼ100%経験するのがこれ。

「コピペしたのに動かない」

よくある例

コピペするときは、”見えない全角スペース”が紛れ込んでないかだけ少し意識すると安心です。

保存しないとブラウザに反映されない

超基本ですが、意外と忘れがちなのがこれ。

ファイルを保存しないとブラウザは更新されない！

HTML や CSS を書いても、保存しないままブラウザをリロードしても変わりません。

VS Code なら Ctrl + S が”癖になるくらい”押すキーです。

ここまでのまとめ

これを知っているだけで、後のつまずきが半分くらい消えます。

今日わかったこと＆このあと何をする？

ここまでで、 HTML と CSS の”いちばん大事な基礎”をざっくりつかめたと思います。

難しい言葉は出てきましたが、イメージさえ持てていれば大丈夫です。

最後に、今日の内容をかんたんに振り返っておきましょう。

「思ったよりシンプルかも？」と思えていれば完璧です。

確認問題

〇×問題

HTML は”見た目”、 CSS は”内容”を決める。

これは ○ でしょうか？ × でしょうか？

コードを読む問題

次のコードは「 HTML の役割」？「 CSS の役割」？

p {
  color: red;
}

p {
  color: red;
}

穴埋め問題

「 HTML は○○、 CSS は○○」

この○○に自分の言葉で入れてみてください。

次は”開発環境の準備”に進もう

ここまでで、 HTML と CSS って何なの？

という土台は作れました。

次の記事では、

などを実際に手を動かしながら進めていきます。

“準備編”ですが、ここをクリアするともう”書ける状態”になります。

前の記事

この記事がスタート

次の記事

次の記事

【1-2】HTML・CSSを書くための開発環境をととのえよう

2025年12月6日