HTMLコーディングが3倍速くなる？「Zen-Coding」

ブログ

2010年2月1日

この業界は、それなりに長いつもりの私ですが、今日の今日まで知らず、しかも知らなかったことをこんなに悔やんだこともそうありません。

「こもりまさあき」さんのブログで紹介されたこちらのエントリー。

全く何で知らなかったのだろうというくらい、知りませんでした。「Zen-Coding」。

ここでも、軽く紹介しましょう。 Zen-Codingは言ってみればHTMLコーディングのショートカット。

例えば、div要素を記述したい場合はエディタに対して「<」といった不等号から始まって半角空白やダブルクオーテーションを入れながら、キーボードをぱちぱち打ち込まなければなりません。例えば、そうして次のHTMLを書けたとしましょう。

<div id="areaMain" class="class"></div>

だがしかし、Zen-Codingならこれだけ。

div#areaMain.class1

余計なものは何もない。まるで、CSSのセレクタを書くようにタグと「#」でID、「.」でクラス名を記述するだけです。

これを、Zen-CodingプラグインのインストールされたCodaや、TextMate、Dreamweaverなどでしかるべきキー（Codaの場合は Control+,（カンマ））を押すと・・

なんと、先ほどのHTMLに変換してくれます。簡単！！

さらに例えば・・

html:5

と入力すれば・・

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

どーん。なにこれ。今まで決まり文句を打ち込んでいたのがばかばかしくなります。（lang属性が en-USなのは残念ですが）その他、すべてのショートカットはこちらのチートシートに記載されています。

いやー、すごすぎる。これはぜひ使わせていただきます。こんな素敵な情報を教えていただき、ありがとうございました！＞こもりさん

エイチツーオー・スペースの最新情報をメールまたはRSSでお受け取りいただけます。ぜひご利用ください。

6件のコメントがあります

こもり 2010年2月1日

ご紹介ありがとうございます。
ちなみにCSSのシンタックスも覚えれば最強だと思いますｗ

h2ospace 2010年2月2日

こちらこそ、非常に役立つエントリーありがとうございました！
CSSにも一つ一つショートカット？　が割り当てられているんですねー。

さすがに、CSSはそれほど長い文言でもないし、手で打った方が早いかも？(^^;

[...] ちょっと前に書いたZen-CodingネタをH2O Spaceのたにぐちさんに取り上げていただいてからというもの、関連するエントリーへのアクセスがにぎやかです（謎）。そんなこともあり、数日前の [...]

[...] Zen-Coding自体については、すでにこちらのエントリーなどでご紹介している通りですが、ここではいくつか基本的な文法を紹介しておきましょう。覚えると、本当にHTMLコーディングとい [...]

OTCHY.NET 2010年2月25日

Zen Coding の Perl 実装書きました

今、最高にアツい Zen Coding (ソースは自分) の Perl 実装を書きました。
これがあれば、(今すぐではありませんが) 手に馴染んだ任意のエディタ全てで、Zen Coding を使用することが出来るよう…