時短HTMLコーディングのZen Codingが面白い

更新日 2017年11月23日

結構前から存在するらしいんですが、HTMLのコーディングをCSSのように入力できるZen Codingが面白い。毎日HTMLを書くので、これに慣れたら相当時間の短縮になりそうです。下のビデオを見るとコンセプトが一目瞭然です。

たとえば、以下のようにタイプすると

div#page>div.logo+ul#navigation>li*5>a

以下のコードが生成される。

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Zen Codingは、HTMLエディターにプラグイン（拡張機能）をインストールすることで使えるようになるんですが、MacのCodaやクロスプラットフォームのAptanaなどのエディターで公式にサポートされているようです。自宅ではCodaをメインに使っているので、プラグインをインストールして早速試してみました。ちなみにCodaのプラグインのインストールは、ダウンロードしたファイルをダブルクリックしてCodaを再起動するだけで出来ます。

書き方に慣れれば結構良さそうです。一行のテキストが一気にタグ付き、インデント付きのHTMLに変換されるのを見ると、一瞬「おぉ〜〜っ！！」と感動しました。笑

Dreamweaverでもサードパーティのプラグインがあるようです。「zen codingは超便利！Dreamweaverで使ってみました。 | vivid color + blog」という記事で紹介されていました。職場ではもっぱらDreamweaverなので、試してみようかな。。。

最新のSyntaxはオフィシャルサイトでまとめられています。

2010年10月4日に公開され、2017年11月23日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする