TORAT
ホームページ作成やWebサイトの開発をされてる方は、既にご存じのものが多いかもしれませんが、コーディングをする際に便利なEmmetをまとめてみました。
作業効率が上がる便利なものなので、ぜひ使ってみてください。
開発環境
Windows 10
Visual Studio Code、Dreamweaver
Emmetの概要
Emmetは、ショートカットを書いてTabを押すことでコードを展開する仕様になっています。
Emmetを使うと、短い記述を1行書くだけで多くのコードを出力することができます。
自動的に閉じタグも付けてくれるので、繰り返しコードを書いたりコピペする必要がなくなります。
タグのショートカット
早速、Emmetを使用して簡単にコードを書くことができるショートカットを紹介します。
「タグ名」などを記述した後に、Tabを押すだけの簡単な操作です。
「タグ名」や「数値」は自由に変更可能です。
タグの作成
ショートカットを記述してTabキーを押すとHTMLタグに変換されます。
p Tab
<p></p>
div Tab
<div></div>
クラスの付与
.を含めて記述すると、ID名を付与できます。
div.name Tab
<div class="name"></div>
複数のクラス名を付ける場合は、.を連続して記述します。
div.name.title.bold Tab
<div class="name title bold"></div>
IDの付与
#を含めて記述すると、ID名を付与できます。
div#page Tab
<div id="name"></div>
IDとクラス名を同時に記述することもできます。
div.name.title.bold#page Tab
<div class="name title bold" id="name"></div>
隣接
隣り合った要素をまとめて書く場合は+で繋ぐことで、以下のように変換されます。
h1+h2+p Tab
<h1></h1>
<h2></h2>
<p></p>
入れ子
リスト要素など、HTMLの入れ子は>でタグを繋ぐことで、以下のように変換されます。
ul>li Tab
<ul>
<li></li>
</ul>
繰り返し
*と繰り返したいタグの回数を記述することで、以下のように変換されます。
p*3 Tab
<p></p>
<p></p>
<p></p>
入れ子と繰り返しを同時に使うと、下記のようなリスト要素を簡単に記述できます。
ul>li.list*4 Tab
<ul>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
<li class="list"></li>
</ul>
連番
クラス名などで連番が必要な場合は、$を記述することで、以下のように変換されます。
ul>li.list-$*4 Tab
<ul>
<li class="list-1"></li>
<li class="list-2"></li>
<li class="list-3"></li>
<li class="list-4"></li>
</ul>
最後に
僕はEmmetを使って、繰り返しの要素を記述する手間や、細かいコピペ作業が減って楽になりました。また、タグの閉じ忘れも防げるので、コーディングの効率化を実感できました。
