CSSとは｜HTMLとの違い・書き方・効かない原因を実例で解説

ブラウザは、HTML（中身と構造）と CSS（見た目）を組み合わせて画面を描きます。動きを足すのが JavaScript です。

flowchart TD
    H[HTML<br>中身と構造] --> B[ブラウザ<br>組み合わせる]
    C[CSS<br>見た目] --> B
    J[JavaScript<br>動き] --> B
    B --> S[画面に表示]

急いでいる人向けに、よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04 上の Chromium 141.0.7390.37（Python の Playwright から操作）で、同じ HTML に CSS を1つずつ足して表示し、getComputedStyle（ブラウザが最終的に使った値を返す JavaScript の関数）と要素の位置・大きさを測りました。CSS ファイルは Python 3.11.15 の http.server で配り、404 と Content-Type が text/plain の場合も確かめました。仕様の説明は MDN Web Docs（日本語版）と W3C の CSS Snapshot 2026、DevTools の説明は Chrome for Developers で確かめました（確認日 2026年10月23日）。

CSSとは（意味・読み方・できること）

この節では、CSS という言葉の意味と、CSS で何ができるのかが分かります。

CSS（シーエスエス）は Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、Web ページの見た目を指定するための言語です。 MDN Web Docs は、CSS を Web ページの見た目を制御するスタイル言語と説明しています。「スタイルシート」は見た目の指定書、「カスケーディング」は、いくつもの指定が重なったときに、決まった順番で上から流れ落ちるように1つに決まる仕組みを指します（後の節で実物を見ます）。

CSS のファイルは拡張子 .css のテキストファイルで、サーバーからは text/css という種類（MIME タイプ）で送られます。メモ帳や VS Code などのテキストエディタで作れます。

CSS を書かなくても、ページには最低限の見た目が付いています。 ブラウザが自分の既定の CSS を持っているからです。何も CSS を書かないページを Chromium で開いて測ると、次の値でした。

「見出しが大きい」「リンクが青くて下線がある」のは HTML の働きではなく、ブラウザの既定の CSS です。自分で CSS を書くと、この既定の見た目を上書きできます。

HTMLとCSSの違い（役割分担）

この節では、HTML と CSS がそれぞれ何を受け持つのかと、分けて書く理由が分かります。

HTML は「これは見出し」「これは段落」という中身と構造を、CSS は「見出しは紺色で 24px」という見た目を書きます。 家にたとえると、HTML は柱や部屋の間取り、CSS は壁紙や家具の配置です。間取りを変えずに壁紙だけを張り替えられるように、HTML を変えずに CSS だけで見た目を変えられます。

見た目を CSS に分けておくと、直す場所が1か所になります。 たとえば 50 ページあるサイトで見出しの色を変えるとき、各ページの HTML に色を書いていれば 50 か所を直しますが、共通の CSS ファイルに書いていれば1行を直すだけです。

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

この節では、CSS の1つのルールがどんな部品でできているのかが分かります。

CSS は「どの要素に（セレクタ）」「何を（プロパティ）」「どうする（値）」の3つで書きます。 波かっこ { } の中に「プロパティ: 値;」を並べます。

h1 {
  color: navy;      /* 文字の色を紺色に */
  font-size: 24px;  /* 文字の大きさを24pxに */
}

書くときの決まりは次のとおりです。

• プロパティと値の間は半角の :（コロン）、宣言の終わりは半角の ;（セミコロン）。
• コメントは /* */ だけ。// は CSS のコメントではありません（後の節で、// を書いたルールが丸ごと消える実物を見ます）。
• 改行や半角スペースの数は自由です。全角のスペースや全角の記号は使えません。
• 大きさには単位が要ります（24px）。0 だけは単位なしで書けます。

よく使うセレクタ

セレクタは「どの要素に当てるか」の選び方です。HTML の class 属性・id 属性と組み合わせて使います。

