登録は簡単!. 無料です
または 登録 あなたのEメールアドレスで登録
Zen coding により Mind Map: Zen coding

1. アプリケーション

1.1. Dreamweaver

1.1.1. CS3

1.1.2. CS4

1.1.3. CS5

1.2. 秀丸

1.3. Notepad++

1.4. Emeditor

1.5. Wordpress

1.6. Movabl Type

2. コマンド(秀丸)

2.1. ドキュメントタイプ

2.1.1. html:5

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

2.1.2. html:xml

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

2.1.3. html:xs

2.1.3.1. <!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>

2.1.4. html:xt

2.1.4.1. <!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>

2.1.5. html:xxs

2.1.5.1. <!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>

2.2. ヘッダー

2.2.1. meta

2.2.1.1. <meta http-equiv="" content="">

2.2.2. meta:utf

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

2.2.3. meta:css

2.2.3.1. <meta http-equiv="Content-Style-Type" content="text/css">

2.2.4. meta:script

2.2.4.1. <meta http-equiv="Content-Script-Type" content="text/javascript">

2.2.5. meta:compat

2.2.5.1. <meta http-equiv="X-UA-Compatible" content="IE=7">

2.2.6. link

2.2.6.1. <link rel="" href="">

2.2.7. link:css

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

2.2.8. link:print

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

2.2.9. script

2.2.9.1. <script type="text/javascript"></script>

2.2.10. script:src

2.2.10.1. <script type="text/javascript" src=""></script>

2.2.11. cc:ie

2.2.11.1. <!--[if IE]> <![endif]-->

2.2.12. cc:noie

2.2.12.1. <!--[if !IE]>--><!--<![endif]-->

2.3. 主な要素

2.3.1. ol+

2.3.1.1. <ol> <li></li> </ol>

2.3.2. ul+

2.3.2.1. <ul> <li></li> </ul>

2.3.3. table+

2.3.3.1. <table> <tr> <td></td> </tr> </table>

2.3.4. tr+

2.3.4.1. <tr> <td></td> </tr>

2.3.5. dl+

2.3.5.1. <dl> <dt></dt> <dd></dd> </dl>

2.3.6. a

2.3.6.1. <a href=""></a>

2.3.7. a:mail

2.3.7.1. <a href="mailto:"></a>

2.3.8. ifr iframe

2.3.8.1. <iframe src="" frameborder="0" width="" height=""></iframe>

2.3.9. emb embed

2.3.9.1. <embed src="" type="">

2.3.10. obj object

2.3.10.1. <object data="" type=""></object>

2.4. フォーム

2.4.1. form

2.4.1.1. <form action=""></form>

2.4.2. form:post

2.4.2.1. <form action="" method="post"></form>

2.4.3. label

2.4.3.1. <label for=""></label>

2.4.4. input

2.4.4.1. <input type="" name="" value="">

2.4.5. input:t input:text

2.4.5.1. <input type="text" name="" value="">

2.4.6. input:h input:hidden

2.4.6.1. <input type="hidden" name="" value="">

2.4.7. input:url

2.4.7.1. <input type="url" name="" value="">

2.4.8. input:p input:password

2.4.8.1. <input type="password" name="" value="">

2.4.9. input:c input:checkbox

2.4.9.1. <input type="checkbox" name="" value="">

2.4.10. input:r input:radio

2.4.10.1. <input type="radio" name="" value="">

2.4.11. input:f input:file

2.4.11.1. <input type="file" name="" value="">

2.4.12. input:i input:image

2.4.12.1. <input type="image" src="" alt="" value="">

2.4.13. input:s input:submit

2.4.13.1. <input type="submit" value="">

2.4.14. input:b input:buttom

2.4.14.1. <input type="button" value="">

2.4.15. button

2.4.15.1. <button type="button" value=""></button>

2.4.16. select

2.4.16.1. <select name=""></select>

2.4.17. select+

2.4.17.1. <select name=""> <option value=""></option></select>

2.5. 要素にid属性を指定

2.5.1. 要素名#id名

2.5.1.1. 例

2.5.1.1.1. body#index

2.6. 要素にclass属性を指定

2.6.1. 要素.クラス名

2.6.1.1. 例

2.6.1.1.1. div.section

2.6.1.1.2. div.section.clearfix

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

2.7.1. a>img

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

2.7.2. table>tr>th

2.7.2.1. <table> <tr> <th></th> </tr> </table>

2.7.3. ul#nav>li.current

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

2.7.4. dl>dt+dd

2.7.4.1. <dl> <dt></dt> <dd></dd> </dl>

2.7.5. ul>li*3

2.7.5.1. <ul> <li></li> <li></li> <li></li> </ul>

2.7.6. ul>li#menu$*3

2.7.6.1. <ul> <li id="menu1"></li> <li id="menu2"></li> <li id="menu3"></li> </ul>

2.7.7. select>option#name-$*3

2.7.7.1. <select name=""> <option value="" id="name-1"></option> <option value="" id="name-2"></option> <option value="" id="name-3"></option></select>

2.7.8. ul#nav>li*3>a>img

2.7.8.1. <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>

2.7.9. div#page>div.logo+ul#nav>li*3>a

2.7.9.1. <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>

2.7.10. div#page>(div#header>div.inner)+div#nav+(div#content>div#section-$*3+div#side)+div#footer

2.7.10.1. <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>

2.7.11. 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

2.7.11.1. <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>