2012年10月31日

はじめてのZen-Coding入門

Sublime Text2にZen-Codingをインストールしたので、Zen-Coding入門を色々と使ってみました。

次のように入力してtabキーを押すと色々なHTMLが自動生成されます。

html:5 [tab]

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

</body>
</html>


html:xt [tab]

<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>

</body>
</html>


link:css [tab]

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


div [tab]

<div></div>


div>p [tab]

<div>
<p></p>
</div>


div>div+p [tab]

<div>
<div></div>
<p></p>
</div>


ul>li*3 [tab]

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


dl>(dt+dd)*3 [tab]

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


a{ほげ} [tab]

<a href="">ほげ</a>



div#main [tab]

<div id="main"></div>


div.hoge [tab]

<div class="hoge"></div>


div#main.hoge.foo [tab]

<div id="main" class="hoge foo"></div>


ul>li.line$*5 [tab]

<ul>
<li class="line1"></li>
<li class="line2"></li>
<li class="line3"></li>
<li class="line4"></li>
<li class="line5"></li>
</ul>


a[href=#hoge] [tab]

<a href="#hoge"></a>


img[alt=hoge][src=foo.jpg] [tab]

<img src="foo.jpg" alt="hoge">


#main>h1.hoge|c [tab]

<!-- #main -->
<div id="main">
<!-- .hoge -->
<h1 class="hoge"></h1>
<!-- /.hoge -->
</div>
<!-- /#main -->


#main>h1.hoge|e [tab]

&lt;div id="main"&gt;
&lt;h1 class="hoge"&gt;&lt;/h1&gt;
&lt;/div&gt;


#main>h1.hoge|haml [tab]

#main
%h1.hoge
タグ:Zen-coding
posted by ねこまんま at 02:07 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/299695682
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック