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 なら３つ作成
^は階層を抜けるときに使う
（）は数学の展開と同じ要領
#はid=”” .はclass=”” となりCSSをやっていると理解しやすい
＄は、そのあとに* をつけて連番をふる
list$*3 なら
list1
list2
list3
となる
ちなみに、$$$*3 の場合だと
list001
list002
list003
というように
前につけ＄の数だけ０がつく
ちょっとわかりにくい違いだったのが
｛｝で
これはタグの中に書くもの
p>{Hello}+a{world}+{!!!}
だと
<p></p>
の中に全部になるけど
p{Hello}+a{world}+{!!!}
だと
<p>Hello</p>
というように、最初に指定した
{} の中身だけ格納される
ちょっとした違いだけど注意
あと、
<a href=""></a>
みたいに入力する場所を探すときには
Ctrl+y を押してからnをおすと
=”” へ移動できるので便利