【VScode】爆速でWeb開発(HTML/CSS)を行えるEmmetチートシート(ショートカット)

Visual Studio Code
2022.12.07

Visual Studio Code(以降 VScode)に標準搭載されている便利な機能Emmet(エメット)についてご紹介いたします。

自動補完機能やショートカット機能で作業効率を大幅に改善することができ、Emmetを使いこなせるのとそうでないのとでは格段にコーディング時間に差が出てきます。

まだEmmetに触れたことがないというWeb開発初心者の方もぜひこの機会にマスターして快適なWeb開発ライフを送りましょう。

本記事で学べる事

  • Emmet(エメット)について
  • コーディングのタイプミスやスペルミスを減らす方法
  • HTML/CSSを爆速で記述する方法

Emmet(エメット)とは

EmmetとはVScodeを利用している人ならだれでも使用できる開発支援ツールのことです。

標準で搭載されているので新たに拡張機能としてインストールする必要はありません。

Emmetの機能を利用した特殊なコーディングをEmmet記法と呼ばれたりもされます。

このEmmet記法を利用すれば短い記述でたくさんのコーディングを行うことができます。

百聞は一見に如かずですので、下記を見てみてください。

いかがでしょうか？

上記では一瞬にしてHTMLのひな型が出力されました。実はこのひな形の出力ができたのはEmmetのおかげなんです。

決してコピー＆ペーストをしたなんてことはありません

今回入力したコマンドは『Shift ＋ !マーク + Enter』の3つだけです。

たった3つのキーをタップしただけであれだけの記述を行うことができてしまうのです。

これがEmmetの効力です。

このようなショートカットやその他の自動補完機能を覚えるだけでHTMLやCSSの記述が格段に速く、しかも正確に行えるようになり学習・実務両面で大きく開発者の手助けになってくれます。

Emmetチートシート(HTML/CSS)

ここからは実際にEmmet記法の使い方についてご紹介していきます。

慣れるまではぜひこちらのページを保存していただきいつでも確認できるようにしてください。

またVScodeで使用できるEmmet(コード記述系)以外のショートカットキーは以下の記事にまとめてあります。

開発時には必須のコマンドも多くより開発効率を向上させることができるので是非お時間のある方はのぞいてみてください。

【VScode】Visual Studio Codeショートカットキー一覧(Windows/Mac)

【VScode】Visual Studio Codeショートカットキー一覧(Windows/Mac)
Visual Studio Code(以降 VScode)に標準搭載されている便利なショートカットキーをご存じでしょうか...
it-memo.work
2023.01.29

HTML編

まずはHTMLで利用できるショートカット、自動補完機能について紹介していきます。

最後のまとめには一覧を作成していますので動作イメージがすでにあり詳細を見なくても問題ないという方は一覧表をご覧ください。

HTMLのひな型出力
Shift + ! + Enter

入力結果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
HTMLタグの入力

HTMLタグは<タグ名></タグ名>のように<>でタグ名を囲って記述しますが、Emmetではタグ名のみでEnterを押せば<>と閉じタグは自動で保管されます。

タグ名 + Enter
使用例 h1

入力結果
以下の入力結果はh1 + Enterで実施していますがすべてのHTMLタグで利用できます。

<h1></h1>
HTMLタグとクラスを同時に入力
タグ名.クラス名 + Enter
使用例 h1.title

例外としてdivのみタグ名の記述をしないで『.id名 + Enter』のみで入力できる

入力結果

<h1 class="title"></h1>
HTMLタグとidを同時に入力
タグ名#id名 + Enter
使用例 h1#title

例外としてdivのみタグ名の記述はしないで『#id名 + Enter』のみで入力できる

入力結果

<h1 id="title"></h1>
タグ作成とテキスト入力を同時に行う
タグ名{入力したいテキスト}
使用例 h2{hello world}

入力結果

<h2>hello world</h2>
同一階層に複数のタグを作成する
タグ1+タグ2+タグ3
使用例 h2+p+a