実際の Web 制作では、クラスセレクタを中心に使うのが一般的です。 同じ class を何か所にも付けられ、ID より上書きしやすいためです（理由は「カスケードと詳細度」の節で実物を見ます）。セレクタの全種類と :has()・ネストの書き方は、関連記事「CSSセレクタ一覧｜:has()・ネスト対応の早見表と詳細度」で扱っています。

色と大きさの書き方（単位）

ブラウザは、書いた色を rgb の形に直して使います。navy は rgb(0, 0, 128)、#555 は rgb(85, 85, 85) として返ってきました。em は文字の大きさによって長さが変わります。h1 の上の余白は既定で 0.67em なので、文字が 32px のときは 21.44px、24px に変えると 16.08px になりました。

CSSを書く場所3つ（style属性・styleタグ・外部ファイル）

この節では、CSS を HTML のどこに書けるのかと、それぞれをいつ使うのかが比較表で分かります。

CSS を書く場所は、要素の style 属性、HTML の head にある style タグ、外部の .css ファイルの3つです。 サイトを作るときは、外部ファイルが基本です。

<!-- 1. style属性（インライン）：その要素だけに効く -->
<p style="color: orange;">この段落だけオレンジ</p>

<!-- 2. styleタグ：このページだけに効く。head の中に書く -->
<style>
  p { color: green; }
</style>

<!-- 3. 外部ファイル：同じファイルを読み込んだ全ページに効く。head の中に書く -->
<link rel="stylesheet" href="css/style.css">

同じ段落の色を、外部ファイル（p { color: red; font-size: 20px; }）と style タグ（p { color: green; }）と style 属性（color: orange）で同時に指定し、どれが勝つかを測りました。

外部ファイルと style タグは、どちらが強いということはなく、後に書いた方が勝ちました。 style 属性は、読み込む順番に関係なく勝ちました。ぶつからない指定（font-size: 20px）は、場所に関係なくすべて効いています。複数の指定が重なって1つに決まるのが「カスケード」です。

よく使うCSSプロパティ早見表

この節では、はじめに覚えると多くの見た目を作れるプロパティが一覧で分かります。

プロパティの数はとても多く、Chromium 141 で body 要素の getComputedStyle が返したプロパティは 406 個ありました。全部を覚えなくても、上の表の18個で、文字・余白・枠・並べ方の基本がそろいます。

CSSを1つずつ足して表示を確かめる（Chromiumでの実物）

この節では、同じ HTML に CSS を8段階で足していき、見た目の数値がどう変わるかを実物で確かめられます。

使った HTML は次のとおりです。CSS を書かない状態から始め、head の style タグにルールを1つずつ足しました。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSSの練習</title>
<style>
  /* ここに1つずつ足していく */
</style>
</head>
<body>
<h1>今日のおすすめ</h1>
<p id="intro" class="lead">CSSで見た目を変えます。</p>
<ul class="cards">
  <li class="card">HTML</li>
  <li class="card">CSS</li>
  <li class="card">JavaScript</li>
</ul>
<a href="#">もっと見る</a>
</body>
</html>

8段階で足した CSS の全体です。

/* 1 */ h1 { color: navy; font-size: 24px; }
/* 2 */ .lead { color: #555; line-height: 1.8; }
/* 3 */ .card { width: 200px; padding: 16px; border: 2px solid #ccc; margin: 8px 0; }
/* 4 */ .card { box-sizing: border-box; }
/* 5 */ .cards { display: flex; gap: 12px; list-style: none; padding: 0; }
/* 6 */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); } .card { width: auto; }
/* 7 */ @media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

ブラウザの画面の幅を 800px にして、段階ごとに getComputedStyle と getBoundingClientRect（要素の位置と大きさを返す関数）で測った値です。段階 7 だけは、幅 390px（スマホの幅）でも測りました。

段階ごとの測定値（抜粋）です。rect は「左端の x・上端の y・幅・高さ」（px）です。

