記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【簡単・効率化】VScode Emmetの使い方をわかりやすく解説!

VScode、Emmet を解説。HTML/CSSの記述量を圧倒的に少なくしてくれ、開発効率を上げてくれる「Emmet」。しかし便利さを知らずに使用されていないケースも多いです。本記事では「Emmet」の便利さ、使い方を徹底解説していきます。

カテゴリ: Visual Studio Code

VScodeのEmmetという機能を知っていますか?
EmmetはHTML/CSSの記述量を圧倒的に少なくしてくれる機能です。

私は知らず、一からHTML/CSSを記述していました・・。
「もっと早く知っておけばよかった・・・。」「しかも簡単にできる・・・。」
「一から記述していた時間はなんだったんだ・・・。」

そんな後悔する人を一人でもなくす!
そんなつもりで「Emmetとは?」「Emmetの記述方法」「設定」「使用できない場合の対処法」を中心に解説していきます。

Emmetとは?

EmmetとはHTML/CSSのコード入力を補完してくれる機能であり、少ない記述でHTML/CSSを記述する事ができるので、大幅に作業を削減してくれます。

これまで1文字1文字HTMLを記述していた方にとっては、圧倒的に作業効率を上げてくれる機能です。


例えば「!」と記述しTabを押すと、下記のようにHTMLの雛形を表示してくれます。



imgと記述しtabを押しても<img src=”” alt=””>と簡単に表示されます。


このほかにもHTML/CSSで便利な使い方がありますので一つ一つ見ていきましょう。

Emmet HTML記述

タグの表示

タグをつけるにはタグ名を記載し「tab」を押します。 例えば「div」と記載し「tab」を押すと、下記のようにタグをつけて表示する事ができます。 「<>」「</>」の記述をいちいちする必要なく、閉じタグの忘れも防止でき、効率的な記述ができます。

クラス名の表示

クラス名の記載をするには「.クラス名」を記載し「tab」を押します。
例えば下記のように「.sample」と記載し「tab」押すと「<div class=”sample”></div>」と表示されます。
「div」すら記載する必要なくクラス名を表示してくれます。

ID名の表示

id名を記載するには、「#id名」を記載し「tab」を押します。
例えば下記のように「#sample」を記載し「tab」を押すと「<div id=”sample”></div>」と表示されます。

クラスid名を組み合せ表示

クラスid名を組み合せ表示するには「.sample#test」と記載し「tab」を押すと下記のようにクラス、idを組み合わせた表示になります。



タグ名を変えたければ、「タグ名.クラス名. id名」を記載します。
例えば「p.sample#test」と記載し「tab」を押すと下記のように表示する事ができます。

複数クラスの表示

複数クラスの表示をするには「.クラス名.クラス名」を記載します。
例えば「.sample1.sample2」を記載すると下記のように表示されます。

「+」マークで複数タグ表示

プラスマークを使い、一度に複数タグ表示させる事ができます。
例えば「p+div」と記載し「tab」を押すと下記のように表示する事ができます。



複数タグも「+」でつなぎ表示する事ができます。
例えば「p+div+span」と記載「tab」を押すと下記のように表示する事ができます。

「>」で入れ子の表示

「>」マークを使い入れ子の記述をする事ができます。
例えば、「ul > li 」と記載し「tab」を押すと下記のように表示する事ができます。

「*」で複数タグを表示

「*」を使い複数タグを表示する事ができます。
例えば、「ul > li*10」と記載し「tab」を押すと下記のように表示する事ができます。

「^」で階層表示

「^」で階層表示をする事ができます。
例えば、「.one>.two>.three^」と記載し「tab」を押すとクラスoneを親階層とし、子要素にtwo、孫にthreeと表示されます。

「$」で連番表示

idなどでは、連番表示する事があります。
例えば「div#sample-$*3」と記載し「tab」を押すと下記のように表示する事ができます。

「{}」でテキスト文字表示

テキスト部は{}で囲み表示する事ができます。
例えば「p.sample{こんにちは}」と記載し、「tab」を押すと下記のように「こんにちは」というテキスト部も表示する事ができます。

