LoginSignup
9
9

More than 5 years have passed since last update.

毎回記述する個人的ベースCSS

Last updated at Posted at 2014-03-28

marginとかfont周りとかは、使われると想定されるものを予め用意しておくと非常に楽です。

追記:font-sizeを追加

/*===================================================================
    layout
===================================================================*/
/* ------ margin ------ */
.mtA   { margin:0 auto !important; }
.mt0   { margin-top:0 !important; }
.mt3   { margin-top:3px !important; }
.mt5   { margin-top:5px !important; }
.mt8   { margin-top:8px !important; }
.mt10  { margin-top:10px !important; }
.mt13  { margin-top:13px !important; }
.mt15  { margin-top:15px !important; }
.mt18  { margin-top:18px !important; }
.mt20  { margin-top:20px !important; }
.mt25  { margin-top:25px !important; }
.mt30  { margin-top:30px !important; }
.mt35  { margin-top:35px !important; }
.mt40  { margin-top:40px !important; }
.mt45  { margin-top:45px !important; }
.mt50  { margin-top:50px !important; }
.mt55  { margin-top:55px !important; }
.mt60  { margin-top:60px !important; }
.mt65  { margin-top:65px !important; }
.mt70  { margin-top:70px !important; }
.mt75  { margin-top:75px !important; }
.mt80  { margin-top:80px !important; }
.mt85  { margin-top:85px !important; }
.mt90  { margin-top:90px !important; }
.mt95  { margin-top:95px !important; }
.mt100 { margin-top:100px !important; }

.mr0   { margin-right:0 !important; }
.mr5   { margin-right:5px !important; }
.mr10  { margin-right:10px !important; }
.mr15  { margin-right:15px !important; }
.mr20  { margin-right:20px !important; }
.mr25  { margin-right:25px !important; }
.mr30  { margin-right:30px !important; }
.mr35  { margin-right:35px !important; }
.mr40  { margin-right:40px !important; }
.mr45  { margin-right:45px !important; }
.mr50  { margin-right:50px !important; }
.mr55  { margin-right:55px !important; }
.mr60  { margin-right:60px !important; }

.mb0   { margin-bottom:0 !important; }
.mb3   { margin-bottom:3px !important; }
.mb5   { margin-bottom:5px !important; }
.mb8   { margin-bottom:8px !important; }
.mb10  { margin-bottom:10px !important; }
.mb13  { margin-bottom:13px !important; }
.mb15  { margin-bottom:15px !important; }
.mb18  { margin-bottom:18px !important; }
.mb20  { margin-bottom:20px !important; }
.mb25  { margin-bottom:25px !important; }
.mb30  { margin-bottom:30px !important; }
.mb35  { margin-bottom:35px !important; }
.mb40  { margin-bottom:40px !important; }
.mb45  { margin-bottom:45px !important; }
.mb50  { margin-bottom:50px !important; }
.mb55  { margin-bottom:55px !important; }
.mb60  { margin-bottom:60px !important; }
.mb65  { margin-bottom:65px !important; }
.mb70  { margin-bottom:70px !important; }
.mb75  { margin-bottom:75px !important; }
.mb80  { margin-bottom:80px !important; }
.mb85  { margin-bottom:85px !important; }
.mb90  { margin-bottom:90px !important; }
.mb95  { margin-bottom:95px !important; }
.mb100 { margin-bottom:100px !important; }

.ml0   { margin-left:0 !important; }
.ml5   { margin-left:5px !important; }
.ml10  { margin-left:10px !important; }
.ml15  { margin-left:15px !important; }
.ml20  { margin-left:20px !important; }
.ml25  { margin-left:25px !important; }
.ml30  { margin-left:30px !important; }
.ml35  { margin-left:35px !important; }
.ml40  { margin-left:40px !important; }
.ml45  { margin-left:45px !important; }
.ml50  { margin-left:50px !important; }
.ml55  { margin-left:55px !important; }
.ml60  { margin-left:60px !important; }

/* ------ padding ------ */
.pt0   { padding-top:0 !important; }
.pt3   { padding-top:3px !important; }
.pt5   { padding-top:5px !important; }
.pt8   { padding-top:8px !important; }
.pt10  { padding-top:10px !important; }
.pt13  { padding-top:13px !important; }
.pt15  { padding-top:15px !important; }
.pt18  { padding-top:18px !important; }
.pt20  { padding-top:20px !important; }
.pt25  { padding-top:25px !important; }
.pt30  { padding-top:30px !important; }
.pt35  { padding-top:35px !important; }
.pt40  { padding-top:40px !important; }
.pt45  { padding-top:45px !important; }
.pt50  { padding-top:50px !important; }
.pt55  { padding-top:55px !important; }
.pt60  { padding-top:60px !important; }
.pt65  { padding-top:65px !important; }
.pt70  { padding-top:70px !important; }
.pt75  { padding-top:75px !important; }
.pt80  { padding-top:80px !important; }
.pt85  { padding-top:85px !important; }
.pt90  { padding-top:90px !important; }
.pt95  { padding-top:95px !important; }
.pt100 { padding-top:100px !important; }

.pr0   { padding-right:0 !important; }
.pr5   { padding-right:5px !important; }
.pr10  { padding-right:10px !important; }
.pr15  { padding-right:15px !important; }
.pr20  { padding-right:20px !important; }
.pr25  { padding-right:25px !important; }
.pr30  { padding-right:30px !important; }
.pr40  { padding-right:40px !important; }
.pr45  { padding-right:45px !important; }
.pr50  { padding-right:50px !important; }
.pr55  { padding-right:55px !important; }
.pr60  { padding-right:60px !important; }

