JavaScript | HTML / CSS 連携：CSS基礎－ CSSの役割

JavaScript

2026.07.162026.07.17

CSSの役割は「見た目のルールをHTMLから“切り離して”管理すること」
HTMLとCSSの関係を“役割分担”としてイメージする
1. HTMLは「骨格」、CSSは「服とメイク」
具体例で「CSSが何をしているか」を見る
1. HTMLだけの状態
2. CSSを足した状態
CSSの“本当に重要な役割”を3つに絞る
JavaScriptとの関係：CSSは「見た目」、JSは「動き」
1. 役割の三分割をイメージする
CSSの役割を“初心者目線”で一言にすると

CSSの役割は「見た目のルールをHTMLから“切り離して”管理すること」

まず一番大事なところからいきます。

HTMLの役割：ページの“中身”と“構造”を書くもの CSSの役割：その中身の“見た目”と“装飾”を決めるもの

この分け方が、Webの世界の大前提です。

HTMLだけでもページは表示できますが、

文字サイズが全部同じ
色もほぼ黒と白だけ
余白もバラバラで読みづらい

という「とりあえず読めるけど、気持ちよくはない」状態になります。

そこで CSS が登場して、

どの文字を大きくするか
どこに余白を入れるか
どの部分を目立たせるか
レイアウトをどう並べるか

といった「見た目のルール」を、 HTMLとは別ファイル・別レイヤーで管理する役割を担います。

HTMLとCSSの関係を“役割分担”としてイメージする

HTMLは「骨格」、CSSは「服とメイク」

人間で例えると、

HTML → 骨格・内臓・筋肉（構造と中身）
CSS → 服・髪型・メイク（見た目のスタイル）

という感じです。

骨格がないと人は立てないし、服だけあっても人は存在しません。

Webページも同じで、

HTMLだけ → 情報はあるけど、見た目が素っ気ない
CSSだけ → そもそも表示する中身がない

なので、 「HTMLで中身を作り、CSSでそれを“見せ方”として整える」 というコンビで初めて、ちゃんとしたページになります。

具体例で「CSSが何をしているか」を見る

HTMLだけの状態

<h1>こんにちは、MONOさん</h1>
<p>これはCSSなしのシンプルなページです。</p>
<p>全部同じような見た目で表示されます。</p>

これでもブラウザは表示してくれますが、見た目はかなり素朴です。

CSSを足した状態

<h1 class="title">こんにちは、MONOさん</h1>
<p class="lead">これはCSSありのページです。</p>
<p>重要な部分だけ、見た目を変えられます。</p>

.title {
  color: #007bff;
  font-size: 32px;
  margin-bottom: 16px;
}

.lead {
  font-weight: bold;
  font-size: 18px;
}

ここで CSS がやっていることは、

.title → タイトルを青くして、大きくして、下に余白を入れる
.lead → 最初の説明文を太字＆少し大きくする

つまり、

「このクラスが付いている要素は、こういう見た目にする」というルールを定義している ということです。

HTMLは「何が書いてあるか」、 CSSは「それをどう見せるか」。

この分離が、 CSSの本質的な役割です。

CSSの“本当に重要な役割”を3つに絞る

1. 強調・メリハリをつけて「どこが大事か」を伝える

同じ文章でも、

タイトルが大きい
重要なキーワードが太字
注意書きが赤文字

になっているだけで、ユーザーは「どこを重点的に読めばいいか」を直感的に理解できます。

CSSは、

h1 {
  font-size: 32px;
}

.important {
  color: red;
  font-weight: bold;
}

のように、 「ここは目立たせる」「ここは普通にする」という“視覚的な優先順位”を作る役割を持っています。

2. レイアウトを整えて「読みやすさ」を作る

CSSがないと、要素は基本的に縦にズラッと並ぶだけです。

CSSを使うと、

横並びにする -中央寄せにする
余白を入れて詰めすぎを防ぐ

といったレイアウトを制御できます。

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

.card {
  border: 1px solid #ccc;
  padding: 12px;
  margin-bottom: 12px;
}

これだけで、

画面の中央にコンテンツが集まる
各ブロックがカードっぽく見える
情報が整理されて見える

という「読みやすさ」が生まれます。

3. デザインを“まとめて管理”して、変更を楽にする

例えば、サイト全体のテーマカラーを変えたいとします。

CSSがなかったら、

HTMLのあちこちに書いた style="color: blue" を全部探して書き換える

という地獄が待っています。

CSSなら、

:root {
  --main-color: #007bff;
}

.title {
  color: var(--main-color);
}
.button {
  background-color: var(--main-color);
}

のように、 「色の定義を1箇所にまとめておいて、そこを変えるだけで全体が変わる」 という管理ができます。

CSSの役割は、 「見た目のルールを一箇所に集めて、後から変えやすくすること」 でもあるんです。

JavaScriptとの関係：CSSは「見た目」、JSは「動き」

役割の三分割をイメージする

Webの世界では、よくこう言われます。

HTML → 構造（Structure）
CSS → 見た目（Presentation）
JavaScript → 動き・振る舞い（Behavior）

例えば「ボタンをクリックしたら色が変わる」という動きを作るとき、

HTML：

<button id="change">色を変える</button>
<div id="box" class="box">BOX</div>

CSS：

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.box.active {
  background-color: #ff0000;
}

JavaScript：

const button = document.querySelector("#change");
const box = document.querySelector("#box");

button.addEventListener("click", () => {
  box.classList.toggle("active");
});

const button = document.querySelector("#change");
const box = document.querySelector("#box");

button.addEventListener("click", () => {
  box.classList.toggle("active");
});