【初心者必見】コーディング速度が確実に上がるEmmetの特徴や基本的な使い方をご紹介
投稿日：2021年12月10日
WEB制作でHTML・CSSコーディングを覚えると、次のステップとしてより効率よくコードを書いていきたいと思った事はありませんか？
そこで、今回はHTML・CSSをコーディングする際に、コーディング速度を各段に向上させてくれる「Emmet」をご紹介します！
～ 目次 ～
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></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) |
positionプロパティを使用する場合は以下のプロパティも必要になるので覚えておきましょう。
| 省略キー | プロパティ名 |
| t | top |
| r | right |
| b | bottom |
| l | left |
おまけ：Flexboxの入力方法
Flexboxは以下のように入力します。
| 省略キー | プロパティ名 |
| df | display: flex; |
| fxw | flex-wrap |
| fxd | flex-direction |
| fxf | flex-flow |
| jc | justify-content |
| ai | align-items |
| ord | order |
プロパティを連結してCSSを入力
CSSのプロパティは複数使用する事がほとんどです。Emmetでは複数のプロパティの入力を省略して入力する事も可能です。
まずは以下のように入力してみましょう。
.test{
w+h
}実行結果
.test{
width: ;
height: ;
}プロパティに値を入力して生成
widthプロパティやmarginプロパティなどの値を入力した状態で入力するには、以下のように入力します。
.test{
w100
}実行結果
.test{
width: 100px;
}おまけ：Emmetチートシート
今回ご紹介したEmmetの使い方以外に便利な省略した入力方法があり、それらが網羅されたチートシートがありますので、こちらも参考までに。
EmmetチートシートURL：https://docs.emmet.io/cheat-sheet/
まとめ
Emmetの基本的な使い方や特徴についてまとめてみましたが、いかがだったでしょうか？
Emmetは使い方を覚えるととても効率よくコーディングが可能になり、今までよりコーディング速度があがります。
また、Emmetに合わせてスニペットなどを駆使すると、よりコーディングの速度があがります。
Dreamweaverのスニペットについては以下の記事でご確認下さい。
ご興味のある方は、是非Emmetの導入を検討見て下さい！
この記事を書いた人
KNOWLEDGE BASEの中の人
2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。
