Emmet Everywhere 備忘 #Emmet

phpstormでEmmetを使おうかなとか思ったのでメモ。
Emmet Everywhereのpluginをインストール。

基本は１行書いて「tab」を押して実行。

・ulタグにliを3個。

実行前

ul>li*3

上記を記述後tabで実行

実行後

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

・ulタグにclass="item"のliを3個

実行前

ul>li.item*3

実行後

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

・ulタグにid="item"のliを3個

.itemでclassだったのでもちろんidは#item。

実行前

ul>li#item*3

実行後

<ul>
    <li id="item"></li>
    <li id="item"></li>
    <li id="item"></li>
</ul>

ただし、これだと全て同じidになってしまうので

実行前

ul>li.item$*3

「$」を使ってみる。

実行後

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

これで連番ができた。
「$$」にすると「01」から連番「$$$」だと「001」から連番。

・divで囲む

対応しているタグを使わないとdivになる。

実行前

.hoge>ul>li.item$*3

実行後

<div class="hoge">
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
    </ul>
</div>

極端に書くと

実行前

.hoge>#fuga>.piyo$*3

実行後

<div class="hoge">
    <div id="fuga">
        <div class="piyo"></div>
        <div class="piyo"></div>
        <div class="piyo"></div>
    </div>
</div>

・aタグ

aタグを使う時は

実行前

実行後

<a href=""></a>

これだけ。

今までの例と少し組み合わせてみると、、、

実行前

.hoge>ul>li*2>a

実行後

<div class="hoge">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

もうちょっと複雑な事をすると、、、

実行前

.hoge>ul>li*2>a{fuga $}

実行後

<div class="hoge">
    <ul>
        <li><a href="">fuga 1</a></li>
        <li><a href="">fuga 2</a></li>
    </ul>
</div>

{}の中がリンク名になる。

・組み合わせ

「＋」を使うと組み合わせる事ができる。

実行前

ul>li*2+.hoge

実行後

<ul>
    <li></li>
    <li></li>
    <li class="hoge"></li>
</ul>

実はulの外にdivが欲しかったのに・・・・って場合は

実行前

(ul>li*2)+.hoge

実行後

<ul>
    <li></li>
    <li></li>
</ul>
<div class="hoge"></div>

括弧で囲んでしまえば解決！

・HTML

htmlタグはよく使うのがなんでもあると思ってとりあえず片っ端から試してみるといいかも。
「！」はいつも書くのが面倒だったあれが一瞬で書けて感動。

実行前

実行後

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

</body>
</html>

html5ですけどね。

inputタグはtypeを変えるだけで便利。

実行前

input:text
input:submit

実行後

<input type="text" name="" id="">
<input type="submit" value="">

　
EmmetはCSSでも使えるし、覚えればかなり便利で作業効率があがると思いますが、そこまでHTMLを書く事がなかったりするんですけどね。。。

最後に応用をきかせてTableを段階的に書いていきます。

とりあえず基本の形

実行前

table>tr>td

実行後

<table>
    <tr>
        <td></td>
    </tr>
</table>

divで囲んで、tdも2個にしてみよう

実行前

.tbl>table>tr>td*2

実行後

<div class="tbl">
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

tbodyも付けて、tdの中にFUGAって入れてみよう

実行前

.tbl>table>tbody>tr>td{FUGA$}*2

実行後

<div class="tbl">
    <table>
        <tbody>
        <tr>
            <td>FUGA1</td>
            <td>FUGA2</td>
        </tr>
        </tbody>
    </table>
</div>

trをもう一つ増やしてみたいから＋を付ければ、、、

実行前

.tbl>table>tbody>tr>td{FUGA$}*2+tr>td*2

実行後

<div class="tbl">
    <table>
        <tbody>
        <tr>
            <td>FUGA1</td>
            <td>FUGA2</td>
        <tr>
            <td></td>
            <td></td>
        </tr>
        </tr></tbody>
    </table>
</div>

って思ったらなんか崩れてる！

どうやら括弧をしないとダメらしい。

実行前

.tbl>table>tbody>(tr>td{FUGA$}*2)+(tr>td*2)

実行後

<div class="tbl">
    <table>
        <tbody>
        <tr>
            <td>FUGA1</td>
            <td>FUGA2</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>

いい感じになってきた。
今度はtdを一つにしてtrをさらに増やしてみる。ついでにFUGAにリンクも付けてしまえ、、、

実行前

.tbl>table>tbody>(tr>td*2>a{FUGA$})+(tr>td{$$}*2)+(tr>td[colspan="2"]{clo})

実行後

<div class="tbl">
    <table>
        <tbody>
        <tr>
            <td><a href="">FUGA1</a></td>
            <td><a href="">FUGA2</a></td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
        </tr>
        <tr>
            <td colspan="2">clo</td>
        </tr>
        </tbody>
    </table>
</div>

ここまでやると簡単なテーブル作ってからコピペの方が楽な気がしてきますね。

チートシートはこちら
http://docs.emmet.io/cheat-sheet/