search
LoginSignup
65

More than 5 years have passed since last update.

posted at

updated at

Organization

タグを連番で複製するにはEmmetが便利

今になってEmmetの便利さに気づきましたので紹介です。

例えば

html
<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li>
<li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li>
<li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li>
<li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li>
<li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li>
<li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li>
<li data-id="archive_007">/archive/movie/2014/mov_007.mp4</li>
<li data-id="archive_008">/archive/movie/2014/mov_008.mp4</li>
<li data-id="archive_009">/archive/movie/2014/mov_009.mp4</li>
<li data-id="archive_010">/archive/movie/2014/mov_010.mp4</li>

みたいな連番のタグをバーーーっと書きたいとき、
愚かな私は今まで、同じ行を複製した後に一個一個手打ちで直したり、
また時にはExcelで

excel1.png
               ↓
excel2.png

みたいなことをやって生きてきました。

Emmet を使えば

Emmet はZen-codingのように簡略化した入力でHTMLやCSSを書くためのツールキットです。WebstormなどのIDEには標準搭載されていますし、色々なエディタ用にプラグインが出ています。
さきほどの例に戻ります。
Webstorm上で、

emmet
li[data-id="archive_$$$"]{/archive/movie/2014/mov_$$$.mp4}*10

と入力し、行末でtabキーをパシーン

html
<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li>
<li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li>
<li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li>
<li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li>
<li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li>
<li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li>
<li data-id="archive_007">/archive/movie/2014/mov_007.mp4</li>
<li data-id="archive_008">/archive/movie/2014/mov_008.mp4</li>
<li data-id="archive_009">/archive/movie/2014/mov_009.mp4</li>
<li data-id="archive_010">/archive/movie/2014/mov_010.mp4</li>

タグが展開されます。

Emmet の基本的な使い方

これらはごく基本的な使い方ですが、これらを使うだけでもかなり効率あがりますよね。

タグ展開

emmet
ul
html
<ul></ul>

テキストは{}

emmet
p{こんにちは}
html
<p>こんにちは</p>

classは. idは#

emmet
ul#movies.column
html
<ul id="movies" class="column"></ul>

classやid以外の属性は[attr=val]

emmet
ul[data-id=movies][role=main]
html
<ul data-id="movies" role="main"></ul>

タグの入れ子は> 隣接は+

emmet
ul#movies.column>li>a>span+img
html
<ul id="movies" class="column">
<li><a href=""><span></span><img src="" alt=""/></a></li>
</ul>

タグの複製は*n

emmet
ul>li*5>a
html
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

連番は$

emmet
ul>li.mov_$$*5>a{動画その$}
html
<ul>
<li class="mov_01"><a href="">動画その1</a></li>
<li class="mov_02"><a href="">動画その2</a></li>
<li class="mov_03"><a href="">動画その3</a></li>
<li class="mov_04"><a href="">動画その4</a></li>
<li class="mov_05"><a href="">動画その5</a></li>
</ul>

ゼロ埋めしたい桁数だけ$を書きます

最後に

HTMLだけではなくCSSの簡略化入力もかなり便利とのことです。
簡略化した入力だけ覚えればよい」となってしまう側面もあるかなと思うと、
もうHTMLやCSSの文法を十分理解している人が使うのがいいのだと思いました。

Emmetから展開したHTMLは非可逆的である点と、
もっとも自分は、HTMLタグを省略せずに書くのは苦ではないので、
連番複製など無意味に時間がかかる作業のアシストに使いたいと思いました。
読んでいただきありがとうございました。

参考

お手持ちの環境にEmmetを導入するやり方から、CSSでのEmmetの便利っぷりにいたるまで、下記の記事に詳しく紹介されていました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
65