【コーディングが爆速に】HTML/CSSのEmmet入門

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

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

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

#どんなものか
例えば
<img width="414" alt="スクリーンショット 2020-06-07 15.13.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156508/c5f17fea-12db-9462-e44d-bd66060665f3.png">
こんなメニューを作るためのHTMLは

```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を使うと同じコードが

```emmet
!>header>ul.nav>li.nav__item*3>a[#]{menu}
```
こう書いて**tabキーを押して展開する**だけで出来上がります。早い！
ただ、Emmet自体も慣れるまでは大変だと思います。ここではよく使う記法をチートシートとしてご紹介します。

#Emmetチートシート
[チートシート](https://docs.emmet.io/cheat-sheet/)から、よく使うものを抜粋して以下に紹介しています。

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

```html
<p></p>
```


##HTML

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

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

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

**!**　→　雛形

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

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

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

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

```html
<div class="class-name"></div>
```
※divタグは**.class名**だけで作成できます。

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

```html
<div id="id-name"></div>
```
※divタグは**.id名**だけで作成できます。

ul **>** li　→　入れ子

```html
<ul>
  <li></li>
</ul>
```

h1 **+** h2　→　隣接

```html
<h1></h1>
<h2></h2>
```

li***3**　→　繰り返し

```html
<li></li>
<li></li>
<li></li>
```

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

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

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

```html
<h1>タイトル</h1>
```


<br>

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

```emmet
!>header>ul.nav>li.nav__item*3>a[#]{menu}
```
これでできちゃいます。めちゃくちゃ便利です。

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

**c#fff** → 文字の色

```css
color: #fff;
```
**bg** → 背景色

```css
background: #000;
```
色の初期値は#000(black）

**w100** → 横幅

```css
width: 100px;
```
デフォルトの単位はpx。px以外の単位は **w100%** のように入力する

**fz10** → フォントの大きさ

```css
font-size: 10px;
```
⚠️fsだとfont-styleになります！

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

```css
padding: 10px 20px;
```
値が２つ以上の時は -（ハイフン）で繋ぎます。

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

```css
margin: 0 auto;
```

**df**　→　横並び

```css
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
```
※ `db → display: block;`なども使えます。[ベンダープレフィックス](http://www.htmq.com/csskihon/603.shtml)（-webkit-など）も一気に出ます。

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

```css
 text-decoration: none;
```

**lstn**　→　箇条書きの・を消す

```css
list-style-type: none;
```

**tac**　→　テキストの中央寄せ

```css
text-align: center;
```

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

```css
border: 1px solid #000;
```

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

```css
position: relative;
position: absolute;
```

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

[公式ページ](https://docs.emmet.io/)には、デモ動画や試し打ち、[一覧チートシート](https://docs.emmet.io/cheat-sheet/)があります。

[こちら](https://www.codingstock.jp/emmet-cheatsheets/) では省略記法の絞り込み検索ができます。

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