HTMLやCSSのコーディングがもっと楽になる、Emmetのアクションについての後編です。前編では7つのアクションを紹介しました。今回は残り9つのアクションについて解説いたします。
8. Go to Matching Pair | 開始タグと終了タグの間を移動
開始タグか終了タグへキャレットを移動します。入れ子になっているHTMLで任意の終了タグを探したい時に便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Tで実行します。
9. Go to Edit Point | 編集点への移動
要素や属性が空のポイントにキャレットを移動します。
Bracketsでは、Ctrl（Cmd）+Alt+←かCtrl（Cmd）+Alt+→で実行します。
10. Merge Lines | 選択範囲内の文字列を1行に変換
HTMLやCSSの選択した範囲を1行にします。 Bracketsでは、Ctrl（Cmd）+Shift+Mで実行します。
12. Evaluate Math Expression | 四則演算
エディタ上で計算ができるようになります。簡単な計算しかできませんが、数字と「+」「-」「*」「/」の記号を組み合わせて、計算を行えます。
地味なアクションですが、CSSの値などの計算に便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Yで実行します。
13. Increment/Decrement Number | 数値の増減
キーボードで数字を入力せずに、1桁や10桁などの数値を増減できます。
ショートカットは6つあり、1桁の数値を増減させたい場合、BracketsではCtrl（Cmd）+Shift+↑または↓で実行します。他の桁数を変更するショートカットは、Emmetのメニューから確認しましょう。
14. Reflect CSS Value | CSSの値の反映
ベンダープリフィクスのついたプロパティに値を反映させます。ベンダープリフィクスの対応は、autoprefixerを利用する方が便利なので、使う場面が減ってきていますが、覚えておくとおくと便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Alt+Rで実行します。
16. Split/Join Tag | タグを空タグに変換。また逆も可能
HTMLでは使うことがありませんが、XMLを作成する時に便利なアクションです。タグを空タグに変換し、空タグを開始タグと終了タグに分けることも可能です。
Bracketsでは、Ctrl（Cmd）+Shift+Jで実行します。
11 & 15. 画像操作系アクション
Emmetは画像の幅と高さの取得や、画像をdataURLに変換する機能があります。
- Update Image Size | 画像パスから、widthとheightを取得
- Encode/Decode Image to data:URL | 画像をdataURLに変換
ただし公式のEmmetプラグインでもこの機能がサポートできないエディタがあり、BracketsやDreamweaverも画像操作系アクションには対応していません。
とはいえ、画像の幅と高さの取得は、Dreamweaverのデフォルトの機能で用意されていますし、Bracketsも「Extract for Brackets」を利用すればPSDファイルから直接スライス、画像サイズを取得して、HTMLやCSSに素早く画像を埋め込むことができます。
画像操作関連の作業は、Emmetだけでコーディングするよりも、Extractの使用をお勧めします。Extractは、BracketsとDreamweaverどちらからも利用できます。
Emmetの便利なアクションについて、前編と後編に分けて解説しました。多くのアクションがありますが、すべて使う必要はありません。 また利用できるアクションは、エディタによって差がありますが、エディタの特性とEmmetをうまく利用することで、素早くコーディングが行えるようになります。自分にあったアクションとエディタの機能を使ってコーディングしていきましょう。