#はじめに
最近Web制作の案件を受注できたプログラミング初心者。
Emmetついて、まとめたので投稿しますわ😇
##目次
Emmetとは
HTMLの雛形
単体
要素を入れ子にする
要素を複数作成する
要素を同階層に作成する
idとclass
混ぜて使用してみた
CSSの記述
##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/