HTML/CSSを爆速コーディング Emmet入門 第6回 Emmetを使って、コードの編集を強力にサポートする（後編）

連載

HTML/CSSを爆速コーディング Emmet入門

HTMLやCSSのコーディングがもっと楽になる、Emmetのアクションについての後編です。前編では7つのアクションを紹介しました。今回は残り9つのアクションについて解説いたします。

8. Go to Matching Pair | 開始タグと終了タグの間を移動

開始タグか終了タグへキャレットを移動します。入れ子になっているHTMLで任意の終了タグを探したい時に便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Tで実行します。

https://blog.adobe.com/media_92f018d159aa990af3c3d8586712ab8c0b05a247.gif

上の画像では、HTMLの開始タグと終了タグへ、移動しています。

9. Go to Edit Point | 編集点への移動

要素や属性が空のポイントにキャレットを移動します。
Bracketsでは、Ctrl（Cmd）+Alt+←かCtrl（Cmd）+Alt+→で実行します。

https://blog.adobe.com/media_24466ca65d0fdae2fecbb289ff6bbaab8861319f.gif

中身が空の要素や属性に移動し、内容が入るとそのポイントに移動しなくなります。

10. Merge Lines | 選択範囲内の文字列を1行に変換

HTMLやCSSの選択した範囲を1行にします。 Bracketsでは、Ctrl（Cmd）+Shift+Mで実行します。

https://blog.adobe.com/media_e0fa30fe48fa826209afae46e3c5a785f626f518.gif

上の画像のように、選択範囲が1行に変換されます。

12. Evaluate Math Expression | 四則演算

エディタ上で計算ができるようになります。簡単な計算しかできませんが、数字と「+」「-」「*」「/」の記号を組み合わせて、計算を行えます。
地味なアクションですが、CSSの値などの計算に便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Yで実行します。

https://blog.adobe.com/media_e0284defb9cad4635bea5663f4c962203472a157.gif

HTMLやCSSなどのファイルでも、同じように動作します。

13. Increment/Decrement Number | 数値の増減

キーボードで数字を入力せずに、1桁や10桁などの数値を増減できます。
ショートカットは6つあり、1桁の数値を増減させたい場合、BracketsではCtrl（Cmd）+Shift+↑または↓で実行します。他の桁数を変更するショートカットは、Emmetのメニューから確認しましょう。

https://blog.adobe.com/media_ca7a2d83dcb270a2e27328e9feaf87f3d2caba62.gif

上の画像では、1, 10, 0.1の位をそれぞれ実行しています。

14. Reflect CSS Value | CSSの値の反映

ベンダープリフィクスのついたプロパティに値を反映させます。ベンダープリフィクスの対応は、autoprefixerを利用する方が便利なので、使う場面が減ってきていますが、覚えておくとおくと便利なアクションです。
Bracketsでは、Ctrl（Cmd）+Shift+Alt+Rで実行します。

https://blog.adobe.com/media_eee716ae3dbba76ad97472205377fd821ac7f858.gif

キャレットの置かれた行の値を、同じプロパティに反映します。

16. Split/Join Tag | タグを空タグに変換。また逆も可能

HTMLでは使うことがありませんが、XMLを作成する時に便利なアクションです。タグを空タグに変換し、空タグを開始タグと終了タグに分けることも可能です。
Bracketsでは、Ctrl（Cmd）+Shift+Jで実行します。

https://blog.adobe.com/media_0811adba970012bfcd8b93570f0211f4f5fb8bf8.gif

開始タグと終了タグから空タグへ簡単に切り替えられます。

11 & 15. 画像操作系アクション

Emmetは画像の幅と高さの取得や、画像をdataURLに変換する機能があります。

ただし公式のEmmetプラグインでもこの機能がサポートできないエディタがあり、BracketsやDreamweaverも画像操作系アクションには対応していません。

とはいえ、画像の幅と高さの取得は、Dreamweaverのデフォルトの機能で用意されていますし、Bracketsも「Extract for Brackets」を利用すればPSDファイルから直接スライス、画像サイズを取得して、HTMLやCSSに素早く画像を埋め込むことができます。

https://blog.adobe.com/media_bdc6ba1754cc75dd9e952fa184e03d2ef4057a6b.gif

Emmetではなく、Extractを使用した例。エディタ上でPSDを開き、画像を生成からHTMLやCSSの反映まで一括で行えます。

画像操作関連の作業は、Emmetだけでコーディングするよりも、Extractの使用をお勧めします。Extractは、BracketsとDreamweaverどちらからも利用できます。

Emmetの便利なアクションについて、前編と後編に分けて解説しました。多くのアクションがありますが、すべて使う必要はありません。 また利用できるアクションは、エディタによって差がありますが、エディタの特性とEmmetをうまく利用することで、素早くコーディングが行えるようになります。自分にあったアクションとエディタの機能を使ってコーディングしていきましょう。