CSS ってなに？

「CSS」「スタイル」「フォントを変える」「色を変える」… Webサイトを少しでも触ったことがある人なら、必ず出てくる言葉。

HTMLの記事では、Webページの骨組みを作る HTML を見ました。今回はその骨に 「服」を着せる役割 ——CSS を、ふんわり見ていきます。

ざっくり言うと、CSS は Webページの「見た目」を整える書き方 です。

略は「Cascading Style Sheets」。覚えなくてOK、意味だけ押さえれば十分：

Cascading ＝上から下に流れる（ルールの優先順位）
Style ＝見た目（色・大きさ・配置など）
Sheets ＝まとめた紙（ルール集）

つまり「ページ全体の見た目ルールを、上から順に適用していく書き方」。人の体に例えると、CSS は 服や髪型・メイク にあたります。同じ骨格でも、着る服が違えば印象は別人。HTMLの骨に CSS で服を着せて、初めてサイトの「見た目」になります。

タグに「ルール」を適用する

CSS は、HTML のタグに対して「こんなふうに見せて」とルールを書く言葉です。

CSSでタグに見た目を指定 — **図3：**CSS＝タグに「こう見せて」と指示する

例えばこんな書き方をします：

h1 {
  color: red;            /* 文字を赤に */
  font-size: 32px;       /* 大きく */
}

これは「HTML の <h1> タグの中身を、赤くて 32px で見せて」という意味。ルールは 3つの部品 でできています：

セレクタ（どこに？）：今回は h1
プロパティ（何を？）：color、font-size
値（どう？）：red、32px

料理のレシピみたいなものです。「何を・どんなふうに」を1セットで書く。

なんで CSS が必要？

CSS がないと、HTML だけのページは白黒で味気ない見た目になります。

CSSなし vs あり — **図4：**CSSなし＝裸の骨／あり＝服を着たページ

HTML だけのページは「黒い文字が縦に並ぶだけ」。色も装飾もなく、まるで骨だけの状態。 CSS でルールを書いてあげることで：

見出しに色や下線をつけられる
ボタンに角丸や影をつけられる
要素を 横並び にしたり 中央寄せ にできる
画面サイズによってレイアウトを変える（スマホ対応）

→ つまり「いま見ているWebサイトのほぼ全ての見た目」が、CSS で作られています。

よく使うプロパティ

たくさんあるけど、特に出番の多いプロパティはこのあたり：

color … 文字の色
font-size … 文字の大きさ
background … 背景の色・画像
margin … 要素の外側の余白
padding … 要素の内側の余白
border … 枠線
display: flex … 要素を横並びにする魔法

何百個もあるけど、よく使うのは20個くらい。コーディネートの基本パターンと同じで、慣れれば組み合わせで色んな表現ができます。

セレクタで「どこを」指定する

CSS の面白いところは、「どのタグに」適用するかを細かく指定できること。

主な3パターン：

h1 { ... }            /* タグ全部に */
.button { ... }       /* class="button" のところに */
#header { ... }       /* id="header" のところに */

タグ名（h1）→ そのタグ全部に同じスタイル
クラス（.button）→ HTML 側で class="button" を付けた要素だけに
ID（#header）→ HTML 側で id="header" を付けた1つだけに

例えば「全部の見出しを青く」じゃなく「ヘッダーの中の見出しだけ赤く」みたいに、ピンポイントで指定できる。衣装係が「主役の上着だけ赤」と指定するイメージです。

CSS、どこに書くの？

「で、結局この CSS はどこに書くの？」というのが、最初の関門。書ける場所は 3つあります。

① 外部の .css ファイル（基本・推奨）：HTML から <link rel="stylesheet" href="style.css"> で読み込む。1つのcssを複数ページで使い回せるので、サイト規模が大きくなるほど便利
② <style> タグの中：HTML の <head> の中に直接 CSS を書く。そのページだけのスタイルを試したい時に便利
③ タグの style 属性（インライン）：<p style="color:red"> のように、タグの中で直接指定。ピンポイントだが管理しづらいので最終手段

→ 実務では ① が9割。「服のレシピを別の紙に書いておいて、必要なページから “これ着てね” と指定する」イメージです。

HTML と JavaScript との関係

CSS は服。それだけだと、ページは動かないまま。

HTML + CSS + JavaScript — **図7：**HTML（骨）＋ CSS（服）＋ JavaScript（動き）

骨（HTML）に服（CSS）を着せたら、最後は 動き（JavaScript）。3つセットで、いま見ているWebサイトが成り立っています。

HTML ＝骨 … 構造をつくる
CSS ＝服 … 見た目をつくる
JavaScript ＝動き … 振る舞いをつくる

JavaScript の話は別の記事で詳しく触れます。

まとめ

ふんわり理解チェック

CSS＝Webページの「見た目」を整える書き方
HTMLのタグに「こう見せて」とルールを書く（セレクタ + プロパティ + 値）
セレクタ（タグ名 / .クラス / #ID）でどこに適用するかを指定する
HTML（骨）＋CSS（服）＋JavaScript（動き）で1つのサイトになる

次は、服を着たページに「動き」や「反応」を吹き込む役割—— JavaScript の話。Webページが「反応する」しくみに迫ります。

CSS ってなに？