Emmet CSS記述

CSSでもEmmetの記述をする事ができます。
例えばCSSファイルに「m」と記載し「tab」を押すと下記のように「margin: ;」と表示する事ができます。



またプロパティに値を指定し、表示する事ができます。
例えばCSSファイルに「m10」と記載し「tab」を押すと下記のように「margin: 10px;」と表示する事ができます。


CSSでのEmmetの基本記述は、プロパティのみ、もしくはプロパティと値を記述します。

Emmet CSS記述(数値)

プロパティの数値を指定する事ができます。

入力 表示
m10 margin:10px;
m10p margin:10%;
m10r margin:10rem;
m10e margin: 10em;

Emmet CSS記述(位置)

プロパティの位置を指定する事ができます。

入力 出力
t top
b bottom
l left
r right

「mt」と記述し「tab」を押すと、下記のように「margin-top: ;」を指定する事ができます。

Emmet プロパティ一覧

入力 出力
m margin
p padding
w width
h height
maw max-width
miw min-width
mah max-height
mih min-height
c color
bgc background-color
fz font-size
fw font-weight
ff font-family
d display
lh line-height
ta text-align
td text-decoration
lts letter-spacing
z z-index:
fl float: left;
cl clear: both;
d:f display: flex;
ov overflow
op opacity
pos position: relative;
lis list-style
bd border
bdrs border-radius
bxz box-sizing: border-box;

Emmet settings jsonで設定変更

「!」を記載し「tab」を押すと下記のようにHTMLの雛形を表示してくれました。



しかし「lang=”en”」とデフォルトだと英文字の記載がされます。
これを settings jsonで設定変更し「lang=”ja”」と最初から記載されるようにします。



まずは設定画面を開きます。「code」→「基本設定」→「設定」をクリック



検索バーにEmmetと入力し→Emmet: Variablesの値を「en」から「ja」に変更



するとlang=”ja”に変更する事ができています。

Emmetが効かない時の対処方法

Emmetが効かない時は
1.Emmet: Trigger Expansion On Tabにチェックが入っているか?
2.キーボードショートカット、「コマンド、Emmet略語展開」に「キーバインドtab」が割り当てられているか?

の2点を確認してください。
一つ一つ見ていきます。

1.Emmet: Trigger Expansion On Tabにチェックが入っているか?

まずは設定画面を開きます。「code」→「基本設定」→「設定」をクリック。



検索バーに「Trigger Expansion On Tab」にと記載してください。
そして「Emmet: Trigger Expansion On Tab」にチェックマークが入っているかを確認してください、チェックマークが入っていなければチェックマークを入れてください。

2.キーボードショートカット、「コマンド、Emmet略語展開」に「キーバインドtab」が割り当てられているか?

「code」→「基本設定」→「キーボードショートカット」をクリックしキーボードショートカットを開きます。



検索バーに「Emmet」と記載し「コマンド、Emmet:略語展開」に「キーバインド、tab」が割り当てられてるか、また他の項目に「tab」が割り当てられていないかを確認してください。
「tab」が割り当てられていない場合は鉛筆マークを押し、tabを指定してください。

まとめ

「Emmetとは?」「Emmetの記述方法」「設定」「使用できない場合の対処法」を中心に解説してきました。

最後にポイントをまとめます。

1. Emmetとは
HTML/CSSのコード入力を補完してくれる機能であり、少ない記述でHTML/CSSを記述する事ができるので、大幅に作業を削減してくれ機能。

2.Emmetの記述方法は
決められた定型文字を入力し「tab」で展開し表示する。

3.Emmetの設定方法は
設定画面→検索バーに「Emmet」を入力し、設定したい項目に合わせて設定を行う。

4.Emmetが効かない時は
①.Emmet: Trigger Expansion On Tabにチェックが入っているか?
②.キーボードショートカット、「コマンド、Emmet略語展開」に「キーバインドtab」が割り当てられているかの2点を確認する。

いかがだったでしょうか?

本記事を参考に「Emmet」の存在・活用方法を知っていただき、効率的な開発をしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。