CSSを書いているといつも思うのですが、使いまわししても、どうしても書き換えが必要になってきます。
何やら、サーバーサイドCSSというものがあるらしいですがそれはさておき、CSSを書く際に短縮できるいくつかの記述方法を載せたいと思います。



既に知っている方が多いと思いますが…。



body {
font-size: 9px;
font-family: Verdana;
font-weight: normal;
padding-top: 20px;
padding-bottom: 10px;
margin-left: 50px;
margin-right: 50px;
background-color: #ffffff;
background-image: url("images/back.png");
background-repeat: no-repeat;
background-position: left bottom;
}


という記述があるとします。
これを短くするには、下記のような記述をします。


body {
font: normal 9px Verdana;
padding: 20px 0 10px 0;
margin: 0 50px;
background: #fff url("images/back.png") no-repeat left bottom;
}


なんと、11行から4行に減らすことができました。
このような記述を全てのCSSに当てはめていけば、全体的にも2分の1以下になります。



さて、解説をします。

font: normal 9px Verdana;
font: 太さ 大きさ 字体;

四個記述した場合
padding: 20px 0 10px 0;
padding: 上 右 下 左;(時計回り)

二個記述した場合
padding: 20px 10px;
padding: 上下 左右;

ref) marginもpaddingと一緒です。(borderはできません)

background: #fff url("images/back.png") no-repeat left bottom;
background: 色 画像 画像リピート 横位置 縦位置;



初めて知った方は是非使ってみてください。

• タグ
• CSS
• HTML
• 短縮