【VSCode】Emmetを使って爆速

もっと量を少なくしてコードを打ちたい〜。。。

そんな時はEmmet記法で書くと早くなるよ！

もりのくま

今回はEmmet記述についてご紹介します。

Visual Studio Code

エディタはVSCodeを前提に説明します。

こちらはデフォルトでEmmet機能が使えます。

もし他のエディタをご使用の場合は、Emmentを使えるように設定してください。

VSCodeのダウンロードはこちらから。

Emmetとは？

Emmetとは、コードを省略して記述できる書き方です。

以下のように短縮して記述できます。

この記述方法を使えば『タイプミスの防止』や『時間短縮』といったメリットがあります！

どんどん活用してコーディングを効率化しましょう。

VSCodeではHTMLとCSSは特に設定しなくてもEmmetを使うことができます。

基本的な使い方

要素

要素とtabキーで書きます。

子要素まで指定

要素と要素の間に>を指定することで、子要素まで作れます。

div > a

兄弟要素まで指定

要素と要素の間に＋を指定することで
同階層の次の要素( 兄弟要素 )まで作れます。

div ＋ div

要素を複数指定

要素を複数作りたいときは＊を指定すると、その数だけ作れます。

要素 ＊ 数

クラス名とID名

クラス名を指定するときは.クラス名
ID名を指定するときは#ID名

これを応用すると以下で指定した要素とクラス名を作れます。

要素.クラス名

要素を指定しない場合は、自動的に『div要素』が指定されます

クラス名に連番を指定

クラス名などに連番を指定したいときは$＊数を指定します。

div.item$*3

また以下のようにも指定できます。

属性を指定

要素に属性を指定する場合は[]を指定します。

img[width="" height=""]

テキストを入力

テキストを入力するときは｛｝を指定します。

これを先程のクラス名の部分と応用すると

要素.クラス名{テキスト}で指定した要素、クラス名、テキストを作れます。

グルーピングしてまとめて入力する

グルーピングしてまとめて書く場合は()でまとめます。

dl>(dt+dd)*3

コメントを入力する

コメントの追加をする場合はc を入力することとなります。

div.item|c

CSSのショートバンド

よく使うCSSのショートバンドをまとめました。

その他のスニペット

HTMLの雛形を出力

！で、HTMLの雛形を出力します。

@m

@mでmedia(screen)を出力します。

Emmet Sheet

最後にチートシートをご紹介します。

その他のEmmetはこちらを参考にご活用下さい。

cheat-sheet

Emmet記法をつかって今後のコーディングに役立てましょう〜！

【VSCode】スニペットで爆速 についてはこちら

【VSCode】マルチカーソルと選択で爆速 についてはこちら