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










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="" xml:lang="ja"></html>

html:xs, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" 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" ""> <html xmlns="" 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" ""> <html xmlns="" 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名, 例, body#index, <body id="index"></body>


要素.クラス名, 例, 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>$*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>