この記事の要点

CSS の基本: セレクタ { プロパティ: 値; } ショートハンド: margin: 10px 5px; など。1〜4 値で上右下左を一括指定 カスケードと詳細度 (Specificity): id > class > 要素。!important は最終手段 ユニット: px 絶対、em/rem 相対、% 親基準、vh/vw ビューポート、ch/fr など カラー: #ff0000 / rgb() / rgba() / hsl() / hsla() / カラー名

CSS 構文の基本形

/* セレクタ { プロパティ: 値; プロパティ: 値; ... } */

h1 {
    color: red;
    font-size: 24px;
    margin-top: 10px;
}

/* セミコロンは各宣言の末尾に必須（最後だけは省略可だが付ける習慣を） */

セレクタの種類

種類	例	意味
要素	p { ... }	すべての p 要素
クラス	.btn { ... }	class="btn" の要素
ID	#header { ... }	id="header" の要素
属性	input[type="text"]	type 属性が text の input
子孫	nav a	nav 内の任意の階層の a
子	nav > a	nav の直下の a のみ
隣接	h2 + p	h2 の直後の p
疑似クラス	a:hover	マウスホバー時の a
疑似要素	p::first-letter	p の最初の文字
複合	div.card.active	div かつ card かつ active

ショートハンドプロパティ

/* margin: 上 右 下 左 */
margin: 10px 20px 30px 40px;   /* 上10 / 右20 / 下30 / 左40 */
margin: 10px 20px 30px;        /* 上10 / 左右20 / 下30 */
margin: 10px 20px;             /* 上下10 / 左右20 */
margin: 10px;                  /* 全方向 10px */

/* padding も同様 */
padding: 8px 16px;

/* border: 太さ / スタイル / 色 */
border: 1px solid #ccc;

/* font: スタイル / ウェイト / サイズ / 行高 / フォント */
font: italic bold 16px/1.5 "Helvetica", sans-serif;

/* background */
background: #fff url(bg.png) no-repeat center/cover;

ユニット（単位）

単位	基準	用途
px	画面ピクセル	固定サイズ（境界線等）
em	親要素の font-size	相対的なサイズ調整
rem	root (html) の font-size	★ レスポンシブの基本
%	親要素の同プロパティ	幅・高さ
vh / vw	ビューポート高/幅の 1%	フルスクリーン要素
vmin / vmax	vh と vw の小/大	正方形要素
ch	"0" 文字の幅	等幅レイアウト
fr	Grid 余り領域の比率	CSS Grid
% （color）	0-100%	rgb / hsl の各成分

html { font-size: 16px; }      /* 1rem = 16px */

h1 { font-size: 2rem; }        /* 32px */
p  { font-size: 1rem; line-height: 1.5; }
.hero { height: 100vh; }       /* ビューポートの高さいっぱい */

カラー表記

/* 16 進 */
color: #ff0000;        /* 赤 */
color: #f00;           /* 短縮形 (= #ff0000) */
color: #ff0000ff;      /* RGBA 16 進（8桁、最後の ff は alpha） */

/* RGB / RGBA */
color: rgb(255, 0, 0);
color: rgb(255 0 0);                /* 新構文（カンマ無し） */
color: rgba(255, 0, 0, 0.5);        /* 50% 透明 */
color: rgb(255 0 0 / 50%);          /* 新構文 */

/* HSL / HSLA */
color: hsl(0, 100%, 50%);           /* 色相 / 彩度 / 明度 */
color: hsla(0, 100%, 50%, 0.5);

/* カラー名 */
color: red;
color: transparent;
color: currentColor;                 /* 現在の color 値を再利用 */

!important（最終手段）

.warning {
    color: red !important;     /* 他のすべてに優先 */
}

/* ❌ 多用すると保守不能に
   優先度合戦になる前にセレクタ詳細度を整理すべき */

カスケードと詳細度 (Specificity)

同じ要素に複数のスタイルが適用される場合、詳細度の高いものが勝つ。同点なら後に書かれた方が勝つ（カスケード）。

セレクタ	詳細度（a, b, c）	説明
インライン style="..."	1000	最強
#id	(0, 1, 0, 0)	ID
.class / [attr] / :hover	(0, 0, 1, 0)	クラス / 属性 / 疑似クラス
tag / ::before	(0, 0, 0, 1)	要素 / 疑似要素
* / :not() 自体	(0, 0, 0, 0)	影響なし
!important	すべてに優先	レイヤー外

/* 詳細度比較例 */
#header .nav a       { color: red; }    /* (0,1,1,1) = 111 */
div.nav a.active     { color: blue; }   /* (0,0,2,2) = 22 */
nav a                { color: green; }  /* (0,0,0,2) = 2 */

/* どれが勝つ？ → 上の #header .nav a が最強 */

メディアクエリ (@media)

/* デスクトップ前提のスタイル */
.container { width: 1200px; }

/* タブレット以下 */
@media (max-width: 1024px) {
    .container { width: 100%; padding: 0 20px; }
}

/* スマホ以下 */
@media (max-width: 768px) {
    .container { padding: 0 12px; }
    h1 { font-size: 1.5rem; }
}

/* Mobile First の例 */
.card { padding: 12px; }
@media (min-width: 768px) {
    .card { padding: 24px; }
}
@media (min-width: 1200px) {
    .card { padding: 32px; }
}

/* 横向き / 縦向き */
@media (orientation: landscape) { ... }

/* ダークモード */
@media (prefers-color-scheme: dark) {
    body { background: #1e293b; color: #e2e8f0; }
}

その他の便利な関数

/* url() */
background: url("/img/bg.png");

/* calc(): 計算式 */
width: calc(100% - 40px);
font-size: calc(1rem + 1vw);

/* min() / max() / clamp() */
width: min(100%, 1200px);             /* 画面幅と1200pxの小さい方 */
font-size: clamp(1rem, 2vw, 1.5rem);  /* 最小 / 推奨 / 最大 */

/* var() : CSS 変数 */
:root {
    --primary: #2563eb;
    --space: 16px;
}
.btn {
    background: var(--primary);
    padding: var(--space);
}

FAQ

Q: 単位を付けないとどうなる？
A: 0 以外で単位省略はエラー（プロパティが無視される）。0 だけは 0px / 0em 等と同じ扱いです。

Q: CSS のコメントは // ？
A: いいえ、/* ... */ のみ。// は SCSS / LESS の方言で純粋 CSS では機能しません。

Q: em と rem はどちらがいい？
A: 一般には rem がおすすめ（ルート基準で一貫）。コンポーネント内で相対的に揃えたい時だけ em。