Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Zen coding by Mind Map: Zen coding
0.0 stars - reviews range from 0 to 5

Zen coding

アプリケーション

Dreamweaver

CS3

CS4

CS5

秀丸

Notepad++

Emeditor

Wordpress

Movabl Type

コマンド(秀丸)

ドキュメントタイプ

html:5, <!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title></title> </head> <body></body> </html>

html:xml, <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"></html>

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>

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:xxs, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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>

ヘッダー

meta, <meta http-equiv="" content="">

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

meta:css, <meta http-equiv="Content-Style-Type" content="text/css">

meta:script, <meta http-equiv="Content-Script-Type" content="text/javascript">

meta:compat, <meta http-equiv="X-UA-Compatible" content="IE=7">

link, <link rel="" href="">

link:css, <link rel="stylesheet" type="text/css" href=".css">

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

script, <script type="text/javascript"></script>

script:src, <script type="text/javascript" src=""></script>

cc:ie, <!--[if IE]> <![endif]-->

cc:noie, <!--[if !IE]>--><!--<![endif]-->

主な要素

ol+, <ol> <li></li> </ol>

ul+, <ul> <li></li> </ul>

table+, <table> <tr> <td></td> </tr> </table>

tr+, <tr> <td></td> </tr>

dl+, <dl> <dt></dt> <dd></dd> </dl>

a, <a href=""></a>

a:mail, <a href="mailto:"></a>

ifr iframe, <iframe src="" frameborder="0" width="" height=""></iframe>

emb embed, <embed src="" type="">

obj object, <object data="" type=""></object>

フォーム

form, <form action=""></form>

form:post, <form action="" method="post"></form>

label, <label for=""></label>

input, <input type="" name="" value="">

input:t input:text, <input type="text" name="" value="">

input:h input:hidden, <input type="hidden" name="" value="">

input:url, <input type="url" name="" value="">

input:p input:password, <input type="password" name="" value="">

input:c input:checkbox, <input type="checkbox" name="" value="">

input:r input:radio, <input type="radio" name="" value="">

input:f input:file, <input type="file" name="" value="">

input:i input:image, <input type="image" src="" alt="" value="">

input:s input:submit, <input type="submit" value="">

input:b input:buttom, <input type="button" value="">

button, <button type="button" value=""></button>

select, <select name=""></select>

select+, <select name=""> <option value=""></option></select>

要素にid属性を指定

要素名#id名, 例, body#index, <body id="index"></body>

要素にclass属性を指定

要素.クラス名, 例, div.section, <div class="section"></div>, div.section.clearfix, <div class="section clearfix"></div>

ショートコマンド サンプル

a>img, <a href=""><img src="" alt="" width="" height=""></a>

table>tr>th, <table> <tr> <th></th> </tr> </table>

ul#nav>li.current, <ul id="nav"> <li class="current"></li> </ul>

dl>dt+dd, <dl> <dt></dt> <dd></dd> </dl>

ul>li*3, <ul> <li></li> <li></li> <li></li> </ul>

ul>li#menu$*3, <ul> <li id="menu1"></li> <li id="menu2"></li> <li id="menu3"></li> </ul>

select>option#name-$*3, <select name=""> <option value="" id="name-1"></option> <option value="" id="name-2"></option> <option value="" id="name-3"></option></select>

ul#nav>li*3>a>img, <ul id="nav"> <li><a href=""><img src="" alt="" width="" height=""></a></li> <li><a href=""><img src="" alt="" width="" height=""></a></li> <li><a href=""><img src="" alt="" width="" height=""></a></li> </ul>

div#page>div.logo+ul#nav>li*3>a, <div id="page"> <div class="logo"></div> <ul id="nav"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>

div#page>(div#header>div.inner)+div#nav+(div#content>div#section-$*3+div#side)+div#footer, <div id="page"> <div id="header"> <div class="inner"></div> </div> <div id="nav"></div> <div id="content"> <div id="section-1"></div> <div id="section-2"></div> <div id="section-3"></div> <div id="side"></div> </div> <div id="footer"></div> </div>

div#page>(div#header>(p.logo>a>img)+ul#gnav>li.menu-$*5)+(div#content>(ul#topicpath>li*3>a)+div#section-$*3+div#side>ul.widget*3>li*3>a)+div#footer>ul#footernav>li*3>a, <div id="page"> <div id="header"> <p class="logo"><a href=""><img src="" alt="" width="" height=""></a></p> <ul id="gnav"> <li class="menu-1"></li> <li class="menu-2"></li> <li class="menu-3"></li> <li class="menu-4"></li> <li class="menu-5"></li> </ul> </div> <div id="content"> <ul id="topicpath"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> <div id="section-1"></div> <div id="section-2"></div> <div id="section-3"></div> <div id="side"> <ul class="widget"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> <ul class="widget"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> <ul class="widget"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> </div> <div id="footer"> <ul id="footernav"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> </div>