こんにちは！
今回は最近覚えたEmmetについてまとめます。
HTML
タグ名.class名
- クラス名を自動で付ける
タグ名.class名|c
- 閉じタグの後に、
<!-- /.クラス名 -->というコメントを付ける
CSS
m20
margin: 20px
| emmet | CSS |
|---|---|
| m | margin: ; |
| mt | margin-top: ; |
| mr | margin-right: ; |
| mb | margin-bottom: ; |
| ml | margin-left: ; |
| p | padding: ; |
| pt | padding-top: ; |
| pr | padding-right: ; |
| pb | padding-bottom: ; |
| pl | padding-left: ; |
m20-10
margin: 20px 10px
位置調整関係
| emmet | CSS |
|---|---|
| df | display: flex; |
| aic | align-items: center; |
| jcc | justify-content: center; |
| psa | position: absolute; |
| psr | position: relative; |
おわりに
今回は最近覚えたEmmetについてまとめました。以前から活用していますが、数値を伴う場合も同時に指定できるのは知りませんでした。Emmetは使いこなせば使いこなすだけ開発効率が上がっていくと思うので、また少しずつ覚えたいと思います。
96/100
