##Emmetとは
Emmetは、HTMLやCSSを省略記法であり、これらを簡潔に記述するためのツールです。
もともとはZen-Codingというものだったらしく、その次期バージョンがEmmetです。
ちなみにVSCodeの場合は、標準でサポートされているので、改めてインストールする必要はありません。（初期設定の状態でもEmmetが使えます。）
Emmetを使用することで、タイプ数をかなり削減できるため、省略記法を習得すれば、かなりコーディング効率を上げることができます。
##Emmetの使用方法(VScode)
Emmetは、特定の記述を入力した後に、Tabキーを押すだけで展開することができます。
実際にエディタを開いて、html:5また!と記述し、その後にTabキーを押してみてください。
!
そうすると、以下のようにHTMLの全体構造を一気に記述してくれます。めちゃくちゃ便利ですよね！！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
ただ、初期設定のままだと、Tabキーを押しても実行されないときがあったり、<html lang="en">になっており、毎回「lang="ja"」に変更しなければならないため、少しだけ設定を追加します。
##Emmetの設定(VScode)
-
Emmetの設定するには、まずメニューから「Code→基本設定→設定」から設定画面にアクセス。
-
検索窓で「Emmet」と検索して、「Emmet Preferences」を探す
-
「Emmet Preferences」の中にある「settings.jsonで編集」をクリックして、ファイルを開く
-
ファイルを開くことができたら、以下のように、
"emmet.triggerExpansionOnTab": true,
"emmet.variables": {"lang" : "ja"},
を追加
１つ目が、Tabキーを押した時に、Emmetが展開されるようにする設定で、２つ目がデフォルトの言語設定を日本語にする設定です。
※１つ目の項目については、もしすでにあるのであれば、追加しなくても問題ありません。
##Emmetでよく使用する省略形【HTML編】
以下に例を載せます。
###HTMLの雛形
こちらについてはすでに記載したとおり、html:5また!と記述し、その後にTabキーを押すと展開されます。
###通常のHTMLタグ
<!-- 「h1+Tabキー」 -->
<h1></h1>
<!-- 「a+Tabキー」 -->
<a href=""></a>
<!-- 「img+Tabキー」 -->
<img src="" alt="">
<!-- 「div+Tabキー」 -->
<div></div>
###classやidを付けて展開する
タグにクラス名やid名をつけたいとき、以下のように「.」や「#」を付けて展開すると、classやidを付加した状態で展開することができます。
<!-- 「h1.title+Tabキー」 -->
<h1 class="title"></h1>
<!-- 「img.picture+Tabキー」 -->
<img src="" alt="" class="picture">
<!-- 「div#main+Tabキー」 -->
<div id="main"></div>
HTMLを何も指定しないでclassかidだけを付けて展開すると自動的にdivタグになります。
例えば、「.title＋Tabキー」で展開すると<div class="title"></div>になり、「#main＋Tabキー」で展開すると、<div id="main"></div>となります。
###複数のHTMLタグを入れ子で展開する
複数のタグを入れ子構造で記述したい時、以下のように、複数のHTMLタグを「>」で繋ぐことによって、入れ子構造を実現することができます。
<!-- 「header>nav+Tabキー」 -->
<header>
<nav></nav>
</header>
###複数のHTMLタグを続けて展開する
入れ子ではなく、HTMLタグを隣接する形で続けて記述したい場合は、複数のHTMLタグを「+」で繋ぎます。
<!-- 「h1+h2+img+p+Tabキー」 -->
<h1></h1>
<h2></h2>
<img src="" alt="">
<p></p>
###繰り返しの展開
例えば、li要素でリストを作るときのように、繰り返しで同じタグを記述したい場合があります。
このような時は「ul>li*N」のように、Nの部分に数字を入れると、その数だけ繰り返しで展開することができます。
<!-- 「ul>li*3+Tabキー」 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
##Emmetでよく使用する省略形【CSS編】
#####1単語のプロパティの場合、基本は頭文字
| Emmet記法 | 結果 |
|---|---|
| w | width:; |
| h | height:; |
| m | magin:; |
| p | padding:; |
| c | color: 000; |
| t | top |
#####2単語以上の場合や1文字の省略記法と重複する場合は2文字以上となる
| Emmet記法 | 結果 |
|---|---|
| ff | font-family:; |
| lh | line-height:; |
| ta | text-align:; |
| bd | border:; |
| fz | font-size:; |
| bgc | background-color:; |
以下に例を載せます。
<!-- w230+Tabキー -->
width: 230px;
<!-- h20p+Tabキー -->
height: 20%;
<!-- d:b+Tabキー -->
display: block;
<!-- c#c+Tabキー -->
color: #ccc;
「w230」で展開すると「width: 230px」になります。このように、単位を指定せずに数字だけを入力すると、単位は「px」になります。
「h20p」のように、単位を入れて展開をすると「height: 20%」となり、指定した単位を記述することができます。
つまり、
単位の記述がない場合：px
p：%
e：em
r：rem
vw：vw
となります。
また、marginやpadding、borderのように、複数の値を入力する必要のあるプロパティは「-」で数値と数値の間を区切ると、複数の数値を入力することができます。
今回、取り上げたEmmentの省略記法をマスターすれば、かなりコーディング時間の効率化に繋がりますね！
私も使いこなせるようにしていきます^^