【CSS】コーディングがさらに速くなる!Zen-Codingで覚えておきたいよく使うCSSスニペットコマンド

【CSS】コーディングがさらに速くなる!Zen-Codingで覚えておきたいよく使うCSSスニペットコマンド

イメージ

隣家の2階にハチの巣が出来たので、窓を開けて換気するのが怖くなっているishidaです。

Zen-Coding を使うと html のコーディングスピードが上がると一時期話題になりましたね。 個人的には html のコーディングよりも時間がかかるのは CSS なんじゃないのかな?と。

あまり知られていないかもしれませんが、Zen-Coding は CSS にも対応しています。
CSSスニペットコマンド(ショートカット)を覚えるとタイプミスも減り、さらにコーディングスピードアップし効率があがりますよ。

先日行われたCSS Nite in Ginza, Vol.49「バシャログ LIVE」のCSSコーディングで時間が足りずに紹介は出来ませんでしたが、Zen-CodingのCSSスニペットコマンドを使ってデモコーディングをやっていました。

といったわけで今回は、よく使うCSSプロパティをZen-Codingのスニペットコマンドとしてまとめてみました。

Zen-Codingでよく使うCSSスニペットコマンド

コマンド入力後、Windowsの場合は Ctr + ,(カンマ)でコードに変換されます。

コマンド 出力コード
pos position:;
pos:a position:absolute;
pos:r position:relative;
t top:;
r right:;
b bottom:;
l left:;
fl float:;
fl:l float:left;
fl:r float:right;
cl clear:;
cl:b clear:both;
d display:;
d:b display:block;
d:i display:inline;
d:ib display:inline-block;
d:tbc display:table-cell;
ov overflow:;
ov:h overflow:hidden;
zoo zoom:1;
m margin:;
m:0 margin:0;
m:2 margin:0 0;
m:3 margin:0 0 0;
m:4 margin:0 0 0 0;
mt margin-top:;
mb margin-bottom:;
ml margin-left:;
p padding:;
p:0 padding:0;
p:2 padding:0 0;
p:3 padding:0 0 0;
p:4 padding:0 0 0 0;
pt padding-top:;
pr padding-right:;
pb padding-bottom:;
pl padding-left:;
w width:;
h height:;
bd border:;
bd+ border:1px solid #000;
bg background:;
bg+ background:#FFF url() 0 0 no-repeat;
c color:#000;
va vertical-align:;
ta text-align:;
lh line-height:;
fw font-weight:;
fz font-size:;

よく使うものはこんなもんでしょうかね。
margin や background はよくタイプミスしていたので、かなーり重宝しています。

Zen Cording

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