某高専生の某高専生による高専生のための...

技術メモ / 車 / 音楽 / 雑記 / etc...

Emmetを使ってみた感想

f:id:nomunomu0504:20190411150607p:plain:w0

結論

慣れたらめちゃくちゃ使いやすくて、戻らずにはいられなくなる。

Emmetとは

Emmet(元 Zen-coding)は、HTMLやCSSの編集を効率化してくれるプラグインです。ここではSublime Textでのプラグインを紹介しますが、Atomにもあるようです。(ほかのエディタはわからないです...。)

省略記法によって記述されたHTML, CSSを展開することで、コードを記述することができます。

Emmetの使い方

Emmetのチートシートが以下にあります。基本的な記法から応用的な記法まですべて書いてあります。 Cheat Sheet

Emmetの基本的文法

Emmetの基本的な文法としては

タグ情報 メタ情報 テキスト 構造情報

です

  • タグ情報 div, p, aなどのタグ。<>は記述しません。

  • メタ情報 タグに付随する、class, id, typeなどです。classの場合は「.(ドット)」idの場合は「#」typeの場合には「:」でそれぞれ表現します。そのほかのメタ情報は「[属性名=値]」で表します。

  • テキスト タグの要素部分。「{}」で表現します。

  • 構造情報 次に続くタグとの関係性を表します。入れ子の場合は「>」並列の場合は「+」階層が上位(現在のタグ要素から抜ける)場合は「^」で表現します。

  • 例 省略記法から展開するには、tab, ctrl + Eを用います。

<!-- div.cotainer#main>h1{タイトル}+a[href=/ target=_black]{トップページ} -->
<div class="container" id="main">
  <h1>タイトル</h1>
  <a href="/" target="_blank">トップページ</a>
</div>

その他文法

  • 繰り返し 「*」で繰り返し数を指定します
<!-- li*3 -->
<li></li>
<li></li>
<li></li>
  • 連番 「$」と繰り返しを組み合わせます。
<!-- li#list$$*3 -->
<li id="list01"></li>
<li id="list02"></li>
<li id="list03"></li>

<!-- ul>li.item$$$*5 -->
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
  • グルーピング 「^」で階層を調整できますが、ネストが深くなると見づらくなるので「()」でまとめます。
<!-- html>(head>meta[charset=utf8]+title{テストタイトル})+(body>div.container) -->
<html>
    <head>
       <meta charset="UTF-8">
       <title>テストタイトル</title>
   </head>
    <body>
        <div class="container"></div>
    </body>
</html>
  • テンプレ 「!」を展開するとHTMLのひな型が展開されるそうです。テンプレは変更できるようです。
<!-- ! -- >
<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
   </head>
    <body>
        
    </body>
</html>