ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

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

スポンサードリンク

http://www.flickr.com/photos/19953384@N00/13982218023
photo by San Diego Shooter


(Emmetで検索するとでてくる画像なんだけど、なんだこれ?)




前回の続き


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><!-- この行にジャンプする。 -->

まとめ

個人的にはショートカットキーのやつが気に入りました!


vimと連携してコーディングスピードアップだぜ!! これから練習してまいります。


全然関係ないんだけど。Emmetより、Zen Cordingのほうがかっこいい呼び名だと思うんだけど、どうかな?