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

*HTML 省略記法、ネスト、属性、CSS ショートカット*

> Source: Emmet Documentation (emmet.io) · MIT

## HTML 省略記法

### 要素のショートカット

| Command | Description |
|---------|-------------|
| `div` | <div></div> を作成 |
| `p` | <p></p> を作成 |
| `h1` | <h1></h1> を作成 |
| `a` | <a href=""></a> を作成 |
| `img` | <img src="" alt=""> を作成 |
| `input` | <input type="text"> を作成 |
| `btn` | <button></button> を作成 |
| `link:css` | CSS スタイルシートのリンクタグ |

### HTML ボイラープレート

```
!    → 完全な HTML5 ボイラープレート
doc  → HTML5 doctype のみ
```

### 暗黙タグ

| Command | Description |
|---------|-------------|
| `.class` | <div class="class"> に展開 |
| `ul>.item` | 子は <li class="item"> に展開 |
| `table>.row` | 子は <tr class="row"> に展開 |
| `select>.opt` | 子は <option class="opt"> に展開 |

## ネスト

### ネスト演算子

| Command | Description |
|---------|-------------|
| `>` | 子要素 |
| `+` | 兄弟要素 |
| `^` | 1レベル上に移動 |
| `^^` | 2レベル上に移動 |

### ネストの例

```
div>ul>li       → ネストした子要素
div+p+footer    → 兄弟要素
div>p>span^h2   → 1つ上: h2 は p の兄弟
div>p>span^^h2  → 2つ上: h2 は div の兄弟
```

## グループ化

### 括弧によるグループ化

```
div>(header>nav)+main+footer
→ header>nav をひとつのグループとして扱う
(div>h2+p)*3
→ グループ化した構造を 3 回繰り返す
```

### 複雑なレイアウト

```
.container>(header>h1+nav>ul>li*3)+main+footer
→ ページレイアウトの骨格
```

## 乗算

### 繰り返し演算子

| Command | Description |
|---------|-------------|
| `li*5` | <li> を 5 つ作成 |
| `div>p*3` | 子 p を 3 つ持つ div |
| `ul>li*4>a` | リンクを持つ 4 つの li を含むリスト |
| `tr>td*4` | td が 4 つのテーブル行 |

### 乗算の例

```
ul>li.item*5           → クラス付きリストアイテム 5 つ
table>tr*3>td*4        → 3行 4列のテーブル
.row>.col*3>p{Content} → テキスト付き 3 カラム行
```

## 番号付け

### アイテム番号付け（$）

| Command | Description |
|---------|-------------|
| `$` | 連番（1、2、3...） |
| `$$` | ゼロパディング 2 桁（01、02...） |
| `$$$` | ゼロパディング 3 桁（001、002...） |
| `$@3` | 3 から番号付けを開始 |
| `$@-` | 逆順番号付け（降順） |
| `$@-3` | 3 から始まる逆順番号付け |

### 番号付けの例

```
li.item$*3    → item1、item2、item3
li.item$$*3   → item01、item02、item03
li.item$@3*3  → item3、item4、item5
```

## 属性

### ID とクラス

| Command | Description |
|---------|-------------|
| `#id` | id 属性を追加: <div id="id"> |
| `.class` | クラスを追加: <div class="class"> |
| `.c1.c2` | 複数クラス: class="c1 c2" |
| `#main.container` | ID とクラスの組み合わせ |

### カスタム属性

```
td[colspan=2]        → <td colspan="2">
a[href=#]{Click}     → <a href="#">Click</a>
input[type=email placeholder=Email]
div[data-id=$]*3     → data-id="1"、"2"、"3"
```

## テキスト

### テキストコンテンツ（{}）

| Command | Description |
|---------|-------------|
| `p{Hello}` | <p>Hello</p> |
| `a{Click me}` | <a href="">Click me</a> |
| `p{Item $}*3` | Item 1、Item 2、Item 3 |

### ネスト付きテキスト

```
p>{Click }+a{here}+{ to continue}
→ <p>Click <a href="">here</a> to continue</p>
ul>li{Item $}*4
→ 番号付きアイテムのリスト
```

## CSS 省略記法

### ボックスモデル

| Command | Description |
|---------|-------------|
| `m10` | margin: 10px; |
| `m10-20` | margin: 10px 20px; |
| `p10` | padding: 10px; |
| `w100` | width: 100px; |
| `w100p` | width: 100%; |
| `h50` | height: 50px; |

### 表示と位置

| Command | Description |
|---------|-------------|
| `d:f` | display: flex; |
| `d:g` | display: grid; |
| `d:n` | display: none; |
| `d:b` | display: block; |
| `pos:r` | position: relative; |
| `pos:a` | position: absolute; |

### Flexbox

| Command | Description |
|---------|-------------|
| `jc:c` | justify-content: center; |
| `jc:sb` | justify-content: space-between; |
| `ai:c` | align-items: center; |
| `fxd:c` | flex-direction: column; |
| `fw:w` | flex-wrap: wrap; |

### タイポグラフィと色

| Command | Description |
|---------|-------------|
| `fz14` | font-size: 14px; |
| `fw:b` | font-weight: bold; |
| `ta:c` | text-align: center; |
| `c:#333` | color: #333; |
| `bgc:#fff` | background-color: #fff; |