Emmetをドットインストールで覚えてみたその２

（Emmetで検索するとでてくる画像なんだけど、なんだこれ？）

前回の続き

<a href="http://aipacommander.hatenablog.jp/entry/2015/03/08/210000">Emmetをドットインストールで覚えてみた - ITの隊長のブログ</a>aipacommander.hatenablog.jp

実践メモ & 復習

繰り返し

ul>li*3

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

$を付与して数値を並びに

ul>li.item$*3
<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
</ul>

p>span.test$*5
<p>
	<span class="test1"></span>
	<span class="test2"></span>
	<span class="test3"></span>
	<span class="test4"></span>
	<span class="test5"></span>
</p>

$を増やすと、桁数が増える

ul>li.item$$*3
<ul>
	<li class="item01"></li>
	<li class="item02"></li>
	<li class="item03"></li>
</ul>

p>span.test$$$$*3
<p>
	<span class="test0001"></span>
	<span class="test0002"></span>
	<span class="test0003"></span>
</p>

tableの作成はむっちゃ楽になりそうやね

table>tr*3>th+td*4
<table>
	<tr>
		<th></th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th></th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<th></th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

属性も与えられる

a[title="hellow"]
<a href="" title="hellow"></a>

button>input[type=hidden value=0]
<button><input type="hidden" value="0"></button>

フィルターって機能もある

<!-- 特殊文字（？）で出力 -->

p>lorem3|e
&lt;p&gt;Lorem ipsum dolor.&lt;/p&gt;


<!-- コメントを表示 -->
.item3>ul.cf>li*3^p.text>lorem3|c
<div class="item3">
	<ul class="cf">
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<!-- /.cf -->
	<p class="text">Lorem ipsum dolor.</p>
	<!-- /.text -->
</div>
<!-- /.item3 -->


<!-- シングルライン -->
ul>li*3|s
<ul><li></li><li></li><li></li></ul>

ul>(li>a[href="http://www.yahoo.co.jp"])*2|s
<ul><li><a href="http://www.yahoo.co.jp"></a></li><li><a href="http://www.yahoo.co.jp"></a></li></ul>


<!-- rubyやったことないからわからないはむる -->
html>body>#main>p*3|haml
%html
%body
	#main
		%p
		%p
		%p

ショートカットキーみたいなものある

<!--
  超絶に使いそうなジャンプ機能
  開いたタグで使うと、閉じタグに。
  閉じタグで使うと、開いたタグにジャンプする。
  長いソースではめっちゃ便利になりそう！
-->
<!-- shift+ctrl+t -->

<div><!-- この行にカーソルを合わせて、キーを押すと・・・ -->
	<div>
		<div>
			<p></p>
		</div>
	</div>
</div><!-- この行にジャンプする。 -->