[ Emmetで爆速コーディング ]VSCodeでEmmetを使ってみた

7438 ワード
emmet udemy VSCode Udemy学習応援 初心者 初心者 テキストリンク

こんにちは！ゲンキです！
2回目の投稿です！今回は、Udemyの講座でemmetが紹介されていてめっちゃ便利で感動したので、みなさん知っているかもしれませんが紹介します！
自分への備忘録も兼ねているの暖かい目で見て頂けると嬉しいです

さっそく紹介していきます！

目次

1.HTMLひな形展開
2.ID名のついたdivタグ展開
3.クラス名のついたdivタグ展開
4.クラス名のついたHTMLタグ展開
5.ID名のついたHTMLタグ展開
6.タグを入れ子にして展開
7.タグと入れ子に対してクラス名をつけて展開
8.タグを入れ子にして任意の数だけ展開
9.入れ子のクラス名にナンバーをつけて展開
10.ダミーテキストの展開

HTMLひな形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

これはかなり知っている人も多いかもしれません！自分もいつ覚えたかは忘れてしまいましたがこれだけは知っていました！

！＋ tab　で展開することができます！
今から紹介していくのも最後にtabキーを押すのは変わりません！

ID名のついたdivタグ展開

#ID名
<div id="ID名"></div>

　# + ID名

クラス名のついたdivタグ展開

.クラス名
<div class="クラス名"></div>

. + クラス名

クラス名のついたHTMLタグ展開

span.クラス名
<span class="クラス名"></span>
<section class="クラス名"></section>

HTMLタグ　+　. +　クラス名

ID名のついたHTMLタグ展開

span#ID名
<span id="ID名"></span>
<section id="ID名"></section>

HTMLタグ　+　# +　ID名

タグを入れ子にして展開

div>span
<div><span></span></div>

HTMLタグ + > + HTMLタグ

タグと入れ子にして対してID名をつけて展開

#ID名>span#ID名
<div id="ID名"><span id="ID名"></span></div>

# + HTMLタグ + ID名 + >+ HTMLタグ + # + ID名
クラス名をつけたいときは＃を.に変える

タグを入れ子にして任意の数だけ展開

ul>li.item*6
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

HTMLタグ>HTMLタグ.クラス名 * 展開したい入れ子の数

入れ子のクラス名にナンバーをつけて展開

ul>li.item$*6
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
</ul>

HTMLタグ > HTMLタグ . クラス名 $ ＊　展開したい入れ子の数
※ $を２つにすると数字の前に０を入れれます

ダミーテキストの展開

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti nisi fugiat veritatis, cupiditate accusantium culpa quam ea fuga, reiciendis placeat cum tempore omnis! Illum ab nam rerum quo, ex quae.

lorem + tabキーでダミーテキストを挿入

まとめ

今回はul,li,span,div,sectionタグなどを使っていますが他のタグも使用できます！
Emmetを使うと
- コーディングを効率的にできる
- 記述ミスを少なくできる
などのメリットがあるのでぜひ使用してみてください！僕もこれからなるべく使っていこうと思います！
間違っているところなどありましたらコメントで教えて頂けると嬉しいです

かなり分かりやすく解説されてあるので初心者の方にもおすすめです！
今回受講したUdemy講座