# 効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本

URL: https://webrandum.net/emmet-css/
公開日: 2019-03-23
更新日: 2019-03-23
カテゴリー: コーディング
タグ: Emmet
出典: Webrandum（著者: サイトウ マサカズ）

[HTML編](https://webrandum.net/emmet-html/)に引き続き、今回はCSSでEmmetを書く時の基本についてです。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/03/eyecatch-19.jpg)効率的なマークアップが出来るようになるEmmetでHTMLを書く時の基本https://webrandum.net/emmet-htmlWebサイトのマークアップスピードを上げるためには、そもそも書く文字数を減らすとスピードが上がります。HTMLの場合は下記のような理由から、記述に時間がかかってしまいます 開始タグと閉じタグで、要素名を2回入力する必要がある <>を入力する必要がある インデントの入力が面倒今回はそんなHTMLを素早く入力できるEmmetという記法についてまとめます。Emmetとは？Emmet（旧：Zen-Coding）は、独自の省略記法でマークアップスピードを上げるプラグインです。括弧や閉じタグを書かずに記述して最後にtabで展開するので、単純に...](https://webrandum.net/emmet-html)

## 基本的な使い方

CSSの場合はHTMLよりも更に楽で、「Fuzzy Search（あいまい検索）」という機能があり、一言一句覚えなくても、それっぽい省略文字を入力してtabを押せば展開されます。

### プロパティの略

まずはプロパティの略から。

ものによっては1文字入力するだけで展開してくれるので、かなり効率的にCSSが書けるようになります。

| 展開前 | 展開後 |
| --- | --- |

| d | display: ; |
| --- | --- |

| m | margin: ; |
| --- | --- |

| p | padding: ; |
| --- | --- |

| c | color: ; |
| --- | --- |

| w | width: ; |
| --- | --- |

| h | height: ; |
| --- | --- |

| fw | font-weight: ; |
| --- | --- |

| fz | font-size: ; |
| --- | --- |

| ta | text-align: ; |
| --- | --- |

| bg | background: ; |
| --- | --- |

| bd | border: ; |
| --- | --- |

| pos | position: ; |
| --- | --- |

### 値の指定

プロパティの略の後に「:（コロン）」を付けて、値を入力すると値が指定できます。

値もある程度省略して入力できます。

| 展開前 | 展開後 |
| --- | --- |

| d:b | display: block; |
| --- | --- |

| d:i | display: inline; |
| --- | --- |

| d:ib | display: inline-block; |
| --- | --- |

| fw:b | font-weight: bold; |
| --- | --- |

| fw:n | font-weight: normal; |
| --- | --- |

| pos:r | position: relative; |
| --- | --- |

| pos:a | position: absolute |
| --- | --- |

#### 値に数字を入力する場合

値に数字を使用する場合は単位の指定も必要になってきます。

また、値に数字を入力するプロパティの場合は、:（コロン）は不要です。

| 変換前 | 変換後 | 説明 |
| --- | --- | --- |

| w100 | width: 100px; | 数字だけだとpx指定 |
| --- | --- | --- |

| w100p | width: 100% | 「p」と入力すると%指定 |
| --- | --- | --- |

| w100e | width: 100em; | 「e」と入力するとem指定 |
| --- | --- | --- |

| w0.8 | width: 0.8em; | 「1.0」等以外の少数を入力すると自動でem指定 |
| --- | --- | --- |

| w100r | width: 100rem; | 「r」と入力するとrem指定 |
| --- | --- | --- |

| w100vw | width: 100vw; | 「vw」と入力するとvw指定 |
| --- | --- | --- |

| w100vh | width: 100vh; | 「vh」と入力するとvh指定 |
| --- | --- | --- |

#### 色を指定する場合

色を指定する場合は「:（コロン）」の代わりに「#（ハッシュ記号）」を使ってその後にカラーコードを入力します。

また、カラーコードも便利に省略する事ができます。

| 変換前 | 変換後 | 説明 |
| --- | --- | --- |

| c#0 | color: #000; | 1文字の場合はRGB同じ値のカラーコードにしてくれる |
| --- | --- | --- |

| c#ef | color: #efefef | 2文字の場合はそれを3回繰り返してくれる |
| --- | --- | --- |

| c#55acee | color: #55acee; | 普通にカラーコードを入力すれば、そのまま展開してくれる |
| --- | --- | --- |

| c#ccc.5 | color: rgba(204, 204, 204, 0.5); | カラーコード + 小数点でrgba()に変換 |
| --- | --- | --- |

#### マージンやパディングの入力

マージンやパディングを入力する場合は、いくつか指定の方法があります。

例えば、「m」の後に数字をハイフン区切りで入力していくと、通常のCSSのように上下左右それぞれの値を設定できます。

| 変換前 | 変換後 | 説明 |
| --- | --- | --- |

| m20 | margin: 20px; |   |
| --- | --- | --- |

| m20-a | margin: 20px auto; | ハイフンで繋いで値2つ |
| --- | --- | --- |

| m20-30-40 | margin: 20px 30px 40px; | ハイフンで繋いで値3つ |
| --- | --- | --- |

| m20-a40 | margin: 20px auto 40px; | autoを使った後はハイフンは使わない （ハイフンを使った場合はネガティブマージンになる） |
| --- | --- | --- |

| m20-30-40-50 | margin: 20px 30px 40px 50px; | ハイフンで繋いで値4つ |
| --- | --- | --- |

### 「+」を使った展開

「+」は複数のプロパティをつなげて一気に展開する時に使いますが、特定のプロパティで「+」を入力すると、必要な値を全て展開してくれる事もあります（Emmetの設定によっては使用不可）。

| 展開前 | 展開後 |
| --- | --- |

| bg+ | background: #fff url() 0 0 no-repeat; |
| --- | --- |

| f+ | font: 1em Arial,sans-serif; |
| --- | --- |

| bd+ | border: 1px solid #000; |
| --- | --- |