この記事は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」
