Createing Web site Study Blog ~ WEB制作に関するお勉強ブログ ~

  • Share on Tumblr

Zen-Coding、まだ基本的な使い方しかしていないのだけど、他にも便利な方法があるのかな。
新しく知ったら、ここに追加していくことにしよう。

Zen-Coding
http://code.google.com/p/zen-coding/

私の場合は、MacでDreamweaverを使っているので、ショートカットを入力して、展開はcontrolキーと,(カンマ)キーを一緒に押すだけ。


1. 基本的なショートカット

html:5
と入力すると、以下のように展開される。




はじめから文書の構造がわかっていれば、とても便利。

div#wrapper>(div#header>h1)>ul#navi>li*5>a



同じ事の繰り返しは「*」、数字を付けるなら「$」

ul#navi>li.item$*5



属性の値もあらかじめ指定できる。

a[href="#"]*5



div#name>p.one+p.two



その他、基本的なショートカットは以下のPDFを参照できます。
Zen Coding cheat sheet (PDF)
http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf



2. Wrap変換 (Wrap with Abbreviation) 機能

さらに、Wrap変換 (Wrap with Abbreviation) という機能も便利そう。
要するに、流し込んである原稿や文章を、任意のタグで囲むモードのことを言うらしい。
たとえば、




という文章を<li>タグで囲みたいとする。
Dreamweaverの場合は、対象の文章を選択して、

メニュー「コマンド」> 「Zen Coding」の 「Wrap with Abbreviation」
(ショートカットキーは「command + h 」)

Generic Prompt Dialogというポップアップが表示されるので、そこに、ul>li* と入力する。



すると、以下のように、指定したタグで囲んでくれる。これも便利そう。

コメントを残す

コメントを投稿するにはログインしてください。