※Web開発TECK I.SVS CODE
emmet

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

job_illustrator_pc_woman-e ※Web開発
Emmetとは？これだけ知っておけばOK！
zenn.dev

【基本形】要素 + 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 のショートハンド

基本

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

ショートハンド出力結果
dbdisplay: block;
dibdisplay: inline-block;
dndisplay: none;
wwidth: ;
mawmax-width: ;
miwmin-width: ;
hheight: ;
mahmax-height: ;
mihmin-height: ;
bgbackground: ;
bdborder: ;

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

ショートハンド出力結果
w14display: block;
w50pdisplay: inline-block;
w10rdisplay: none;
w10ewidth: ;

padding、margin 関連

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

ショートハンド出力結果
ppadding: ;
ptpadding-top: ;
prpadding-right: ;
pbpadding-bottom: ;
plpadding-left: ;
mmargin: ;
mtmargin-top: ;
mrmargin-right: ;
mbmargin-bottom: ;
mlmargin-left: ;

最初にもあったように、「margin-bottom: 80px;」を出したい場合は、

mb80

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

margin-bottom: 80px;

また、margin 等でよく使われる複数の値を入力したい場合は、「-」で値を区切ります。

m10-20-10-30

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

margin: 10px 20px 10px 30px;

font 関連

font 関連でよく使われるショートハンドです。

ショートハンド出力結果
ccolor: ;
fzfont-size: ;
fwfont-weight: ;
fwbfont-weight: bold;
fffont-family: ;

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

ショートハンド出力結果
fz14font-size: 14px;
fz1.6rfont-size: 1.6rem;
fz1.6efont-size: 1.6rem;

text 関連

text 関連でよく使われるショートハンドです。

ショートハンド出力結果
tatext-align: ;
tactext-align: center;
tdtext-decoration: ;
tdntext-decoration: none;
lhline-height: ;
ltsletter-spacing: ;

「text-decoration: none;」が「tdn」だけで展開させられるのは時間短縮になりますね。

Flexbox 関連

Flexbox 関連でよく使われるショートハンドです。

ショートハンド出力結果
dfdisplay: flex;
aialign-items: ;
aicalign-items: center;
fxwflex-wrap: ;
fxdflex-direction: ;
jcjustify-content: ;
jccjustify-content: center;

「justify-content: center;」を出す時にはめちゃくちゃ助かります。

Emmet チートシート

https://embed.zenn.studio/card#zenn-embedded__45c906b280328
embed.zenn.studio

いままで紹介したもの以外にも、まだまだ沢山便利なショートハンドはあります。

Emmet にはチートシートもあるので短縮したいコードを探してみて、それがあれば次回から使う。

そうやって 1 つずつ Emmet に慣れて覚えていきましょう！

最後に

いかがだったでしょうか？
今回、Emmet について非常に便利だと感じていただけたかと思います。

一度、Emmet を使うと元のベタ書きには戻れないほど、Emmet の魅力にハマっていきます。

無料ですしコーディングでの作業効率が爆上がりになりますので、是非、この機会に導入してみてください！

タイトルとURLをコピーしました