【Web制作者必須】コーディング効率が5倍上がる！？Emmet記法10選とアクション機能を解説

「なかなかコーディングが早くならない」と悩んではいませんか？

そんな方におすすめなのが、Emmet記法を活用したコーディングです。

Emmet記法はHTMLやCSSのコードを省略形で展開してくれる書き方で、入力する文字数が減る分、コーディングのスピードが上がります。

この記事では、HTMLとCSSで特によく使うEmmet記法や便利なアクション機能について解説します。

Emmet記法をマスターして、爆速コーディングを目指しましょう！

【講師プロフィール】
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。

HTMLのEmmet記法7選

HTMLのEmmet記法のうち、特によく使う7つについて解説します。

1. 「要素名」+ Tabキーでタグを展開する
2. 「要素名 > 要素名」+ Tabキーで入れ子構造を作成する
3. 「要素名 * 数字」+ Tabキーで要素を複製する
4. 「要素名 + 要素名」+ Tabキーで兄弟要素を追加する
5. 「（要素名 + 要素名）」+ Tabキーでグルーピングする
6. 「要素名.クラス名」+ Tabキーで要素名にクラスを付与する
7. 「!」+ TabキーでHTMLの雛形を作成する

1. 「要素名」+ Tabキーでタグを展開する

Emmetでは、HTMLのタグ名を入力してTabキーを押すだけでタグが展開されます。

たとえば、「p」と入力してTabキーを押すと、自動的に <p></p> が生成されます。

同様に「h2」や「div」など、頻繁に使用するタグを短縮して展開できるため、基本的なHTMLのタグ挿入に使うと便利です。

2. 「要素名 > 要素名」+ Tabキーで入れ子構造を作成する

タグの中に別のタグを入れ子にしたい場合、タグ名の間に「>」を入れるだけで入れ子構造が展開されます。

たとえば「ul>li」と入力してTabキーを押すと、以下のように自動生成されます。

3. 「要素名 * 数字」+ Tabキーで要素を複製する

同じタグを複数回繰り返し生成する場合、「*」の後に数字を入力すると、その回数分だけ要素が展開されます。

たとえば、「li*5」 と入力してTabキーを押すと、<li></li>が5つ並びます。

4. 「要素名 + 要素名」+ Tabキーで兄弟要素を追加する

兄弟要素を続けて展開したい場合は「+」記号を使います。

これにより、同じ階層に別の要素が並ぶ形で生成されます。

たとえば、dlタグの中にdtとddを入れる場合、先述した入れ子構造も活用して「dl>dt+dd」と入力してTabキーを押すと次のように表示されます。

5. 「（要素名 + 要素名）」+ Tabキーでグルーピングする

複数の要素をグループ化して展開することも可能です。

（）（カッコ）で括ることで、グループ化した要素の塊をまとめて複製できます。

たとえば、dlの中にdtとddを3つ複製したいときは、「dl>(dt+dd)*3」と入力してTabキーを押すと、次のようにdtとddが3つずつ生成されます。

6. 「要素名.クラス名」+ Tabキーで要素名にクラスを付与する

要素名のあとに「.（ドット）」を入れ、クラス名を入力してTabキーを押すと簡単にクラスを付与できます。

たとえば、「p.text」と入力してTabキーを押すと、次のように展開されます。

同じように、IDも簡単に付与することが可能です。

IDを付与したいときは、「.（ドット）」ではなく「#（シャープ）」を使います。

たとえば、「p#text」と入力してTabキーを押すと、次のように展開されます。

なお、divの場合は「div.section」で展開することもできますが、「.section」だけでも展開できます。

divなどの一部の要素は入力を省略できます。
特によく使うdivの要素は基本的に書かず、クラス名を書いて展開すると時短につながりますよ！

7. 「!」+ TabキーでHTMLの雛形を作成する

HTMLの基本構造（DOCTYPEやhead、bodyなど）を一瞬で生成したい場合、Emmetでは「!」を入力しTabキーを押すだけで以下のような雛形が展開されます。

必要なメタ要素をheadの中に入れたり、HTMLのlangの属性がen（英語）になっているのをja（日本語）に直したりといった作業は必要ですが、自分で基本構造を入力する手間が省けるため、効率的に作り始められます。

