効率的なマークアップが出来るようになるEmmetでCSSを書く時の基本
HTML編に引き続き、今回はCSSでEmmetを書く時の基本についてです。
基本的な使い方
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; |
