これまでの連載では、Emmetの省略記法の展開に関わる内容について説明してきました。しかしコーディングの時は、HTMLやCSSの生成だけでなく、既存のコードに追加や編集をする作業も必ず発生します。
Emmetにはアクションと呼ばれる編集支援機能が16も用意されています。Emmetの展開は、アクションの一つです。他のアクションも使えるようになれば、HTMLやCSSのコーディングがもっと楽になります。
今回の記事では16のアクションから、まず7つを紹介します。残りのアクションは後半で紹介します。
アクションの種類
Emmetは、主に16のアクションがあります。既存のタグを編集、削除を素早く行うアクションも用意されており、お使いのエディタをより便利にしてくれます。
これまでの連載で紹介したものもありますが、おさらいも含めて説明します。
下の表がアクションの一覧です。エディタによって利用できないものがありますが、オフィシャルでサポートされているエディタであれば、ほぼ利用できます。
なお、ショートカットキーはOSやエディタによって異なるので、割愛します。
| アクション名 | アクションの説明 |
|---|---|
| 1. Expand Abbreviation | 省略記法の展開 |
| 2. Wrap with Abbreviation | 展開したコードの包括 |
| 3. Toggle Comment | コメントの表示・非表示 |
| 4. Remove Tag | タグの削除 |
| 5. Update Tag | タグの編集 |
| 6. Balance | タグの領域を選択 |
| 7. Select Item | タグや属性の選択 |
| 8. Go to Matching Pair | 開始タグと終了タグの間を移動 |
| 9. Go to Edit Point | 編集点への移動 |
| 10. Merge Lines | 選択範囲内の文字列を1行に変換 |
| 11. Update Image Size | 画像パスから、widthとheightを取得 |
| 12. Evaluate Math Expression | 四則演算 |
| 13. Increment/Decrement Number | 数値の増減 |
| 14. Reflect CSS Value | CSSの値の反映 |
| 15. Encode/Decode Image to data:URL | 画像をdataURLに変換 |
| 16. Split/Join Tag | タグを空タグに変換。また逆も可能 |
1. Expand Abbreviation | 省略記法の展開
HTMLやCSSの省略記法を展開するアクションです。
多くのエディタでは、[tab]キーで実行されます。
HTMLの場合
|
1 2 3 4 5 6 7 8 |
<!-- 展開前 --> #main>h1{Headling}+p>lorem <!-- 展開後 --> <div id="main"> <h1>Headling</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam voluptates vero, nulla, maxime enim et ratione voluptatem adipisci quis aut. Sit debitis, facere iure, ut saepe pariatur ea aperiam natus.</p> </div> |
CSSの場合
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 展開前 */ .foo { d-ib+bdb++m10-0+c#3 } /* 展開後 */ .foo { display: inline-block; border-bottom: 1px solid #000; margin: 10px 0; color: #333; } |
詳しい内容は、過去の連載を確認しましょう。
2. Wrap with Abbreviation | 展開したコードの包括
タグで囲みたい箇所を選択し、「Wrap with Abbreviation」を実行すると、入力ボックスが表示されます。入力ボックスに省略記法を記述すると、選択した箇所がタグで囲まれます。
Bracketsでは、Ctrl（Cmd）+Shift+Aで実行します。
省略記法の「*」を利用することで、改行ごとにタグで囲むことも可能です。
上の画像では、テキストを選択した後に「Wrap with Abbreviation」を実行し、タグを追加しています。「*」を利用することで、一瞬でリストを作成しています。
3. Toggle Comment | コメントの切り替え
キャレットがある位置の行をコメントにできます。
コメント上にキャレットがある場合は、通常のテキストに戻します。
Bracketsでは、Ctrl（Cmd）+/で実行します。
「Toggle Comment」を実行すると、コメントにしたい行やコメントを解除したい行を簡単に切り替えることができます。
4. Remove Tag | タグの削除
タグの削除を行うアクションです。
削除したいタグにキャレットを移動させ、このアクションを実行すると、インデントの位置なども調整してタグを削除してくれます。
Bracketsでは、Ctrl（Cmd）+Shift+Kで実行します。
上の画像では、キャレットの位置にあるタグを削除しています。単にタグを削除するだけはなく、インデントも調整して削除されています。
5. Update Tag | タグの更新
Emmet v1.1から追加されたアクションです。
アクションを実行すると、タグの変更から属性の追加まで行えます。便利なアクションのひとつです。
Bracketsでは、Ctrl（Cmd）+Shift+Iで実行します。
上の画像では、属性が指定されていないタグにIDやclassの追加をしています。またタグをh2からh1要素に修正しています。
6. Balance | 領域を選択
HTMLやCSSの選択を行います。HTMLは、タグごとに選択範囲の拡大と縮小が行えます。
CSSは、宣言から規則セットまで選択範囲の切り替えが行えます。
上の画像では、キャレットの位置から選択範囲をタグをもとに拡大しています。一定以上選択範囲を拡大したら、今度は選択範囲を縮小しています。
7. Select Item | タグや属性の選択
タグや属性を選択しながら、キャレットを移動させるアクションです。属性の書き換えや削除が行いやすくなります。
上の画像では、「Select Item」アクションを利用して、タグ名や属性を素早く移動しています。
第6回の後編では、残りの9つのアクションを紹介いたします。