美味しいものが食べたい

食べてる時と寝てる時が幸せ

Emmet

自分が勉強したことをまとめて、吐き出す場所になりつつあるこのブログ。 今日はEmmet。Emmetの呼び方ではなくて、わたしはZen Cordingが流行った時代の人ですが、 !の展開は覚えてるけど実際0ベースのコーディングそこまですることがなかったのもあり記憶の彼方へ葬り去られてたのを呼び起こすべく。

Emmetってなんぞ?

早い話は、タグを一から直打ちせずに省略形でかいて展開できるってことかな。 まぁそれをやるには頭の中でhtml組み立てれる必要があるのだけど。

Emmet — the essential toolkit for web-developers

わたしは直打ちしながらあれこれ考えたりするので、脳みそ的に合ってないんじゃないかと思いつつも 今回は少しでも効率化に特化してるのでこの際使いたい。

直近でコーディングの仕事もらったので、そこら辺でもワシワシと使ってこうかなと思ってます。 ハマったことがあれば、まぁその時にでも。

以下個人的にこれくらい知っとけばいいだろうてのまとめ

・[]属性値を指定する場合、tableなど

・>はネスト

・#はid, .はclass, :はtype

・+よくある要素と子要素の展開(ul+,ol+,table+,dl+)

・+隣り合った要素の展開
div.hoge+div.moge
→
<div class="hoge"></div>
<div class="moge"></div>

・要素内コメント
p{hoge}
→
<p>hoge</p>

・idをコメントアウトにして展開
div#hoge|c
→
<div id="hoge"></div>
<!-- /#hoge -->

・複数の入れ子の展開
(div>h2)*3
→
<div>
  <h2></h2>
</div>
<div>
  <h2></h2>
</div>
<div>
  <h2></h2>
</div>

・連番の指定方法(要素)
h$*3
→
<h1></h1>
<h2></h2>
<h3></h3>

・連番の指定方法(class)
div.hoge$*3
→
<div class="hoge1"></div>
<div class="hoge2"></div>
<div class="hoge3"></div>

・複数行の連番の指定方法(class)
div.class-$$*3
→
<div class="class-01"></div>
<div class="class-02"></div>
<div class="class-03"></div>
※$$$にすると001から展開される

・a要素を入れ子にする
table>tr>td>a>
→
<table>
  <tr>
    <td><a href=""></a></td>
  </tr>
</table>

・^を連結して記載することで何階層も上にいくことが可能になります
div.hoge1>div.hoge2>div.hoge3>div.hoge4^^^^div.hoge5
→
<div class="hoge1">
  <div class="hoge2">
    <div class="hoge3">
      <div class="hoge4"></div>
    </div>
  </div>
</div>
<div class="hoge5"></div>

こんな感じ。

全てをやろうとするとめんどくさそうなので、要所要所で使ったり 書くよりコピペしたほうがいい場合なんかは臨機応変に対応した方がいいかな。