Emmet記法というのはHTMLやCSSを省略記法で簡単に記述できるという便利な記法。簡単にいうとショートカットキーを打ってEnterするとその場で勝手にコードが展開されるというもの。これでタイプ数の削減が期待できてコーディング時間もかなり削減できるはず。なおVSCodeは初期状態でEmmetが使える。
index.htmlのひな型
まずはよく使う、index.htmlのひな型の例。
「!」と打って…
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/image-1024x540.png)
Enterを押すと…11行分のコードが勝手に展開される。必要に応じてtitle等を書き換えるだけ。
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/111-1024x540.png)
リスト
次にリスト。li要素を5個作りたいとする。
ならば「ul>li*5」と打って…
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/image-2-1024x540.png)
Enterを押すと…。ul内にli要素が5個生成された。
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/222-1024x540.png)
CSS読み込み
head内でCSSを読み込みたい?
それなら「link:css」と打って…
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/image-4-1024x540.png)
Enterを押すと…。link rel=””のタグが生成された。あとはcss名を編集するだけ。
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/333-1024x540.png)
scriptの読み込み
body下方でscript(js)を読み込みたい?
それなら「script:src」と打って…
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/image-5-1024x540.png)
Enterを押すと…。<script src=””>のタグが生成された。あとはファイル名を指定するだけ。
![](https://exam-knock.com/exam/wp-content/uploads/2023/08/444-1024x540.png)
10秒でindex.htmlができあがり。今回はサンプルだけだったけど、もう少し掘り下げて本格的に使ってみるとおもしろそう。