CSSセレクタのルールでHTMLを記述できるEmmetが凄い！
Emmet で高速 HTML/CSS コーディングしたかったからだ。
Emmet の凄さを見ればきっとあなたも使いたくなるだろう。
百聞は一見に如かずだ。
Emmet Documentationでその凄さを見てきてほしい。
Sublime Text 2 へのインストールは sergeche/emmet-sublime · GitHub から。
ここではHTML展開の基本をまとめたいと思う。
トリガー
タブまたはCtrl+Eで以下のような変換ができる。HTMLの展開
要素名
タグ名を入力してトリガー発動するだけ。タグ名でなくてもタグっぽく展開する。ネスト演算子
子: >
ul>li
<ul>
<li></li>
</ul>兄弟: +
div+div
<div></div> <div></div>
親: ^
ul>li^div
<ul>
<li></li>
</ul>
<div></div>複数回も可能div>ul>li^^div
<div>
<ul>
<li></li>
</ul>
</div>
<div></div>掛け算: *
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>グループ: ()
table>(tr>(th+td))*3
<table>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
</table>属性演算子
id と class
ul#nav>li.item
<ul id="nav">
<li class="item"></li>
</ul>複数クラスを指定することも可能div.btn-group>button.btn.btn-primary*2
<div class="btn-group">
<button class="btn btn-primary"></button>
<button class="btn btn-primary"></button>
</div>カスタム属性
img[src alt="プロフィール画像"]
<img src="" alt="プロフィール画像">
ナンバリング
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>ゼロパディングも設定可能ul>li.item$$*3
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>テキスト: {}
{詳しくは}+a{こちら}+{。}詳しくは<a href="">こちら</a>。テキストは親を変更しない。それによって意図しない結果が展開されることがある。
span{詳しくは}+a{こちら}+{。}<span>詳しくは</span><a href="">こちら</a>。span タグの中に a タグを書きたい場合は以下のように書く。
span>{詳しくは}+a{こちら}+{。}<span>詳しくは<a href="">こちら</a>。</span>
暗黙的なタグ名
タグ名を入力せずに展開するとその場所によってタグ名が自動的に指定される。
ブロック要素内: divインライン要素内: span
ul, ol 要素内: li
table, thead, tbody, tfoot 要素内: tr
tr 要素内: td
select, optgroup 要素内: option
ダミーテキスト: Lorem Ipsum
ダミーテキストとして “Lorem Ipsum” generator を使用することができる。
lorem または lipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quam dolor vitae blanditiis totam a nemo. Aperiam necessitatibus numquam cum eligendi molestias corporis sunt facere molestiae autem omnis magnam earum.
単語数を決めて展開することもできる。
lorem10
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptas.
上記の暗黙的なタグ名解決を利用することができる。
ul>lorem2.item*2
<ul>
<li class="item">Lorem ipsum.</li>
<li class="item">Dolores ratione.</li>
</ul>