入力結果

<h2></h2>
<p></p>
<a href=""></a>
入れ子状のタグを作成する
親タグ>子タグ>孫タグ + Enter
使用例 h1>p>a

入れ子は何階層でも続けて記述すれば作成することができる。またクラスやidも同様に記述可能

入力結果

<h1>
  <p><a href=""></a></p>
</h1>
同一階層に複数のタグを出力する
タグ名*作成したい個数
使用例 ul>li*3

入力結果

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
複数の同一タグの作成とクラス名を付ける
タグ名.クラス名*作成したい個数
使用例 ul>li.list*6

入力結果

<ul>
  <li class="list"></li>
  <li class="list"></li>
  <li class="list"></li>
  <li class="list"></li>
  <li class="list"></li>
  <li class="list"></li>
</ul>
タグのグループを作成する
(タグ)*作成したい個数
使用例 (div>h2+p)*3

入力結果

<div>
  <h2></h2>
  <p></p>
</div>
<div>
  <h2></h2>
  <p></p>
</div>
<div>
  <h2></h2>
  <p></p>
</div>
複数タグを作成して連番を振る
タグ名.クラス名$*作成したい個数
使用例 ul>li.list$*6

入力結果

<ul>
  <li class="list1"></li>
  <li class="list2"></li>
  <li class="list3"></li>
  <li class="list4"></li>
  <li class="list5"></li>
  <li class="list6"></li>
</ul>

数字の先頭を0埋めしたいなどの要望がある場合には$(ドルマーク)を複数使用することで連番の桁数を指定できる。

例えば 1を01と表示させたい場合には以下の通りとなる

ul>li.list$$*6

CSS編

CSSでは主に自動補完機能が効力を発揮します。ですが、CSSで利用できるプロパティはあまりに多いためすべてを紹介することができません。

そこで使用方法について簡単にご紹介できればと思います。

まずは下記をご覧ください。

こちらはCSSを記述するスタイルシートになります。

そこではまず『h』と1文字入力していることがわかります。するとhから始まるタグ名を一覧で表示されていますね。

タグを選択したら次にプロパティを指定しています。

プロパティの指定では最初に『m』とまた1文字のみ入力しています。

するとタグ名と同じようにプロパティに関しても候補が一覧で表示されています。

今回は一覧に表示されているプロパティのうち『margin』を選択してみました。

そうすると『margin: ;』とプロパティのひな型をそのまま補完してくれます。

この自動補完機能を利用することでタイプミスを減らすことができ、作業効率を大幅に改善することができます。

まとめ ～チートシート～

こちらでは上記で紹介したコマンドの一覧を表形式で作成しております。

ある程度の動作が理解できている方はぜひこちらを見ながらプログラミングを頑張ってみてください。

用途記号コマンド使用例
HTMLのひな型出力–Shift + ! + Enter–
HTMLタグの入力–タグ名h1
HTMLタグとクラスを同時に入力. (ドット)タグ名.クラス名 h1.title
HTMLタグとidを同時に入力# (シャープ)タグ名#id名h1#title
タグ作成とテキスト入力を同時に行う{} (波カッコ)タグ名{入力したいテキスト}h2{hello world}
同一階層に複数のタグを作成する+ (プラス)タグ1+タグ2+タグ3h2+p+a
入れ子状のタグを作成する> (不等号)親タグ>子タグ>孫タグh1>p>a
同一階層に複数のタグを出力する* (アスタリスク)タグ名*作成したい個数li*3
複数の同一タグの作成とクラス名を付ける. (ドット) * (アスタリスク)タグ名.クラス名*作成したい個数li.list*6
タグのグループを作成する() 括弧(タグ)*作成したい個数(div>h2+p)*3
複数タグを作成して連番を振る$ (ドル)タグ名.クラス名$*作成したい個数li.list$*6

タイトルとURLをコピーしました