コーディングが速くなる！Emmetのアクションまとめ【Win/Mac/Atomに対応】
：コーディングのスピードアップに！Emmetのアクションまとめ【 Win / Mac / Atomに対応 】
Emmetが使えるエディターなら大丈夫！
アクションを使うと、コーディングの効率がぐんと上がります！！
ほんと便利なものばかりなので、ぜひ使ってください。
注意点
Emmetと、お使いのエディターのショートカットが被っていることがあります。
その場合は、ショートカットの設定を変更してみてください。
※MacでAtomをお使いの方
ショートカットがうまく反応しない方は、 (カッコ)部分のコマンドも試してみてください。もしかしたら使えるかもしれないです…！
Emmetのアクション一覧
おすすめのアクション
| アクション （リンク先: デモ） |
コマンド |
|---|---|
| Remove Tag
開始タグと閉じタグを削除して、インデント調整もします。 |
【Win】ctrl + shift + ; 【Mac】⌘ + ‘
|
| Wrap with Abbreviation
選択した範囲を任意のタグで囲むことができます。 |
【Win】ctrl + w 【Mac】ctrl + alt + w
|
| Balance （outward , inward） 選択範囲の拡大・縮小ができます。 ⌘Dを押すと、現在のカーソル位置を基準にして、タグの中身やタグの境目を検索して選択範囲を作ります。さらに、ctrl + dを押す毎に、選択範囲が拡大します。 |
【Win】拡大: ctrl + shift + e 【Mac】拡大: ctrl + d |
| Merge Lines 選択した部分を1行に変換します。 |
【Win】ctrl + shift + m 【Mac】shift + ⌘ + m |
| Evaluate Math Expression + – * / を使った、簡単な四則演算の結果を表示します。 |
【Win】ctrl + shift + y 【Mac】shift + ⌘ + y |
その他のアクション
| アクション （リンク先: デモ） |
コマンド |
|---|---|
| Expand Abbreviation Emmetを展開します。 |
【Win】tab もしくは ctrl + e 【Mac】tab もしくは shift + ⌘ + e |
| Toggle Comment コメントの表示・非表示ができます。 |
【Win】ctrl + shift + / 【Mac】⌘ + / |
| Go to Edit Point タグ間、空の属性、インデント付きの改行部分ごとに、編集ポイントが移動します。 |
【Win】ctrl + alt + ←→ 【Mac】ctrl + ←→
|
| Select Item HTMLではタグ・属性・属性値などを、CSSではセレクタ・プロパティ・プロパティ値などを順次選択します。 |
【Win】ctrl + shift + .
【Mac】ctrl + shift + ←→ |
| Go to Matching Pair 開始タグと終了タグ間を移動します。閉じタグを探すときなどに使えます！ |
【Win】ctrl + alt + j 【Mac】ctrl + alt + j |
| Split / Join Tag タグを空タグに変換、またはその逆もできます。XMLを作るときに便利なアクションです。 |
【Win】ctrl + shift + ` 【Mac】shift + ⌘ + j |
| Update Image Size 画像サイズを取得します。imgタグに、widthとheightが追加されます。 |
【Win】ctrl + u 【Mac】ctrl + i |
| Increment / Decrement Number 数値の増減が簡単にできます。（0.1・1・10づつ増減） |
【Win】alt + ↑↓
【Mac】ctrl + alt + ↑↓
|
| Reflect CSS Value ベンダープレフィックスがついたプロパティ値を、一箇所なおすだけで一括で揃えられます。 |
【Win】ctrl + shift + r 【Mac】shift + ⌘ + r |
| Encode / Decode Image to data:URL 画像をdataURLに変換します。 |
【Win】ctrl + ‘ 【Mac】ctrl + shift + i |
参考サイト
まとめ
いかがでしたか？
本当にやらなきゃ損(笑)と思うくらいに、便利なものが揃っているので、試してみてください（^^)