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