Emmetのメリット
- 省略記法でHTMLやCSSを書くことができるため入力する文字数が少なくて済み、時間の短縮化やミス防止
- 記述しなくても必要なタグが保管される(暗黙のタグ補完)
- 省略記法が正確でなくても展開できる(Fuzzy Search)
Emmetを使う準備
| エディタ | プラグイン要/不要 |
|---|---|
| VS Code | 不要 |
| Brackets | 必要 |
| Atom | 必要 |
Expand Abbreviation
省略して書いたものを展開する機能です。
HTML展開のサンプル
# box>ul>li*3>a
↓ 展開
<div id="box">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
CSS展開のサンプル
fl:l+d:i+c
↓展開
float: left;
display: inline;
color: #000;
HTMLの省略記法(抜粋)
| 記号 | 内容 | 書式 |
|---|---|---|
| 無し | 要素名<>の省略 | 無し |
| # | ID名の指定 | div#idName |
| . | class名の指定 | div.className |
| > | 入れ子 | div>p |
| + | 同階層に展開 | div+p |
| ^ | 一階層上に展開 | div>p^ul |
| * | 要素を複数展開 | li*3 |
| {} | テキストの挿入 | p{テキスト} |
| $ | 連番 | li.item-$*3 |
| [] | 属性の指定 | a[href="/"] |
| () | グループ化 | |
| ! | HTMLの雛形 | 単独で! |
| ! | important | 末尾に! |
暗黙のタグ補完
- ulとolの子にliを補完
- tableとtbody,とtheadとtfootの子にtrを補完
- trの子にtdを補完
- selectとoptgroupの子にoptionを補完
CSSプロパティの省略記法(抜粋)
| 省略 | 展開 |
|---|---|
| tac | text-align:center; |
| db | display:block; |
| m:a | margin:auto; |
| tdn | text-decoration:none; |
| posl | position:relative; |
| poa | position:absolute; |
| pf | position:fixed; |
| w100 | width:100px; |
| fsz12 | font-size:12px; |
| fsz12pt | font-size:12px; |
| bg+ | background:#fff url() 0 0 no-repeat; |
| f+ | font:1em Arial,sans-serif; |
| bd+ | border:1px solid #000; |
| p5p | padding:5%; |
| m7e | margin:7em; |
| w100x | width:100ex; |
| h50 | height:50px; |
| c#1 | color:#111; |
| c#e0 | color:#e0e0e0; |
| c#fc0 | color:#fc0; |
| ov:h | overflow:hidden; |
| d:i | display:inline; |
ダミーテキスト生成
lorem100と書いて展開すると、100語の英単語で構成されるダミーテキストを生成できます。
ベンダープレフィックス
何もしなくても自動的に付きますが、必ず付けたい場合に頭に「-」を付けます。
-bx
↓展開
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
グラデーション
lg(top,#fff,#000)
↓展開
background-image: -webkit-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);
フィルター
最後に「|」 をつけると、フィルター機能が使えます。
| フィルター | 内容 |
|---|---|
| |c | 閉じタグコメントをつける |
| |e | 実態参照 |
| |s | 1行に展開 |
| |t | トリム(リストマーカーを削除) Wrap with Abbreviationのみに有効 |
| |bem | BEM |
Cheat Sheet
Expand Abbreviation以外の機能
Numbers
Increment Number by 1/Decrement Number by 1
1ずつ増減
Increment Number by 0.1/Decrement Number by 0.1
0.1ずつ増減
Increment Number by 10/Decrement Number by 10
10ずつ増減
Evaluate Math Expression
計算
Go to Matching Pair
カーソルを対応する開始タグ/閉じタグに移動
Toggle Comment
コメントアウト/切り替え
Remove Tag
カーソルがある部分のタグを削除
Balance
Balance(Outward)
選択範囲拡大
Balance(Inward)
選択範囲縮小
Merge Lines
選択範囲内の改行を削除
Wrap with Abbreviation
選択範囲を任意のタグで括る
Wrap Abbreviationを実行するとフォームが表示されるので、囲みたいタグを入力
Select Next/Previous Item
直近のタグ名や属性にフォーカスした状態でジャンプ
Previous/Next Edit Point
前/次の編集点に移動
Split/Join Tag
「空タグ」と「開始タグと終了タグ」を変換
※XHTMLで使用
Reflect CSS Value
ベンダープレフィックスが付与されている同一プロパティの変更を他にも反映
Update Image Size
画像サイズを取得して、widthとheightを追加
Encode/Decode Image to data:URL
画像をdataURLに変換