半年ほど前に話題になった、HTMLコーディングをスピードアップさせる拡張機能、Zen-Codingを改めて紹介したいと思います。ちなみに当記事の作成も、秀丸＆Zen-Codingで作成しています。

Zen-Codingを使いこなせば、少ない文字入力で簡単に早くコーディングを行うことができるようになります。

現在、Zen-Codingを利用できるテキストエディタは数多く存在しており、下記のエディタで提供されています。

• Dreamweaver
• EmEditor
• TextMate
• Aptana
• Vim
• textarea（wordpress）
• 秀丸

今回は、Windowsユーザーには一番なじみあるであろう、秀丸版のZen-Codingを利用して解説を行ってみようと思います。

解説の前に、以下の記事の動画だけでも見ておくと、よりイメージしやすいかもしれません。
＞＞知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

秀丸版Zen-Coding

秀丸マクロでZen-Coding

インストールの方法自体は、サイトの案内に沿って設定すれば簡単に完了できます。

そして使い方ですが、秀丸版Zen-Codingには、二つの編集モードがあります。「通常モード」と「Wrapモード」がありますが、「Wrapモード」のほうが動作のイメージが付きやすいと思うので、今回はこちらで解説します。

（１）「Shift + Ctrl + E」で、Wrapモードの入力窓を起動

この入力ボックスにコマンドを入力することで、HTMLタグが挿入されます。

（２－１）簡単な例

■「h1」と入力

■「a」と入力

■「img」と入力

■「.test」or「div.test」と入力

■「.test#test2」or「div.test#test2」と入力

（２－２）入れ子構造での例

■「table tr td」と入力

■「table tr*3 td」と入力

■「table (tr td)*2」と入力

（２－３）ショートカット的な入力例

■「ul+」と入力

■「dl+」と入力

大ざっぱに細かい機能を省いた機能を解説すると以上のとおりです。その他の機能の解説も秀丸マクロでZen-Codingで行われているので、ぜひ参考にしてみてください。慣れれば、劇的にコーディングスピードが向上するはずです。

また、その他テキストエディタのZen-Codingは、以下から利用することができます。

その他テキストエディタのZen-Coding

Dreamweaver版

zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOG

コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 - Web:a piece of cake!;

EmEditor版

EmEditorで Zen-Coding （追記） | trapon : experience

TextMate版

TextMate+Zen-Codingで超速コーディング？| gaspanik weblog

Aptana版

知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

Vimへの導入例版

Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力 : Serendip - Webデザイン・プログラミング

textarea（wordpress）版

WordPress等の投稿もZen-Codingで楽々編集できるJSライブラリ Zen Coding for <textarea> :: 5509(+1.1)

HTMLコーディングを行う人は、ぜひ一度お試しください。

unitedlinks（2010年7月12日 11:37）
テーマ： 今日のびびっと　WEB制作　サイト構築システム　便利ツール