今回は「Emmet」についてまとめていこうと思います。

知らず知らずのうちに使ったことがある人は多いと思いますが、用語まで詳しく理解している人は少ないかなと思ったので紹介していきます。

Emmetはコーディングする上でかなり役に立つツールなので、是非この機会に覚えてしまいましょう！

◎Emmetとは？

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

基本的にどのテキストエディタでもEmmetのプラグインを追加することができますが、Visual Studio Code（VSCode）であればデフォルトでEmmetを利用することができるようになっているため、特別な設定を行わなくてもEmmetでコードを記述することができます。
この記事では、VSCodeでEmmetを使うことを想定した内容となっています。基本的にどのテキストエディタでも入力方法は同じですが、場合によって違う箇所があるかもしれないため、予めご了承ください。

◎Emmetを使うメリットとは？

Emmetを使うメリットは

①タイピングが早くなる
②アルファベットの記述ミスがなくなる

があります。

とにかくEmmetを使うことで効率よくコーディングをすることができます！

◎よく使われるEmmetの紹介

□HTML編

☑︎HTMLの雛形（ひながた）のテンプレ

HTMLではコーディングを始める際に決まった雛形を書く必要があります。
（雛形には文字の種類やCSSファイルを読み込んだり、実際にユーザーに見えない設定をしていきます）

そこで

と書いてTabかEnterを押すと

<!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>

このように一気に省略して記述することができます！

☑︎タグについて

HTMLを記述していくと、「div」や「p」タグを記述する機会が多いと思います。
その時に毎回「<」や「>」を打ったりすると大変ですし、面倒ですよね。

しかしEmmetを使えばもっと簡単にコーディングをすることができます！

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

h1

このように書きます。

そして出力されるコードが

<h1><h1>

このようになります。

さらに

<div class="container"><div>

とdivとclassを一気に記述したい場合は

div.container

と書いてTabかEnterを押すと省略して記述することができます。

1つのタグの記述を省略することはそこまで時短にならないですが、仕事でたくさんコーディングするとなるとかなり効率的にコーディングすることができるのでおすすめです。

☑︎記号について

HTMLの入れ子もEmmetを使うことで簡単に書けちゃいます！

例えばulタグの中にliを入れたいとすると、

ul>li

と書いて、TabかEnterを押すと

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

このように簡単に入れ子構造を作ることができます。

さらにulタグの中にliタグを3つ入れたいとすると

ul>li*3

のようにliタグを増やしたい数だけ「＊」の横に数値を書くと

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

とliタグを複数含めた入れ子構造を作ることができます。

「>」や「＊」は入れ子でよく使うので覚えておくと良いかなと思います！

□CSS編

CSSを記述する際にもEmmetを使うことができます。

たくさんあるので全てを書くことはできませんが、

・サイズ
・フォント
・Flex box

の3種類に分解していくつか紹介していきます！

☑︎サイズ

widthの場合

前
wd

後
width: ;

widthが100％の場合

前
w100％

後
width: 100%;

paddingが10pxの場合

前
p10px

後
padding: 10px;

このようにプロバティの頭文字と数字を組み合わせることで省略して記述することができます。

☑︎フォント

fontサイズが15pxの場合

前
fz15px

後
font-size: 15px;

fontの種類がboldの場合

前
fw:b

後
font-weight: bold;

☑︎Flex box

displayがflexの場合

前
df

後
display: flex;

displayがblockの場合

前
db

後
display: block;

◎最後に

以上が「Emmet」についての紹介です。

これ以外にも調べるとEmmetについてたくさん出てくるので、是非気になる方は調べてみてください！

最後まで読んで頂きありがとうございました。

引用元
https://webdesign-trends.net/entry/10748