絶対暗記したいzen-coding表記 Best20

2012年1月30日


エディタにZen-Codingのマクロを入れたら、htmlの作成が捗るようになった。
秀丸マクロでZen-Coding


上記のリンク先には、あらゆるZen-Codingの表記法が書かれているけど、一度にマスターするのは大変なので最低限暗記したい表記を厳選して纏めてみた。

pdf版も作ったので、印刷したい人はどうぞ。
CheatSheet > zenCoding-best20.pdf




1:htmlタグ全体

html


↓

<html></html>





2:htmlタグ全体を、xml形式で

html:xml


↓

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




3:htmlタグ全体を、html5形式で

html:5


↓

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




4:htmlヘッダのcharset定義

meta:utf


↓

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




5:htmlヘッダのcss定義

link:css


↓

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




6:htmlヘッダのscript定義

script


↓

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




7:htmlヘッダのscript定義(src付き)

script:src


↓

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




8:表題

h2


↓

<h2></h2>




9:リンク(aタグの場合はhrefが自動で付与される)

a


↓

<a href=""></a>





10:#で始まるものは、divタグのID指定とみなされる。

#head


↓

<div id="head"></div>





11: .で始まる場合はclass指定

.head


↓

<div class="head"></div>





12: タグ名を#の前に書いた場合は、そのタグで括ってくれる

p#head


↓

<p id="head"></p>





13: 「#」はひとつだけだが、「.」複数指定可能

p#head.large.left


↓

<p id="head" class="large left"></p>





14: タグをスペース区切りで記述するとネストしてくれる

table tr td


↓

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




15: タグの後に「*」と数字を書くとその回数分繰り返す

ul li*3


↓

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




16: ＆で終わると、htmlエンコーディングしてくれる

ul li&


↓

&lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;




17: 繰り返しさせる固まりは、括弧で指定可能

dl (dt+dd)*2


↓

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>





18: 括弧で属性値を指定すると、属性値付きになる。

※ただ、aタグの場合は、属性値を書くよりクリップボードに入れておいたほうがbetter
　”a”の変換後hrefの中にカーソルが移動するので,”a”だけ変換させてCtrl-vした方が速い

a:[href=foo.com]


↓

<a href="foo.com"></a>





19: タグ名の後に”+”をつけると、いつものパターンで子要素を書いてくれる
(他にol,ulとかもいける)

table+


↓

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





20: ちょっと応用編。formタグを一気に作る。

"form:get ( 
input:text#txtMail + 
input:btn#btnSet
)"


↓

<form action="">
<input type="text" name="" value="" id="txtMail" />
<input type="" name="" value="" id="btnSet" />
</form>





上記内容のPDF版です。 > zenCoding-best20.zip


参考資料：もっと勉強したい人は、以下のページでどうぞ。
秀丸マクロでZen-Coding
zen-coding CheatSheets

関連記事
同じカテゴリの記事はこちらから!! → 未分類

コメントを残す

メールアドレスが公開されることはありません。