はじめに
フロントは記述量が多くて大変！もうやだ！嫌い！覚えられない！
という方にぜひ知って頂きたいEmmetというものがあります。
Emmetを使えば作業効率が格段に上がります。知らなかった頃には戻れなくなります。
Emmetとは
入力補完プラグインです。HTMLやCSSを省略記法で記述して展開する事で楽に入力することができます。AWS Cloud9,VScodeではデフォルトで使用できます。
（エディタによってはプラグインの導入が必要です。）
どんなものか
例えば
こんなメニューを作るためのHTMLは
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><header><ulclass="nav"><liclass="nav__item"><ahref="#">menu</a></li><liclass="nav__item"><ahref="#">menu</a></li><liclass="nav__item"><ahref="#">menu</a></li></ul></header></body></html>こうなります。１からすべて記述するのはめんどくさいですよね。
Emmetを使うと同じコードが
!>header>ul.nav>li.nav__item*3>a[#]{menu}
こう書いてtabキーを押して展開するだけで出来上がります。早い！
ただ、Emmet自体も慣れるまでは大変だと思います。ここではよく使う記法をチートシートとしてご紹介します。
Emmetチートシート
矢印の左側を入力してtabを押すと展開されます。
HTML
まずは、タグ名 + tabだけでも使ってみてください。
閉じタグ忘れの表示崩れと戦うことがなくなるのでストレスフリーになりますよ。
タグ名（a,h1,divなど） → タグ（閉じタグ付き）
<ahref=""></a><h1></h1><div></div>! → 雛形
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body></body></html>link → スタイルシートのリンク
<linkrel="stylesheet"href="">◯◯.class名 → クラスがついたタグ
<divclass="class-name"></div>◯◯#id名 → idがついたタグ
<divid="id-name"></div>ul > li → 入れ子
<ul><li></li></ul>h1 + h2 → 隣接
<h1></h1><h2></h2>li*3 → 繰り返し
<li></li><li></li><li></li>["属性値 "] (a["url"]、img["img"]など) → 属性付きタグ
<ahref="url"></a><imgsrc="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:10px20px;値が２つ以上の時は -（ハイフン）で繋ぎます。
覚えると便利なCSS
m0-a → 中央寄せ
margin:0auto;df → 横並び
display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;db,di,dibもあります。ベンダープレフィックスまで一気に出ます。
tdn → テキストの装飾（リンクの下線など）を消す
text-decoration:none;lstn → 箇条書きの・を消す
list-style-type:none;tac → テキストの中央寄せ
text-align:center;bd+ → 線の値を一気に指定する
border:1pxsolid#000;psl,psa → ポジションを自由に決める（top,bottom,left,rightと組み合わせる）
position:relative;position:absolute;もっとEmmetを知りたい方へ
公式ページには、デモ動画や試し打ち、一覧チートシートがあります。
こちらでは省略記法の絞り込み検索ができます。
覚えようと思うと大変なので、まずは頭の片隅にEmmetを置いてコーディングしてみてください。
気づいたらスピードアップしてること間違いなしです。