HTML、CSS爆速コーディングツール！Emmet（エメット）基礎編

EmmetのチートシートURLは以下です。
https://docs.emmet.io/cheat-sheet/

紹介するのは、HTML（エイチティーエムエル）とCSS（シーエスエス）のコーディングを劇的に高速化するツール「Emmet（エメット）」です。このツールの魅力は、短いショートカットで複雑なコードを生成できる点にあります。例えば、タグの作成や属性の追加など、日常的に行う作業が驚くほど早くなります。

エメットを活用すると、長く複雑なタグや属性を一瞬で書き出すことができます。例として、最初に必要なHTMLのベース構造を出力するには、単に「!」を入力して「Tab」キーを押すだけで完了します。また、p タグや a タグなどの基本的なタグも、タグの名前を書いて「Tab」キーを押すだけで簡単に生成されます。

さらに、Emmetは複数のクラスや属性を持つタグの生成もサポートしています。例えば、「.class1.class2」のようにピリオドで区切られたクラス名を書き、Tabキーを押すと、複数のクラスを持つ要素を生成できます。また、子要素や兄弟要素を含む複雑な構造も、簡単なショートカットで出力可能です。

コーディングの効率化を目指す初学者にとって、Emmetは非常に有用なツールと言えるでしょう。しかし、最初はショートカットの覚えが必要ですので、繰り返し練習して、自分のものとしてください。

なお、この動画で紹介されているエディタは「VSCode」というもので、無料でダウンロードして使用できます。初めての方は、公式サイトからダウンロードしてみてください。


追記
※以下の記述はEmmetがアップデートし不要と判断された為、現在では「! + Tabキー」では挿入されません。
＜meta http-equiv="X-UA-Compatible" content="ie=edge"＞