はじめに
フロントは記述量が多くて大変！もうやだ！嫌い！覚えられない！
という方にぜひ知って頂きたい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を置いてコーディングしてみてください。
気づいたらスピードアップしてること間違いなしです。