【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 はよくタイプミスしていたので、かなーり重宝しています。
