はじめに
UdemyでHTML・CSSを復習していて **「Emmet」**という補完機能を知りました。
当たり前のように使っていたものをありましたが知らないでめちゃくちゃ便利なコマンドもありましたのでまとめていきます。
Emmetとは
HTML・CSSのコーディングをする際に、コマンドを入力すると簡単にテンプレートが作成されたり、予測変換のような形で記述してくれたりする機能です。
Visual Studio Codeのエディターにはすでに含まれています。
下記の公式サイトを見ていただければコマンドが記載されております。
Emmetチートシート
HTMLのテンプレートを呼び出す
head の中に色々記述しての時間が一瞬で**ぱっ！**って以下の記述を呼び出す事ができます。
.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>
記述方法
! + Tabキーを押す
これだけ。
一瞬でHTMLの準備が整いました。
id・classのついたdivタグを作りたい場合
.html
<div id="container"></div>
<div class="cls"></div>
このような記述も簡単に作成できます。
記述方法
idの場合
# + id名（今回は"container"） + Tabキーを押す
classの場合
. + class名（今回は"cls"） + Tabキーを押す
spanタグの場合
.html
<span class="cls"></span>
記述方法
span + . + class名 + Tabキーを押す
同じ要素を複数用意したい場合
.html
<div id="container">
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
</div>
今まではmacのショートカットキーでコピー・貼り付けをしてましたがそんな必要ありませんでした。
記述方法
# + id名 + > + . + class名 + *必要な数
# container>.cls*5
終わり
様々な書き方があるのでチートシートを見ながら自分で使えそうなものを選ぶのが良いかと思います！