ページ

2013/01/27

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

CSSセレクタのルールでHTMLを記述できるEmmetが凄い!

Sublime Text 2 を使い始めた理由の半分が
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>

次回

次回はCSS編を予定。HTMLも凄いけどCSSも凄い!使いこなして高速コーディングしたい。