• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

コーディングが速くなる!Emmetのアクションまとめ【Win/Mac/Atomに対応】

投稿者アイコン

2018/09/05

書いた人:
rurippa!
カテゴリ:
CSS   HTML
514 views

コーディングのスピードアップに!Emmetのアクションまとめ【 Win / Mac / Atomに対応 】

コーディングが速くなる!Emmetのアクションまとめ【Win/Mac/Atomに対応】


Emmetが使えるエディターなら大丈夫!
アクションを使うと、コーディングの効率がぐんと上がります!!
ほんと便利なものばかりなので、ぜひ使ってください。

注意点

Emmetと、お使いのエディターのショートカットが被っていることがあります。
その場合は、ショートカットの設定を変更してみてください。

※MacでAtomをお使いの方
ショートカットがうまく反応しない方は、 (カッコ)部分のコマンドも試してみてください。もしかしたら使えるかもしれないです…!

Emmetのアクション一覧

おすすめのアクション

アクション
(リンク先: デモ)
コマンド
Remove Tag
開始タグと閉じタグを削除して、インデント調整もします。

【Win】ctrl + shift + ;

【Mac】⌘ + ‘
(⌘ + shift + ‘)

Wrap with Abbreviation
選択した範囲を任意のタグで囲むことができます。

【Win】ctrl + w

【Mac】ctrl + alt + w
(ctrl + w)

Balance (outward , inward)
選択範囲の拡大・縮小ができます。
⌘Dを押すと、現在のカーソル位置を基準にして、タグの中身やタグの境目を検索して選択範囲を作ります。さらに、ctrl + dを押す毎に、選択範囲が拡大します。

【Win】拡大: ctrl + shift + e
縮小: ctrl + shift + 0

【Mac】拡大: ctrl + d
縮小: alt + 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 + ←→
(alt + ←)

Select Item
HTMLではタグ・属性・属性値などを、CSSではセレクタ・プロパティ・プロパティ値などを順次選択します。

【Win】ctrl + shift + .
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 + ↑↓
ctrl + ↑↓
shift + alt + ↑↓

【Mac】ctrl + alt + ↑↓
(alt + ↑↓)
ctrl + alt + ⌘ + ↑↓
ctrl + alt + ⌘ + shift + ↑↓
(alt + shift + ↑↓)

Reflect CSS Value
ベンダープレフィックスがついたプロパティ値を、一箇所なおすだけで一括で揃えられます。

【Win】ctrl + shift + r

【Mac】shift + ⌘ + r

Encode / Decode Image to data:URL
画像をdataURLに変換します。

【Win】ctrl + ‘

【Mac】ctrl + shift + i

参考サイト

Emmet Documentation


この記事を読んだ人はこんな記事も読んでいます

<

>