Visual Studio Code (VSCode) で Emmet を使用して HTML を高速に記述するための代表的なショートカットを紹介します。 Emmet は HTML や CSS のコーディングを効率的にするためのツールで、以下のショートカットは VSCode で直接使うことができます。
! - HTML5 のドキュメント構造を生成
入力: ! 出力:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>element>child - 親要素の中に子要素を生成
入力: div>p#paragraph 出力:
<div>
<p id="paragraph"></p>
</div>element+element - 同じ階層に複数の要素を生成
入力: div+p 出力:
<div></div>
<p></p>element*number - 指定した数だけ同じ要素を生成
入力: ul>li*5 出力:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>element{Text} - 要素の中にテキストを追加
入力: p{Hello World} 出力:
<p>Hello World</p>element[class="name"] - クラス名を持つ要素を生成
入力: div.container 出力:
<div class="container"></div>element#id - ID を持つ要素を生成
入力: div#header 出力:
<div id="header"></div>まとめ
これらのショートカットを覚えて活用することで、HTMLのコーディングをより速く、そして効率的に進めることができるようになります。EmmetはVSCodeだけでなく、多くのエディタでサポートされていますので、ぜひ積極的に利用してみてください。
