のキャプション |
## CSS セレクター
### 基本セレクター
| Command | Description |
|---------|-------------|
| `element` | `p { }` — すべての 要素 |
| `.class` | `.card { }` — クラスセレクター |
| `#id` | `#main { }` — ID セレクター |
| `*` | ユニバーサルセレクター（すべての要素） |
### 結合子
| Command | Description |
|---------|-------------|
| `A B` | 子孫（A の内側の B） |
| `A > B` | 直接の子要素のみ |
| `A + B` | 隣接兄弟（A の直後の B） |
| `A ~ B` | 一般兄弟（A より後の B） |
### 疑似クラス
| Command | Description |
|---------|-------------|
| `:hover` | 要素上にマウスがある |
| `:focus` | 要素がフォーカスを持つ |
| `:first-child` | 親の最初の子要素 |
| `:nth-child(n)` | n番目の子（2n = 偶数、odd = 奇数） |
## ボックスモデル
```
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
```
### ショートハンド
| Command | Description |
|---------|-------------|
| `margin: 10px` | 全辺 |
| `margin: 10px 20px` | 上下 \| 左右 |
| `margin: 10px 20px 15px` | 上 \| 左右 \| 下 |
| `margin: 10px 20px 15px 5px` | 上 \| 右 \| 下 \| 左 |
## フレックスボックス
### コンテナ
```
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
```
### アイテムプロパティ
| Command | Description |
|---------|-------------|
| `flex: 1` | 利用可能なスペースを埋めるように伸長 |
| `flex-grow: 2` | 兄弟要素に対する伸長比率 |
| `flex-shrink: 0` | 基準サイズ以下に縮小しない |
| `flex-basis: 200px` | 伸縮前の初期サイズ |
| `align-self: flex-end` | コンテナの配置をオーバーライド |
| `order: -1` | 表示順序（デフォルト 0） |
## グリッド
### コンテナ
```
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
```
### アイテム配置
```
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
```
## ポジション
| Command | Description |
|---------|-------------|
| `static` | デフォルトフロー（オフセットプロパティなし） |
| `relative` | 通常位置からのオフセット |
| `absolute` | 最も近い位置指定の祖先からのオフセット |
| `fixed` | ビューポートからのオフセット（スクロールしても固定） |
| `sticky` | スクロール閾値まで relative、それ以降は fixed |
### 例
```
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
```
## メディアクエリ
```
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
```
### 一般的なブレークポイント
| Command | Description |
|---------|-------------|
| `480px` | 小型スマートフォン |
| `768px` | タブレット |
| `1024px` | 小型デスクトップ / 横向きタブレット |
| `1280px` | デスクトップ |
```
### リスト
```