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をおすと
=”” へ移動できるので便利

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です