Emmetとは、HTMLやCSSのコード入力を補完してくれるプラグインです。Emmetを使うことによってコーディング作業を効率化することができ、使わない場合と比べるとコーディング速度にかなりの差が出ます。

最近では、VSCodeなどのテキストエディタで最初から有効化されているため、なんとなくで使ってしまっている人が多いのではないでしょうか?

今回は、Emmetの使い方やHTML/CSSを記述する上で覚えておきたい入力方法などをご紹介したいと思います。

Emmetとは

Emmet(読み方:エメット)とは、HTMLやCSSのコードの入力を補完してくれるテキストエディタ向けのプラグインです。Emmetを使って省略してコードを記述することによって、キー入力の回数を減らすことができ、コーディングの効率化に繋がります。

基本的にどのテキストエディタでもEmmetのプラグインを追加することができますが、Visual Studio Code(VSCode)であればデフォルトでEmmetを利用することができるようになっているため、特別な設定を行わなくてもEmmetでコードを記述することができます。

この記事では、VSCodeでEmmetを使うことを想定した内容となっています。基本的にどのテキストエディタでも入力方法は同じですが、場合によって違う箇所があるかもしれないため、予めご了承ください。

EmmetでHTMLを記述する

タグを記述する

HTMLでコードを書く場合、divタグや、pタグなど様々なタグを使って記述しますが、いちいち「<」や「>」など記述するのって結構面倒です。

Emmetを使えば、その記述をもっと簡単に済ませてしまうことができます。

例えば、pタグを記述したい時は下記のように入力して、TabかEnterを押すだけで記述することができます。

p

出力されるコードは下記のようになります。

1つのタグを入力するのにかかる時間をかなり短縮することができるので、地味にめちゃくちゃ便利です。

さらに、imgタグの場合は下記のように出力されます。

必ず必要なsrcalt属性を最初から出力してくれるので、入力する手間を省けると同時に、記述忘れを防ぐこともできます。

クラスやid付きのタグを記述する

現在では、CSSはクラス名を指定してスタイリングを行うのが一般的な方法となっていますが、Emmetは、クラス付きのタグも簡単に記述することができます。

例えば、.textクラスのpタグを記述したい場合は、下記のように入力することができます。

p.text

上記の操作を行うと、下記のようにタグが出力されます。

一度この方法に慣れてしまうと、いちいちすべて入力することがバカバカしくなってくるくらい便利です。

ちなみに、「.」の代わりに「#」を使うとid付きのタグを出力されることもできます。

また、p.className#idNameのように続けて入力すると、クラスとidを両方付けたタグを出力することもできます。

複数のクラスを付与したタグを記述する

1つのタグに複数のクラスを付ける場合がありますが、そんな時は下記のように記述することができます。

p.class1.class2

出力結果は下記のようになります。

divタグはもっと省略できる

divタグはもっと簡単に記述することができ、boxクラスのdivタグを出力したい場合は下記のように入力することができます。

.box

出力結果は下記のようになります。

テキスト付きのpタグを出力する

pタグの中に記述するテキストを予め指定してタグを出力する事が可能です。

p.text{テキストテキストテキスト}

出力結果は下記のとおりです。

テキストを指定したい場合は、pタグの後ろに{}を付け、その中にテキストを記述すればOKです。

HTMLのテンプレートを出力する

HTMLのコードは基本的にhtmlタグがあり、headタグがあり、その中にはtitleタグがあり、bodyタグがあり、などどのファイルでも共通して記述しなければならないタグが存在しています。

毎回これを手で入力するのは面倒ですが、Emmetなら下記を入力して、TabかEnterを押すと簡単に出力することができます。

!

出力結果は下記のとおりです。

たった1文字でこれだけのコードが出力できるのはかなり便利です。これは忘れずに覚えておきましょう。

Lorem Ipsumを簡単に挿入する

Lorem Ipsumとは、Webやデザインでのダミーテキストとして一般的に使われている、下記の文章のことです。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, et beatae dolore iusto, fugit neque rerum veritatis est quasi, commodi at! Quia maxime itaque iste! Quibusdam voluptatibus ratione laboriosam optio.

特にこの文章自体に意味はないのですが、「ダミーテキストといえばLorem Ipsum」というくらいかなり一般的に使われています。

いちいちコピペして入力している人も多いかもしれませんが、Emmetを使えば、pタグにLorem Ipsumを挿入したい場合下記のように入力するだけでダミーテキストを出力することができます。

p>lorem

そうすると、下記のようなコードが出力されます。

ただloremだけ入力すると、pタグは出力されないので任意の場所にダミーテキストを挿入することができます。

Lorem Ipsumを使っていると、ちょっとコーディングできる人のような雰囲気を出すことができるかも?知らなかった人はぜひ使ってみてください。

記号を使って効率化

