Home> espresso > Espresso + Zen-coding のメモ

Espresso + Zen-coding のメモ

Posted by: masa
2010年3月 4日 16:56
espresso

Espresso (Version 1.1.1) でのZen-coding (Version 0.6) メモ。

Zen-coding のインストール

Downloads - zen-coding - Project Hosting on Google Code から Zen Coding for Espresso v0.6 をダウンロード
解凍すると現れる TEA for Espresso.sugar をダブルクリックして Espresso にインストール

Zen-coding の機能その1 : Expand Abbreviation

（Zen-coding の記法で書かれた）略記を展開する
ショートカット: F1
Zen-coding の記法を覚える必要がある。難易度は、HTML/CSSを書ける人ならすぐに理解できるレベル。非常にわかりやすい。

Zen-coding の記法

例

div （divと入力して[F1]キーを押すと、下記のように変換される。）

<div></div>

img （src属性値を代入後、tabキーで、alt属性値の入力位置へカーソルが移動する。）

<img src="" alt="" />

<a href=""></a>

a[title]

<a href="" title=""></a>

div#index

<div id="index"></div>

div.section

<div class="section"></div>

div.section.clearfix

<div class="section clearfix"></div>

ul>li

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

ul>li*3

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

ul>li*3>a

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

ul.nav>li*3>a

<ul class="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

ul>li#nav-$*3>a

<ul>
    <li id="nav-1"><a href=""></a></li>
    <li id="nav-2"><a href=""></a></li>
    <li id="nav-3"><a href=""></a></li>
</ul>

div.section>h2.section-header+div.section-content

<div class="section">
    <h2 class="section-header"></h2>
    <div class="section-content"></div>
</div>

div.section>h2.section-header+div.section-content>ul>li*3>a

<div class="section">
    <h2 class="section-header"></h2>
    <div class="section-content">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</div>

（つづく）

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Espresso + Zen-coding のメモ

Zen-coding のインストール

Zen-coding の機能その1 : Expand Abbreviation

Zen-coding の記法

例

関連エントリー