emmetで最低限覚えておくと便利な書き方6つ

この記事は投稿から4年以上が経つ記事で、現在トレンド性が高い記事ではない可能性があります。
執筆された当時とは異なり、Web制作現場におけるテキストエディタの主流は VisualStudio Code (VSCode) となっています。VSCodeにおいて、emmetは自動補完形式がデフォルトです。

1.とりあえずhtmlの雛形が欲しい時

! を入力して、ctrl+e。
出力結果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2.親要素 > 子要素 > 孫要素の構造を作りたい時

次のように > でつないで、ctrl+e。
例：
nav>ul>li
と記述した場合

出力結果：

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

3.同一の子要素を複数書きたい時

次のように *の後に欲しい子要素の数を記述して、ctrl+e。
例：
ul>li*3
と記述した場合

出力結果：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

4.異なる子要素を複数書きたい時

次のように ^ を使って、ctrl+e。
例：
div>h2+p>span*2^a
と記述した場合

出力結果：

<div>
  <h2></h2>
  <p><span></span><span></span></p>
  <a href=""></a>
</div>

5.いろいろな要素を並べたい時

次のように +でつないで、ctrl+e。
例：
div+p+p+a
と記述した場合

出力結果：

<div></div>
<p></p>
<p></p>
<a href=""></a>

6.classやidを要素に付与する

IDは、#idname の形。
classは、 .classname の形。
そのまま使えば、ID、class付きのdivとして出力される。
特定の要素につけたい時は、
要素#idname、
要素.classname のように使用する。

出力結果：

<div id="idname"></div>
<div class="classname"></div>

emmetについて

私はコーディングの際、テキストエディタは Atom を使用しています。コーディング業務が劇的に高速化したと感じたもののひとつに、
「emmet」の導入がありました。

私はAtomに、その名もストレートに
emmet という package を入れてコーディングをしています。

いちいちタグを入力するのではなく、頭の中にhtmlの構造を思い浮かべて、
emmet記法で1行書き、ctrl+e。それだけで、構造をもったhtmlが一瞬で生成できます。

emmetには、上で紹介した6つの記法の他にも、さまざまな省略記法が用意されていますので次のリンクを読むとわかりやすいかと思います。
公式のcheatsheet

emmetの導入で、コーディング速度が劇的に変わります。
ぜひお試しください！

この記事をシェアする：