汎用的なCSS

utils.css

/**
* @author okutani
*/

/*font-family*/
body {
  /*ゴシック*/
  font-family: Arial, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  /*明朝*/
  /*font-family:Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;*/
}

/*box-sizing*/
* { box-sizing: border-box }

/*margin*/
.m0 { margin: 0 }
.m3 { margin: 3px }
.m5 { margin: 5px }
.m10 { margin: 10px }
.m15 { margin: 15px }
.m20 { margin: 20px }
.m30 { margin: 30px }

.mt0 { margin-bottom: 0 }
.mt3 { margin-top: 3px }
.mt5 { margin-top: 5px }
.mt10 { margin-top: 10px }
.mt15 { margin-top: 15px }
.mt20 { margin-top: 20px }
.mt30 { margin-top: 30px }

.mb0{ margin-bottom: 0 }
.mb3 { margin-bottom: 3px }
.mb5 { margin-bottom: 5px }
.mb10 { margin-bottom: 10px }
.mb15 { margin-bottom: 15px }
.mb20 { margin-bottom: 20px }
.mb30 { margin-bottom: 30px }

/*padding*/
.p0 { padding: 0 }
.p3 { padding: 3px }
.p5 { padding: 5px }
.p10 { padding: 10px }
.p15 { padding: 15px }
.p20 { padding: 20px }
.p30 { padding: 30px }

.pt0 { padding-top: 0 }
.pt5 { padding-top: 3px }
.pt5 { padding-top: 5px;}
.pt10 { padding-top: 10px;}
.pt15 { padding-top: 15px;}
.pt20 { padding-top: 20px;}
.pt30 { padding-top: 30px;}

.pb0 { padding-bottom: 0 }
.pb5 { padding-bottom: 5px;}
.pb5 { padding-bottom: 5px;}
.pb10 { padding-bottom: 10px;}
.pb15 { padding-bottom: 15px;}
.pb20 { padding-bottom: 20px;}
.pb30 { padding-bottom: 30px;}

/*width*/
.w100p { width: 100% }
.w50p { width: 50% } /*2分割*/
.w33p { width: 33% } /*3分割*/
.w25p { width: 25% } /*4分割*/

/*color*/
.color-dp { color: deeppink }
.color-w { color: #fff }
.color-gc { color: #ccc; }

/*background-color*/
.bgc-w { background-color: #fff }
.bgc-gc { background-color: #ccc }
.bgc-f8 { background-color: #f8f8f8 }

/*table*/
th { white-space:nowrap }
.tb-fixed { table-layout: fixed }

/*vertical-align*/
.vmiddle { vertical-align: middle !important }

/*display none*/
.hide { display: none }

/*box-shadow*/
.box-shadow { box-shadow: 0 1px 3px rgba(0,0,0,.25) }

/*display block*/
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/*text-align*/
.text-center { text-align: center }
.text-left { text-align: left }
.text-right { text-align: right }