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

Creative Cloud UI/UX & Web

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

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

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

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

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

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

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

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

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

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

12. Evaluate Math Expression | 四則演算

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

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

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

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

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

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

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

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

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

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

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

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に素早く画像を埋め込むことができます。

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

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


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

POSTED ON 2015.10.19

Products Featured

  • Brackets
  • Dreamweaver

Tags

タグはありません