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

コーディング関連の記事

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^btn
と記述した場合

出力結果:

<div>
  <h2></h2>
  <p><span></span><span></span></p>
  <button></button>
</div>

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

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

出力結果:

<div></div>
<p></p>
<p></p>
<button></button>

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が一瞬で生成できます。

上で紹介した6つの記法の他にも、さまざまな省略記法が用意されています。
公式のcheatsheet

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