Zen-Codingを導入
Zen-Coding
- HTMLの文書構造がわかっていれば、特定の記述をして展開すると一気にコードの記述に展開されます
- 「show all」をクリック
- 「Zen Coding for Dreamweaver v.0.7.5」をダウンロード
Dreamweaver に ZenCoding をインストール
- Extension Manager を起動させてインストールします
Zen Coding 基本的な使い方
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>
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>
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' }
html5.js
- HTML5の新要素にInternet Explorer8以前も対応させる
- Javascript API等を含めた全てのHTML5の機能を実装できるわけではありませんが、基本的なHTML5の新要素には対応しています
「html5.js」を読み込ませることで、HTML5の以下のような新要素を扱えるようになります。
- section・・・汎用的セクションを表す
- article・・・独立して配信可能な情報を表す
- header・・・セクションのヘッダーを表す
- footer・・・セクションのフッターを表す
- aside・・・補助的な情報を表す
- nav・・・主要なナビゲーションを表す
- hgroup・・・h1〜h6の見出し要素をまとめる
- figure・・・文章中の図を表す
※以下の場合、IE9はHTML5に対応しているので、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>