【チートシート付き】VSコードでよく使うemmetをまとめました

コーディング学習をしていて「タイピングのミスが多い」「もっと早くコードを書きたい」と思うことはありませんか?今回は、コーディングをより早く正確にできるようになるemmet(エメット)という記法について紹介します。

emmetはたくさんの種類がありますが、使用頻度が高いものに絞って紹介します。

この記事を読んで欲しい方

  • コーディングができるようになってきた方
  • コーディングのスピードを向上させたい方
  • コーディングのスペルミスが多い方

VSコード用のemmetチートシート

コーディングをする際に使用頻度が高いemmetをチートシートとしてまとめました。

ぜひ活用してください!

Image from Gyazo

emmetチートシートをダウンロード

emmetとは

emmetとは、少ないタイピング数で素早く正確にコードを記述することができる記法です。文字で説明しても分かりづらいと思いますので、まずは下の動画でイメージを掴みましょう。

動画を見ればわかるようにemmetを使用すると、大幅にタイピングの量が減らせます。そして、自動でコードが出てくるため、スペルミスなども減らすことができ、素早く正確なコーディングが可能になります。

emmetの紹介

それでは実際にemmetを見ていきましょう。まずはHTMLからです。

全てのemmetはtabキーで展開できます。

HTMLのemmet

HTML5の雛形

!(エクスクラメーションマーク)

!を入力してtabキーを押下するだけで、以下のようなHTML5の雛形を展開することができます。

たった2回のキータイプでこのような記述が入力できるのは非常に助かりますね!

一応上から、意味を説明します。

  • DOCTYPE宣言:HTML5で書かれた文書であることの宣言文。
  • htmlタグ:html全体を囲むタグ。langは言語(enはEnglish、jaはJapanese)
  • headタグ:サイトの情報だけど見た目には表示されないものを記述するエリア。
  • metaタグ:サイトのメタ情報を書くためのタグ。
  • charset=”UTF-8”:文字コード。これが間違ってると文字化けしたりする。
  • 文字コードの下のmetaタグ:レスポンシブに必要な記述。
  • さらにその下のmetaタグ:最新のIEを指定(気休め)。
  • titleタグ:サイト(ページ)のタイトルを記入するエリア。

通常のHTMLタグ

HTMLタグを入力したいときは、HTMLタグ名を入力してtabキーを押下します。

例えば、h1と入力してtabキーを押下すると、以下のようになります。

グループを指定

()(丸括弧)

グルーピングしたいものを()で囲むとまとめることができます。

例えば、ul>(li+a)*3と入力すると以下のようになります。

Image from Gyazo

テキストを指定

{}(波括弧)

上記の{}内にテキストを入力することでタグ内に入れることができます。

例えば、h1{タイトル}と入力してtabキーを押下すると以下のようになります。

classの指定

.(ドット、ピリオド)

HTML要素名に続けて、.〇〇を入力するとclass名になります。HTML要素を入力しないと、自動的にdivタグになります。

例えば、h1.site-titleと入力してtabキーを押下すると以下のようになります。

idの指定

#(ハッシュ)

classと同様に、HTML要素に続けて#〇〇と入力します。

例えば、h1#site-titleと入力してtabキーを押下すると以下のようになります。

連番を振る

$(ドルマーク)

emmetを使用して連番を振ることも可能です。

例えば、.wrapper$*3と入力してtabキーを押下すると以下のようになります。

CSSのemmet

次にCSSのemmetを見てみましょう

使用方法

CSSのプロパティは数が多いので、全てについての説明はできません。(それだけで、とんでもない分量になってしまいます)なので、使用例だけ解説します。

基本的には、「プロパティと値の頭文字を組み合わせる」ことです。

例えば、mと入力してtabキーを押下すると、

「margin: "";」

と表示されます。

また、mb0と入力してtabキーを押下すると、

「margin-bottom: 0;」

と表示されます。

こんなふうに、「プロパティと値の頭文字を組み合わせる」ことでemmetを使用した入力が可能になります。ぜひチートシートを見ながらいろいろと試してみてください★

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA