Emmetとは高速にhtml・cssをコーディングできるプラグインで、様々な環境で提供されています。Emmetはhtmlの場合ないと困るのですが、cssの場合だとなんとなく見送ってきたのでこれを機に再度、使用頻度をあげていこうと思います。
Emmet × cssを使うときの記法を2つにわけて考える
個人的な見解にはなりますがEmmetでcssをかくときに大きく2つの書き方があるのではと思っています。
- w:50はwidth: 50px;になる
- w:はwidth: ;になる
前者は数字を含めることによってタブで変換したときに自動で50pxになってくれます。しかし数値を含めるか含めないかの書き方はどちらでもあまりスピードはかわらないのではとおもったので、とりあえず数値を含めない書き方で統一することにしようと思いました。
1文字のEmmet記法は把握する
Emmetのcssはなにかと頭でおもいえがいた単語がかぶりがちになるのでまず1文字記述するEmmetを把握するのがよいのかなと思います。
| 記号 | 変換結果 |
|---|---|
| t: | top: ; |
| r: | right: ; |
| b: | bottom: ; |
| l: | left: ; |
| w: | width |
| h: | height |
| p: | padding: ; |
| m: | margin: ; |
| d: | display: ; |
| j: | justify-content: ; |
これらの一文字Emmetを覚えるだけでもだいぶ作業効率があがりそうです。しかもwidth、height、padding、marginなどは使用頻度が高いです。
paddingとmarginの使い方を把握しておく
cssのなかでもpadding、marginはかなり使用頻度が高いプロパティです。t、r、b、lをつけることにより任意の方向を指定することができます
- mt:→margin-top: ;
- mr:→margin-right: ;
- mb:→margin-bottom: ;
- ml:→margin-left: ;
そのほかよく使うcssプロパティのEmmet記法
- bg:→background: ;
- po:→position: ;
- ta:→text-align: ;
- td:→text-decoration: ;
- list:→list-style-type: ;
ややこしいcssプロパティ
使用頻度は高いけどややこしいcssプロパティも存在します。
- bd:→border: ;
- fz:→font-size: ;
コメント