--- title: Emmet Everywhere 備忘 tags: emmet author: pman-kenji slide: false --- phpstormでEmmetを使おうかなとか思ったのでメモ。 Emmet Everywhereのpluginをインストール。 基本は1行書いて「tab」を押して実行。 ## ・ulタグにliを3個。 ```lang:実行前 ul>li*3 ``` 上記を記述後tabで実行 ```lang:実行後 ``` ## ・ulタグにclass="item"のliを3個 ```lang:実行前 ul>li.item*3 ``` ```lang:実行後 ``` ## ・ulタグにid="item"のliを3個 .itemでclassだったのでもちろんidは#item。 ```lang:実行前 ul>li#item*3 ``` ```lang:実行後 ``` ただし、これだと全て同じidになってしまうので ```lang:実行前 ul>li.item$*3 ``` 「$」を使ってみる。 ```lang:実行後 ``` これで連番ができた。 「`$$`」にすると「01」から連番「`$$$`」だと「001」から連番。 ## ・divで囲む 対応しているタグを使わないとdivになる。 ```lang:実行前 .hoge>ul>li.item$*3 ``` ```lang:実行後
``` 極端に書くと ```lang:実行前 .hoge>#fuga>.piyo$*3 ``` ```lang:実行後
``` ## ・aタグ aタグを使う時は ```lang:実行前 a ``` ```lang:実行後 ``` これだけ。 今までの例と少し組み合わせてみると、、、 ```lang:実行前 .hoge>ul>li*2>a ``` ```lang:実行後
``` もうちょっと複雑な事をすると、、、 ```lang:実行前 .hoge>ul>li*2>a{fuga $} ``` ```lang:実行後
``` `{}`の中がリンク名になる。 ## ・組み合わせ 「+」を使うと組み合わせる事ができる。 ```lang:実行前 ul>li*2+.hoge ``` ```lang:実行後 ``` 実はulの外にdivが欲しかったのに・・・・って場合は ```lang:実行前 (ul>li*2)+.hoge ``` ```lang:実行後
``` 括弧で囲んでしまえば解決! ## ・HTML htmlタグはよく使うのがなんでもあると思ってとりあえず片っ端から試してみるといいかも。 「!」はいつも書くのが面倒だったあれが一瞬で書けて感動。 ```lang:実行前 ! ``` ```lang:実行後 Document ``` html5ですけどね。 inputタグはtypeを変えるだけで便利。 ```lang:実行前 input:text input:submit ``` ```lang:実行後 ```   EmmetはCSSでも使えるし、覚えればかなり便利で作業効率があがると思いますが、そこまでHTMLを書く事がなかったりするんですけどね。。。 最後に応用をきかせてTableを段階的に書いていきます。 とりあえず基本の形 ```lang:実行前 table>tr>td ``` ```lang:実行後
``` divで囲んで、tdも2個にしてみよう ```lang:実行前 .tbl>table>tr>td*2 ``` ```lang:実行後
``` tbodyも付けて、tdの中にFUGAって入れてみよう ```lang:実行前 .tbl>table>tbody>tr>td{FUGA$}*2 ``` ```lang:実行後
FUGA1 FUGA2
``` trをもう一つ増やしてみたいから+を付ければ、、、 ```lang:実行前 .tbl>table>tbody>tr>td{FUGA$}*2+tr>td*2 ``` ```lang:実行後
FUGA1 FUGA2
``` **って思ったらなんか崩れてる!** どうやら括弧をしないとダメらしい。 ```lang:実行前 .tbl>table>tbody>(tr>td{FUGA$}*2)+(tr>td*2) ``` ```lang:実行後
FUGA1 FUGA2
``` いい感じになってきた。 今度はtdを一つにしてtrをさらに増やしてみる。ついでにFUGAにリンクも付けてしまえ、、、 ```lang:実行前 .tbl>table>tbody>(tr>td*2>a{FUGA$})+(tr>td{$$}*2)+(tr>td[colspan="2"]{clo}) ``` ```lang:実行後
FUGA1 FUGA2
01 02
clo
``` ここまでやると簡単なテーブル作ってからコピペの方が楽な気がしてきますね。 チートシートはこちら http://docs.emmet.io/cheat-sheet/