汎用cssのclassまとめ

cssについて

ケーワン・エンタープライズStaffブログはscssで作成されています。
classの追加や不明点は運営チームまでお問い合わせください。

使用できるタグリスト

無理に利用する必要はありません。
運営側で微調整を行いますので分かる方のみご利用ください。

	.mgTop03 {margin-top:3px;}  .pdTop03 {padding-top:3px;}

	.mgTop05 {margin-top:5px;}  .pdTop05 {padding-top:5px;}

	.mgTop10 {margin-top:10px;}  .pdTop10 {padding-top:10px;}

	.mgTop15 {margin-top:15px;}  .pdTop15 {padding-top:15px;}

	.mgTop20 {margin-top:20px;}  .pdTop20 {padding-top:20px;}

	.mgTop25 {margin-top:25px;}  .pdTop25 {padding-top:25px;}

	.mgTop30 {margin-top:30px;}  .pdTop30 {padding-top:30px;}

	.mgTop35 {margin-top:35px;}  .pdTop35 {padding-top:35px;}

	.mgTop40 {margin-top:40px;}  .pdTop40 {padding-top:40px;}

	.mgLeft03 {margin-left:3px;}  .pdLeft03 {padding-left:3px;}

	.mgLeft05 {margin-left:5px;}  .pdLeft05 {padding-left:5px;}

	.mgLeft10 {margin-left:10px;}  .pdLeft10 {padding-left:10px;}

	.mgLeft15 {margin-left:15px;}  .pdLeft15 {padding-left:15px;}

	.mgLeft20 {margin-left:20px;}  .pdLeft20 {padding-left:20px;}

	.mgLeft25 {margin-left:25px;}  .pdLeft25 {padding-left:25px;}

	.mgLeft30 {margin-left:30px;}  .pdLeft30 {padding-left:30px;}

	.mgLeft35 {margin-left:35px;}  .pdLeft35 {padding-left:35px;}

	.mgLeft40 {margin-left:40px;}  .pdLeft40 {padding-left:40px;}

	.mgBottom03 {margin-bottom:3px;}  .pdBottom03 {padding-bottom:3px;}

	.mgBottom05 {margin-bottom:5px;}  .pdBottom05 {padding-bottom:5px;}

	.mgBottom10 {margin-bottom:10px;}  .pdBottom10 {padding-bottom:10px;}

	.mgBottom15 {margin-bottom:15px;}  .pdBottom15 {padding-bottom:15px;}

	.mgBottom20 {margin-bottom:20px;}  .pdBottom20 {padding-bottom:20px;}

	.mgBottom25 {margin-bottom:25px;}  .pdBottom25 {padding-bottom:25px;}

	.mgBottom30 {margin-bottom:30px;}  .pdBottom30 {padding-bottom:30px;}

	.mgBottom35 {margin-bottom:35px;}  .pdBottom35 {padding-bottom:35px;}

	.mgBottom40 {margin-bottom:40px;}  .pdBottom40 {padding-bottom:40px;}

	.mgRight03 {margin-right:3px;}  .pdRight03 {padding-right:3px;}

	.mgRight05 {margin-right:5px;}  .pdRight05 {padding-right:5px;}

	.mgRight10 {margin-right:10px;}  .pdRight10 {padding-right:10px;}

	.mgRight15 {margin-right:15px;}  .pdRight15 {padding-right:15px;}

	.mgRight20 {margin-right:20px;}  .pdRight20 {padding-right:20px;}

	.mgRight25 {margin-right:25px;}  .pdRight25 {padding-right:25px;}

	.mgRight30 {margin-right:30px;}  .pdRight30 {padding-right:30px;}

	.mgRight35 {margin-right:35px;}  .pdRight35 {padding-right:35px;}

	.mgRight40 {margin-right:40px;}  .pdRight40 {padding-right:40px;}

	.mg05 {margin: 05px;}
	.mg10 {margin: 10px;}
	.mg20 {margin: 20px;}
	.mg30 {margin: 30px;}
	.mg40 {margin: 40px;}
	.mg50 {margin: 50px;}

	.pd03 {padding: 03px;}
	.pd05 {padding: 05px;}
	.pd10 {padding: 10px;}
	.pd15 {padding: 15px;}
	.pd20 {padding: 20px;}
	.pd30 {padding: 30px;}
	.pd40 {padding: 40px;}
	.pd50 {padding: 50px;}

	.mgTop-03 {margin-top: -03px;}
	.mgTop-05 {margin-top: -05px;}
	.mgTop-10 {margin-top: -10px;}
	.mgTop-15 {margin-top: -15px;}
	.mgTop-20 {margin-top: -20px;}
	.mgTop-30 {margin-top: -30px;}
	.mgTop-40 {margin-top: -40px;}
	.mgTop-50 {margin-top: -50px;}

	.mgBottom-03 {margin-bottom: -03px;}
	.mgBottom-05 {margin-bottom: -05px;}
	.mgBottom-10 {margin-bottom: -10px;}
	.mgBottom-15 {margin-bottom: -15px;}
	.mgBottom-20 {margin-bottom: -20px;}
	.mgBottom-30 {margin-bottom: -30px;}
	.mgBottom-40 {margin-bottom: -40px;}
	.mgBottom-50 {margin-bottom: -50px;}

	.mg0 {margin: 0;}
	.pd0 {padding: 0;}

	.mgCenter {margin: 0 auto;}

	.w30px {width: 30px}
	.w60px {width: 60px}
	.w90px {width: 90px}

	.w90 {width: 90%}
	.w95 {width: 95%}
	.w100 {width: 100%}

	.h15 {height: 15px}
	.h30 {height: 30px}
	.h45 {height: 45px}
	.h60 {height: 60px}

	.fs-s {font-size: 12px;}
	.fs-l {font-size: 24px;}

	.txt-red {color: #ff0000;}
	.txt-green {color: #4caf50;}
	.txt-gray {color: #999;}

//その他css設定
.left { text-align: left; }

.center { text-align: center; }

.right { text-align: right; }

.f-left { float: left; }

.f-right { float: right; }

.inline { display: inline; }

.inline-block { display: inline-block; }

.block { display: block; }

.nowrap { white-space: nowrap; }

.v-top { vertical-align: top; }

.v-middle { vertical-align: middle; }

.v-bottom { vertical-align: bottom; }

.bold { font-weight:bold; }

.clear { clear: both; }

.position {position: relative;}

.clearfix {
  \zoom: 1;
  &:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
  }
}