覚えていると便利なEmmet集【個々の行でラップ変換】

こんにちは。

仕事も残すところ1日になりました。

今日はXDからの画像書き出しをしていたのですが時間内に終わらせることができませんでした。

Photoshopの書き出しには少し慣れてきたもののXDはまだまだというところです・・・

明日はしっかり仕事納めできるよう務めたいと思います。

 

では本題に入りましょう!

今日は昨日に引き続きEmmetの便利機能集です^^

 

個々の行でラップ変換

 

昨日も「ラップ」という名前でしたが今回は個々の行でラップ変換です。

 

 

例えば上記のようにテキストが4つ並んでいるのを<p>でそれぞれ囲いたいとします。

 

 

そんな時に「個々の行でラップ変換」が便利です!!

 

まず、囲いたい行を全選択します。

 

そして個々の行でラップ変換のショートカットを入力します。

初期値は昨日ご紹介した歯車マーク→キーボードショートカットから探せます^^

(私は command + shift + E でユーザー登録しています)

 

そうしたら右上にポップアップが出てくるのでそこに

p*

と入力します!

*(アスタリスク)は掛け算という意味合いですね。

行数分囲いたいですという意思表示?になるのだと思います!笑

 

入力した時点で下のテキストが<p>で個々に囲まれていることがわかります!

それで問題なければEnterを押します。

それで完了です(^○^)

 

 

応用として<ul>のなかに<li>を作る場合もお伝えします。

 

 

そんな時は

ul>li* 

と入力します。

 

ちなみにクラス名をつけたい場合は例えば

ul.itemList>li*

と書くとitemListという名のクラス名がついた<ul>が作れます^^

 

 

 

いかがでしたでしょうか?

普通のラップだとこのように個々には囲えないので使い分けが必要です。

また引き続きEmmetのご紹介をしていきます〜(^○^)

では今日はここまで〜〜

 

 

コメント

タイトルとURLをコピーしました