HTMLやCSSでを練習していると、「タグをいちいち全部書くのは大変…」
そんなあなたに知って欲しいのが、VS Codeに入っている「Emmet（エメット）」です
Emmet（エメット）って何？
Emmetとは、HTMLやCSSのコードを短く書いて、【 TABキー 】で一気に展開できる便利機能です。
たとえば
<li> （リスト）を何個も書きたい
もっと簡単にするには、半角英数で li*６ と入力すると、右側にemmet 省略記法と出ます
Tabキーを押すと、このようにリストが6つ出来上がります。もし３つ作りたい場合、数字は３と入れます。
あとはタグの間に文字を入れるだけ！
このように、Emmetを覚えると、何個も書いていたHTMLコードが、たった１行＋Tabキーで完成します
<ul> と <li> の場合
<li> タグを <ul> タグで囲う事がよくあります。そんな場合のやり方をご紹介します。
ul>li*6 と入力し、Tabキーを押すだけで、
<ul>で囲った <li> ができあがり！！
Emmetを使う準備
ビジュアルスタジオコードでは、Emmetは最初から オンになっています。そのため、特に設定は必要ありません。
よく使うエメット div
div と入力して Tabキーを押すと
div タグができます
div class の場合
ドット classにつける名前 ＋ Tabキー で
div class の要素ができます。
div id の場合
次はidの場合、classの時は【 .（ドット）】を使いましたが、id の時は＃（シャープ）を使います
＃（シャープ）id の名前 を入力しTabキー押します
div id の要素ができました！
まとめ
はじめは「こんなの覚えられるかな？」と思うかもしれませんが、よく使うパターンだけ覚えればOKです。
書いて、Tabキーを押すだけ！それだけで、作業時間がぐんと減ります。
毎回タグを手で書いていた頃には戻れなくなるかも！ぜひEmmetを使って、コーディングの楽しさとラクさを体験してみてください！
コメント