== 0 CSSなし @800
   h1 {"color": "rgb(0, 0, 0)", "font-size": "32px", "font-weight": "700", "margin-top": "21.44px", "rect": [8, 21, 784, 44]}
   ul {"display": "block", "padding-left": "40px", "list-style-type": "disc", "grid-template-columns": "none"}
   li:nth-child(1) {"width": "744px", "rect": [48, 124, 744, 18]}
   a {"color": "rgb(0, 0, 238)", "text-decoration-line": "underline", "display": "inline", "width": "auto"}
== 1 h1に色と大きさ @800
   h1 {"color": "rgb(0, 0, 128)", "font-size": "24px", "font-weight": "700", "margin-top": "16.08px", "rect": [8, 16, 784, 32]}
== 3 カードに幅・余白・枠 @800
   li:nth-child(1) {"width": "200px", "rect": [48, 109, 236, 54]}
   li:nth-child(2) {"rect": [48, 171, 236, 54]}
== 4 box-sizing @800
   li:nth-child(1) {"width": "200px", "rect": [48, 109, 200, 54]}
== 5 flexで横並び @800
   ul {"display": "flex", "padding-left": "0px", "list-style-type": "none", "grid-template-columns": "none"}
   li:nth-child(1) {"width": "200px", "rect": [8, 117, 200, 54]}
   li:nth-child(2) {"rect": [220, 117, 200, 54]}
   li:nth-child(3) {"rect": [432, 117, 200, 54]}
== 6 gridで3等分 @800
   ul {"display": "grid", "padding-left": "0px", "list-style-type": "none", "grid-template-columns": "253.328px 253.328px 253.328px"}
== 7 スマホは1列 @390
   ul {"display": "grid", "padding-left": "0px", "list-style-type": "none", "grid-template-columns": "374px"}
   li:nth-child(1) {"width": "374px", "rect": [8, 117, 374, 54]}
   li:nth-child(2) {"rect": [8, 199, 374, 54]}
   li:nth-child(3) {"rect": [8, 281, 374, 54]}

段階 3 で、上下に並んだカードの間は 8px でした（1枚目の下端 163、2枚目の上端 171）。 それぞれに上下 8px の margin を付けたので 16px になりそうですが、上下に隣り合うブロックの margin は大きい方の1つにまとまります（マージンの相殺）。段階 5 で flex にすると、margin のまとまりは起きず、並べ方は gap で決まりました。

ブラウザの画面で同じことを確かめるときは、開発者ツール（DevTools）を使います。 Chrome では、要素を右クリックして「検証（Inspect）」を選ぶと、Styles タブに当たっているルールが上書きされたものも含めて並び、Computed タブには実際に使われている値だけが出ます。使い方は、関連記事「Chrome DevToolsの使い方｜デバッグ手順と便利機能一覧」で扱っています。

カスケードと詳細度（どのCSSが勝つか）

この節では、同じ要素に複数の指定がぶつかったとき、どれが使われるのかを実物で確かめられます。

同じ要素の同じプロパティに複数のルールが当たったとき、ブラウザは決まった順番で1つを選びます。 これが CSS の名前にある「カスケード」です。MDN の説明では、要素に当たるルールを集めたあと、オリジン（誰が書いたか）と重要度（!important）、詳細度、スコープの近さ、出現順の順に比べます。自分で書く CSS では、次の順に考えると判断できます。

flowchart TD
    A[同じプロパティに<br>複数の指定] --> B{片方だけ<br>!important}
    B -->|はい| W1[!important<br>が勝つ]
    B -->|いいえ| C{style属性}
    C -->|はい| W2[style属性<br>が勝つ]
    C -->|いいえ| D{詳細度に差}
    D -->|はい| W3[高い方<br>が勝つ]
    D -->|いいえ| W4[後に書いた<br>方が勝つ]

