Zen-codingのCSS記法

2010.11.13crossnodeCSS


Zen-codingのCSS記法をピックアップしました。しかし、Zen-codingにおけるプロパティのエイリアス(ショートカット)を覚えなければいけないので、しばらくはチートシートとにらめっこ状態になるかと思います。今回は使用頻度の高いプロパティを挙げましたが、オフィシャルのチートシートを入手しておくと良いですよ。HTMLとCSS両方載っているのでZen-codingを使うときには必需品です。

オフィシャルチートシートはこちら
Zen Coding cheat sheet (PDF)

WEBの方が見やすいかも。という方はこちら
Zen CSS properties

下記はエイリアスのほんの一部ですので、是非チートシートを見ながら覚えてみてください。

01 : @import

/* 入力内容 */
@i

/* 変換後 */
@import url();

02 : display

/* 入力内容 */
d:b
d:n

/* 変換後 */
display:block;
display:none;

03 : コロンと値の間にスペースを挿入

末尾に「|fc」とつけるとコロンの後に半角スペースを入れてくれます。(「|」は「shift + ¥」です)

/* 入力内容 */
d:b|fc

/* 変換後 */
display: block;

でも毎回「|fc」なんて打つのはちょっと現実的ではないですよね。基本的に値の前にスペースを入れるというルールの人にとってはなんとか解決したいところですが、ちゃんと対策が用意されていますよ。
構成ファイルの中にあるzen_settings.jsというファイルのcssスニペット記述の後に下記ハイライト部分(25行目)を追加してあげれば、デフォルトで値の前にスペースが入るようになります。

zen_settings = {
        ...
        'css': {
                ...
                'filters': 'html, fc'
        }
}

オフィシャルサイトでの説明箇所はこちら
http://code.google.com/p/zen-coding/wiki/Filters#fc

04 : position

/* 入力内容 */
pos
pos:f

/* 変換後 */
position:;
position:fixed;

05 : top

/* 入力内容 */
t
t:a

/* 変換後 */
top:;
top:auto;

仲間のbottom, right, leftも同じく1文字目がエイリアスで使えます。

06 : float

/* 入力内容 */
fl
fl:n
fl:l
fl:r

/* 変換後 */
float:;
float:none;
float:left;
float:right;

07 : margin

/* 入力内容 */
m
m:a
m:0
m:2
m:3
m:4

/* 変換後 */
margin:;
margin:auto;
margin:0;
margin:0 0;
margin:0 0 0;
margin:0 0 0 0;
/* 入力内容 */
mt
mt:a

/* 変換後 */
margin-top:;
margin-top:auto;

08 : padding

/* 入力内容 */
p
p:0
p:2
p:3
p:4

/* 変換後 */
padding:;
padding:0;
padding:0 0;
padding:0 0 0;
padding:0 0 0 0;   
/* 入力内容 */
pt
pr
pb
pl

/* 変換後 */
padding-top:;
padding-right:;
padding-bottom:;
padding-left:;

09 : width, height

/* 入力内容 */
w
h

/* 変換後 */
width:;
height:;

10 : background

/* 入力内容 */
bg
bg+

/* 変換後 */
background:;
background:#FFF url() 0 0 no-repeat;

ページトップへ