Emmetメモ:CSSのコーディング速度UP

goto_jp 265views 更新:2013年12月3日

HTMLと異なり複数行一度に出力はできませんが、CSSもプロパティ名を短縮形で書くことができます。

db
dn
poss
posr
posa
posf
m:a
m10,5x
w100
w100%
fz13
fwb
c#f00

それぞれ展開すると下記になります。

display: block;
display: none;
position: static;
position: relative;
position: absolute;
position: fixed;
margin: auto;
margin: 10px 5px;
width: 100px;
width: 100%;
font-size: 13px;
font-weight: bold;
color: #ff0000;

改めて展開前と並べます。

db    -> display: block;
dn    -> display: none;
poss  -> position: static;
posr  -> position: relative;
posa  -> position: absolute;
posf  -> position: fixed;
m:a   -> margin: auto;
m10,5 -> margin: 10px 5px;
w100  -> width: 100px;
w100% -> width: 100%;
fz13  -> font-size: 13px;
fwb   -> font-weight: bold;
c#f00 -> color: #ff0000;

比較的よく使われそうなものを列挙しましたが、「pos」や「fz」など略し方がまちまちだったり「:」を使う場所がプロパティによってまちまちで少し統一感が無いので、慣れるまでは普通に打った方が分かりやすく感じるかも知れません。

CSSのプロパティ名は結構長いので、よく使うものだけでも取り入れてしまえばコーディング速度が早まります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません