こんにちは。@nyagihimeです。
仕事ではSublimeText2を使用しています。自宅でも使用しています。
コーディングにはEmmetという入力補助を利用していますが、よく忘れる書き方が多いのでメモっておきます。
foo>bar | 入れ子 |
foo+bar | 接続 |
#foo | ID |
.foo | class |
() | グループ |
*n | 繰り返し |
このへんはよく使いますので大体忘れないんですが、他にも
$ | 連番 |
$- | 逆順に連番 |
{foo} | 文字列 |
^ | 入れ子から出る |
[] | カスタム |
このへんはそういう機能もあるってのは知ってたけど使ったことありませんでした。
書き方知らなかったとも言います。
どんな時に使うのか…。
例えば、
1 |
#foo>(.bar$>h1{content$}+p{this is article no $})*5 |
というのを展開すると、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="foo"> <div class="bar1"> <h1>content1</h1> <p>this is article no 1</p> </div> <div class="bar2"> <h1>content2</h1> <p>this is article no 2</p> </div> <div class="bar3"> <h1>content3</h1> <p>this is article no 3</p> </div> <div class="bar4"> <h1>content4</h1> <p>this is article no 4</p> </div> <div class="bar5"> <h1>content5</h1> <p>this is article no 5</p> </div> </div> |
ってできるんですね。
連番とかやりかた知らなかったので毎回ちまちまと書いてましたよw
ところでカスタムってなんだ?
[]で入力できるカスタムというのは、そのタグだけにアトリビュートを設定したりするのに使うみたいです。
通常、「a」を展開すると、「<a href=””></a>」となりますが、例えば、
「a[href=”foo”]」とすれば「<a href=”foo”></a>」となります。
それだけならまぁ別に無くてもいいかなって気もしますが、プロトタイプを作成する時とかでナビをコーディングするのに空リンクのアンカーを沢山用意する時なんかは便利です。
たとえば、
1 |
nav#globalNav[role="navigation"]>ul>(li>a[href="javascript:void(0);"])*5 |
とすれば、
1 2 3 4 5 6 7 8 9 |
<nav id="globalNav" role="navigation"> <ul> <li><a href="javascript:void(0);"></a></li> <li><a href="javascript:void(0);"></a></li> <li><a href="javascript:void(0);"></a></li> <li><a href="javascript:void(0);"></a></li> <li><a href="javascript:void(0);"></a></li> </ul> </nav> |
と展開出来ます。
こういった繰り返し処理が必要になる時は非常に便利ですね。
なれるまでは展開前の構造を考えるのが大変かもしれませんが、パズルのように考えるのは楽しいですし、あれこれ考えながら組み上げたコードを一気に展開して思った通りのコードが出力されると非常に気持がいいものです。
でもはじめのうちはあまり深い階層まで考えずに、「nav>ul」だけで一度展開してから「(li>a)*5」とかしても良いと思います。
その内だんだんとコツを掴んでくれば非常に複雑なものも作れるようになり、非常にコーディングが早くなりますよ!
そしてどんどんタグ打ちができなくなっていきます…
コメントする