Zen-Condigの基本文法をおさらい

ブログ

2010年2月17日

先日の USTREAMでの勉強会でも完全に主役の座を奪ってしまった感のある「Zen-Coding」。私がデモをしている間でも、Twitterで皆様「どうやってコーディングをしているんだ？」と、つぶやきあっていました。

Zen-Coding自体については、すでにこちらのエントリーなどでご紹介している通りですが、ここではいくつか基本的な文法を紹介しておきましょう。覚えると、本当にHTMLコーディングというものの世界が変わってしまうほどの衝撃を持っています。ぜひ、ご堪能ください。

まずはインストール

インストールの方法は、こもりまさあきさんのブログに詳しく書かれています。

私の場合は「Coda」にインストールして利用しています。これが一番便利かなと思いました。

タグを作る

最も基本的な文法は、こちら

div

このように打ち込んで、[Ctrl+,]を打つと、次のように展開されます。

<div></div>

しかも、カーソルはdiv要素の間に入るのでそのまま打ち込むことが出来ます。また、例えば「a」などのタグの場合「href」属性がほぼ必ずつきます。このようなタグの場合は・・

とするだけで

<a href=""></a>

となった上、href属性の内容部分にカーソルが位置します。さぁ、ここからどんどんいきます。

ID属性・class属性を指定する

続いてはこちらの文法

div#id.class1.class2

こうなります。

<div id="id" class="class1 class2"></div>

#でid属性、.でclass属性。CSSのセレクタと同じですね。タグに続けて記述します。クラスは複数指定してもきちんと、一つのclass属性内に記述されます。便利。

連結

div#head+div#body+div#foot

こちらは、こうなります。

<div id="head"></div>
<div id="body"></div>
<div id="foot"></div>

+記号は連結。一気に複数のタグを出力出来ます。

親子関係

div#id>ul>li

ulとliタグなど、親子関係を形成する場合は「>」を使うと・・・

<div id="id">
	<ul>
		<li></li>
	</ul>
</div>

こうなります。インデントまでしっかり取ってくれるのが素敵です。

繰り返し・連番

かなり高度なテクニックとしてはこちら。

ul>li#id$*5

ちょっと、どうなるのか予想がつかないかもしれませんが、こうなります。

<ul>
	<li id="id1"></li>
	<li id="id2"></li>
	<li id="id3"></li>
	<li id="id4"></li>
	<li id="id5"></li>
</ul>

まず、「>」によってulとliは親子になります。liは「#」によってid属性が付加されますが、「$」という記号があります。先にその後の「*」を解説すると、これは「繰り返し」。その後に数字の分だけ繰り返されます。その際に、「$」があるとそこが連番となり、1から順番に番号が振られるというわけです。

HTMLの基本構文、コンディショナルコメント

さらに便利なショートカットが準備されています。

html:5

これは・・

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

こうなります。スニペットとかいらないですね。lang属性が「en-US」なので、「ja-JP」に直さなければなりませんが、これはどこかで変えられるのですかね？　わかったら追記します。

cc:ie6

これは

<!--[if lte IE 6]>

<![endif]-->

こうなります。例えば「cc:ie6>script+link」なんてしてあげると、どうなるかわかりますか？　実際にやってみてください。

後からタグ付け

例えば、先に

リンクです

等と書いてしまったあとで、ここに

<a href=”">リンクです</a>

などとマークアップしたいことは良くあります。そんな時、Codaならまず上記の文字列を選択して、メニューから「プラグイン→TEA for Coda→Zen→Wrap with Abbereviation」をクリックすると、ダイアログボックスが表示されます。

ここに、「a」と入力すると選択した文字列を囲んでくれるというわけです。さらに例えば・・・

リスト1
リスト2
リスト3
リスト4
リスト5

なんて、テキストを並べてしまった場合に、これをリストにしたいときは・・全体を選択した後、先のメニューを選んで、次のように打ち込みます。

ul>li*

すると・・

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
</ul>

どーん。参ったか！「li*」という記述は、数を指定せずに「あるだけ全部」という意味。

まとめ

いかがでしたか？　Zen-Coding。私も、知ってからというもの本当に惚れまくっていて、寝ても覚めてもZen-Codingのことを考えています。もう、HTMLコーダーやプログラマは、必須のスキルになるのではないかというくらい、惚れ込んでいます。HTMLの大発明と言っても過言ではないでしょう。

なお、本日（2010年 2月 17日）の 22時くらいから、先のこもりまさあきさんが、USTREAMで「生Zen-Coding」を開催されるそうです。サンプルサイトをZen-Codingを使って、実際につくる過程を見せてくれるそうで、これは必見。

UStreamで生Zen-Codingやってみましょうか

このブログで関連すると思われる他の投稿

‹ リストページへもどる

エイチツーオー・スペースの最新情報をメールまたはRSSでお受け取りいただけます。ぜひご利用ください。

この記事へのコメント

2件のコメントがあります

BONKURA BLOG » Blog Archive » [Coda]ATOKとのショートカットバッティング 2010年2月22日: [...] Zen-Condigの基本文法をおさらい | ブログ | ちゃんとWebなホームページ制作会… [...]
LAGRANGE BLOG - 話題のコーディングツールZen CodingをDreamweaver8にインストールしてみた。 2010年2月28日: [...] Space.] Zen-Condigの基本文法をおさらい | ブログ | ちゃんとWebなホームページ制作会… [...]

トラックバック

この記事へのトラックバック: http://h2o-space.com/blog/2002/trackback

» twilog

ブログ