📖

Emmetとは?これだけ知っておけばOK!

2022/01/06に公開約6,000字

はじめに


Emmet は使えるようになると、わざわざコードを 1 から全部記述しなくてもよくなるので、非常にコーディングの効率化が図れるようになリます。

そんな Emmet について、まとめてみました!

Emmet とは?

Emmet とは、HTML や CSS を省略記法で入力できるプラグインです。

Visual Studio Code や SublimeText、Atom 等の様々なエディタで使用することができます。
特に Visual Studio Code では  Emmet が標準搭載されているので Visual Studio Code を使用する。という方もいるくらい、便利な機能です。

Emmet を使うと、「margin-bottom: 80px;」を「mb80」と入力するだけで出せるようになるので大幅にキーの入力数を減らすことができるため、コーディング効率化のためには必須のツールとなっています。

Emmet 記述方法

Emmet の記述方法は非常に簡単です。

以下の 3 つの形を覚えておけば問題なく使用することができるので、それぞれ見ていきましょう。

【基本形】要素 + 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: ;

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

mb80

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

margin-bottom: 80px;

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

m10-20-10-30

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

margin: 10px 20px 10px 30px;

font 関連

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

ショートハンド 出力結果
c color: ;
fz font-size: ;
fw font-weight: ;
fwb font-weight: bold;
ff font-family: ;

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

ショートハンド 出力結果
fz14 font-size: 14px;
fz1.6r font-size: 1.6rem;
fz1.6e font-size: 1.6rem;

text 関連

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

ショートハンド 出力結果
ta text-align: ;
tac text-align: center;
td text-decoration: ;
tdn text-decoration: none;
lh line-height: ;
lts letter-spacing: ;

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

Flexbox 関連

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

ショートハンド 出力結果
df display: flex;
ai align-items: ;
aic align-items: center;
fxw flex-wrap: ;
fxd flex-direction: ;
jc justify-content: ;
jcc justify-content: center;

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

Emmet チートシート

https://docs.emmet.io/cheat-sheet/

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

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

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

最後に

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

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

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

GitHubで編集を提案

Discussion

ログインするとコメントできます