詳細度は、セレクタの強さを「ID の数－クラスの数－要素の数」の3つの数で表したものです。 MDN では ID－CLASS－TYPE の3列と説明されています。左の数が大きい方が強く、左が同じなら次の列で比べます。

同じ段落（<p id="intro" class="lead">）に、ぶつかるルールを書いて色を測りました。

== cascade 型<class | p { color: red; } .lead { color: green; } => rgb(0, 128, 0)
== cascade class<id（順序逆でも） | #intro { color: blue; } .lead { color: green; } p { color: red; } => rgb(0, 0, 255)
== cascade 同じ詳細度は後勝ち | .lead { color: green; } .lead { color: purple; } => rgb(128, 0, 128)
== cascade p.lead > .lead | p.lead { color: teal; } .lead { color: green; } => rgb(0, 128, 128)
== cascade style属性 vs id => rgb(255, 165, 0)
== cascade !important | p { color: red !important; } #intro { color: blue; } => rgb(255, 0, 0)
== cascade !important vs style属性 => rgb(255, 0, 0)

!important は、詳細度を無視して勝たせる強い指定です。 MDN は、詳細度を上書きするために !important を使うのは避けるべき習慣としています。!important を一度使うと、それをさらに上書きするために !important が増えていくためです。上書きしたいときは、まずセレクタの詳細度を上げるか、後に書く方法を考えます。詳細度の計算と !important が効かないときの直し方は、関連記事「CSS優先順位と詳細度の早見表｜!importantが効かない原因と直し方」で扱っています。

継承（親の指定が子に伝わる）

color や font-family のように、親の要素に書いた値が子の要素に伝わるプロパティがあります。これを継承と呼びます。 body に色・書体・枠線を書いて、中の段落を測りました。

== 継承
   p {"color": "rgb(51, 51, 51)", "border-top-width": "0px", "border-top-style": "none", "font-family": "sans-serif"}

文字の色と書体は段落に伝わり、枠線は伝わりませんでした。文字に関わるプロパティ（color・font-size・font-family・line-height など）は継承され、箱に関わるプロパティ（border・margin・padding・width など）は継承されないものが多い、と覚えておくと、body に書いた指定がどこまで効くかを予想できます。

ボックスモデル（余白・枠・幅の関係）

この節では、CSS で幅や余白を指定したとき、要素の大きさがどう決まるのかが分かります。

CSS では、すべての要素を四角い箱として扱います。 箱は内側から、中身（content）・内側の余白（padding）・枠線（border）・外側の余白（margin）の4層でできています。

flowchart TD
    subgraph M[margin 外側の余白 ほかの要素との間]
        subgraph B[border 枠線]
            subgraph P[padding 内側の余白]
                C[content 中身<br>width と height はここ]
            end
        end
    end

標準では、width は中身の幅だけを指し、padding と border はその外側に足されます。 先ほどの段階 3 では、width: 200px・padding: 16px・border: 2px で、見た目の幅は 236px になりました。box-sizing: border-box を付けると、width が枠線までを含む幅になり、段階 4 のとおり 200px に収まります。MDN のボックスモデルの解説でも、border-box をすべての要素に当てる書き方が紹介されています。

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

箱の振る舞いは display の値で変わります。 段落や見出しは display: block（横幅いっぱいに広がり、前後で改行される）、リンクや span は display: inline（文字の流れの中に入る）です。リンク（a 要素）に width: 300px・height: 50px を書いて測ると、次のようになりました。

== inline width ['inline', '300px', 49, 17]
== inline-block width ['inline-block', '300px', 300, 50]

inline のままでは、指定は受け付けられても、実際の箱は文字の大きさの 49×17px のままでした。display: inline-block にすると 300×50px になりました。ボタンのようにリンクに大きさを付けたいときは、inline-block や block に変えます。margin と padding の使い分けとマージンの相殺は、関連記事「CSS marginとpaddingの違い｜相殺と効かない原因一覧」で扱っています。

