Emmet記法を使うとコーディングが早くできるらしいと聞いてはいたのですが、これまでDreamweaverのタイトルタグを出すショートカットや強調ショートカット、ボタンを駆使してきた私にはわかりにくいものでした。
でも使ってみたらやっぱり便利ですね。
少しずつ記法を覚えていきたいと思います。
基本の利用方法は< >を抜いたタグをうち、[Tab]キーを押すことで<~>から</~>で括られた一式が表示されます。
ex. p + [tab]キー ↓ <p></p>
中にテキストをはさみたい場合は{}ではさみます。
ex.
p{ねことわたし} + [tab]キー
↓
<p>ねことわたし</p>
リンクしたいURLなど属性を入れたい場合は[]ではさみます。
ex.
a[href="http://~"]{リンク} + [tab]キー
↓
<a href="http://~" >リンク</a>
このリンクを5個増やしたい場合は*5を付けます。
ex.
a[href="http://~"]{リンク}*5 + [tab]キー
↓
<a href="http://~" >リンク</a><a href="http://~" >リンク</a><a href="http://~" >リンク</a><a href="http://~" >リンク</a><a href="http://~" >リンク</a>
ちなみに単純に同じ行を増やしたい場合は行末で[command] ＋ [d]を押すとコピーして増やせます。
