HTMLタグの入力をラクにするスニペット集
HTMLタグの入力をラクにするスニペット案をいくつかまとめておきます。
基本的な考え方
基本的にはh1<>のように、タグ名を入力してそのあとに山括弧を入力すると発火するようにします。
タグ名<>テキストエディタではEmmetを使用する
ちなみに、Visual Studio CodeなどのテキストエディタではEmmetを使用した方が早く入力できます。
また、Emmetだと一括でHTMLタグの入力ができたり、複数行の原稿に対して1行1行をタグで囲むような便利な機能（Wrap with Abbreviation）が使えます。
テキストエディタ以外でスニペットを使用する
WordPressの編集画面など、テキストエディタ以外の場所でHTMLタグを入力するときにはスニペットを使用します。
Emmetが使用できない場所でHTMLタグを入力しないといけないときに非常に役に立ちます。
スニペット一覧
ひと通りよく使うHTMLタグを登録しておきます。
.（ピリオド）をタグと括弧の間に入れるとclass付き、#（ハッシュ）を入れるとid付きになるようにしています。
ちなみに、使うスニペットアプリはDashを想定しています。
| 変換前 | 変換後 | 内容 |
|---|---|---|
| h1<> | <h1>@cursor</h1> | |
| h2<> | <h2>@cursor</h2> | |
| h3<> | <h3>@cursor</h3> | |
| h4<> | <h4>@cursor</h4> | |
| h5<> | <h5>@cursor</h5> | |
| h6<> | <h6>@cursor</h6> | |
| img<> | <img src=”@cursor” alt=””> | |
| a<> | <a href=”@cursor”></a> | |
| br<> | <br> | |
| table<> | <table> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <th></th> <td></td> </tr> </tbody> </table> | よく使うテーブルの形式を登録 |
| thead<> | <thead> @cursor </thead> | |
| tbody<> | <tbody> @cursor </tbody> | |
| tr<> | <tr> @cursor </tr> | |
| th<> | <th>@cursor</th> | |
| td<> | <td>@cursor</td> | |
| strong<> | <strong>@cursor</strong> | |
| span<> | <span>@cursor</span> | |
| div<> | <div>@cursor</div> | |
| ul<> | <ul> <li>@cursor</li> </ul> | |
| ol<> | <ol> <li>@cursor</li> </ol> | |
| li<> | <li>@cursor</li> | |
| div.<> | <div class=”@cursor”></div> | .を付けたらclass指定 |
| div#<> | <div id=”@cursor”></div> | #を付けたらid指定 |
| span.<> | <span class=”@cursor”></span> | .を付けたらclass指定 |
| span#<> | <span id=”@cursor”></span> | #を付けたらid指定 |
| !!!<> | <!DOCTYPE html> | Emmetと同じ |
初期設定
!<>と入力すると、Emmetと同じく基本テンプレートに変換されるようにしています。
<!DOCTYPE html>
<html lang="ja">
<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>ドキュメント</title>
</head>
<body>
@cursor
</body>
</html>
