# HTMLタグの入力をラクにするスニペット集

URL: https://webrandum.net/html-tag-snippets/
公開日: 2022-05-01
更新日: 2022-05-01
カテゴリー: コーディング
タグ: Dash, HTML, スニペット
出典: Webrandum（著者: サイトウ マサカズ）

HTMLタグの入力をラクにするスニペット案をいくつかまとめておきます。

## 基本的な考え方

基本的には`h1<>`のように、タグ名を入力してそのあとに山括弧を入力すると発火するようにします。

```
タグ名<>
```

### テキストエディタではEmmetを使用する

ちなみに、Visual Studio CodeなどのテキストエディタではEmmetを使用した方が早く入力できます。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/03/eyecatch-19.jpg)効率的なマークアップが出来るようになるEmmetでHTMLを書く時の基本https://webrandum.net/emmet-htmlWebサイトのマークアップスピードを上げるためには、そもそも書く文字数を減らすとスピードが上がります。HTMLの場合は下記のような理由から、記述に時間がかかってしまいます 開始タグと閉じタグで、要素名を2回入力する必要がある <>を入力する必要がある インデントの入力が面倒今回はそんなHTMLを素早く入力できるEmmetという記法についてまとめます。Emmetとは？Emmet（旧：Zen-Coding）は、独自の省略記法でマークアップスピードを上げるプラグインです。括弧や閉じタグを書かずに記述して最後にtabで展開するので、単純に...](https://webrandum.net/emmet-html)

また、Emmetだと[一括でHTMLタグの入力](https://webrandum.net/emmet-multiple-tag/)ができたり、複数行の原稿に対して1行1行をタグで囲むような便利な機能（[Wrap with Abbreviation](https://webrandum.net/emmet-wrap-with-abbreviation/)）が使えます。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/05/eyecatch-3.jpg)Emmetで複数のタグを一括展開して、コーディングスピードをさらに上げる方法https://webrandum.net/emmet-multiple-tag効率的にHTMLを入力するために、Emmetは欠かせない機能です。意外と知られていませんが、Emmetでは複数タグを一括展開できます。たとえば下記の1行をざっと書いてtabでEmmet展開をすると...header.header>.header_wrap>.header_left>h1>img^^.header_right>nav>ul.header_nav>li*3>a下記のHTMLが一気にできあがります。<header class="header"> <div class="header_wrap"> <div class="header_left"> <h1><img src="" alt=&quot...](https://webrandum.net/emmet-multiple-tag)

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/12/eyecatch-29.jpg)EmmetのWrap with Abbreviationで複数行のマークアップを効率的に行うhttps://webrandum.net/emmet-wrap-with-abbreviationEmmetを使うとコードが爆速で入力できるようになりますが、さらに極めたい人は「Wrap with Abbreviation」機能を使うと、選択したテキストをすばやくHTMLタグで囲えます。Visual Studio Codeでの使用方法Visual Studio Codeで使いたい場合は、まずテキストを選択して、shift + command + Pでコマンドパレットを表示させます。「Wrap with Abbreviation」と入力して、「個々の行でラップ変換（Wrap Indivisual Lines with Abbreviation）」を選択します。すると、入力項目が表示されるので、そこにEmmetの記述をします。今回はリストに...](https://webrandum.net/emmet-wrap-with-abbreviation)

### テキストエディタ以外でスニペットを使用する

WordPressの編集画面など、テキストエディタ以外の場所でHTMLタグを入力するときにはスニペットを使用します。

Emmetが使用できない場所でHTMLタグを入力しないといけないときに非常に役に立ちます。

## スニペット一覧

ひと通りよく使うHTMLタグを登録しておきます。

`.（ピリオド）`をタグと括弧の間に入れるとclass付き、`#（ハッシュ）`を入れるとid付きになるようにしています。

ちなみに、使うスニペットアプリは[Dash](https://webrandum.net/dash6/)を想定しています。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/04/eyecatch-3.jpg)スニペットとしてもドキュメント検索としても使える「Dash 6」でコードや定型文を...https://webrandum.net/dash6スニペットとしてもドキュメント検索としても使えるMacユーザーにオススメのアプリ、「Dash」ですが、過去に記事にしたことがあります。ただ、時間も経ってメジャーアップデートもあったので、今回改めてまとめ直します。スニペットアプリは必須「スニペット（snippet）」は断片という意味があり、何度も再利用して繰り返し使うコードや定型文のことです。スニペット(英語: snippet)とは、「断片」という意味で、再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語である。スニペット - Wik...](https://webrandum.net/dash6)

| 変換前 | 変換後 | 内容 |
| --- | --- | --- |

| 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>
```
<!-- permalink_structure ends with slash (/) but REQUEST_URI does not end with slash (/) -->