2021/08/25（ver1.2）
- マージン、パディングを10px区切りだったものを5px単位に細分化
- マージン、パディングが他のクラスに負ける事があるので!importantを設定（本当はあまりインポータント使いたくなかった）
- インラインフレックスというものが結構使えたので「.inflex」
- テキスト中の改行禁止「.nobr」を追加
- widthの指定のない要素が中央にいくよう「.block_center」を追加。
→ただし、display:blockを指定しているのでflexとか使っている時は注意
自分メモ用のCSSのテンプレート
- リセットCSS
- テーブル
- margin、paddng
- 配置
@charset “UTF-8”;
body {background:#fff; color:#333; line-height:1.5; font-family:’游ゴシック体’, ‘Yu Gothic’, YuGothic, ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, ‘Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W3’, Meiryo, メイリオ, ‘MS PGothic’, ‘ＭＳ Ｐゴシック’, sans-serif; word-wrap:break-word; position:relative;}
/*————————————————————————*/
/* resetCSS ————————————————————–*/
/*————————————————————————*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr {margin:0; padding:0;}
li {list-style-type:none;}
/*————————————————————————*/
/* font ——————————————————————*/
/*————————————————————————*/
.font1rem {font-size:.1rem;}
.font2rem {font-size:.2rem;}
.font3rem {font-size:.3rem;}
.font4rem {font-size:.4rem;}
.font5rem {font-size:.5rem;}
.font6rem {font-size:.6rem;}
.font7rem {font-size:.7rem;}
.font8rem {font-size:.8rem;}
.font9rem {font-size:.9rem;}
.font10rem{font-size:1.0rem;}
.font11rem{font-size:1.1rem;}
.font12rem{font-size:1.2rem;}
.font13rem{font-size:1.3rem;}
.font14rem{font-size:1.4rem;}
.font15rem{font-size:1.5rem;}
.font16rem{font-size:1.6rem;}
.font17rem{font-size:1.7rem;}
.font18rem{font-size:1.8rem;}
.font19rem{font-size:1.9rem;}
.font20rem{font-size:2.0rem;}
.font21rem{font-size:2.1rem;}
.font22rem{font-size:2.2rem;}
.font23rem{font-size:2.3rem;}
.font24rem{font-size:2.4rem;}
.font25rem{font-size:2.5rem;}
.font26rem{font-size:2.6rem;}
.font27rem{font-size:2.7rem;}
.font28rem{font-size:2.8rem;}
.font29rem{font-size:2.9rem;}
.font30rem{font-size:3.0rem;}
/*————————————————————————*/
/* margin-padding ——————————————————–*/
/*————————————————————————*/
.mauto {margin-right:auto; margin-left:auto;}
.ma0 {margin:0;}
.mt0 {margin-top:0!important;}
.mt5 {margin-top:5px!important;}
.mt10 {margin-top:10px!important;}
.mt15 {margin-top:15px!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;}
.mt150 {margin-top:150px!important;}
.mt200 {margin-top:200px!important;}
.mt250 {margin-top:250px!important;}
.mt300 {margin-top:300px!important;}
.mt350 {margin-top:350px!important;}
.mt400 {margin-top:400px!important;}
.mt450 {margin-top:450px!important;}
.mt500 {margin-top:500px!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;}
.mr65 {margin-right:65px!important;}
.mr70 {margin-right:70px!important;}
.mr75 {margin-right:75px!important;}
.mr80 {margin-right:80px!important;}
.mr85 {margin-right:85px!important;}
.mr90 {margin-right:90px!important;}
.mr95 {margin-right:95px!important;}
.mr100 {margin-right:100px!important;}
.mr150 {margin-right:150px!important;}
.mr200 {margin-right:200px!important;}
.mr250 {margin-right:250px!important;}
.mr300 {margin-right:300px!important;}
.mr350 {margin-right:350px!important;}
.mr400 {margin-right:400px!important;}
.mr450 {margin-right:450px!important;}
.mr500 {margin-right:500px!important;}
.mb0 {margin-bottom:0!important;}
.mb5 {margin-bottom:5px!important;}
.mb10 {margin-bottom:10px!important;}
.mb15 {margin-bottom:15px!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;}
.mb150 {margin-bottom:150px!important;}
.mb200 {margin-bottom:200px!important;}
.mb250 {margin-bottom:250px!important;}
.mb300 {margin-bottom:300px!important;}
.mb350 {margin-bottom:350px!important;}
.mb400 {margin-bottom:400px!important;}
.mb450 {margin-bottom:450px!important;}
.mb500 {margin-bottom:500px!important;}
.mb550 {margin-bottom:550px!important;}
.mb600 {margin-bottom:600px!important;}
.mb650 {margin-bottom:650px!important;}
.mb700 {margin-bottom:700px!important;}
.mb750 {margin-bottom:750px!important;}
.mb800 {margin-bottom:800px!important;}
.mb850 {margin-bottom:850px!important;}
.mb900 {margin-bottom:900px!important;}
.mb950 {margin-bottom:950px!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;}
.ml65 {margin-left:65px!important;}
.ml70 {margin-left:70px!important;}
.ml75 {margin-left:75px!important;}
.ml80 {margin-left:80px!important;}
.ml85 {margin-left:85px!important;}
.ml90 {margin-left:90px!important;}
.ml95 {margin-left:95px!important;}
.ml100 {margin-left:100px!important;}
.ml150 {margin-left:150px!important;}
.ml200 {margin-left:200px!important;}
.ml250 {margin-left:250px!important;}
.ml300 {margin-left:300px!important;}
.ml350 {margin-left:350px!important;}
.ml400 {margin-left:400px!important;}
.ml450 {margin-left:450px!important;}
.ml500 {margin-left:500px!important;}
.mrl0 {margin-right:0; margin-left:0!important;}
.mrl5 {margin-right:5px; margin-left:5px!important;}
.mrl10 {margin-right:10px; margin-left:10px!important;}
.mrl15 {margin-right:15px; margin-left:15px!important;}
.mrl20 {margin-right:20px; margin-left:20px!important;}
.mrl25 {margin-right:15px; margin-left:25px!important;}
.mrl30 {margin-right:30px; margin-left:30px!important;}
.mrl35 {margin-right:15px; margin-left:35px!important;}
.mrl40 {margin-right:40px; margin-left:40px!important;}
.mrl45 {margin-right:15px; margin-left:45px!important;}
.mrl50 {margin-right:50px; margin-left:50px!important;}
.mrl55 {margin-right:15px; margin-left:55px!important;}
.mrl60 {margin-right:60px; margin-left:60px!important;}
.mrl65 {margin-right:15px; margin-left:65px!important;}
.mrl70 {margin-right:70px; margin-left:70px!important;}
.mrl75 {margin-right:15px; margin-left:75px!important;}
.mrl80 {margin-right:80px; margin-left:80px!important;}
.mrl85 {margin-right:15px; margin-left:85px!important;}
.mrl90 {margin-right:90px; margin-left:90px!important;}
.mrl85 {margin-right:15px; margin-left:95px!important;}
.mrl100 {margin-right:100px; margin-left:100px!important;}
.mrl150 {margin-right:150px; margin-left:150px!important;}
.mrl200 {margin-right:200px; margin-left:200px!important;}
.mrl250 {margin-right:250px; margin-left:250px!important;}
.mrl300 {margin-right:300px; margin-left:300px!important;}
.mrl350 {margin-right:350px; margin-left:350px!important;}
.mrl400 {margin-right:400px; margin-left:400px!important;}
.mrl450 {margin-right:450px; margin-left:450px!important;}
.mrl500 {margin-right:500px; margin-left:500px!important;}
.mtb0 {margin-top:0; margin-bottom:0!important;}
.mtb5 {margin-top:5px; margin-bottom:5px!important;}
.mtb10 {margin-top:10px; margin-bottom:10px!important;}
.mtb15 {margin-top:15px; margin-bottom:15px!important;}
.mtb20 {margin-top:20px; margin-bottom:20px!important;}
.mtb25 {margin-top:25px; margin-bottom:25px!important;}
.mtb30 {margin-top:30px; margin-bottom:30px!important;}
.mtb35 {margin-top:35px; margin-bottom:35px!important;}
.mtb40 {margin-top:40px; margin-bottom:40px!important;}
.mtb45 {margin-top:45px; margin-bottom:45px!important;}
.mtb50 {margin-top:50px; margin-bottom:50px!important;}
.mtb55 {margin-top:55px; margin-bottom:55px!important;}
.mtb60 {margin-top:60px; margin-bottom:60px!important;}
.mtb65 {margin-top:65px; margin-bottom:65px!important;}
.mtb70 {margin-top:70px; margin-bottom:70px!important;}
.mtb75 {margin-top:75px; margin-bottom:75px!important;}
.mtb80 {margin-top:80px; margin-bottom:80px!important;}
.mtb85 {margin-top:85px; margin-bottom:85px!important;}
.mtb90 {margin-top:90px; margin-bottom:90px!important;}
.mtb95 {margin-top:95px; margin-bottom:95px!important;}
.mtb100 {margin-top:100px; margin-bottom:100px!important;}
.mtb150 {margin-top:150px; margin-bottom:150px!important;}
.mtb200 {margin-top:200px; margin-bottom:200px!important;}
.mtb250 {margin-top:250px; margin-bottom:250px!important;}
.mtb300 {margin-top:300px; margin-bottom:300px!important;}
.mtb350 {margin-top:350px; margin-bottom:350px!important;}
.mtb400 {margin-top:400px; margin-bottom:400px!important;}
.mtb450 {margin-top:450px; margin-bottom:450px!important;}
.mtb500 {margin-top:500px; margin-bottom:500px!important;}
.pa0 {padding:0;}
.pt0 {padding-top:0!important;}
.pt5 {padding-top:5px!important;}
.pt10 {padding-top:10px!important;}
.pt15 {padding-top:15px!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;}
.pt150 {padding-top:150px!important;}
.pt200 {padding-top:200px!important;}
.pt250 {padding-top:250px!important;}
.pt300 {padding-top:300px!important;}
.pt350 {padding-top:350px!important;}
.pt400 {padding-top:400px!important;}
.pt450 {padding-top:450px!important;}
.pt500 {padding-top:500px!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;}
.pr35 {padding-right:35px!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;}
.pr65 {padding-right:65px!important;}
.pr70 {padding-right:70px!important;}
.pr75 {padding-right:75px!important;}
.pr80 {padding-right:80px!important;}
.pr85 {padding-right:85px!important;}
.pr90 {padding-right:90px!important;}
.pr95 {padding-right:95px!important;}
.pr100 {padding-right:100px!important;}
.pr150 {padding-right:150px!important;}
.pr200 {padding-right:200px!important;}
.pr250 {padding-right:250px!important;}
.pr300 {padding-right:300px!important;}
.pr350 {padding-right:350px!important;}
.pr400 {padding-right:400px!important;}
.pr450 {padding-right:450px!important;}
.pr500 {padding-right:500px!important;}
.pb0 {padding-bottom:0!important;}
.pb5 {padding-bottom:5px!important;}
.pb10 {padding-bottom:10px!important;}
.pb15 {padding-bottom:15px!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;}
.pb150 {padding-bottom:150px!important;}
.pb200 {padding-bottom:200px!important;}
.pb250 {padding-bottom:250px!important;}
.pb300 {padding-bottom:300px!important;}
.pb350 {padding-bottom:350px!important;}
.pb400 {padding-bottom:400px!important;}
.pb450 {padding-bottom:450px!important;}
.pb500 {padding-bottom:500px!important;}
.pb550 {padding-bottom:550px!important;}
.pb600 {padding-bottom:600px!important;}
.pb650 {padding-bottom:650px!important;}
.pb700 {padding-bottom:700px!important;}
.pb750 {padding-bottom:750px!important;}
.pb800 {padding-bottom:800px!important;}
.pb850 {padding-bottom:850px!important;}
.pb900 {padding-bottom:900px!important;}
.pb950 {padding-bottom:950px!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;}
.pl65 {padding-left:65px!important;}
.pl70 {padding-left:70px!important;}
.pl75 {padding-left:75px!important;}
.pl80 {padding-left:80px!important;}
.pl85 {padding-left:85px!important;}
.pl90 {padding-left:90px!important;}
.pl95 {padding-left:95px!important;}
.pl100 {padding-left:100px!important;}
.pl150 {padding-left:150px!important;}
.pl200 {padding-left:200px!important;}
.pl250 {padding-left:250px!important;}
.pl300 {padding-left:300px!important;}
.pl350 {padding-left:350px!important;}
.pl400 {padding-left:400px!important;}
.pl450 {padding-left:450px!important;}
.pl500 {padding-left:500px!important;}
.prl0 {padding-right:0; padding-left:0!important;}
.prl5 {padding-right:5px; padding-left:5px!important;}
.prl10 {padding-right:10px; padding-left:10px!important;}
.prl15 {padding-right:15px; padding-left:15px!important;}
.prl20 {padding-right:20px; padding-left:20px!important;}
.prl25 {padding-right:15px; padding-left:25px!important;}
.prl30 {padding-right:30px; padding-left:30px!important;}
.prl35 {padding-right:15px; padding-left:35px!important;}
.prl40 {padding-right:40px; padding-left:40px!important;}
.prl45 {padding-right:15px; padding-left:45px!important;}
.prl50 {padding-right:50px; padding-left:50px!important;}
.prl55 {padding-right:15px; padding-left:55px!important;}
.prl60 {padding-right:60px; padding-left:60px!important;}
.prl65 {padding-right:15px; padding-left:65px!important;}
.prl70 {padding-right:70px; padding-left:70px!important;}
.prl75 {padding-right:15px; padding-left:75px!important;}
.prl80 {padding-right:80px; padding-left:80px!important;}
.prl85 {padding-right:15px; padding-left:85px!important;}
.prl90 {padding-right:90px; padding-left:90px!important;}
.prl85 {padding-right:15px; padding-left:95px!important;}
.prl100 {padding-right:100px; padding-left:100px!important;}
.prl150 {padding-right:150px; padding-left:150px!important;}
.prl200 {padding-right:200px; padding-left:200px!important;}
.prl250 {padding-right:250px; padding-left:250px!important;}
.prl300 {padding-right:300px; padding-left:300px!important;}
.prl350 {padding-right:350px; padding-left:350px!important;}
.prl400 {padding-right:400px; padding-left:400px!important;}
.prl450 {padding-right:450px; padding-left:450px!important;}
.prl500 {padding-right:500px; padding-left:500px!important;}
.ptb0 {padding-top:0; padding-bottom:0!important;}
.ptb5 {padding-top:5px; padding-bottom:5px!important;}
.ptb10 {padding-top:10px; padding-bottom:10px!important;}
.ptb15 {padding-top:15px; padding-bottom:15px!important;}
.ptb20 {padding-top:20px; padding-bottom:20px!important;}
.ptb25 {padding-top:25px; padding-bottom:25px!important;}
.ptb30 {padding-top:30px; padding-bottom:30px!important;}
.ptb35 {padding-top:35px; padding-bottom:35px!important;}
.ptb40 {padding-top:40px; padding-bottom:40px!important;}
.ptb45 {padding-top:45px; padding-bottom:45px!important;}
.ptb50 {padding-top:50px; padding-bottom:50px!important;}
.ptb55 {padding-top:55px; padding-bottom:55px!important;}
.ptb60 {padding-top:60px; padding-bottom:60px!important;}
.ptb65 {padding-top:65px; padding-bottom:65px!important;}
.ptb70 {padding-top:70px; padding-bottom:70px!important;}
.ptb75 {padding-top:75px; padding-bottom:75px!important;}
.ptb80 {padding-top:80px; padding-bottom:80px!important;}
.ptb85 {padding-top:85px; padding-bottom:85px!important;}
.ptb90 {padding-top:90px; padding-bottom:90px!important;}
.ptb95 {padding-top:95px; padding-bottom:95px!important;}
.ptb100 {padding-top:100px; padding-bottom:100px!important;}
.ptb150 {padding-top:150px; padding-bottom:150px!important;}
.ptb200 {padding-top:200px; padding-bottom:200px!important;}
.ptb250 {padding-top:250px; padding-bottom:250px!important;}
.ptb300 {padding-top:300px; padding-bottom:300px!important;}
.ptb350 {padding-top:350px; padding-bottom:350px!important;}
.ptb400 {padding-top:400px; padding-bottom:400px!important;}
.ptb450 {padding-top:450px; padding-bottom:450px!important;}
.ptb500 {padding-top:500px; padding-bottom:500px!important;}
/*————————————————————————*/
/* placement ————————————————————-*/
/*————————————————————————*/
/* flex ——————————————————————*/
.flex{display:flex;}
.inflex{display:inline-flex;}
.flex_center_x{justify-content:flex-center;}
.flex_end_x{justify-content:flex-end;}
.flex_top_y{align-items:flex-start;}
.flex_center_y{align-items:flex-center;}
.flex_end_y{align-items:flex-end;}
/* float —————————————————————–*/
.left{float:left;}
.right(float:right;}
.cl{clear:both;}
/* text-align ————————————————————*/
.tleft{text-align:left;}
.tcenter{text-align:center;}
.tright{text-align:right;}
/* release —————————————————————*/
.resetposition{position:static!important;}
.resetflex{display:block;}
/*————————————————————————*/
/* table —————————————————————–*/
/*————————————————————————*/
.tableset {
width: 100%;
}
table, th, td {
border-collapse: collapse;
border: 1px solid #ccc;
line-height: 1.5;
}
.tableset th {
padding: 10px;
font-weight: bold;
vertical-align: top;
background: #3f3f3f;
color: #fff;
}
.tableset td {
padding: 10px;
vertical-align: top;
}
/*————————————————————————*/
/* other —————————————————————–*/
/*————————————————————————*/
.block_center{margin-left:auto; margin-right:auto; display:block;}
.nobr{white-space: nowrap;}