レイアウトの入口（FlexboxとGrid）

この節では、要素を横に並べる2つの方法と、どちらを使うかの目安が分かります。

要素を並べるには、親の要素に display: flex か display: grid を書きます。 子の要素に書くのではなく、並べたい要素を囲む親に書くのがポイントです。

/* Flexbox：横一列に並べ、上下の中央をそろえる */
.menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Grid：同じ幅の3列に並べる */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

1fr は「残りの幅を等分した1つ分」という Grid の単位です。段階 6 では、本文の幅 784px から間隔 12px×2 を引いた 760px を3つに分け、1列 253.328px になりました。同じ部品を Flexbox と Grid の両方で作った比較は、関連記事「FlexboxとGridの使い分け｜同じUIを両方で作り3つの画面幅で実測比較」で扱っています。

レスポンシブ（スマホとパソコンで見た目を変える）

この節では、画面の幅に合わせて CSS を切り替える書き方と、そのための前提が分かります。

@media (max-width: 600px) { ... } のように書くと、画面の幅が 600px 以下のときだけ中の CSS が効きます。 これをメディアクエリと呼び、1つの HTML でパソコンにもスマホにも合わせる作り方をレスポンシブデザインと呼びます。

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }  /* 600px以下は1列 */
}

段階 7 の実物では、幅 800px のときは 253.328px 253.328px 253.328px の3列、幅 390px のときは 374px の1列になり、カードの y 座標が 117・199・281 と縦に並びました。

スマホでメディアクエリを効かせるには、HTML の head に viewport の meta タグを書きます。 MDN の説明では、この指定が無いと、モバイルのブラウザはたとえば 980px の仮想の幅でページを描いてから縮小することがあります。width=device-width は、端末の画面の幅でレイアウトさせる指定です。

<meta name="viewport" content="width=device-width, initial-scale=1">

スマホから先に CSS を書く「モバイルファースト」の考え方と、ブレークポイント（切り替える幅）の決め方は、関連記事「メディアクエリ ブレークポイント｜2026年版の推奨値と書き方テンプレート」で扱っています。

CSSが効かない原因と直し方

この節では、「CSS を書いたのに見た目が変わらない」ときの原因を、実際に起こした結果つきで確かめられます。

ブラウザは、読めない宣言やルールを黙って捨てます。 エラーの画面は出ないので、書いたつもりの指定が捨てられていることに気づきにくくなります。わざと間違えた CSS を読み込ませ、ブラウザがどう読んだか（document.styleSheets の cssText）と段落の色を測りました。

== bad プロパティ名の打ち間違い | 'p { colr: red; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": ["p { }"]}
== bad 全角のコロン | 'p { color：red; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": ["p { }"]}
== bad 全角スペース | 'p {\u3000color: red; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": ["p { }"]}
== bad セミコロン忘れ | 'p { color: red font-size: 30px; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": ["p { }"]}
== bad 単位忘れ | 'p { font-size: 30; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": ["p { }"]}
== bad // コメント | '// 見出しの色\np { color: red; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": []}
== bad class名の大文字小文字 | '.Lead { color: red; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": [".Lead { color: red; }"]}
== bad class名に.を付けない | 'lead { color: red; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 0)", "rules": ["lead { color: red; }"]}
== bad }の閉じ忘れ | 'h1 { color: navy;\np { color: red; }' => {"color": "rgb(0, 0, 0)", "fs": "16px", "h1": "rgb(0, 0, 128)", "rules": ["h1 {\n  color: navy;\n  & p { color: red; }\n}"]}

fs は段落の文字の大きさ、h1 は見出しの色です。p { } は「ルールは残ったが、中の宣言が全部捨てられた」、[] は「ルールが丸ごと捨てられた」ことを表します。最後の例では、閉じかっこを忘れた後ろの p { ... } が h1 の中のネスト（入れ子）のルール & p として読まれ、「h1 の中にある p」にしか当たらなくなりました。

