こんにちは～！
今日は最近学んだ爆速でHTMLとCSSを記述できるEmmetについて紹介します！
今回はHTML編のため、HTMLの略語を紹介します！
使用しているエディタはAWS Cloud9です。他のエディタではプラグインで導入できるものや、デフォルトで備わっているものもあるようです。
公式サイトのチートシートはこちらからどうぞ。
AWS Cloud9でのEmmet使用方法
AWS Cloud9ではもともと備わっているようなので、まずは略語を入力をしCtrl+Alt+Eを押すと変換できます。Cloud9ではEmmetがなくても元々それなりに変換できるようになっていますが、Emmetを使用した方が変換できる幅が広がるように思います。
実際に使ってみよう
HTMLの略語紹介
!
!を打ったあとにCtrl+Alt+Eを押すとこのように表示されます。細かい設定はともかく、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>
タグ名
基本ですが、<>を入力せずタグ名を入れてCtrl+Alt+Eを押すとこのように表示されます。
divと打った場合
<div></div>
応用 : a{click}のように{}の中に文字を打ち込むとタグで囲む文字を指定することができます。
<a href="">click</a>
タグ名＋タグ名
異なるタグを入れ子ではない状態で入力したい場合、タグ名＋タグ名を入力後Ctrl+Alt+Eを押すとこのように表示されます。
div+aの場合
<div></div>
<a href=""></a>
タグ名*必要なタグの個数
例えばdivタグを3つ用意したい場合、div*3のように入力しCtrl+Alt+Eを押すとこのように表示されます。複数同じタグが欲しい場合はわざわざ何回も打ち込んだりしなくても、一気に入力できるのでとても便利です！
<div></div>
<div></div>
<div></div>
nav>ul>li
入れ子構造はタグ名と>を組み合わせ、Ctrl+Alt+Eを押すとこのように表示されます。
<nav>
<ul>
<li></li>
</ul>
</nav>
nav>ul>li以外にも、sec>h1>divなどでもできます。(組み合わせは自由です。実際に試してみましょう。)
.クラス名
.クラス名を打ち込みCtrl+Alt+Eを押すとこのように表示されます。(今回は.practice-classと打ち込みました)そうすると勝手にdivタグにクラス名を入れた形で反映してくれます。
<div class="practice-clas"></div>
タグ名.クラス名$*必要なタグの個数
タグ名.クラス名$*必要なタグの個数を打ちこみ、Ctrl+Alt+Eを押すとこのように表示されます。この時に自動でクラス名に数字を振ってくれるのでとても便利です
ul>li.box$*4の場合
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
<li class="box4"></li>
</ul>
#id名
#id名を打ち込みCtrl+Alt+Eを押すとこのように表示されます。(今回は#practice-idと打ち込みました)
<div id="practice-id"></div>
最後に
今回はHTMLでしたが、CSSの場合もかなり実用的なものが多いので次回はそれについて載せたいとおもいます！