#はじめに
フロントは記述量が多くて大変！もうやだ！嫌い！覚えられない！
という方にぜひ知って頂きたいEmmetというものがあります。

Emmetを使えば作業効率が格段に上がります。知らなかった頃には戻れなくなります。

#Emmetとは
入力補完プラグインです。HTMLやCSSを省略記法で記述して展開する事で楽に入力することができます。AWS Cloud9,VScodeではデフォルトで使用できます。
（エディタによってはプラグインの導入が必要です。）

#どんなものか
例えば

こんなメニューを作るためのHTMLは

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>
    <ul class="nav">
      <li class="nav__item"><a href="#">menu</a></li>
      <li class="nav__item"><a href="#">menu</a></li>
      <li class="nav__item"><a href="#">menu</a></li>
    </ul>
  </header>
</body>
</html>

こうなります。１からすべて記述するのはめんどくさいですよね。

Emmetを使うと同じコードが

!>header>ul.nav>li.nav__item*3>a[#]{menu}

こう書いてtabキーを押して展開するだけで出来上がります。早い！
ただ、Emmet自体も慣れるまでは大変だと思います。ここではよく使う記法をチートシートとしてご紹介します。

#Emmetチートシート
チートシートから、よく使うものを抜粋して以下に紹介しています。

##使い方
①矢印の左側を入力する
例） p → pタグ
② tabキーを押す（※設定によっては異なる場合があります）
③コードブロックの内容が展開される
例）

<p></p>

##HTML

まずは、タグ名　+　tabだけでも使ってみてください。
閉じタグ忘れの表示崩れと戦うことがなくなるのでストレスフリーになりますよ。

タグ名（a,h1,divなど）　→　タグ（閉じタグ付き）

<a href=""></a>
<h1></h1>
<div></div>

!　→　雛形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

link　→　スタイルシートのリンク

<link rel="stylesheet" href="">

◯◯.class名　→　クラスがついたタグ

<div class="class-name"></div>

※divタグは**.class名**だけで作成できます。

◯◯#id名　→　idがついたタグ

<div id="id-name"></div>

※divタグは**.id名**だけで作成できます。

ul > li　→　入れ子

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

h1 + h2　→　隣接

<h1></h1>
<h2></h2>

li*3　→　繰り返し

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

[" 属性値 "]　(a["url"]、img["img"]など)　→　属性付きタグ

<a href="url"></a>
<img src="img" alt="">

{ 文字 }　（h1{タイトル}など)

<h1>タイトル</h1>

そしてこれらは組み合わせて記述できます。慣れたら15行くらいのメニューのマークアップは

!>header>ul.nav>li.nav__item*3>a[#]{menu}

これでできちゃいます。めちゃくちゃ便利です。

##CSS
プロパティの頭文字 + 値 + tabで記述します。
;の入力忘れも防げるので、基本だけ抑えたら試しながら覚えていくのがおすすめです。

c#fff → 文字の色

color: #fff;

bg → 背景色

background: #000;

色の初期値は#000(black）

w100 → 横幅

width: 100px;

デフォルトの単位はpx。px以外の単位は w100% のように入力する

fz10 → フォントの大きさ

font-size: 10px;

⚠️fsだとfont-styleになります！

p10-20 → padding(要素内の余白）上下10px, 左右20px

padding: 10px 20px;

値が２つ以上の時は -（ハイフン）で繋ぎます。

###覚えると便利なCSS
m0-a　→　中央寄せ

margin: 0 auto;

df　→　横並び

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

※ db → display: block;なども使えます。ベンダープレフィックス（-webkit-など）も一気に出ます。

tdn　→　テキストの装飾（リンクの下線など）を消す

 text-decoration: none;

lstn　→　箇条書きの・を消す

list-style-type: none;

tac　→　テキストの中央寄せ

text-align: center;

bd+　→　線の値を一気に指定する

border: 1px solid #000;

psl,psa　→　ポジションを自由に決める（top,bottom,left,rightと組み合わせる）

position: relative;
position: absolute;

#もっとEmmetを知りたい方へ

公式ページには、デモ動画や試し打ち、一覧チートシートがあります。

こちらでは省略記法の絞り込み検索ができます。

覚えようと思うと大変なので、まずは頭の片隅にEmmetを置いてコーディングしてみてください。
気づいたらスピードアップしてること間違いなしです。