[PhpStorm/WebStorm] Emmet記法の基本のキ

harada 85views 更新:2015年3月31日

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]を押すとコピーして増やせます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません