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

連載

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

これまでの連載では、Emmetの省略記法の展開に関わる内容について説明してきました。しかしコーディングの時は、HTMLやCSSの生成だけでなく、既存のコードに追加や編集をする作業も必ず発生します。

Emmetにはアクションと呼ばれる編集支援機能が16も用意されています。Emmetの展開は、アクションの一つです。他のアクションも使えるようになれば、HTMLやCSSのコーディングがもっと楽になります。

今回の記事では16のアクションから、まず7つを紹介します。残りのアクションは後半で紹介します。

アクションの種類

Emmetは、主に16のアクションがあります。既存のタグを編集、削除を素早く行うアクションも用意されており、お使いのエディタをより便利にしてくれます。
これまでの連載で紹介したものもありますが、おさらいも含めて説明します。

下の表がアクションの一覧です。エディタによって利用できないものがありますが、オフィシャルでサポートされているエディタであれば、ほぼ利用できます。
なお、ショートカットキーはOSやエディタによって異なるので、割愛します。

1. Expand Abbreviation | 省略記法の展開

HTMLやCSSの省略記法を展開するアクションです。
多くのエディタでは、[tab]キーで実行されます。

HTMLの場合

<!-- 展開前 -->
#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の場合

/* 展開前 */
.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で実行します。
省略記法の「*」を利用することで、改行ごとにタグで囲むことも可能です。