個人メモです。
VSCodeでタグを生成するときに、補完機能(タグ名を入力してTABを押す)以外に、タグとクラスを一挙に生成するなど、様々な便利機能がある。
目次
使い方
Emmet(エメット)の書式に従って記述した後に、TAB
キーをクリックする。
1. 開始タグと終了タグの生成
・タグ名
2. クラス名のついたタグを生成
・タグ名.クラス名1.クラス名2....
divタグの場合はタグ名を省略可能。
3. タグの中にタグを生成
・タグ名>タグ名>タグ名....
クラス名を付けたい場合は、タグの後ろに.
ドットマークをつける。
4. 並列でタグを作成
・タグ名+タグ名+...
5. 掛け算でまとめて生成
欲しいタグを指定した数だけ生成する。グループ化したい場合はカッコで囲む。
・タグ名*数値
・タグ名.クラス名*数値
・(タグ名+タグ名)*数値
など
6. CSSプロパティを作成
CSSでもエメットを使うことができる。
backgroundcolor
bg -> background: #000;
bg#ccc -> background: #ccc;
margin, padding
p6 -> padding: 6px;
p20-60-20 -> padding: 20px 60px 20px;
m8 -> margin: 8px;
m10-20-15-8 -> margin: 10px 20px 15px 8px;
font-weignt, font-size
fz -> font-size: ;
fz16 -> font-size: 16px;
fwb -> font-weight: bold;
fw500 -> font-weight: 500;
display
df -> display: flex;
db -> display: block;
di -> display: inline;
dib -> display: inline-block;
position
por -> position: relative;
poab -> position: absolute;
いちいち記憶するというよりはそれっぽい頭文字や2語を入力すると候補が表示されるので、絞り込んでいけばOK。