HTMLって一から素で書くとなかなか大変な時ってありますよね。
sassのようなどんな環境でも使える言語ではないのですが、対応エディタ上で使えるHTMLの省略記法というものが存在するようです。
例として、VSCodeはEmmetに標準で対応しているエディタですが、一行目で
!
を入力し、直後にTabキーを押すと…
<!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>
ここまでのひな形を自動で入れ込んでくれます。
また、bodyタグ内で次のように入力し、Tabキーを入力すると…
div
自動でdivタグのブロックを保管してくれます。
<div></div>
さらに、2階層以上のHTMLタグもEmmetで記述できます。
div>a>p
<div>
<a href="">
<p></p>
</a>
</div>
HTML以外にも、CSSもEmmet記法があり、省略して記述することができます。
div {
t30+w60
}
↓
div {
top: 30px;
width: 60px;
}
今回はVSCodeを例として紹介しましたが、PhpStormなどの他の著名なエディタ/IDEなどでも利用できるようになっていることが多そうです。
HTMLやCSSを書いていて、コーディングのスピードが遅くて悩んでいる…という方は、Emmetを取り入れることで高速化を図れるかもしれません。
是非参考にしてみてください！
参考:
Emmetで素早くHTML/CSSコーディング！書き方と対応ツールの紹介 – tracpath
VS Code でEmmet使ったらHTML書くの速くなった～‼ – Qiita
