今回はコーディングする際に知っていると楽なEmmetについてご紹介します！
まずEmmetとは･･･HTMLやCSSなどコーディングの際に簡略化した形で記述し、高速化させるためのツールです。
そして、Emmetを使うためにはエディタによって導入方法が異なります。
ここでは導入方法の説明を省くので、自身の使用するエディタによって導入方法を検索してみてください！(Emmetの基本的な展開方法はTabキーで展開されます。)
HTML編
1.タグの展開
いちいち<>を入力することなくタグ名を展開すると、自動で閉じタグを作成することができます。
試しに、pを展開してみると･･･
<p></p>一瞬で<>や閉じタグを作ってくれます！
2.ID,Classの付与
divにクラス名やID名を付けたい場合は、.(Class名)、#(ID名)を前につけます。
試しに、.wrapと#wrapをそれぞれ展開してみると･･･
<div class="wrap"></div>
<div id="wrap"></div>となります！
div以外のタグに付与したい場合は、タグ名.(Class名)、タグ名#(ID名)と記述します。
試しに、body.wrapとbody#wrapを展開すると･･･
<body class="wrap"></body>
<body id="wrap"></body>bodyにクラス名が一瞬で付与されました。
あらかじめクラス名やID名を決めている場合はEmmetを使用するといいでしょう。
3.HTMLのひな型の展開
！を入力し展開すると･･･
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>このようにある程度のひな型を作成することができます。
あとは用途に応じてlang=”en”の所など変更して使用しましょう。
4.同じものの展開
“*数字”で指定した数字分、同じものを作成することができます。
ul>li*5>a を展開すると･･･
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>このように同じものを指定した分、作成することができるのでこれはかなり便利です。
5.構造の展開
5-1. “>”で入れ子を作成できます。
例）#wrap>ul>li>を展開すると･･･
<div id="wrap">
<ul>
<li></li>
</ul>
</div>このような構造が作成できました！
5-2. “^”で１つ上に戻ります。
例）#wrap>ul>li^.wrap_innerを展開してみると･･･
<div id="wrap">
<ul>
<li></li>
</ul>
<div class="wrap_inner"></div>
</div>“^”で.wrap_innerをulの兄弟要素にすることができました。
5-3. “+”で兄弟要素を作成できます。
例）#wrap>.wrap_inner+.wrap_list.+.wrap_contentを展開すると･･･
<div id="wrap">
<div class="wrap_inner"></div>
<div class="wrap_list"></div>
<div class="wrap_content"></div>
</div>このように兄弟要素をたくさん生成することができます。
以上、最低限知っておくと便利なEmmet 5選【HTML編】でした!
簡単に覚えることができ、コーディングスピードも上がるので、ぜひEmmetを使用して爆速コーディングを目指しましょう！
他にもこんな記事があります。
