Zen-Codingを導入

Zen-Coding

  • HTMLの文書構造がわかっていれば、特定の記述をして展開すると一気にコードの記述に展開されます


  • 「show all」をクリック


  • 「Zen Coding for Dreamweaver v.0.7.5」をダウンロード
Dreamweaver に ZenCoding をインストー
  • Extension Manager を起動させてインストールします

Zen Coding 基本的な使い方

基本!コードの展開方法
  • DreamweaverでのZenCodingの展開は「Ctrl」+「,」で展開

Macintoshの場合は、「コマンド」+「,」

コード

div

展開

<div></div>

ZenCoding エレメント一覧

Root Element

html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
</body>
</html>


html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>


html:5

<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
Document Metadata

link:css

<link rel="stylesheet" type="text/css" href="style.css" media="screen, print" />

link:print

<link rel="stylesheet" type="text/css" href="print.css" media="print" />


meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />


style

<style type="text/css"></style>
Scripting

script:src

<script type="text/javascript" src=""></script>
Sections

h1

<h1></h1>

※h1〜h6まで同様の記述方法です。


address, adr

<address></address>
Grouping Content

p

<p></p>


hr

<hr />


br

<br />


pre

<pre></pre>


ol

<ol></ol>


ol+

<ol>
<li></li>
</ol>


ul+

<ul>
<li></li>
</ul>


li

<dl></dl>


dl

<address></address>


dl+

<dl>
<dt></dt>
<dd></dd>
</dl>
Text-level Semantics

a

<a href=""></a>


a:link

<a href="http://"></a>


em

<em></em>


strong, str

<strong></strong>


abbr

<abbr title=""></abbr>


code

<code></code>


sub

<sub></sub>


sup

<sup></sup>


span

<span></span>
Edits

ins

<ins datetime="2013-01-25T16:37:00+09:00"></ins>


del

<del datetime="2013-01-25T16:37:00+09:00"></del>
Embedded Content

img

<img src="" alt="" />


iframe, ifr

<iframe></iframe>


embed, emb

<embed />


map

<map name=""></map>


map+

<map name="">
<area shape="" coords="" href="" alt="" />
</map>
Tabular Data

table

<table></table>


table+

<table>
<tr>
<td></td>
</tr>
</table>


caption, cap

<caption></caption>


colgroup, colg

<colgroup></colgroup>


colgroup+, colg+

<colgroup>
<col />
</colgroup>


tbody

<tbody></tbody>


thead

<thead></thead>


tr

<tr></tr>


tr+

<tr>
<td></td>
</tr>


th

<th></th>


td

<td></td>
Forms

form

<form action=""></form>


form:get

<form action="" method="get"></form>


label

<label for=""></label>


input:hidden,input:h

<input type="hidden" name="" />


input:text,input:t

<input type="text" name="" id="" />


input:password,input:p

<input type="password" name="" id="" />


input:checkbox,input:c

<input type="checkbox" name="" id="" />


input:radio,input:r

<input type="radio" name="" id="" />


input:submit,input:s

<input type="submit" value="" />


input:image,input:i

<input type="image" src="" alt="" />


select

<select name="" id=""></select>


select+

<select name="" id="">
<option value=""></option>
</select>
Conditional Comments

cc:ie

<!--[if IE]>

<![endif]-->


cc:noie

<!--[if !IE]><!-->

<!--<![endif]-->

Zen HTML Elements

http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

ここまでの例は、Dreamweaverで手打ちするべき要素です。
あえて、Zen-Codingを使って記述するまでもありません。


Zen-Coding カスタマイズ

カスタマイズするZen-Codingの設定ファイルの場所
  • カスタマイズするjsの場所はソフトにより違います
  • 例としてZen-Codingの設定ファイルの場所は以下のような場所にあります


Dreamweaver

  • 「zen_settings.js」を検索します

Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js

Aptana
[任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js")



Macの場合は「キーボードショートカット」を複製し「行へ移動」のキー割あてを変更するか削除します。

Zen-Coding設定ファイルの基本構成
'variables': {
                //言語やインデントの設定
},
'css': {
        'filters': 'html,css',
        'snippets': {
                //CSSの設定
        }
},
'html': {
        'filters': 'html',
        'snippets': {
                //IEの分岐やDoctypeの設定              
        },
        'abbreviations': {
                //HTMLの設定
        },
        'element_types': {
                //空要素、ブロック・インライン要素の設定
        }
},
'xsl': {
        'extends': 'html',
        'filters': 'html, xsl',
        'abbreviations': {
                //xslの設定
        }
},
'haml': {
        'filters': 'haml',
        'extends': 'html'
}
  • HTMLに何か要素を追加したい場合は、'html'の中の'abbreviations'に要素を追加します
  • CSSに何か要素を追加したい場合は、'CSS'の中の'snippets'に要素を追加します

html5.js

  • HTML5の新要素にInternet Explorer8以前も対応させる
  • Javascript API等を含めた全てのHTML5の機能を実装できるわけではありませんが、基本的なHTML5の新要素には対応しています


html5.js」を読み込ませることで、HTML5の以下のような新要素を扱えるようになります。

  • section・・・汎用的セクションを表す
  • article・・・独立して配信可能な情報を表す
  • header・・・セクションのヘッダーを表す
  • footer・・・セクションのフッターを表す
  • aside・・・補助的な情報を表す
  • nav・・・主要なナビゲーションを表す
  • hgroup・・・h1〜h6の見出し要素をまとめる
  • figure・・・文章中の図を表す


※以下の場合、IE9HTML5に対応しているので、IE9は含みません。

DOCTYPEを変更
'html:5': '<!DOCTYPE html>\n' +
'<html lang="ja">\n' +
'<head>\n' +
'<meta charset="UTF-8">\n' +
'<title></title>\n' +
'<link rel="stylesheet" href="">\n' +
'<script src=""></script>\n' +
'<!--[if lte IE 9]>\n' +
'<script src="js/html5.js"></script>\n' +
'<![endif]-->\n' +
'</head>\n' +
'<body>\n${child}|\n</body>\n' +
'</html>'


《展開後のHTML》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
  • Googlecodeを利用する場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>