2022年6月2日vscodehtml,cssのコーデイングに慣れてくると、ソースコードを手打ちするのが手間になってくると思います。コーデイングは正確さ要求される作業なので、余計に面倒だと感じられることもあるのではないでしょうか。そんな面倒な作業を解決してくれる方法があります。Emmet(エメット)です。Emmetとはhtml,cssなどの入力を補助する拡張機能で、vscodeに標準で使えるようになっています。Emmetで用意されている記述にそって入力し、エンターキーを入力すると、タグを自動で展開してくれますので、大幅に入力する手間を減らしてくれる大変便利なものとなっています。このEmmetを活用できれば、時間的な短縮は確実にできるよになりますので、今すぐにでも使ってみてください。<li></li></ul>のように展開されます。このように非常に少ない入力で済みますので、Emmetを使えば効率的に入力ができます。基本的な使い方Emmetは独自の記述方法を使いますので、実際に使うには記述方法を覚える必要があります。難しいものではないので、簡単に使うことができると思います。タグの入力タグの入力は以下のように省略して入力することが可能です。divだけ特殊で「.」を使用します。alt="">この例は一部ですが、基本的にタグ名を指定すれば、自動で展開してくれます。入れ子になる入力をしたい場合は「>」を使用します。「*」に数字を指定することによって、指定した数分を複製することができます。「$」と複製の組み合わせで連番を作ることができます。「{}」でテキストを挿入することができます。「!」の入力でhtmlの雛形を展開することができます。上記では基礎的なことを紹介しましたが、応用編ということで実践的な使い方を紹介します。テーブルを記述したい場合は、このようにします。</tr></table>タグに好きな属性を指定することができます。title=""></td>以下のように指定すると、trとtdタグにclassを指定することができます。</tr></table>以下のように「$@-」を指定すると、連番の順序を逆にすることができます。class="item01">テキスト1</li></ul>少し長くなりますが、htmlでよくある構成のものが、たった1行で記述できます。</section></aside><section></section><section></section><footer></footer>最後にEmmetで実際に使えるタグはここでは紹介できないくらい、かなりの数あります。今回はhtmlでよく使うタグを中心に紹介しました。この他についてはチートシートに記載していますので、こちらをみてください。Emmetのcssについてはこちらで詳しく解説しています。必須サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。ProgramingシェアTOPへ。