CSSのEmmet記法3選

CSSのEmmet記法のうち、使う機会の多い3つについて解説します。

1. プロパティと値を展開する
2. プロパティと数字を展開する
3. プロパティとカラーコードを展開する

1. プロパティと値を展開する

CSSのプロパティと値は、Emmet記法で自動補完できます。

プロパティの略称を入力してTabキーを押すだけで、適切なプロパティと値が展開されるため便利です。

positionとpaddingのように頭文字がかぶる場合は、2文字目を打つことでプロパティを選択できます！

2. プロパティと数字を展開する

プロパティに数値を伴う値を指定したい場合、プロパティ名の頭文字と数値を入力することで展開されます。

なお、単位を省略すると、自動で「px」として認識されます。

3. プロパティとカラーコードを展開する

カラーコードの展開もEmmet記法を使うと簡単にできます。

カラーコードは「#」記号で指定し、その後の文字で色を指定します。

EmmetのCheat Sheet

Emmetには、公式でチートシートが用意されており、HTML・CSSで使用する主要な記法を一通り確認できます。

Emmet記法がわからなくなったときや、新しい記法を試したいときに便利です。

Emmet公式サイトからチートシートを入手して、参考にしながら記法を覚えていきましょう。

チートシートの確認方法

①Emmetの公式サイトの左にある「DOCUMENTATION」を開く

▼

②左下部にある「Cheat Sheet」を開く

▼

③Cheat Sheetを閲覧できる

Emmetのアクション機能

Emmetには、生成したタグやスタイルに対して効率よく編集できるアクション機能もあります。

アクション機能は、ブラウザ上部にある「コマンドパレット」から確認することが可能です。

Macの場合は「⌘＋Shift＋P」、Windowsの場合は「Ctrl＋Shift＋P」でも開けます。

出てきたパネルに「emmet」と入力すると、Emmetのアクション一覧を確認できます。

では、便利なアクション機能をチェックしていきましょう。

1. タグを更新する
2. ラップ変換で要素を囲む
3. バランスの外側を選択する
4. 画像サイズの自動更新をする

1. タグを更新する

特定のタグを別のタグに変更したい場合、Emmetの「タグの更新」アクションが便利です。

タグにカーソルを合わせ、VSCodeのコマンドパレットから「Emmet: Update Tag」を選んでタグを指定すると、選択したタグの内容が指定したタグに一括で変更されます。

開始タグと閉じタグの両方を一括で変換できるため、ぜひ利用してみてください。

2. ラップ変換で要素を囲む

ラップ変換機能を使えば、選択した範囲を特定のタグで囲めます。

該当のテキストを選択し、コマンドパレットで「Emmet: Wrap with Abbreviation」を選択してタグを指定すると、その範囲が自動的に指定タグで囲まれます。

段落の一部を<a>タグや<span>タグで囲みたい場合などに便利な機能です。

3. バランスの外側を選択する

「バランスの外側」は、要素の入れ子構造が深い場合に便利な機能です。

選択したい要素にカーソルを合わせた状態でコマンドパレットの「Emmet: Balance(outward)」を選ぶと、その要素を選択できます。

さらに「Emmet: Balance(outward)」を選ぶと選択した要素を基点に、その外側の範囲を拡大して選択できるため、複雑なHTML構造で特定の要素を選択する際に役立ちます。

4. 画像サイズの自動更新をする

HTMLで画像を挿入する際、widthやheightの属性を手動で入力するのは手間がかかります。

Emmetでは「Emmet: Update Image Size」を使うことで、自動的に画像サイズを取得し、widthとheightが入力されます。

画像ごとにサイズ指定する手間が省け、効率的にHTMLを記述できるので、ぜひ活用してみてください。

まとめ：Emmet記法をマスターして爆速コーディングを実現しよう！

Emmet記法を使えば、HTMLとCSSのコーディングが劇的に速くなり、コーディングの効率と正確性が向上します。

また、Emmetのアクション機能を活用すると、さらにスムーズにコーディングできるようになります。

日々の作業を効率化するためにも、ぜひEmmet記法やアクション機能をマスターしましょう！

未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！

東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。

また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！