📖

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

5 min read

はじめに


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の魅力にハマっていきます。

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

Discussion

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