HTMLやCSSの学習を始めると、「タグを毎回全部入力するのは面倒…」と感じる方も多いのではないでしょうか？
そんなときに役立つのが、VS Codeに標準搭載されている機能です。
これを使えば、1行の省略記法とTabキーだけで複数のタグを一瞬で展開できます。この記事では、初心者でもすぐに使える基本と便利な使い方をわかりやすく紹介します。
Emmet機能（エメット）とは？
Emmet機能の基本的な概要
これは、HTMLやCSSを短縮記法で入力し、【Tabキー】で一瞬にして展開できる便利機能です。
VS Codeには標準で搭載されているため、追加インストールの必要もありません。
使うメリット
- 毎回タグをすべて入力する必要がない
- コーディングスピードが大幅に向上
- 初心者でも簡単に導入できる
- よく使うタグ構造をパターン化できる
Emmetの使い方【HTML編】
liタグを複数展開する
<li> （リスト）を何個も書きたい
・半角英数で li*６ と入力し、タブキーを押すと
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・liタグが数字の分だけできます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・実際のパソコン画面↓
半角英数で li*６ と入力すると、右側にemmet 省略記法と出ます
Tabキーを押すと、このようにリストが6つ出来上がります。もし３つ作りたい場合、数字は３と入れます。
あとはタグの間に文字を入れるだけ！
このように、機能を覚えると、何個も書いていたHTMLコードが、たった１行＋Tabキーで完成します
ulタグとliタグを同時に展開する
<li> タグを <ul> タグで囲う事がよくあります。そんな場合のやり方をご紹介します。
リスト構造をまとめて作りたい場合は以下のように書き、タブキーを押します。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
すると、<ul>で囲まれたリストが一括生成されます。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・実際のパソコン画面↓
Emmetの使い方【div・class・id編】
・divとは？初心者向けHTMLタグ解説｜見えない箱の役割と使い方
divタグを展開する
div と入力して Tabキーを押すと
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・<div></div>が生成されます
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・実際のパソコン画面↓
class付きのdivを作成する
ドット classにつける名前 ＋ Tabキー で
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・実際のパソコン画面↓
id付きのdivを作成する
次はidの場合、classの時は【 .（ドット）】を使いましたが、id の時は＃（シャープ）を使います
＃（シャープ）id の名前 を入力しTabキー押します
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
div id の要素ができました！
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
・実際のパソコン画面↓
「擬似クラス :hover の使い方」
Emmetを使う準備は不要
Visual Studio Codeでは、Emmet機能がデフォルトで有効になっています。
そのため、特別な設定をしなくてもすぐに使い始められます。
まとめ｜コーディングをもっと楽に
はじめは「覚えられるかな？」と思うかもしれませんが、Emmetは よく使うパターンだけ覚えればOK です。li*6 → リスト生成、.class → class付きdiv など、シンプルな組み合わせから始めるとすぐに慣れます。
毎回タグを手入力していた頃には戻れなくなるほど便利なので、ぜひ活用して、コーディングの効率化と楽しさ を体感してみてください！
Comments