CSS ファイルの場所を間違えたときは、開発者ツールの Console に次のエラーが出ました。

Failed to load resource: the server responded with a status of 404 (File not found)

href="css/style.css" は「HTML ファイルと同じ場所にある css フォルダの中の style.css」という意味です。HTML と CSS が同じフォルダにあるなら href="style.css" と書きます。

どの原因かを見分けるには、開発者ツールで要素を選び、Styles タブで自分のルールが表示されているかを見ます。 ルールが一覧に無ければセレクタかファイルの読み込み、ルールはあるが上書きされていれば詳細度や順番、警告が出ていればプロパティ名や値の書き方が原因です。CSS の書き方として正しいかは、Console で CSS.supports() を使っても確かめられます。

== supports [True, True, False, False, True]

上から CSS.supports('display','grid')・('color','red')・('colr','red')・('font-size','30')・('selector(:has(a))') の結果です。打ち間違いと単位忘れは false（使えない）でした。

修正したのに見た目が変わらないときは、ブラウザが前の CSS ファイルを覚えている（キャッシュ）こともあります。再読み込みのほか、style.css?v=2 のようにファイル名の後ろを変えると、新しいファイルとして読み込まれます。

CSS3とは（CSSの版の考え方）

この節では、よく聞く「CSS3」という言葉が何を指すのかと、いまの CSS の版の考え方が分かります。

いまの CSS には、「CSS3」「CSS4」のような1つの版はありません。 W3C（Web の仕様を決める団体）の CSS Snapshot 2026（2026年6月22日発行）は、CSS には従来の意味での版（version）ではなくレベル（level）があり、CSS Level 3 からは、セレクタ・色・Flexbox・Grid などの機能ごとの「モジュール」が別々にレベルを上げていくと説明しています。同じ文書には「CSS Level 4 は存在しない」とも書かれています。

実際に使えるかどうかは、仕様の版ではなく、ブラウザが対応しているかで決まります。 MDN の各プロパティのページの下にある「ブラウザーの互換性」の表で、Chrome・Edge・Firefox・Safari の対応を確かめられます。

CSSを学ぶ順番

この節では、はじめての人が CSS を身につける順番と、それぞれで読む記事が分かります。

• 1見た目は CSS、中身は HTML に分けて書く見出しを大きくしたいだけで h1 を使わない。意味に合うタグを選び、大きさは CSS で決める
• 2CSS は外部ファイルにまとめるstyle 属性に書くと、あとで上書きしにくく、同じ指定が散らばる
• 3セレクタはクラス中心にするID や長いセレクタは詳細度が高く、後から上書きしにくい
• 4!important は最後の手段にする使うと、さらに上書きするための !important が増えていく
• 5効かないときは DevTools で確かめるルールが一覧にあるか、上書きされていないか、警告が出ていないかを見る

よくある質問

Q. CSSとは簡単に言うと何ですか？ A. Web ページの色・文字の大きさ・余白・配置などの見た目を指定する言語です。HTML が「これは見出し」と中身を決め、CSS が「見出しは紺色の 24px」と見た目を決めます。

Q. CSS の読み方と正式名称は？ A. 読み方は「シーエスエス」で、正式名称は Cascading Style Sheets（カスケーディング・スタイル・シート）です。ファイルの拡張子は .css です。

Q. HTML と CSS の違いは？ A. HTML はページの中身と構造（見出し・段落・リンク）を、CSS は見た目を書きます。CSS を差し替えるだけで、同じ HTML を別のデザインで表示できます。

Q. CSS はプログラミング言語ですか？ A. 一般にはスタイルシート言語と呼ばれ、JavaScript のように処理の手順を書く言語とは性格が違います。「どの要素をどう見せるか」という指定を並べて書きます。

