Help us understand the problem. What is going on with this article?

Emmet Everywhere 備忘

More than 3 years have passed since last update.

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

基本は1行書いて「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
実行後
<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/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした