この記事の要点

CSS の基本構文: セレクタ { property: value; }。複数プロパティは ; 区切り コメントは /* ... */（// は CSS では無効、Sass/Less 専用） @ルール: @media / @keyframes / @import / @font-face / @supports CSS Variables (Custom Properties): --brand: #f00; → color: var(--brand); 計算関数: calc() / min() / max() / clamp() でレスポンシブ実装 Specificity（詳細度）と Cascade（カスケード）でどのルールが勝つか決定

CSS の基本構文

CSS は「どの要素に」「何を」「どう設定するか」を 1 セットの「ルール」として書いていきます。

/* 基本形: セレクタ { プロパティ: 値; } */
h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1em;
}

/* 複数セレクタは , でまとめる */
h1, h2, h3 {
    font-family: "Noto Sans JP", sans-serif;
}

/* コメントは /* */ のみ。// は不可 */
/* これはコメント */
// これはエラーになる（CSS では無効）

セレクタの種類

セレクタ	例	意味
要素	p	全 p 要素
クラス	.btn	class="btn" の要素
ID	#header	id="header" の要素
属性	[type="email"]	type 属性が email
子孫	nav a	nav の中の a
子	nav > a	nav の直接の子 a
隣接	h1 + p	h1 の直後の p
擬似クラス	a:hover / li:nth-child(2n)	状態 / 位置
擬似要素	p::before / ::first-letter	生成内容 / 部分
:is() / :where()	:is(h1, h2, h3)	グループ化（モダン CSS）

主な @ ルール

/* @media: メディアクエリ（レスポンシブ） */
@media (max-width: 768px) {
    .container { padding: 1rem; }
}
@media (prefers-color-scheme: dark) {
    body { background: #111; color: #eee; }
}

/* @keyframes: アニメーション定義 */
@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.fade { animation: fadeIn 0.5s ease; }

/* @import: 外部 CSS 読み込み（HTML link の方が推奨） */
@import url("reset.css");

/* @font-face: Web フォント */
@font-face {
    font-family: "MyFont";
    src: url("/fonts/myfont.woff2") format("woff2");
    font-display: swap;
}

/* @supports: 機能クエリ（フィーチャー検出） */
@supports (display: grid) {
    .layout { display: grid; }
}

CSS Variables（カスタムプロパティ）

CSS 自体に変数機能が標準搭載されています。プリプロセッサ不要で動的に値を切り替えられます。

:root {
    --brand: #ff5722;
    --brand-dark: #c41c00;
    --space: 1rem;
    --radius: 8px;
}

.btn {
    background: var(--brand);
    border-radius: var(--radius);
    padding: var(--space);
}

.btn:hover {
    background: var(--brand-dark);
}

/* JS から動的に変更可能 */
/* document.documentElement.style.setProperty('--brand', '#0080ff'); */

/* デフォルト値（フォールバック） */
.card {
    color: var(--text, #333);  /* --text 未定義なら #333 */
}

計算関数 calc() / min() / max() / clamp()

/* calc(): 単位混合の四則演算 */
.sidebar {
    width: calc(100% - 240px);
    height: calc(100vh - 60px);
}

/* min() / max(): 候補のうち小さい/大きい方 */
.container {
    width: min(1200px, 100% - 2rem);
    /* PC では 1200px、モバイルでは 100% - 2rem */
}

/* clamp(): 下限 ～ 推奨 ～ 上限 */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    /* 最小 1.5rem、画面幅の 4%、最大 3rem */
}

Specificity（詳細度）と Cascade

同じプロパティに複数のルールが当たったとき、どれが勝つかは「詳細度」で決まります。

カテゴリ	例	重み (a, b, c, d)
インラインスタイル	style="..."	1, 0, 0, 0
ID	#header	0, 1, 0, 0
クラス / 属性 / 擬似クラス	.btn / [type] / :hover	0, 0, 1, 0
要素 / 擬似要素	p / ::before	0, 0, 0, 1
!important	強制最優先	全部上書き（最終手段）

/* 詳細度 0, 0, 1, 0 */
.btn { color: blue; }

/* 詳細度 0, 1, 0, 0 → こちらが勝つ */
#submit-btn { color: red; }

/* 同じ詳細度なら後勝ち */
.btn { color: blue; }
.btn { color: green; }  /* ← こちらが勝つ */

/* !important は最終手段（保守性が壊れる） */
.btn { color: orange !important; }

Inheritance（継承）

color / font-family / line-height 等は子孫に継承されます。background / border / padding 等は継承されません。

body {
    color: #333;            /* 継承 → 全テキスト */
    font-family: sans-serif; /* 継承 */
    background: #fff;        /* 継承しない */
}

/* 明示的に継承 / 初期化 */
.reset {
    color: inherit;     /* 親から継承 */
    color: initial;     /* ブラウザ既定値 */
    color: unset;       /* 継承プロパティなら inherit、それ以外 initial */
    color: revert;      /* ユーザエージェント既定値 */
}

Vendor Prefix（現代では不要）

かつては -webkit- / -moz- / -ms- / -o- が必要でしたが、2026 年現在ほぼ不要です。主要ブラウザは標準プロパティをそのまま解釈します。

/* ❌ 古い書き方 */
.box {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

/* ✅ 現代 */
.box {
    border-radius: 8px;
}

/* 例外的に残るもの */
.scroll {
    -webkit-overflow-scrolling: touch;  /* iOS Safari 慣性スクロール */
}
input::-webkit-outer-spin-button {
    -webkit-appearance: none;            /* iOS の数字入力スピンボタン */
}

プリプロセッサ（Sass / Less / PostCSS）

CSS を効率的に書くためのツール。Sass が最もメジャー、最近は PostCSS + 各種プラグインで標準 CSS を強化する流れ。

/* Sass (.scss): 入れ子 + 変数 + ミックスイン */
$brand: #ff5722;

.card {
    background: $brand;
    padding: 1rem;

    &__title {       /* .card__title */
        font-size: 1.5rem;
    }
    &:hover {        /* .card:hover */
        opacity: 0.8;
    }
}

@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn {
    @include flex-center;
}

FAQ

Q: // でコメント書けない
A: 標準 CSS は /* */ のみ。// は Sass/Less 限定です。

Q: CSS Variables と Sass 変数の違いは？
A: CSS Variables はブラウザで動的に変更可能。Sass 変数はビルド時に展開されるため、ビルド後は固定値です。

Q: !important はいつ使う？
A: 原則使わない。サードパーティ CSS の上書き等の最終手段のみ。多用すると上書きの上書きが必要になり保守不能に。