Sublime Text2 Wiki*

HTML、CSSのコーディングを強力に支援するプラグイン。
かつてはZen-Codingと呼ばれていたが、Emmetに名称が変更された。
どんなことができるのかは、デモ動画のURL先を見てもらうと分かりやすい。

公式サイト：http://emmet.io/blog/emmet-v1/
デモ動画：http://docs.emmet.io/

目次
基本操作
HTMLの基本的な文法
CSSの基本的な文法
Emmetの新機能
- 上の階層に戻る機能の追加。
- ダミーテキストの生成
言語を日本語にする
既に打ち込まれている文字をタグで囲みたい場合
- ショートカットキーの変更
チートシート

基本操作

コードを短縮形で入力。
打ち終わった箇所でCtrl+Eを押して展開する。初期設定ではTabキーでも可能。

HTMLの基本的な文法

p

タグを打って展開する。

<p></p>

link

打つタグによっては中の属性値も自動的に補完する。

<link rel="stylesheet" href="">

!

HTML5の基本的な骨組みを展開したい時は「!」と打つだけでよい。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

nav>ul>li

入れ子にする場合は「>」を使用する。インデントも自動でかかる。

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

div+p+bq

同じ階層で並べる場合は「+」を使用する。

<div></div>
<p></p>
<blockquote></blockquote>

ul>li*5

「*」を使うと、その直後に入力した数字分だけ、そのタグを連続入力する。

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

ul>li*3>a

「*」を指定した階層の下に入力されたタグも入れ子状態で連続入力される。

<ul>
	<li><ａ href=""></a></li>
	<li><ａ href=""></a></li>
	<li><ａ href=""></a></li>
</ul>

div>(header>ul>li*2>a)+footer>p

カッコで囲うことでグループ化する。
例の場合、囲った部分はheaderタグ内に含まれるが、カッコ外のfooterタグはheaderタグと同一階層に展開される。

<div>
    <header>
        <ul>
            <li><ａ href=""></a></li>
            <li><ａ href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

(div>dl>(dt+dd)*3)+footer>p

カッコと「*」を組み合わせると、カッコ内のタグを指定した回数だけ繰り返すこともできる。

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

#header

IDを指定する時はCSSのように「#ID名」で指定する。

<div id="header"></div>

.title

クラスを指定する時はCSSのように「.クラス名」で指定する。

<div class="title"></div>

em>.class

タグ名を省略してクラス名やID名のみを指定した場合は、ひとつ上の階層にあるタグによって、展開するタグを自動判別する。

<em><span class="class"></span></em>

ul>.class

<ul>
    <li class="class"></li>
</ul>

table>.row>.col

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

form#search.wide

IDとクラスを同時に指定する場合は、上記の指定を繋げて書くだけで良い。

<form id="search" class="wide"></form>

p.class1.class2.class3

同様に繋げて書くことで、クラスを複数指定することができる。

<p class="class1 class2 class3"></p>

p[title="Hello world"]

属性を指定する場合は、[]で囲んで書く。値の内部に半角スペースが含まれる場合、値全体（例でいうとHello world）を""で囲む必要がある。

<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

複数の属性を指定する場合は、半角スペースで区切って指定する。

<td rowspan="2" colspan="3" title=""></td>

[a='value1' b="value2"]

タグ名がなく[]のみ記述した場合は、基本的にdivタグになる。適当な値でも文法が間違ってなければ問題なく展開される。値を'’で囲っても""で囲っても、展開結果は変わらない。

<div a="value1" b="value2"></div>

a{Click me}

テキストを書きたい場合は{}で囲む。

<ａ href="">Click me</a>

p>{Click }+a{here}+{ to continue}

テキストの一部分にリンクを貼りたい場合の例。

<p>Click <ａ href="">here</a> to continue</p>

ol+

ol>liと同様に展開される。

<ol>
    <li></li>
</ol>

ul+

ul>liと同様。

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

dl+

dl>dt+ddと同様。

<dl>
    <dt></dt>
    <dd></dd>
</dl>

map+

map>areaと同様。

<map name="">
    <area shape="" coords="" href="" alt="" />
</map>

table+

table>tr>tdと同様。

