VS CodeのEmmetの使い方・HTML/CSS入力を爆速にするショートカット

Emmetとは？

Emmetは、HTMLやCSSを書く際にコードの入力を効率化するための強力なツールです。VS Codeではデフォルトでサポートされており、開発者が短い記法で複雑なコードを簡単に生成できます。

Emmetの基本構文

HTMLの生成

入力	出力
`div`	`<div></div>`
`ul>li*5`	`<ul><li></li><li></li><li></li><li></li><li></li></ul>`
`a[href=""]`	`<a href=""></a>`
`header+main+footer`	`<header></header><main></main><footer></footer>`
`table>tr3>td2`	`<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>`

CSSの生成

入力	出力
`m10`	`margin: 10px;`
`p10-20`	`padding: 10px 20px;`
`bgc#ccc`	`background-color: #ccc;`
`w100`	`width: 100px;`
`pos-a`	`position: absolute;`

Emmetの設定方法

設定ファイルを開く
- VS Codeのコマンドパレット（Ctrl + Shift + P / Cmd + Shift + P）で Preferences: Open Settings (JSON) を選択します。
設定を追加する 以下を設定ファイルに追加することで、Emmetの動作をカスタマイズできます：

"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true }
emmet.includeLanguages: Emmetを特定の言語で有効化。
emmet.triggerExpansionOnTab: TabキーでEmmetを展開する。

よく使うショートカット

ショートカット	説明
`!`	HTML5の基本テンプレートを生成
`div.classname`	特定のクラス名を持つdivを生成
`input:checkbox+label`	チェックボックスとラベルを生成
`nav>ul>li*3>a`	ナビゲーションのリストを作成

便利な機能

ラップウィズアボーション (Wrap with Abbreviation)

選択したコードを特定のEmmet記法でラップできます。

コードを選択。
Ctrl + Shift + P / Cmd + Shift + P を押して、Emmet: Wrap with Abbreviation を選択。
ラップするEmmet記法を入力。

自動補完

VS CodeではEmmetの補完が入力中に自動的に表示されます。補完を有効にするには、Tabキーで展開を行えます。

チートシート

Emmetの全機能を網羅したチートシートは以下のリンクから確認できます：

Emmet Cheat Sheet

まとめ

Emmetは、HTMLやCSSの作業を大幅に効率化する便利なツールです。慣れるまではチートシートを参考にしつつ、自分のプロジェクトで活用してみてください！

よくある質問（FAQ）

Q. Emmetとは何ですか？

EmmetはHTML/CSSのコーディングを高速化するツールで、省略記法（略語）を展開してコードを自動生成します。VS Codeには標準で組み込まれており、追加インストール不要ですぐに使えます。

Q. Emmetで最もよく使う略語は？

HTMLでは「!」（HTML5の雛形）、「div.class>p*3」（入れ子構造）、「ul>li*5」（リスト生成）が頻出です。CSSでは「m10」（margin: 10px）、「p20」（padding: 20px）、「dib」（display: inline-block）などが便利です。

Q. EmmetはReactやVueでも使えますか？

VS Codeの設定でEmmetの対応言語を追加すればJSX（React）やVueテンプレートでも使用できます。settings.jsonに”emmet.includeLanguages”を設定してください。

VS CodeでのEmmetの使い方ガイド