emmet-vim で階層表記

emmet-vim で階層表記

#04 階層的な要素を表現してみよう
http://dotinstall.com/lessons/basic_emmet/25104
を参考に階層表記を学習

> は子要素を示す
ul>li
なら

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

となる
ちなみに、emmet-vim では
ul
だけでも同じになる

+は隣接要素
div+div+div>p

Ctrl+y の後 , とすれば

<div></div>
<div></div>
<div>
        <p></p>
</div>

となる
+を使うことで
div div div と3つ並ぶことになる

^ は階層を1つ上に上がる
例えば ul>li の階層の上に div にしたいのなら
ul>li^divとする

これで Ctrl +y の後 , とすれば

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

となる
複雑な階層のもの、例えばjQuery Mobile などの
ようなものを作るときには使えると思う

emmet-vim での id と class

emmet-vim での id と class

#03 idとclassを使ってみよう
http://dotinstall.com/lessons/basic_emmet/25103
を参考に id と class の付け方
そして要素を省略したときの動作について学習

基本はCSSと同じ

# が id=””
. が class=””
になる

<div id="main" >

なら
div#main
と入力してESC を押して Ctrl + y の後に , で

<div id="main"></div>

ができる

span.blueitem

ESC の後に Ctrl + y を押して , とすれば

<span class="blueitem"></span>

となる

また、複数の class=”” を設定することも可能
div#main.blueitem.reditem
として
Ctrl + y の後 , で

<div id="main" class="blueitem reditem"></div>

となる

このメリットは、スペルミスを起こしにくいこと

また要素名の省略も可能

#main
なら
Ctrl +y の後 , で

<div id="main"></div>

となり

.rd とすれば
Ctrl + y の後 , で

<div class="rd"></div>

というように自動で div タグが割り当てられる

また、この自動判別は ul の中だと
自動的に li にしてくれるらしいが
emmet-vim だと div になった

なにか他の方法もあるかもしれないけど
とりあえず保留

Emmet の基本と注意点

Emmet の基本と注意点

#02 まずは基本をマスターしよう
http://dotinstall.com/lessons/basic_emmet/25102
を参考に emmet の使い方を学習

基本的にショートカットキーはエディタにより異なるため
https://github.com/mattn/emmet-vim

Quick Tutorial

emmet-vimの使い方
http://motw.mods.jp/Vim/emmet-vim.html
を参考にしながら学習

基本としては
タグ名を書いて、展開キーをおすとタグができる

emmet-vim の展開キーは
Ctrl + y を押してから , をおす
になる

なので書き込みモードで
div
と入力したら
ESC キーを押して
それから
Ctrl+y を押して , をおすと
div

となる

タグ変換一覧には
HTMLなら
https://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

CSSなら
https://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
が参考になる

>
は階層を作り

+
は順番に記述

*はその後に指定した数だけ繰り返す
*3 なら3つ作成

^は階層を抜けるときに使う

()は数学の展開と同じ要領

#はid=”” .はclass=”” となりCSSをやっていると理解しやすい

$は、そのあとに* をつけて連番をふる
list$*3 なら
list1
list2
list3
となる

ちなみに、$$$*3 の場合だと
list001
list002
list003
というように
前につけ$の数だけ0がつく

ちょっとわかりにくい違いだったのが
{}で
これはタグの中に書くもの

p>{Hello}+a{world}+{!!!}
だと

<p></p>

の中に全部になるけど

p{Hello}+a{world}+{!!!}
だと

<p>Hello</p>

というように、最初に指定した
{} の中身だけ格納される
ちょっとした違いだけど注意

あと、

<a href=""></a>

みたいに入力する場所を探すときには
Ctrl+y を押してからnをおすと
=”” へ移動できるので便利