使い方だけ教えろや〜〜！っていう方のために要点だけ書いていきます^ ^
まずHTMLから,
| command | 使い道 | 結果 |
| !+enter | HTMLの雛形表示 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device- width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> |
| img+tab | imgタグに必要な要素を表示してくれる | <img src="" alt=""> |
| タグ名+tab | 色々なタグを適宜いい感じに表示してくれる | 例：<div></div> |
| .+任意のクラス名 | クラス名の表示 | 例：<div class="test"></div> |
| #+任意のID名 | ID名の表示 | 例：<div id="test"></div> |
| .+クラス名＋#ID名 | クラスID組み合わせ表示 | 例：<div class="sample" id="test"></div> |
| タグ名.sample#test | タグ名を変えたい時。「タグ名、クラス名、id名を記述」 | 例：<p class="sample" id="test"></p> |
| .クラス名.クラス名 | 複数クラスの表示 | 例：<div class="test1 test2 test3"></div> |
| タグ名+タグ名 | +で複数タグ表示 | 例：div+li <div></div> <li></li> |
| タグ名>タグ名 | >で入れ子の表示 | 例：ulの中にli <ui> <li></li> </ui> |
| タグ名>タグ名*繰り返したい回数 | *で指定した分だけ複数タグを表示する | 例：ul>li*3 <ul> <li></li> <li></li> <li></li> </ul> |
| $*繰り返したい回数 | $で連番表示 | 例：div#sample-$*3(tab押下) 結果 <div id="sample-1"></div> <div id="sample-2"></div> <div id="sample-3"></div> |
| {} | {}でテキスト文字表示 | 例：p.sample{こんにちは}(記述したらtab押下) 結果 <p class="sample">こんにちは</p> |
CSS (Emmetでの記述)
Emmet CSS記述（数値）
プロパティの数値を指定する事ができます。
| 入力 | 表示 |
|---|---|
| m10 | margin:10px; |
| m10p | margin:10%; |
| m10r | margin:10rem; |
| m10e | margin: 10em; |
Emmet CSS記述（位置）
プロパティの位置を指定する事ができます。
| 入力 | 出力 |
|---|---|
| t | top |
| b | bottom |
| l | left |
| r | right |
「mt」と記述し「tab」を押すと、下記のように「margin-top: ;」を指定する事ができます。
Emmet プロパティ一覧
| 入力 | 出力 |
|---|---|
| m | margin |
| p | padding |
| w | width |
| h | height |
| maw | max-width |
| miw | min-width |
| mah | max-height |
| mih | min-height |
| c | color |
| bgc | background-color |
| fz | font-size |
| fw | font-weight |
| ff | font-family |
| d | display |
| lh | line-height |
| ta | text-align |
| td | text-decoration |
| lts | letter-spacing |
| z | z-index: |
| fl | float: left; |
| cl | clear: both; |
| d:f | display: flex; |
| ov | overflow |
| op | opacity |
| pos | position: relative; |
| lis | list-style |
| bd | border |
| bdrs | border-radius |
| bxz | box-sizing: border-box; |