EmmetでCSSも爆速コーディングする

こんにちは！ぐちです。

以前今まで確実に損をしていた？！Emmetってご存知？の記事でもご紹介したEmmetですがCSSを非常に効率良く記述できるようです。何点かご紹介します。

Fuzzy Search

あいまい検索のことですがEmmetには搭載されているようです。何が便利かと言いますと正確な短縮形を記述しなくても「いい感じに」解釈してCSSを展開してくれるそうです。

例えば以下のような短縮形を書いた場合は下の通り展開されます。

/* 短縮形 */
fl
flo
fl-r
fr

/* 展開後 */
float: left;
float: left;
float: right;
float: right;

これらを念頭に置いて下記の短縮形をふわっと覚えていきましょう！

単語の先頭ルール

Emmetの省略形は基本的にCSSのプロパティの頭文字で設定されています。

• w
  • width
• h
  • height
• m
  • margin
• p
  • padding
• c
  • color
• ta
  • text-align

などなど。

単語の先頭ルール以外

頭文字だけだと重複するものがあるのでそういったものは2〜3文字で設定されています。

• bd
  • border
• bg
  • background
• bgc
  • background-color
• fl
  • float
• pos
  • position

などなど。

値も書けます

プロパティの数値も同時に省略形に書くことができます。

• w80
  • width: 80px;
• w80p
  • width: 80%;
• m8-16
  • margin: 8px 16px;
• m8-0-4
  • margin: 8px 0 4px;

などなど。

この他にも数百種類の短縮形が用意されているので全て覚える必要はないと思うのですがコーディングスピードを上げるためにもできるだけ多く覚えておいたほうがいいかもしれませんね。Fuzzy Searchがあるのでそれっぽく書けば展開されるとは思いますが。

では今回はこのへんで。