<table>
    <tr>
        <td></td>
    </tr>
</table>

colgroup+ または、colg+

colgroup>colと同様。

<colgroup>
    <col />
</colgroup>

tr+

tr>tdと同様。

<tr>
    <td></td>
</tr>

select+

select>optionと同様。

<select name="" id="">
    <option value=""></option>
</select>

optgroup+, optg+

optgroup>optionと同様。

<optgroup>
    <option value=""></option>
</optgroup>

CSSの基本的な文法

基本的には、CSSのプロパティと値の頭文字や先頭2～3文字を入力して展開するという形になっている。

展開前と展開後が1対1で対応しているわけではなく、展開前の表記は複数の形での記述が可能。
「overflow:hidden」と展開したい場合は、「ov:h」「ov-h」、「ovh」、「oh」のいずれでも良い。

定義されていない未知のプロパティでも、「foo-bar」と入力すれば「foo-bar: ;」という形で展開される。

c#fff

プロパティと値を書いて展開する。

color:#fff;

m0+p0 または m0>p0

複数のプロパティを続けて書きたい場合は、+か>を使用する。

margin: 0;
padding: 0;

bd+

ボーダー指定の基本形である1pxの黒い直線が展開される。

border:1px solid #000;

bg+

背景画像指定の基本形が展開される。

background: #fff url() 0 0 no-repeat;

-transition

ベンダープレフィックスを付けたい場合は、先頭に「-」を追加する。

-webkit-transition: ;
-moz-transition: ;
-ms-transition: ;
-o-transition: ;
transition: ;

Emmetの新機能

上の階層に戻る機能の追加。

「^」で1階層上に戻れるようになった。
入力した数だけ上の階層に戻るため、2階層上がる場合は「^^」と入力すればよい。

header>nav^.logo
　　　↓
<header>
	<nav></nav>
</header>
<div class="logo"></div>

ダミーテキストの生成

loremかlipsumを入力して展開するとダミーテキストを生成できる。
文字の後ろに数字を入力することで、単語数を調節できる（最低8単語）。

p>lorem
　　↓
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Vel cum accusantium distinctio optio consequatur at numquam sit culpa atque velit.
Nobis, debitis fugiat sequi distinctio neque in aspernatur quod enim.</p>

p>lorem8
　　↓
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

言語を日本語にする

例えば、「html:5」と入力して展開すると、<html lang="en">と、lang属性が英語になっている。
これを「lang="ja"」にするには、設定を変更する。

「基本設定」から「Package Settings」→「Emmet」→「Setting - User」を選び、ユーザー設定ファイルを開く。
そこに下記のコードを打ち込む（※円記号はエディタ画面ではバックスラッシュとして表示される）。

{
	"snippets": {
		"variables": {
			"lang": "ja",
			"locale": "ja-JP",
			"charset": "UTF-8",
			"indentation": "\t",
			"newline": "\n"
		}
	}
}

もしくは、Packageフォルダから、「Emmet」→「emmet」→「snippets.json」と辿ってファイルを開き、2行目
からのvariablesの部分を以下のように書き換える。書き換えるのはlangとlocaleの部分だけでよい。

{
	"variables": {
		"lang": "ja",
		"locale": "ja-JP",
		"charset": "UTF-8",
		"indentation": "\t",
		"newline": "\n"
	},

既に打ち込まれている文字をタグで囲みたい場合

文字を選択後、Ctrl+Alt+Enterキーを押すと、タグの挿入フォームが出てくる。
そこにEmmetの文法でタグを記述すれば、その通りに挿入される。

リスト1
リスト2
リスト3

を

のようにしたい場合、フォームに「ul>li*」と打ち込むと、行の数だけliタグで囲んでくれる。
さらにaタグも追加したい場合は、「ul>li*>a」でよい。

ショートカットキーの変更

タグの挿入のショートカットキーを変更したい場合は、「キーバインド－ユーザ」に以下の記述をする。
（ctrl+shift+aの部分は任意のコマンドを入力する）

[
    { "keys": ["ctrl+shift+a"], "command": "expand_as_you_type" }
]

チートシート

Emmet公式

Emmet

目次