HTMLをもっと簡単に早く書きたい!
htmlのタグを書くのってめんどいですよね。。。
そんな時に使うのが!!!今回紹介するHTML Emmetです!
HTML Emmetとは
htmlを効率よく書くために作られたショートカットキーのようなもの
直感的な操作で素早くhtmlの構造を作成できます。
例1
htmlを書くとき、最初<!DOCTYPE html>
って書くと思うんですけどvsCode上で以下のように!を入力してEnter押すと
Demo.html
!
こんな感じでhtmlの基本形が出てきますよね!これがまさにEmmetです!
Demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
例2
例えば以下のようにコマンドを打つと、、、
Demo.html
<body>
div>p>a
</body>
こんな感じで一気にタグを作ってくれるんです!便利ですねぇ
Demo.html
<body>
<div>
<p><a href=""></a></p>
</div>
</body>
例3
次はこんな感じでコマンドを打ってみると、、、 お分かりですかね?
Demo.html
<body>
<div>
<p><a href=""></a></p>
ul>li*3
</div>
</body>
こーんな感じになっちゃいます!
Demo.html
<body>
<body>
<div>
<p><a href=""></a></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</body>
余計な説明はしません。皆さんなら直感で書けるはずです!w
なんとなく概要はわかったと思うので、気になる方は
このページまで飛んでみてください!色んな記法に出会えると思います!
僕も勉強頑張ります!
それでは!