表示速度を短縮するため、 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% (上下、左右)
全て同一の値の場合
.一見すると分かりやすいのですが
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0
短縮書き換え例：
margin: 0 (上下左右)
Border
短縮しましょう
border-width: 1px;
border-color: #111111;
border-style: solid
書き換え例：
border: 1px #111111 solid
コメント
RSS feed for comments on this post.
TrackBack URL : http://fukuoka.mipuyu.com/css_seo/2006-07-05/css-shorthand-properties/trackback/
この投稿には、まだコメントが付いていません
コメントの投稿
改行や段落は自動です
URLとE-mailは自動的にリンクされますので、<a>タグは不要です。
HTML allowed: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <code> <em> <i> <strike> <strong>