Emmetとは？これだけ知っておけばOK！
zenn.dev

【基本形】要素 + Return or Tab
【階層】要素 > 要素
【複製】要素 * 数字
「.」でクラス付与
「#」で ID 付与
リンク付きの list
連番付きの list
テキストを挿入
ダミーテキストを挿入
基本
padding、margin 関連
font 関連
text 関連
Flexbox 関連

【基本形】要素 + Return or Tab

基本的には「h2」や「li」等の要素を入力した後に、「Return」キーか「Tab」キーを押すと要素のタグと閉じタグが入力されます。

li

と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<li></li>

よく使う基本形なので、覚えておきましょう。

【階層】要素 > 要素

こちらは「list」等でよく使う形になります。

ul>li

と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<ul>
	<li></li>
</ul>

階層があるコードを記述したい時にはこの形で記述しましょう。

【複製】要素 * 数字

こちらも「list」等、複数同じ要素を使うコードでよく使う形になります。

ul>li*3

と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

複数同じ要素を使うコードは何回も記述するのは大変なので、この形で記述しましょう。

よく使う HTML のショートハンド

基本的によく使う HTML ショートハンドを項目毎にまとめました。

ID、Class 関連

「.」でクラス付与

展開するコードにクラス名を付与させたい場合は、

div.class-name

と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<div class="class-name"></div>

「#」で ID 付与

展開するコードに ID 名を付与させたい場合は、

div#id-name

と入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<div class="id-name"></div>

「div」の場合は「div.クラス名」、「div#ID 名」を「.クラス名」、「#ID 名」と短縮することもできるので、覚えておきましょう！

list 関連

リンク付きの list

展開する list のコードにリンクを付与させたい場合は、

ul>li*3>a

のように末尾に「>a」を入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<ul>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

連番付きの list

展開する list のコードのクラス名に連番を付与させたい場合は、

ul>li.list$*3

のように「$」を入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<ul>
	<li class="list1"></li>
	<li class="list2"></li>
	<li class="list3"></li>
</ul>

テキスト関連

テキストを挿入

展開するコードにテキストを挿入させたい場合は、

h2{タイトル}

のように要素の後に「{}」でテキストを囲んで入力し「Return」キーか「Tab」キーを押すと以下のコードが展開されます。

<h2>テキスト</h2>

ダミーテキストを挿入

展開するコードにダミーテキストを挿入させたい場合は、

lorem

を入力し「Return」キーか「Tab」キーを押すと以下のダミーテキストが展開されます。

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, ut harum
asperiores fugit cum facere unde voluptates vitae necessitatibus tempora! Ipsum
quos, nemo sequi unde esse placeat dolor quia praesentium.

よく使う CSS のショートハンド

基本

基本的によく使うショートハンドは以下のようなものです。

ショートハンド	出力結果
db	display: block;
dib	display: inline-block;
dn	display: none;
w	width: ;
maw	max-width: ;
miw	min-width: ;
h	height: ;
mah	max-height: ;
mih	min-height: ;
bg	background: ;
bd	border: ;

また、各プロパティの数値単位は以下のように入力します。

ショートハンド	出力結果
w14	display: block;
w50p	display: inline-block;
w10r	display: none;
w10e	width: ;

padding、margin 関連

padding、margin 関連は 1 番登場回数が多いので、必ず覚えておきましょう。

ショートハンド	出力結果
p	padding: ;
pt	padding-top: ;
pr	padding-right: ;
pb	padding-bottom: ;
pl	padding-left: ;
m	margin: ;
mt	margin-top: ;
mr	margin-right: ;
mb	margin-bottom: ;
ml	margin-left: ;