HTMLとCSSの違いは？同じページの文字色と余白を変えて理解しよう

読む時間の目安：約10分（操作にかかる時間は含みません）

HTMLは文章の役割や構造を表し、CSSは文字色や余白などの見た目を指定します。 同じ文章でも、CSSを変えると見え方が変わります。今回は小さなページを作り、色と余白を変え、最後にCSSを外して違いを確かめます。

私は学習を始めた頃、コードの種類と、それぞれが何をするのかが分かりませんでした。実際に書いて、画面がどう変わるかを見ながら覚えてきました。コードの近くにコメントで説明があると、何のための行なのかも追いやすく感じます。

この記事も、コードと結果を見比べられる形にしました。画像は今回の説明用に新しく作ったデモの実画面です。私の過去の学習画面ではありません。手順とデモの検証にはAIを活用しています。

VS Codeでファイルを作るところから確認したい方は、第2号記事：VS Codeの準備と最初のHTMLから進めてください。

HTMLは文章の役割、CSSは見た目を指定する

例えば、ページに「今日の小さな挑戦」という見出しと、その下の説明文を置くとします。

• HTML：この文字は主な見出し、この文章は段落、と役割を付ける。
• CSS：その見出しを深い緑色にする、背景を付ける、内側の余白を広げる。

HTMLだけでも見出しは大きく表示されます。これはブラウザが標準の見た目を持っているためです。「CSSファイルを書かなければ、すべて同じ大きさになる」という意味ではありません。

見出しの文字自体を変えるならHTML、文字色を変えるならCSS。まずはこの2つを使い分けてみましょう。

1．HTMLだけのページを用意する

第2号記事のファイルを残せるように、今回は別の練習用フォルダを作ります。名前は html-css-practice とします。VS Codeでそのフォルダを開き、中に index.html を作ってください。

次のコードをすべて入れて保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLとCSSの練習</title>
</head>
<body>
  <!-- h1は、このページの主な見出しです -->
  <h1>今日の小さな挑戦</h1>
  <!-- pは、ひとまとまりの文章を表します -->
  <p>HTMLとCSSで、文字と見た目を変えてみます。</p>
</body>
</html>

h1 はページの主な見出し、p は段落を表します。<h1> と </h1> のように開始と終了で囲んだ中身が、その要素の内容です。大きな字にしたいから見出しにするのではなく、文章の役割で選びます。

<!-- 説明 --> はHTMLのコメントです。読む人のためのメモで、ページの本文には表示されません。

保存した index.html をブラウザで開きます。ダブルクリックでVS Codeが開くときは、ファイルを右クリックし、Macは「このアプリケーションで開く」、Windowsは「プログラムから開く」でブラウザを選びます。

見出しと説明文の2つが表示されれば、最初の確認は完了です。ここで見出しの文章を変えると、表示する言葉も変わります。以下の比較では同じ文言に戻して進めます。

2．style.cssを作ってHTMLにつなぐ

CSSはHTML内にも書けますが、今回は役割を見分けやすいように別ファイルにします。VS Codeのファイル一覧で練習フォルダを右クリックし、「新しいファイル（New File）」から style.css を作ります。

フォルダの中は次の2ファイルです。同じ階層に置くのが今回のポイントです。

html-css-practice/
  index.html
  style.css

CSSに見出しの見た目を書く

style.css に次のコードを入れます。

/* h1は、見出しを選ぶ指定です */
h1 {
  color: #245a43; /* 文字を深い緑色にします */
  background-color: #f3efe5; /* 見出しの背景に色を付けます */
  padding: 16px; /* 文字と背景の端の間に、内側の余白を作ります */
}

先頭の h1 は「どの部分を変えるか」を選ぶ指定で、セレクターと呼びます。{ } の中に、変えたい項目と値を書きます。

color は文字色、background-color は背景色、padding は内側の余白です。#245a43 などは色を表すコードです。16px の px は画面上の長さに使う単位で、今回は上下左右に同じ余白を指定しています。

