読者です 読者をやめる 読者になる 読者になる

備忘録

自分の為の備忘録

Emmet

前書き

Atomに極めて短い省略記法でHTMLやCSSを書くことができるEmmetというパッケージを入れた。
Emmetの記法を簡単にまとめる。

記法

  • Emmetではタグとしての<や>は必要ない。要素名を書けば必要であろう属性が付与された状態のスタートタグとエンドタグに自動で変換される。
  • タグを入れ子にするとき(階層を下げる時)に>を使用する。
  • 階層を上げるときは^で。
  • +記号で同じ階層の要素を記述。
  • table要素などの特定の子要素が来る要素は+を付けると子要素が挿入される。この場合他の要素を並列に付ける場合+記号を二つ付ける。
  • 要素名の後に#idnameや.classnameとすればid、class属性の付与。他にも要素名の後に特定の記述をすることで要素に対して任意の属性等を付与できる。
  • loremと記述することでダミーテキストに変換される
  • フィルターを利用することで一行で出力する等

  • 要素を指定せずともその場所に適当であろう要素が挿入される。

変換前

#header

変換後

<div id="header"></div>

  • 属性名の後に[]と付けることで任意の属性を付与。

変換前

head+body>a[href="./test.png"alt="hoge"]+ul.list>li

変換後

<head></head>
<body>
  <a href="./test.png"alt="hoge"></a>
  <ul class="list">
    <li></li>
  </ul>
</body>

  • {}で囲むと中身のテキスト等に

変換前

p{test}

変換後

<p>test</p>

  • *numとすることで要素の複製。その際\$記号を用いればその部分が連番に。

変換前

p+ul>li{list$}*3

変換後

<p></p>
<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

変換前

!

変換後

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

CSS用にも用意されているが、大変量が多く書ききれる気がしない。


参考

HTML/CSSを爆速コーディング Emmet入門
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
公式のチートシート