NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

Emmet覚え書き

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1268日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

こんにちは。@nyagihimeです。

仕事ではSublimeText2を使用しています。自宅でも使用しています。

コーディングにはEmmetという入力補助を利用していますが、よく忘れる書き方が多いのでメモっておきます。

foo>bar 入れ子
foo+bar 接続
#foo ID
.foo class
() グループ
*n 繰り返し

このへんはよく使いますので大体忘れないんですが、他にも

$ 連番
$- 逆順に連番
{foo} 文字列
^ 入れ子から出る
[] カスタム

このへんはそういう機能もあるってのは知ってたけど使ったことありませんでした。

書き方知らなかったとも言います。

どんな時に使うのか…。

例えば、

というのを展開すると、

ってできるんですね。

連番とかやりかた知らなかったので毎回ちまちまと書いてましたよw

ところでカスタムってなんだ?

[]で入力できるカスタムというのは、そのタグだけにアトリビュートを設定したりするのに使うみたいです。

通常、「a」を展開すると、「<a href=””></a>」となりますが、例えば、

「a[href=”foo”]」とすれば「<a href=”foo”></a>」となります。

それだけならまぁ別に無くてもいいかなって気もしますが、プロトタイプを作成する時とかでナビをコーディングするのに空リンクのアンカーを沢山用意する時なんかは便利です。

たとえば、

とすれば、

と展開出来ます。

こういった繰り返し処理が必要になる時は非常に便利ですね。

なれるまでは展開前の構造を考えるのが大変かもしれませんが、パズルのように考えるのは楽しいですし、あれこれ考えながら組み上げたコードを一気に展開して思った通りのコードが出力されると非常に気持がいいものです。

でもはじめのうちはあまり深い階層まで考えずに、「nav>ul」だけで一度展開してから「(li>a)*5」とかしても良いと思います。

その内だんだんとコツを掴んでくれば非常に複雑なものも作れるようになり、非常にコーディングが早くなりますよ!

そしてどんどんタグ打ちができなくなっていきます…

 

TAGS