タイトル: 基本形
SEOタイトル: CSS 基本記述形完全ガイド（セレクタ / プロパティ / ユニット / カラー / @media）
| この記事の要点 |
|
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。