【CSS】そもそもCSSとは？仕組みを図解で解説

2026年7月25日

どうも、くじらいどです。

HTMLとセットでよく聞く「CSS」。名前は知ってるけど、結局これが何をしてるのかよくわからない、という人はけっこう多いと思います。

自分も最初、HTMLとCSSの区別が全然ついていませんでした。「どっちもコードやろ」くらいの雑な認識だったんですよね。

でも役割を分けて考えると、そんなに難しい話ではないと思います。この記事では、CSSがそもそも何なのか、どういう仕組みで見た目を変えているのかを、実際に動く例を見ながら整理していきます。

くじらいど

AIにコードを書いてもらう時代でも、「これがCSSで、こういう役割」がわかっていないと直したい所を直せないんですよね。ここだけ押さえておくとかなりラクになります。

結論：CSSは「見た目を決める言語」

先に結論を書いておきます。HTMLがページの中身、CSSがその見た目を担当しています。

家にたとえると、こういう分担だと思ってもらうとわかりやすいと思います。

	担当していること	家でいうと
HTML	文章・見出し・画像など「中身」の配置	柱・壁・間取り（骨組み）
CSS	色・大きさ・余白・並べ方など「見た目」	壁紙・家具・照明（内装）

骨組み（HTML）だけでも家としては成り立ちますが、内装（CSS）がないと殺風景ですよね。逆に内装だけあっても、骨組みがなければ飾る場所がありません。CSSはHTMLとセットで初めて意味を持つ、という関係だと思ってもらえればいいと思います。

▼ 同じ中身（HTML）に、CSSで見た目の指示を足すと、このサイトの見た目になります

① HTML＝中身だけ
（素っ気ない見た目）

＋

        文字色：#262626;

        余白：広めに;

        ボタン：黒い角丸;

② CSS＝見た目の指示

＝

社会不適合者 – 人生を描く

くわしく見る

③ ブラウザでの表示
（このサイトの見た目）

CSSがあると何が変わるのか（図解）

言葉だけだとピンと来ないと思うので、同じHTMLに「CSSなし」「CSSあり」で見た目がどう変わるかを、実際に並べてみます。

▼ CSSなし（HTMLだけ）

くじらいど

社会不適合者 – 人生を描く

くわしく見る

文字が上から順に並んでいるだけの、素っ気ない見た目です。ブラウザが最初から持っている最低限のスタイルだけが効いている状態ですね。

▼ CSSあり（同じ中身に見た目を足したもの）

社会不適合者 – 人生を描く

くわしく見る

中身の文章（HTML）はどちらもまったく同じです。変えたのは見た目だけで、余白を足して、名前の下に手描きふうの線を引いて、リンクを黒いボタンにしています。ちなみにこれ、実際のこのサイト（くじらいど）と同じ配色（黒 #262626 と生成り色 #fdfdfd）に寄せてみました。同じ中身でも、CSSしだいでこのブログの雰囲気になる、というわけですね。

CSSの書き方の基本（セレクタ・プロパティ・値）

CSSは「どこを・何を・どうする」の3つをセットで書きます。実際のコードはこんな形です。

h1 {
  color: #1176d4;
  font-size: 24px;
}

この短いコードの中に、CSSの部品が全部入っています。色分けして分解してみます。

h1 {

  color : #1176d4 ;

  font-size : 24px ;

}

部品	意味	この例では
セレクタ	どこに効かせるか	`h1`（大見出し）
プロパティ	何を変えるか	`color`（色）／`font-size`（文字サイズ）
値	どう変えるか	`#1176d4`（青）／`24px`

日本語にすると「大見出し（h1）の、文字の色を、青にする」と言っているだけなんですよね。「リビングの、壁を、青にする」と言うのと同じ感覚だと思います。

Point

プロパティと値の間は「:（コロン）」で区切り、1行の最後は「;（セミコロン）」で締めます。この ; の付け忘れで効かなくなることが地味に多いので、最初のうちは気にしておくといいと思います。

HTMLにCSSを効かせる3つの方法

書いたCSSは、HTMLと結びつけて初めて効きます。つなぎ方は主に3つあります。

方法	書く場所	向いている場面
外部ファイル	`style.css` という別ファイルに書く	基本これ。複数ページで使い回せる
<style>タグ	HTMLの`<head>`の中にまとめて書く	そのページだけの調整
インライン	タグの中に`style="..."`で直接書く	1か所だけピンポイントで直したいとき

▼ 「どこにCSSを書くか」を図にするとこうです

① 外部ファイル（おすすめ）

📄 style.css

      h1 { color: #1176d4; }

② <style>タグ

📄 index.html の <head>

      <style> h1{…} </style>

③ インライン

📄 タグに直接

      <h1 style="…">

実務では、CSSだけを別ファイル（外部ファイル）にまとめておく方法が基本になります。中身（HTML）と見た目（CSS）を分けておくと、あとで直すときにお互いを壊しにくいからですね。この「役割を分ける」のがCSSという仕組みの一番のねらいだと思います。

そもそもHTMLのタグ自体があやしい、という場合は、先にHTMLタグの基本を見てもらうと、この記事の内容もつながりやすいと思います。

最初につまずきやすい2つのポイント

仕組みがわかってくると、次にだいたいこの2つで引っかかります。自分もここでしばらく「なんで効かへんの…」と悩みました。

① 長さの単位（px / rem / % など）

さっき 24px と書きましたが、CSSには px 以外にも rem や % や vw といった単位があります。これは「何を基準にした長さか」が違うだけなんですが、使い分けを知らないとスマホで文字が大きすぎたり小さすぎたりします。くわしくはpx / % / rem / em / vw の違いにまとめています。

② どのスタイルが優先されるか（詳細度）

同じ場所に別々のCSSが当たると、「どっちが勝つか」というルールで見た目が決まります。これを詳細度（しょうさいど）と呼びます。「CSSを書いたのに効かない」の原因はだいたいこれで、別のスタイルに負けているだけ、というパターンが多いです。くわしくはCSSが効かないときの原因（詳細度）で図解しています。