↓ 一度使ったら手放せません ＾＾； とにかく動作が軽くて安心！オススメです ↓
マージンとかパディング、ボーダー、バックグラウンドなどのCSSを指定する際に、
ひとつひとつのプロパティをバラバラに記述するのではなく、まとめて記述することをショートハンドと言います。
ショートハンドを使うことによって、ダラダラとした記述がスッキリとします。
それぞれの記述方法例です↓
基本的にmarginとpaddingは時計回りに記述します。
数値と数値の間は半角スペースを空ける。
1. margin関連プロパティを一括指定の場合
/* 上下左右、全て0px の場合*/
margin:0px;
/* 上下0px、左右10px */
margin:0px 10px;
/* 上0px、左右20px、下10px */
margin:0px 20px 10px;
/* 上0px、右10px、下20px、左30px */
margin:0px 10px 20px 30px;
/* 例えば上記の場合バラバラに書くと */
margin-top:0px;
margin-right:10px;
margin-bottom:20px;
margin-left:30px;
margin:0px;
/* 上下0px、左右10px */
margin:0px 10px;
/* 上0px、左右20px、下10px */
margin:0px 20px 10px;
/* 上0px、右10px、下20px、左30px */
margin:0px 10px 20px 30px;
/* 例えば上記の場合バラバラに書くと */
margin-top:0px;
margin-right:10px;
margin-bottom:20px;
margin-left:30px;
2. padding関連プロパティを一括指定の場合
/* 上下0px、左右10px */
padding:0px 10px;
/* 上0px、左右20px、下10px */
padding:0px 20px 10px;
/* 上0px、右10px、下20px、左30px */
padding:0px 10px 20px 30px;
/* 例えば上記の場合バラバラに書くと */
padding-top:0px;
padding-right:10px;
padding-bottom:20px;
padding-left:30px;
padding:0px 10px;
/* 上0px、左右20px、下10px */
padding:0px 20px 10px;
/* 上0px、右10px、下20px、左30px */
padding:0px 10px 20px 30px;
/* 例えば上記の場合バラバラに書くと */
padding-top:0px;
padding-right:10px;
padding-bottom:20px;
padding-left:30px;
3. border関連プロパティを一括の場合
/* 線の幅が上1px、右2px、下3px、左4px */
border-width:1px 2px 3px 4px;
/* 線のスタイルが上solid、右solid、下solid、左dotted */
border-style: solid solid solid dotted;
/* 線の色が上red、右#ddd、下green、左#000000 */
border-color: red #ddd green #000000;
/* 線の上下左右が幅1px スタイルsolid 色red */
border:1px solid red;
/* 線の上が幅1px スタイルsolid 色red */
border-top:1px solid red;
/* 線の下が幅1px スタイルsolid 色red */
border-bottom:1px solid red;
/* 線の左が幅1px スタイルsolid 色red */
border-left:1px solid red;
/* 線の右が幅1px スタイルsolid 色red */
border-right:1px solid red;
/* 例えば上記の場合バラバラに書くと */
border-right-width:1px;
border-right-style:solid;
border-right-color:red;
border-width:1px 2px 3px 4px;
/* 線のスタイルが上solid、右solid、下solid、左dotted */
border-style: solid solid solid dotted;
/* 線の色が上red、右#ddd、下green、左#000000 */
border-color: red #ddd green #000000;
/* 線の上下左右が幅1px スタイルsolid 色red */
border:1px solid red;
/* 線の上が幅1px スタイルsolid 色red */
border-top:1px solid red;
/* 線の下が幅1px スタイルsolid 色red */
border-bottom:1px solid red;
/* 線の左が幅1px スタイルsolid 色red */
border-left:1px solid red;
/* 線の右が幅1px スタイルsolid 色red */
border-right:1px solid red;
/* 例えば上記の場合バラバラに書くと */
border-right-width:1px;
border-right-style:solid;
border-right-color:red;
4. backgroundを一括指定の場合
/* 通常の記述 */
background-image: url('sample.gif');
background-color: #fff;
background-attachment: fixed;
background: right bottom;
color: #000;
/* ショートハンドを使った場合 */
background: url('Yuchan.GIF') #fff fixed right bottom;
background-attachment: fixed;
color: #000;
background-image: url('sample.gif');
background-color: #fff;
background-attachment: fixed;
background: right bottom;
color: #000;
/* ショートハンドを使った場合 */
background: url('Yuchan.GIF') #fff fixed right bottom;
background-attachment: fixed;
color: #000;
その他、font関連についてもショートハンドを使えますが、
数も多いうえに、順番を間違えたり、必須なものもあるので割愛します。
