Frontend

Emmet: HTMLコーディングの効率化を実現する記述短縮ツール

EmmetはHTMLコーディングを効率化する強力なツール。 この記事では、Emmetの基本的な使い方から高度なテクニックまでを解説し、 HTML記述の短縮化と生産性向上の方法をまとめる。

モクジ

HTML Emmetの利用方法

Emmet を利用する際のアクション
actionEmmet + Tab
or
Emmet + Return / Enter
  • 要素名の <>の記述が不要。
  • 必要な閉じタグ< /TAG >が補完される。

Emmetで使用される記号

代表的なEmmet、展開されるCodeとその説明を表にまとめる。

HTMLのEmmet記号

Emmet Table
Emmet Code Description
! ! 
<!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>Document</title>
          </head>
          <body>
           
          </body>
          </html>

 HTML5のDOCTYPE宣言を出力。
デフォルトでは言語設定部分が英語を指定しているので、 日本語(”ja”)への変更が必要。
HTML Tag
基本型
要素(タグ名)
 a 
<a href=""></a>

 タグ名を記述すると、<>と</>が補完される。
>
階層
要素 ‹ 要素
 ul > li 
<ul>
            <li></li>
          </ul>

 要素を入れ子構造で展開
親要素と子要素を作る。
*
複製
要素 * 数字
 ul > li*3 
<ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>

 同じ要素を複数展開。
+
隣接
要素 + 要素
 dl > dt+dd 
<dl>
            <dt></dt>
            <dd></dd>
          </dl>

 要素を同階層に並列展開
兄弟要素を作る。
.
class付与
要素 . example
 div.box 
<div class="box"></div>

 展開するコードにクラス名を付与divの記述省略可。
#
ID付与
要素 # example
 div#wrapper.box 
<div id="wrapper" class="box">
          </div>

 展開するコードにクラス名を付与させたい場合に使用。
divの記述省略可。
^
移動
 div>h1+p^ul>li*3 
<div>
            <h1></h1>
            <p></p>
          </div>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>

 ひとつ上の階層に移動し、続けて入力する場合に使用。
()
グループ化
 dl>(dt+dd)*2 
<dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
          </dl>

 複数の要素をまとめる。
$
連番
 ul>li.legit$*5 
<ul>
            <li class = "legit1"></li>
            <li class = "legit2"></li>
            <li class = "legit3"></li>
            <li class = "legit4"></li>
            <li class = "legit5"></li>
          </ul>

 複数同じ要素を使うコードで使用。
$を増やすと桁数が増える。
(ex: $$→『01』,$$$→『001』)
@（アットマーク）で数字の開始番号を指定。
[]
属性
 img[title=”sample” alt=”image”] 
<img src="" alt="image" title="sample">

 属性を付与。
形式ほ [プロパティ=値]。
複数指定する場合は半角スペースで区切る。
{}
テキスト挿入
 h2{TITLE} 
<h2>TITLE</h2>

 展開するコードにテキストを挿入させたい場合に使用。
c
コメント
 c 
<!--  -->

div.box|c 

<div class="box">
          </div><!-- /.box -->

 ex01: コメント挿入のためのコードが展開。
ex02: クラス名をコメントに付与。
lorem
ダミーテキスト
 ! 
Lorem ipsum dolor sit, amet consectetur adipisicing elit.Dicta, ut harum asperiores fugit cum facere unde voluptates 
          vitae necessitatibus tempora! Ipsum quos, nemo sequi unde 
          esse placeat dolor quia praesentium.

 展開するコードにダミーテキストを挿入。

HTML Emmetの具体的な展開例

Emmet Table
Emmet Code Description
ul>li*3>a 
<ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
          </ul>
 展開する <li>要素にそれぞれリンクを付与。
table>thead>(tr>th*2)^tbody>(tr>td*2)*2 
<table>
            <thead>
              <tr>
                <th></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>
 基本的な表テーブルを構成するコード。
ul>.test{$}*3 
<ul>
            <li class="test">1</li>
            <li class="test">2</li>
            <li class="test">3</li>
          </ul>
 子要素<li>の記述が省略可。
$により連番を補完。
table>.row_$*3>.sel_${$}*3 
<table>
           <tr class="row_1">
             <td class="sel_1">1</td>
             <td class="sel_2">2</td>
             <td class="sel_3">3</td>
           </tr>
           <tr class="row_2">
             <td class="sel_1">1</td>
             <td class="sel_2">2</td>
             <td class="sel_3">3</td>
           </tr>
           <tr class="row_3">
             <td class="sel_1">1</td>
             <td class="sel_2">2</td>
             <td class="sel_3">3</td>
           </tr>
          </table>
 $の連番機能はコメントにも使用できる。

関連記事