コーディングが3～4倍速くなるプラグイン「Zen-coading」

HTML2012年11月28日

今更ながら、そういえば触れたことがなかったので本当に今更で恐縮ですがZen-coadingを紹介する記事を書いてみたいと思います。

Zen-coadingとは

Zen-CodingはDreamweaverなどのメジャーなエディタに対応した、HTMLやCSSを最小限のコードでの記述をサポートしてくれるプラグインです。
これを使いこなしてコーディングを行うことで、飛躍的にコーディングスピードが上がります。

Zen-coadingのダウンロード、インストール

ここでは、Windows版のDreamweaverを使用している前提での流れとなります。
下記のページにアクセスし、「Zen Coding for Dreamweaver v.0.7.5 Featured」をクリックして下さい。

Zen-coading

ダウンロードしたファイルをダブルクリックし、インストールを進めて下さい。

Zen-coadingの使い方

通常使う分には特に設定などは必要ありません。Dreamweaverを再起動し、早速使ってみましょう。
適当にHTMLを開き、下記のソースコードを入力してください。

div#wrapper>#str-header>h1.logo+p.tagline{説明が入ります}

次に、「Ctrl + ,」のショートカットを入力して下さい。
下記のソースコードに変換されます。

<div id="wrapper">
<div id="str-header">
<h1 class="logo"></h1>
<p class="tagline">説明が入ります</p>
</div>
</div>

解説

下記のルールで記述することがZen-coadingによるコーディングの基本となります。

#

id名を指定

.

class名を指定

＞

タグを入れ子に

+

隣接する要素

{}

テキストを挿入

また、下記のように一部の要素を繰り返し記述することも可能です。

#wrapper>ul#nav-global>li*3>a[href="hoge$.html"]>img

「Ctrl + ,」のショートカットを入力します。

<div id="wrapper">
<ul id="nav-global">
<li><a href="hoge1.html"><img src="" alt=""></a></li>
<li><a href="hoge2.html"><img src="" alt=""></a></li>
<li><a href="hoge3.html"><img src="" alt=""></a></li>
</ul>
</div>

また、cssのコーディングにおいてもZen-coadingは活躍します。

.hoge{
list:n	
}

HTMLと同じく、「Ctrl + ,」のショートカットを入力して下さい。
下記のソースコードに変換されます。

.hoge{
list-style-type:none;
}

cssは覚えてしまえば楽なのですが、チートシートを見ながら少しずつ体に覚えこませるといいでしょう。

Zen-coadingのcssチートシート

まとめ

対応しているエディタが限られている点や、少し記述方式になれることが必要ですが、使いこなすことでコーディングスピードが上昇することは間違いないでしょう。
マークアップやフロントエンドの業務を頻繁に行う方は必須のプラグインかと思います。

この記事を読んでいる方にオススメの記事

「HTML」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。