/* 説明 */ はCSSのコメントです。HTMLのコメントとは書き方が違います。項目名や記号は半角で入力し、行末の ; と最後の } も付けてください。

HTMLからCSSを読み込む

CSSファイルを作っただけでは、HTMLはそのファイルを使いません。index.html に戻り、</head> の直前へ次の1行を加えます。

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

追加する場所の目印はこの部分です。HTML全体をこの短いコードで置き換えず、headの終わりに1行を追加します。

<title>HTMLとCSSの練習</title>
  <link rel="stylesheet" href="style.css">
</head>

rel="stylesheet" はスタイルシートとして読み込む指定、href="style.css" はファイルの場所です。同じフォルダに置いたのでファイル名だけで指定できます。名前は必ず style.css でなければいけないわけではありませんが、実際の名前と href を一致させる必要があります。

HTMLとCSSの両方を保存して、ブラウザの再読み込みボタンを押します。保存はMacなら Command + S、Windowsなら Ctrl + S。それぞれのファイルで行ってください。

見出しが深い緑になり、薄い背景と余白が付きました。文章は変えていません。変わったのはCSSで指定した見た目です。

3．文字色と余白を一つずつ変える

まず style.css の色だけを #245a43 から #9b3e18 に変えます。

color: #9b3e18; /* 文字を茶色がかったオレンジにします */

これは h1 { } の中にある既存の color 行を置き換える例です。CSS全体をこの1行に置き換えないでください。保存してブラウザを更新し、文字色だけが変わるか確認します。

次は padding: 16px; を padding: 32px; に変えます。

padding: 32px; /* 内側の余白を広げます */

同じように保存して更新します。背景の端と文字の間が広くなれば成功です。これは見出しの内側の余白です。要素の外側に空間を作る margin とは区別します。

一度にたくさん変えるより、1か所変えて、保存して、画面を見る方が、どのコードが何に効いたのかを追いやすくなります。

4．CSSを外すと何が残る？

最後に、HTMLとCSSの役割を逆から確かめます。style.css は消さずに、index.html の読み込み行を一時的にコメントにします。

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

HTMLを保存してブラウザを更新すると、CSSファイルを読み込まなくなります。

見出しと段落の文章は残っています。自分で指定した色・背景・内側余白が外れ、ブラウザ標準の見た目に戻りました。このデモでは、内容と役割をHTMLが、追加した見た目をCSSが担当していたと確認できます。

元に戻すときは <!-- と --> を取り除き、普通の <link rel="stylesheet" href="style.css"> に戻して保存・更新してください。CSSを別ファイルにしておくと、文章を書き直さずに見た目を変えられます。

変わらないときに確認すること

色も余白も変わらないときは、次の順に見てください。すべてを作り直す前に、ファイルと接続を確かめます。

1. 保存と更新：編集したHTML・CSSを保存し、ブラウザを再読み込みしたか。
2. 開いている場所：ブラウザで表示しているHTMLが、今編集している練習フォルダのものか。
3. ファイル名と配置：index.html と style.css が同じフォルダにあり、style.css.txt など別の名前になっていないか。
4. 読み込み行：href="style.css" の綴りが合い、head の中にあるか。最後の実験でコメントにしたままではないか。
5. CSSの記号：h1 { } の中へ書いているか。color: の :、行末の ;、閉じる } があるか。

色だけ変わるなら読み込み自体はできています。まず padding の綴りや数値・単位を確認しましょう。確認できた部分を手掛かりにすると、原因を絞れます。

今日できたことを言葉にしてみる

「HTMLで見出しと段落を作り、CSSで見出しの色と内側余白を変えた」。ここまで自分の言葉で説明できれば、今回のゴールです。

コードの名前を眺めるだけでは分かりにくかった私には、書いて結果を見ることが学習の足掛かりになりました。次は見出しの文章を一つ、色を一つ、自分で選んで変更してみてください。

学習の全体像を見直したい場合は、第1号記事：Web制作の独学で学ぶ順番で現在地を確認できます。

技術的な仕組みは、MDNのCSS入門とpaddingの説明を参照しました。手順はこの記事用のデモで確認しています。