# CSS クイックリファレンス

*セレクター、レイアウト、Flexbox、Grid、アニメーション、レスポンシブデザイン*

> Source: MDN Web Docs (developer.mozilla.org) · MIT

## セレクター

### 基本セレクター

| Command | Description |
|---------|-------------|
| `*` | ユニバーサル — すべての要素 |
| `div` | タイプ — すべての `<div>` 要素 |
| `.class` | クラス — クラスを持つ要素 |
| `#id` | ID — id を持つ要素 |
| `[attr]` | 属性 — 属性を持つ要素 |
| `[attr="val"]` | 属性が値と一致 |

### コンビネーター

| Command | Description |
|---------|-------------|
| `A B` | 子孫（任意の深さ） |
| `A > B` | 直接の子のみ |
| `A + B` | 隣接する兄弟（次の要素） |
| `A ~ B` | 一般的な兄弟（以降すべて） |

### 疑似クラス

| Command | Description |
|---------|-------------|
| `:hover` | マウスオーバー中の要素 |
| `:focus` | フォーカスがある要素 |
| `:first-child` | 親の最初の子 |
| `:nth-child(n)` | N 番目の子（1始まり、`odd`、`even`、`2n+1`） |
| `:not(sel)` | 否定 — 一致を除外 |
| `:has(sel)` | 親セレクター（一致を含む） |

### 疑似要素

| Command | Description |
|---------|-------------|
| `::before` | 要素の前にコンテンツを挿入 |
| `::after` | 要素の後にコンテンツを挿入 |
| `::placeholder` | input のプレースホルダーテキストをスタイル |
| `::selection` | ハイライトされたテキストをスタイル |

## ボックスモデル

### ボックスサイジング

```
/* padding/border を幅に含める */
*, *::before, *::after {
  box-sizing: border-box;
}
```

### プロパティ

| Command | Description |
|---------|-------------|
| `margin` | ボーダーの外側のスペース |
| `border` | padding の周囲の枠 |
| `padding` | ボーダーの内側のスペース |
| `width / height` | コンテンツの寸法 |
| `outline` | margin の外側のリング（スペースなし） |

### ショートハンド

```
margin: 10px;           /* 全辺 */
margin: 10px 20px;      /* 垂直 | 水平 */
margin: 10px 20px 30px; /* 上 | 水平 | 下 */
margin: 10px 20px 30px 40px; /* 上 右 下 左 */
```

## Flexbox

### コンテナ

```
.flex {
  display: flex;
  justify-content: center; /* 主軸 */
  align-items: center;     /* 交差軸 */
  gap: 1rem;
}
```

### コンテナプロパティ

| Command | Description |
|---------|-------------|
| `flex-direction` | `row` \| `column` \| `row-reverse` \| `column-reverse` |
| `flex-wrap` | `nowrap` \| `wrap` \| `wrap-reverse` |
| `justify-content` | `flex-start` \| `center` \| `space-between` \| `space-around` \| `space-evenly` |
| `align-items` | `stretch` \| `center` \| `flex-start` \| `flex-end` \| `baseline` |
| `align-content` | 複数行の交差軸方向の揃え |
| `gap` | フレックスアイテム間のスペース |

### アイテムプロパティ

| Command | Description |
|---------|-------------|
| `flex: 1` | 利用可能なスペースを埋めるように伸長 |
| `flex: 0 0 200px` | 固定幅、伸長/縮小なし |
| `align-self` | 1つのアイテムの align-items を上書き |
| `order` | 表示順を変更（デフォルト 0） |

## Grid

### コンテナ

```
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}
```

### コンテナプロパティ

| Command | Description |
|---------|-------------|
| `grid-template-columns` | 列トラックを定義: `1fr 2fr`、`repeat(3, 1fr)` |
| `grid-template-rows` | 行トラックを定義 |
| `grid-template-areas` | 名前付き領域: `"header header" "nav main"` |
| `gap` | 行と列のギャップ |
| `justify-items` | インライン方向（水平）でアイテムを揃え |
| `align-items` | ブロック方向（垂直）でアイテムを揃え |

### アイテムの配置

```
.item {
  grid-column: 1 / 3;   /* 列 1-2 にまたがる */
  grid-row: 1 / -1;     /* すべての行にまたがる */
  grid-area: header;    /* 名前付き領域 */
}
```

## タイポグラフィ

### フォントプロパティ

