この記事は2年以上前に書かれたものです。
情報が古い可能性があります。
情報が古い可能性があります。
ダウンロードしたZen Coding v.0.7.5.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストールします。
インストールが完了したら早速使ってみましょう。
使い方は簡単、Ctrl+,(コントロール+カンマ)を押すと変換・展開されます。
※注意点は変換前の文末にカーソルをあてること、スペースなどを途中にいれないこと。
例1
変換前
div#content
変換後
<div id="content"></div>
例2
変換前
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>
展開される時のlangやlocaleを日本に設定する
C:\Documents and Settings\【ユーザ名】\Application Data\Adobe\Dreamweaver 【バージョン】\ja_JP\Configuration\Commands\ZenCoding
にあるzen_settings.jsを自分の環境に合わせます。
var zen_settings = { /** * Variables that can be placed inside snippets or abbreviations as ${variable} * ${child} variable is reserved, don't use it */ 'variables': { 'lang': 'ja', 'locale': 'ja-JP', 'charset': 'UTF-8', 'profile': 'xhtml', /** Inner element indentation */ 'indentation': '\t' // TODO take from Aptana settings },
もう少し例を紹介しておきます。
HTML5の雛形を生成
変換前
html:5
変換後
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
XHTMLのDOCTYPE宣言strictを生成
変換前
html:xs
変換後
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> </head> <body> </body> </html>
コメントつきでタグを展開
変換前
div#wrapper>div#container>div#contents+div#footer|c
変換後
<!-- #wrapper --> <div id="wrapper"> <!-- #container --> <div id="container"> <!-- #contents --> <div id="contents"></div> <!-- /#contents --> <!-- #footer --> <div id="footer"></div> <!-- /#footer --> </div> <!-- /#container --> </div> <!-- /#wrapper -->
その他にもいろいろな活用法があります。以下のサイトが参考になります。
TechBlog 「マークアップ効率化 – zen-codingでコーディングを倍速に」
ちなみに私が良く使っているテキストエディタ「Notepad++」でもZen Codingが使えるらしく、導入方法が紹介されてます。
Notepad++ではCtrl+Eらしいですね。
乱雑モックアップ 「メモ / Notepad++でzencoding」