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

Advertisement

結構前から存在するらしいんですが、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はオフィシャルサイトでまとめられています。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

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

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

“時短HTMLコーディングのZen Codingが面白い” への1件のコメント

  1. […] コンテンツへ About ウェブ、やってます 制作、運営、マーケティング。他にもガジェットについてなど « 時短HTMLコーディングのZen Codingが面白い […]