| Command | Description |
|---------|-------------|
| `font-family` | フォントスタック: `'Inter', sans-serif` |
| `font-size` | サイズ: `1rem`、`16px`、`clamp(1rem, 2vw, 2rem)` |
| `font-weight` | `normal` (400) \| `bold` (700) \| `100`〜`900` |
| `font-style` | `normal` \| `italic` \| `oblique` |
| `line-height` | 行間: `1.5`（単位なし推奨） |
| `letter-spacing` | 文字間隔: `0.05em` |

### テキストプロパティ

| Command | Description |
|---------|-------------|
| `text-align` | `left` \| `center` \| `right` \| `justify` |
| `text-decoration` | `none` \| `underline` \| `line-through` |
| `text-transform` | `uppercase` \| `lowercase` \| `capitalize` |
| `text-overflow` | `ellipsis`（overflow: hidden と併用） |
| `white-space` | `nowrap` \| `pre` \| `pre-wrap` |
| `word-break` | `break-all` \| `break-word` |

## 色と背景

### カラーフォーマット

```
color: #ff6600;             /* hex */
color: rgb(255, 102, 0);    /* rgb */
color: hsl(24, 100%, 50%);  /* hsl */
color: oklch(70% 0.15 50);  /* oklch */
```

### 背景プロパティ

| Command | Description |
|---------|-------------|
| `background-color` | 単色塗りつぶし: `#f0f0f0` |
| `background-image` | `url(img.jpg)` またはグラデーション |
| `background-size` | `cover` \| `contain` \| `100px 200px` |
| `background-position` | `center` \| `top right` \| `50% 50%` |
| `background-repeat` | `no-repeat` \| `repeat-x` \| `repeat-y` |

### グラデーション

```
background: linear-gradient(to right, #f00, #00f);
background: radial-gradient(circle, #fff, #000);
background: conic-gradient(red, yellow, green);
```

## トランジションとアニメーション

### トランジション

```
.btn {
  transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}
```

### トランジションプロパティ

| Command | Description |
|---------|-------------|
| `transition-property` | アニメーションするプロパティ |
| `transition-duration` | 長さ: `0.3s`、`300ms` |
| `transition-timing-function` | `ease` \| `linear` \| `ease-in-out` \| `cubic-bezier()` |
| `transition-delay` | 開始前の待機時間 |

### キーフレームアニメーション

```
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon { animation: spin 1s linear infinite; }
```

### アニメーションプロパティ

| Command | Description |
|---------|-------------|
| `animation-name` | @keyframes 名を参照 |
| `animation-duration` | 1サイクルの長さ |
| `animation-iteration-count` | `1` \| `3` \| `infinite` |
| `animation-direction` | `normal` \| `alternate` \| `reverse` |
| `animation-fill-mode` | `forwards` \| `backwards` \| `both` |

## レスポンシブデザイン

### メディアクエリ

```
@media (max-width: 768px) {
  .sidebar { display: none; }
}
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #eee; }
}
```

### 一般的なブレークポイント

| Command | Description |
|---------|-------------|
| `max-width: 480px` | モバイル端末 |
| `max-width: 768px` | タブレット |
| `max-width: 1024px` | 小型ノートPC |
| `max-width: 1280px` | デスクトップ |

### ビューポート単位

| Command | Description |
|---------|-------------|
| `vw / vh` | ビューポート幅 / 高さの % |
| `dvh` | 動的ビューポート高さ（モバイル対応） |
| `svh / lvh` | 小 / 大ビューポート高さ |
| `cqi` | コンテナクエリインラインサイズ |

### コンテナクエリ

```
.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) {
  .card { flex-direction: row; }
}
```

## ポジショニング

### position の値

| Command | Description |
|---------|-------------|
| `static` | デフォルト — 通常のドキュメントフロー |
| `relative` | 通常位置からオフセット；スペースを保持 |
| `absolute` | 最も近い位置付き祖先に対して配置 |
| `fixed` | ビューポートに対して配置；スクロールしても固定 |
| `sticky` | スクロールに基づいて relative/fixed を切り替え |

### センタリングパターン

```
/* Flex でセンタリング */
display: flex;
justify-content: center;
align-items: center;

/* Grid でセンタリング */
display: grid;
place-items: center;
```

### スタッキング

| Command | Description |
|---------|-------------|
| `z-index` | 重なり順（大きいほど上）；`position` が必要 |
| `isolation: isolate` | 新しいスタッキングコンテキストを作成 |

## カスタムプロパティ

### 定義と使用

```
:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
}
.btn {
  background: var(--color-primary);
  padding: var(--spacing-md);
}
```

### フォールバック値

```
color: var(--accent, #ff6600);
/* --accent が未定義の場合は #ff6600 を使用 */
```

### 動的テーマ

```
[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}
body { background: var(--bg); color: var(--text); }
```