CSSSEOニュース
ウェブ制作に関する話題を掲載
2008-05-09T12:39:48+9:00
Copyright 2006
fukuoka
CSS プロパティ短縮術 (Shorthand Properties)
http://fukuoka.mipuyu.com/css_seo/index.php?p=2
2006-07-05T01:12:51+9:00
2006-07-05T01:12:51+9:00
CSS 表示速度を短縮するため、 CSS と日々葛藤する人々が多い昨今。どうせやるなら、とことんやりましょう。CSSもサイズダウンしてより高速化。
background
短縮しましょう
background-color: #000000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
短縮書き換え例：
background: #000000 url(image.gif) no-repeat top left
list-style
短縮しましょう
list-style: #ffffff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)
短縮書き換え例：
list-style: #ffffff disc outside url(image.gif)
margin と padding
CSS では、margin と padding プロパティの短縮方法は多数あります。
上、右、下、左が全て違う値の場合
短縮しましょう
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
短縮書き換え例：
margin: 2px 1px 3px 4px (上、右、下、左)
右と左が同一で、上と下の値が違う場合
短縮しましょう
margin-top: 10em;
margin-right: 1em;
margin-bottom: 5em;
margin-left: 1em
短縮書き換え例：
margin: 10em 1em 5em (上、左右、下)
上と下、右と左が同じ場合（対称同一）
短縮しましょう
margin-top: 3%;
margin-right: 1%;
margin-bottom: 3%;
margin-left: 1%
短縮書き換え例：
margin: 3% 1% ...