EmmetでHTMLを記述
!・・・HTMLのひな形が作れる
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body></body></html> .classname・・・クラス付きの要素が作れる
<divclass="classname"></div> #idname・・・ID付きの要素が作れる
<divid="idname"></div> ul>li*2>a・・・リンク付きリスト
<ul><li><ahref=""></a></li><li><ahref=""></a></li></ul> table>tr*2>th+td・・・テーブル（表）をつくる
<table><tr><th></th><td></td></tr><tr><th></th><td></td></tr></table> dl>(dt+dd)*2・・・説明リスト
<dl><dt></dt><dd></dd><dt></dt><dd></dd></dl>EmmetでCSSを記述
| ショートハンド | 展開後 |
|---|---|
| dib | display: inline-block; |
| bg#fff | background: #fff; |
| c#fff | color: #fff; |
| fz32 | font-size: 32px; |
| w50 | width: 50px; |
| maw640 | max-width: 640px; |
| miw50% | min-width: 50%; |
| pl10 | padding-left: 10px; |
| mb1e | margin-bottom: 1em; |
| m0-auto20 | margin: 0 auto 20px; |
| p5-10-5-10 | padding: 5px 10px 5px 10px; |
| bd(+) ※1 | border: 1px solid #000; |
| bsh0-0-3-0#000 | box-shadow: 0 0 3px 0 #000; |
| bdrs5 | border-radius: 5px; |
| bds:n | border-style: none; |
| bdsp0 | border-spacing: 0; |
| bdcl:c | border-collapse:collapse; |
| psr | position: relative; |
| psa | position: absolute; |
| ta:c | text-align: center; |
| trf:sc | transform: scale(x, y); |
| trs | transition: prop time; |
※1
VScodeでは、bdは+がいらないっぽい