Emmetを使ってHTMLを記述するのであれば、下記の3つの記号を使った書き方は覚えておきましょう。

  • 「>」
  • 「+」
  • 「*」

それぞれどのように使うかご紹介していきます。

「>」で入れ子にする

「>」の記号を使うと、入れ子になったタグを出力することができます。

例えば、ulタグの中にliタグを付けて出力したい場合、下記のように入力すればOKです。

ul>li

出力結果は下記のようになります。

「+」で隣接させる

「+」の記号を使うと、隣接したタグを一度に出力することができます。

例えば、dtタグとddタグを並べて出力したい場合は、下記のように記述することができます。

dt+dd

出力結果は下記のとおりです。

一度にまとめて出力することができるので、カーソル移動の手間が省けて若干の作業効率アップにつながります。

「*」で複数個出力する

「*」の記号を使うと、タグを一度に複数個出力することができます。実はこれが一番便利かもしれません。

例えば、liタグを10個出力したい場合は、下記のように入力します。

li*10

出力結果は下記の通りです。

さらに、記号を組み合わせて使うこともでき、例えば下記のように入力することができます。

ul.list>li.list-item*3

出力結果は下記のようになります。

これは入力の手間を省けるだけでなく、ある程度コンポーネントの全体構造をイメージしながらコードを書くことができるので、時間短縮しながら整ったコードを書くことにも繋がります。

記号を組み合わせることによって大幅な作業効率アップにはつながらないかもしれませんが、知識として覚えておくと役立つ機会が出てくるはずです。

連番を出力する

idなどに連番を使用することがありますが、連番は下記のように入力することができます。

div#box-$*5

出力結果は下記のとおりです。

ちなみに、「$」を「$$」に変えると、下記のように0埋めされた連番を出力することができます。

連番を入力するのは地味に面倒なので、このショートカットは結構役立ちます。

EmmetでCSSを記述する

続いて、EmmetでCSSを記述する方法をご紹介していきます。

個人的にはCSSの方が効率化できる部分が多く、Sassなどと組み合わせることでコーディングの作業効率を大きく改善することができると思います。

基本的な使い方

EmmetでCSSの入力補完を行う場合は、基本的にプロパティ、もしくはプロパティと値を記述する場合に使用します。

例えば、下記のような入力補完が利用できます。

m margin: ;
p padding: ;
w100 width: 100px;
maw50p max-width: 50%;
fwb font-weight: bold;

「w100」と入力してTabかEnterを押すだけで、「width: 100px;」というコードを記述することができます。これだけでもコードの記述量を3分の1くらいに抑えられています。

何千行にもなるCSSのコードの記述にEmmetを使えば、コーディング時間に大きな差が生まれるはずです。

よく使うプロパティ

下記のプロパティはCSSを記述する時によく使用するものになるので、まずはここから覚えていくのがいいでしょう。

w width
h height
maw max-width
miw min-width
mah max-height
mih min-height
m margin
p padding
bd border
bg background
bxsh box-shadow

さらに、marginやpaddingなどは下記と組み合わせることでpadding-topやmargin-bottomなどのプロパティを指定することができます。

t top
b bottom
l left
r right

例えば、margin-topは「mt」、padding-leftは「pl」のようにそれぞれの頭文字を組み合わせれば任意のプロパティを指定することができます。

また、各プロパティの数値を指定して入力することも可能です。例えば、widthの場合は下記のように入力できます。

w10 width: 10px;
w10p width: 10%;
w10r width: 10rem;
w10e width: 10em;

フォント系

下記はフォント関連のスタイリングを記述する際に使用するプロパティです。

c color
ff font-family
fw font-weight
fz font-size

テキスト系

下記はテキスト関連のスタイリングを記述する際に使用するプロパティです。

ta text-align
td text-decoration
lh line-height
lts letter-spacing

Flex box関連

下記はFlexbox関連のスタイリングを記述する際に使用するプロパティです。

d display
d:f display: flex;
ac align-content
ai align-items
fxw flex-wrap
fxd flex-direction
jc justify-content
fxf flex-flow
ord order
fl flex
fxg flex-glow
fxsh flex-shrink
fxb flex-basis
as align-self

Flexboxのプロパティは結構種類が多いので、すべて使いこなせていない人も多いかもしれませんが、これさえ覚えておけば色々なレイアウトを作ることができるようになるので、ぜひFlexboxは扱えるようになりましょう。

まとめ

コーディング作業を効率よく行うことによって作業時間を短縮することができ、余った時間でクオリティアップやチューニングを行うことができます。

初めは慣れないかもしれませんが、慣れてしまうとスラスラ書けるようになるのでWebデザイナーを目指している方はぜひ早めに身に付けておきたいですね。

もっと抜本的にコードの記述を効率化したいという方はSassに挑戦してみるのがおすすめです。最初の環境構築が少し手間ですが、慣れるとCSSの記述をかなり効率化することができます。

おすすめの記事