Q. CSS はどこに書けばよいですか？ A. style 属性・style タグ・外部の .css ファイルの3つに書けます。Web サイトでは、外部ファイルを <link rel="stylesheet" href="..."> で読み込む方法が基本です。この記事の実物では、外部ファイルと style タグは後に書いた方が勝ち、style 属性は順番に関係なく勝ちました。

Q. CSS の優先順位はどう決まりますか？ A. 自分で書く CSS では、!important、style 属性、詳細度（ID－クラス－要素の数）、後に書いた方、の順に比べて決まります。「カスケードと詳細度」の節に、7通りの組み合わせを測った結果があります。

Q. CSS が効かないのはなぜですか？ A. 多い原因は、プロパティ名の打ち間違い、全角の記号やスペース、セミコロン忘れ、class 名の違い、詳細度で負けている、CSS ファイルのパスの間違いです。ブラウザは読めない宣言を黙って捨てるので、開発者ツールの Styles タブで確かめます。

Q. CSS3 とは何ですか？CSS4 はありますか？ A. CSS3 は、CSS 2.1 の後に機能ごとのモジュールに分かれた CSS の総称です。W3C の CSS Snapshot 2026 には「CSS Level 4 は存在しない」と書かれていて、各モジュールが別々にレベルを上げています。

Q. CSS だけで Web サイトは作れますか？ A. CSS は HTML に見た目を付ける言語なので、CSS だけではページになりません。HTML と組み合わせて使い、動きや処理が必要なら JavaScript を足します。

Q. CSS の勉強はどの順番で進めればよいですか？ A. HTML の基本のタグ、CSS の書き方と文字・色、ボックスモデル、カスケードと詳細度、Flexbox と Grid、レスポンシブ、の順が一般的です。この記事の「CSSを学ぶ順番」の節にまとめています。

Q. Sass や Tailwind CSS と CSS の関係は？ A. どちらも最終的にブラウザが読む CSS を作るための道具です。Sass は変数や入れ子を使って書き、CSS に変換します。Tailwind CSS は、用意されたクラス名を HTML に並べて見た目を付けます。どちらも土台は CSS の知識です。

まとめ

• CSS（Cascading Style Sheets）は、Web ページの見た目を指定する言語。HTML が中身と構造、CSS が見た目、JavaScript が動きを受け持つ。
• 書き方は セレクタ { プロパティ: 値; }。書く場所は style 属性・style タグ・外部ファイルの3つで、サイトでは外部ファイルが基本。
• CSS が無くてもブラウザの既定の CSS がある（h1 は 32px、リンクは rgb(0, 0, 238) の下線つき）。
• ぶつかったときは、!important、style 属性、詳細度、後に書いた方の順に比べる。外部ファイルと style タグは後に書いた方が勝った。
• 標準の width は中身だけの幅。padding と border が足されて 200px が 236px になり、box-sizing: border-box で 200px に収まった。
• 並べるのは親に display: flex か grid。メディアクエリで、幅 390px のときだけ1列に切り替わった。
• 効かないときは、打ち間違い・全角・セミコロン・単位・// コメント・閉じかっこ・class 名・詳細度・パス・MIME タイプを疑い、DevTools で確かめる。

参考・出典

確認日はいずれも 2026年10月23日です。

• MDN Web Docs「CSS とは何か」：https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
• MDN Web Docs「CSS: カスケーディングスタイルシート」：https://developer.mozilla.org/ja/docs/Web/CSS
• MDN Web Docs「カスケード入門」：https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Cascade/Introduction
• MDN Web Docs「詳細度」：https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Cascade/Specificity
• MDN Web Docs「ボックスモデル」：https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Box_model
• MDN Web Docs「viewport meta タグ」：https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/meta/name/viewport
• MDN Web Docs「よくある MIME タイプ」：https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/MIME_types/Common_types
• W3C「CSS Snapshot 2026」：https://www.w3.org/TR/css/
• Chrome for Developers「CSS features reference」：https://developer.chrome.com/docs/devtools/css/reference

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。