はじめに

最近Web制作の案件を受注できたプログラミング初心者。
Emmetついて、まとめたので投稿しますわ😇

Emmetとは

HTMLやCSSの記述をサポートしてくるプラグインのこと。
独自の省略記法によるコーディング作業を効率化している。
Web制作のお仕事は出来上がった成果物に対して報酬が出るので、
時給という概念では捉えづらい🤔

作業時間が長くても報酬には比例しないため、作業時間を短縮できれば単価向上に繋がる。
そのため、Emmetを使いこなすことは重要かと考える👍

HTMLの雛形

!
↓
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

単体

div
↓
<div></div>

要素を入れ子にする

div>p
↓
<div>
  <p></p>
</div>

要素を複数作成する

li*5
↓
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

要素を同階層に作成する

header>h1+p
↓
<header>
  <h1></h1>
  <p></p>
</header>

idとclass

☆id

#box
↓
<div id="box"></div>

☆class

.p
↓
<div class="p"></div>

p[class=box]
↓
<p class="box"></p>

★[]外で指定しなければ自動的にdivタグとなる。

混ぜて使用してみた

ul>(li[class=box$]>a{たくみの分身$})*5
↓
<ul>
  <li class="box1"><a href="">たくみの分身1</a></li>
  <li class="box2"><a href="">たくみの分身2</a></li>
  <li class="box3"><a href="">たくみの分身3</a></li>
  <li class="box4"><a href="">たくみの分身4</a></li>
  <li class="box5"><a href="">たくみの分身5</a></li>
</ul>

★連番で名前をつける場合は「$」を使用する。
　テキストの挿入には{}を使用する。

CSSの記述

.container{
  w70+h70+m70e+p70r
}
↓
.container{
  width: 70px;
  height: 70px;
  margin: 70em;
  padding: 70rem;
}

参考

・1分を節約する為にEmmetのHTMLとCSS記述方法を学び直し&まとめシートを作る。
　https://qiita.com/tanimoto-hikari/items/8848445babdfe3586592
・Emmetでマークアップを効率化しよう（HTML&カスタマイズ編）
　https://www.granfairs.com/blog/staff/efficiency-by-emmet-01

おわりに

軽く目を通す
⇅
使う時が来たら思い出して使用する
を繰り返して覚えていきました。

また、Emmetをタイピングアプリの感覚で遊べるツールがあったので
紹介しておきます🙌
https://emmpra.com/

【効率化】Emmetの使い方