✏️
HTMLコーディングを楽にする短縮記法
はじめに
JavascriptのDOMやイベントに関する勉強をする時にHTMLタグの入力がめんどくさいと感じるときがあったので、調べたものを備忘録もかねてまとめようと思います。
間違っている部分があったときには教えていただけると幸いです。
ボイラーテンプレート
・!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
これはhtml:5でも可能です。
IDの付与
・＃を含めて記述します。
<!-- div#hoge -->
<div id="hoge"></div>
クラスの付与
・.を含めて記述します。
<!-- div.hoge -->
<div class="hoge"></div>
他の属性の付与
・[]で囲んで入力します。
<!-- td[title="hoge" colspan=3] -->
<td title="hoge" colspan="3"></td>
入れ子
・>でタグをつなぎます。
<!-- ul>li -->
<ul>
<li></li>
</ul>
繰り返し
・＊と繰り返すタグの回数を入力します。
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
文の入力
・{}で囲んで入力します。
<!-- div{Hello World} -->
<div>Hello World</div>
おわりに
調べてみると他にもありましたが、よく使いそうなものをあげました。組み合わせて使用することもできるので、なれたら時間短縮できそう。
Discussion