Emmetチートシート
https://docs.emmet.io/cheat-sheet/
ドットインストールEmmet
https://dotinstall.com/lessons/basic_emmet_v3/50301
1.Emmetを使ってみよう
2.HTMLタグの展開をしてみよう
3.タグの属性を指定しよう
4.複数の要素を展開
5.階層を表現してみよう
6.暗黙的な補完機能を活用しよう
7.formに関するタグを展開してみよう
#01Emmetを使ってみよう
##! または html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
#02HTMLタグの展開をしてみよう
##div
<div></div>
##a
<a href="リンク先">リンク名</a>
#03 タグの属性を指定してみよう
##div#taget
<div id="target"></div>
##div.container
divにclassをつける
<div class="container"></div>
##div#reset.btn.disabled
divにidとclassをつける
<div id="reset" class="btn disabled"></div>
##a[title="My Site"]
aにtitleをつける
<a href="" title="My Site"></a>
##div[date-id="5" title="My Site"]
divにidとtitleをつける
<div date-id="5" title="My Site"></div>
#04 複数の要素を展開してみよう
##p*3
pタグ3つ
<p></p>
<p></p>
<p></p>
##div.item*10
divタグ10個
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
##div.item$*5
連番にしたい場合
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
##div.item$$*5
01,02のように0のついた連番にしたい時
<div class="item01"></div>
<div class="item02"></div>
<div class="item03"></div>
<div class="item04"></div>
<div class="item05"></div>
##div.item$@3*5
中途半端な数字から連番にしたい時
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
##main>section*3
にsectionが3つ欲しい時<main>
<section></section>
<section></section>
<section></section>
</main>
#階層を表現してみよう
##main>section*3+div.btn
同階層の要素を表現したい場合
<main>
<section></section>
<section></section>
<section></section>
<div class="btn"></div>
</main>
##main>section*3^footer
１つ上の階層に戻りたい時
<main>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
##ul>li*2
<ul>
<li></li>
<li></li>
</ul>
##ul2>li3 または(ul>li*3)*2
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
#06暗黙的な補足機能を活用しよう
##.container
<div class="container"></div>
##ul>.item*5
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
##table>.row2>.col4
<table>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
</tr>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
<td class="col"></td>
</tr>
</table>
#formに関するタグを展開してみよう
##form:post
post
<form action="" method="post"></form>
##input:t
<input type="text" name="" id="">
##input:r
radioボタン
<input type="radio" name="" id="">
##input:c
checkbox
<input type="checkbox" name="" id="">
##select>[value="items$"]*5
<select name="" id="">
<option value="items1"></option>
<option value="items2"></option>
<option value="items3"></option>
<option value="items4"></option>
<option value="items5"></option>
</select>