.pb0   { padding-bottom:0 !important; }
.pb3   { padding-bottom:3px !important; }
.pb5   { padding-bottom:5px !important; }
.pb8   { padding-bottom:8px !important; }
.pb10  { padding-bottom:10px !important; }
.pb13  { padding-bottom:13px !important; }
.pb15  { padding-bottom:15px !important; }
.pb18  { padding-bottom:18px !important; }
.pb20  { padding-bottom:20px !important; }
.pb25  { padding-bottom:25px !important; }
.pb30  { padding-bottom:30px !important; }
.pb35  { padding-bottom:35px !important; }
.pb40  { padding-bottom:40px !important; }
.pb45  { padding-bottom:45px !important; }
.pb50  { padding-bottom:50px !important; }
.pb55  { padding-bottom:55px !important; }
.pb60  { padding-bottom:60px !important; }
.pb65  { padding-bottom:65px !important; }
.pb70  { padding-bottom:70px !important; }
.pb75  { padding-bottom:75px !important; }
.pb80  { padding-bottom:80px !important; }
.pb85  { padding-bottom:85px !important; }
.pb90  { padding-bottom:90px !important; }
.pb95  { padding-bottom:95px !important; }
.pb100 { padding-bottom:100px !important; }

.pl0    { padding-left:0 !important; }
.pl5    { padding-left:5px !important; }
.pl10   { padding-left:10px !important; }
.pl15   { padding-left:15px !important; }
.pl20   { padding-left:20px !important; }
.pl25   { padding-left:25px !important; }
.pl30   { padding-left:30px !important; }
.pl35   { padding-left:35px !important; }
.pl40   { padding-left:40px !important; }
.pl45   { padding-left:45px !important; }
.pl50   { padding-left:50px !important; }
.pl55   { padding-left:55px !important; }
.pl60   { padding-left:60px !important; }


/* ------ width ------ */
.wauto{ width:auto !important;}
.w1   { width:1%; }
.w2   { width:2%; }
.w3   { width:3%; }
.w4   { width:4%; }
.w5   { width:5%; }
.w6   { width:6%; }
.w7   { width:7%; }
.w8   { width:8%; }
.w9   { width:9%; }
.w10  { width:10%; }
.w11  { width:11%; }
.w12  { width:12%; }
.w13  { width:13%; }
.w14  { width:14%; }
.w15  { width:15%; }
.w16  { width:16%; }
.w17  { width:17%; }
.w18  { width:18%; }
.w19  { width:19%; }
.w20  { width:20%; }
.w21  { width:21%; }
.w22  { width:22%; }
.w23  { width:23%; }
.w24  { width:24%; }
.w25  { width:25%; }
.w26  { width:26%; }
.w27  { width:27%; }
.w28  { width:28%; }
.w29  { width:29%; }
.w30  { width:30%; }
.w31  { width:31%; }
.w32  { width:32%; }
.w33  { width:33%; }
.w34  { width:34%; }
.w35  { width:35%; }
.w36  { width:36%; }
.w37  { width:37%; }
.w38  { width:38%; }
.w39  { width:39%; }
.w40  { width:40%; }
.w41  { width:41%; }
.w42  { width:42%; }
.w43  { width:43%; }
.w44  { width:44%; }
.w45  { width:45%; }
.w46  { width:46%; }
.w47  { width:47%; }
.w48  { width:48%; }
.w49  { width:49%; }
.w50  { width:50%; }
.w51  { width:51%; }
.w52  { width:52%; }
.w53  { width:53%; }
.w54  { width:54%; }
.w55  { width:55%; }
.w56  { width:56%; }
.w57  { width:57%; }
.w58  { width:58%; }
.w59  { width:59%; }
.w60  { width:60%; }
.w61  { width:61%; }
.w62  { width:62%; }
.w63  { width:63%; }
.w64  { width:64%; }
.w65  { width:65%; }
.w66  { width:66%; }
.w67  { width:67%; }
.w68  { width:68%; }
.w69  { width:69%; }
.w70  { width:70%; }
.w71  { width:71%; }
.w72  { width:72%; }
.w73  { width:73%; }
.w74  { width:74%; }
.w75  { width:75%; }
.w76  { width:76%; }
.w77  { width:77%; }
.w78  { width:78%; }
.w79  { width:79%; }
.w80  { width:80%; }
.w81  { width:81%; }
.w82  { width:82%; }
.w83  { width:83%; }
.w84  { width:84%; }
.w85  { width:85%; }
.w86  { width:86%; }
.w87  { width:87%; }
.w88  { width:88%; }
.w89  { width:89%; }
.w90  { width:90%; }
.w91  { width:91%; }
.w92  { width:92%; }
.w93  { width:93%; }
.w94  { width:94%; }
.w95  { width:95%; }
.w96  { width:96%; }
.w97  { width:97%; }
.w98  { width:98%; }
.w99  { width:99%; }
.w100 { width:100%; }

/* ------ text-align ------ */
.taL { text-align:left; }
.taC { text-align:center; }
.taR { text-align:right; }

/* ------ float ------ */
.flL { float:left; }
.flR { float:right; }

/* ------ clearfix ----- */
.clearfix:after { display:block; clear:both; height:0; visibility:hidden; content:" "; }
.clearfix { display:inline-block; }
.clear { clear:both;}

/* ---- font ---- */
.fwB { font-weight:bold;}
.fwN { font-weight:normal !important;}

.fs10 { font-size:10px !important;}
.fs12 { font-size:12px !important;}
.fs14 { font-size:14px !important;}
.fs16 { font-size:16px !important;}
.fs18 { font-size:18px !important;}
.fs20 { font-size:20px !important;}

/* ---- color ---- */
.red { color:#990000;}
.blue{ color:#000099:}
.wh  { color:#FFFFFF;}
9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9