MENTAにてフリーランス、Webデザイナー、グラフィックデザイナーを目指す方のよろず相談受付中!
html

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

webooker

512

Zen-coding、使ってますか?

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

https://webooker.info/2010/01/zen-coding/

あまりに便利なのでそれ以来ずっと愛用しています。

例えば、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】-マンスリーマンションや賃貸の物件情報満載 *

http://www.leopalace21.com/

全国の都道府県から絞り込んでいくサイトってよくありますよね?Flashで作っちゃうところもあるみたいですが、HTMLで作る場合、47都道府県を絶対配置で置いていく必要があります。

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

こんな感じで。

そうすると、HTMLの方は47個のリンク付き画像が必要になってきます。1つ1つ位置指定が異なるため、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 *

http://kojika17.com/2012/09/zen-coding-next-emmet.html

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

※このサイトでは、アフィリエイト広告を利用しています。

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  1. Zen-codingが進化した次期バージョン「Emmet」をSublime Text2に入れてみた | Webooker

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

ABOUT ME
Webと本の人 Webooker (ウェブッカー)
Webと本の人 Webooker (ウェブッカー)
フリーランス Webデザイナー・グラフィックデザイナー
2009年からIT業界に。
WebデザイナーとしてITベンチャー企業、SaaS企業、Web制作会社に勤務。
2016年11⽉より独⽴し、フリーランスのWebデザイナー、グラフィックデザイナーとして活動
2024年1月から大阪のシステム会社に勤務し、フリーランスとの二足のわらじで現在に⾄る。 2子の親。フルリモートワーク。
記事URLをコピーしました