Zen-codingを使って、複雑なタグを一行で作成してみた

Zen-coding、使ってますか？

Zen-codingといえば、コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 | Webookerという記事で、2年前にご紹介したことがあります。

例えば、Zen-codingをプラグインとして入れたDreamweaverで、

ul>li*3

と書いて「command(control)+,（Sublime Text2ではtabキー）」を押します。

すると、あら不思議！

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

一瞬にしてリストタグが書けましたね。

他にも

table+

で

<table>
	<tr>
		<td></td>
	</tr>
</table>

テーブル一式がセットで書けちゃったり、

div#Wrapper>div.box>p

と打つだけで、

<div id="Wrapper">
	<div class="box">
		<p></p>
	</div>
</div>

なんてボックス一式が書けちゃったりします。
というのがZen-codingです。便利でしょう？

今回必要になった場面は、絶対配置で指定する日本地図のコーディング

例えばこんな日本地図、よく見かけませんか？
賃貸の【レオパレス21】-マンスリーマンションや賃貸の物件情報満載

position:absolute;
top:10px;
left:45px;

こんな感じで。

そうすると、HTMLの方は47個のリンク付き画像が必要になってきます。１つ１つ位置指定が異なるため、id名 ((classでもいいと思いますが、たぶん唯一無二なのでidでマークアップしました。))もつけなくてはなりません。うわー、面倒です、腱鞘炎になります。

というわけで、楽に書くためにZen-codingの書き方をおさらいしてみました。

※今回は、こちらの記事を参考にしています。
Zen-Codingでできるあんなことこんなこと | gaspanik weblog
Zen-Codingの応用でもっと超速に – 原稿ありきの変換について – Yahoo! JAPAN Tech Blog

一行でどこまで指定できるかチャレンジ

自動で連番の数字を降るには、「$」マークがいいらしい。今回は47個なので、二桁必要。そういう場合は「$$」でOK。
空リンクも入れておこう。hrefなど、属性を指定するには[ ]で括れば良いようです。

ってなわけで書いた一行がこれ。

div.mapBlock>a.mapImage#Map$$[href="#"]*47>img[src="./images/map$$.gif"]

展開すると…

↓

<div class="mapBlock">
	<a href="#" class="mapImage" id="Map01"><img src="./images/map01.gif" alt=""></a>
	<a href="#" class="mapImage" id="Map02"><img src="./images/map02.gif" alt=""></a>
	<a href="#" class="mapImage" id="Map03"><img src="./images/map03.gif" alt=""></a>
（略）
	<a href="#" class="mapImage" id="Map46"><img src="./images/map46.gif" alt=""></a>
	<a href="#" class="mapImage" id="Map47"><img src="./images/map47.gif" alt=""></a>
</div>

無事に必要なコードが生成されました。ちゃんとidも画像名も連番になっています。捗るわー、これ！

実は次期バージョンも！その名も”Emmet”

Zen-codingの作者によって、次期バージョンが制作されているようです。Emmetというそうです。どんな内容かはこちらのサイトに詳しく書かれています。サンプルテキストが入れられるらしい…。それってめっちゃ重宝しそうです。
Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17

今から楽しみです。
ちょっとでもZen-codingの記法に慣れて、Emmetを待ち受けたいと思います。

Webと本の人 Webooker （ウェブッカー）

フリーランス Webデザイナー・グラフィックデザイナー

2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。