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
index.html
<!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>
ul*2>li*3 または(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>.row*2>.col*4
<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>