【初心者必見】コーディング速度が確実に上がるEmmetの特徴や基本的な使い方をご紹介

投稿日：2021年12月10日

WEB制作でHTML・CSSコーディングを覚えると、次のステップとしてより効率よくコードを書いていきたいと思った事はありませんか？

そこで、今回はHTML・CSSをコーディングする際に、コーディング速度を各段に向上させてくれる「Emmet」をご紹介します！

～目次～

1 Emmetとは
2 Emmetのインストール
- 2.1 コンソールを開き、コードを入力
- 2.2 Package ControlでEmmetをインストール
3 Emmet基本的な使い方
- 3.1 EmmetでHTMLを入力
- 3.2 !を入力すると、HTMLのフォーマットが生成されます
4 EmmetでCSSを入力
- 4.1 プロパティを連結してCSSを入力
- 4.2 プロパティに値を入力して生成
5 おまけ：Emmetチートシート
6 まとめ

Emmetとは

Emmetとは元々「Zen-Cording」と呼ばれていて、HMTLやCSSを省略して記述する事によってコーディングの速度を上げるプラグインになります。

現在ではEmmetとして名前が変更されています。

Emmet公式サイト：Emmet

Emmetのインストール

Dreamweaverであれば、Emmetが標準でインストールされているため、新たにインストールする必要はありません。

ですが、Sublime TextやVS Codeなどではインストールが必要となります。まずは、Emmetのインストールを行います。

※この記事ではSublime TextでのEmmetのインストールをご紹介します。

コンソールを開き、コードを入力

まずは Sublime Text を立ち上げ「View」を開き「Show Console」をクリックしコンソールを開きます。
ショートカットキー「Ctrl+`」で開く事もできます。

画面の下部にコンソールが開きますので、以下のコードを入力してEnterをクリックします。

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Package ControlでEmmetをインストール

次に「Ctrl+Shift+P」で入力項目が開き、その中に「Package Control:Install Pacage」という項目がりますので、選択します。もしくは「Package Control:Install Pacage」の文字をコピーしてそのまま入力して下さい。

入力すると再度入力項目が開きますので、「Emmet」と入力してEnterをクリックします。

これでEmmetのインストールが完了です。

念のため一度Sublime Textを閉じ、再度立ち上げて確認してみましょう。

Emmet基本的な使い方

Emmetは先述した通り、省略したコードの記述になります。ここでは、基本的なEmmetの使い方をご紹介していきます。

EmmetでHTMLを入力

まずはpタグを入力してみましょう。
pという文字を入力してTabキーもしくはCtrl+Eキーを押します。

実行結果

<p></p>

次にリストタグを入力してみましょう。まずは以下のように入力し、 TabキーもしくはCtrl+Eキーを押します。

ul>li

実行結果

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

リストタグは常に入れ子の状態で使用します。こんな時にはulとliの間に「>」を入れると入れ子の状態でタグが生成されます。また、次は応用でliタグを5個入力してみます。

ul>li*5

実行結果

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

*と数字を入れると、入力した数のliタグが生成されます。

では次に属性も付けて入力してみましょう。以下のように入力します。

script:src

実行結果

<script src=""></script>

属性を入力するには「:」を付けると属性が入力できます。ちなみに、linkタグやaタグは「:」は使用しなくてもhref属性が入っているので必要ありません。

次に、近接したタグを入力してみましょう。以下のように入力します。

div+p

実行結果

<div></div>
<p></p>

タグとタグの間に「+」を入れると近接したタグとして生成されます。

次は少し応用で入れ子にしたタグと近接タグを使って親要素を入力してみましょう。

div>ul>li*5^section

実行結果

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <section></section>
</div>

「^」を入れるとタグの親要素にタグを生成する事ができます。ちなみに「^」を2つ入れるとさらに親の階層にタグを生成します。

では次は、id属性やクラス属性をいれてみましょう。

div#container>p.menu

実行結果

<div id="container">
	<p class="menu"></p>
</div>

id属性は「#」を、クラス属性は「.」を入力すると使用できます。

!を入力すると、HTMLのフォーマットが生成されます

!を入力すると、ドキュメント宣言とhtmlタグ、headタグ、bodyタグなど入れ子で入った状態で生成されます。

新規でHTMLをコーディングする際は是非使ってみましょう。

実行結果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

EmmetでCSSを入力

次にCSSでの基本的な使い方をご紹介していきます。

CSSでは基本的にプロパティの入力がほとんどになります。まずは基本的なプロパティの省略した入力を覚えていきましょう。

省略キー	プロパティ名
w	width
h	height
maw	max-width
mah	max-height
miw	min-width
mih	min-height
bg	background
m	margin
p	padding
bd	border
d	display
po	position: relative;(初期値はrelative)