【Labs】リセットCSSを作ってみました

こんにちは（・∀・）

前回のリセットCSSについての記事の終わりに「今後Webデザインラボでも改めてリセットCSSをまとめてみたいと思います」的なことを言って締めくくりました。

ということで、早速WebデザインラボのオリジナルリセットCSSを作ってみました。

と言っても今まで使っていたオリジナルのリセットCSSをちょこっと変えただけなのですが...

HTML5対応です。

リセットCSS

このままコピペしてご利用いただけます。改変もご自由に。

/* Copyright(C) 2009 web design lab (https://www.webdlab.com/) Licensed under the MIT License http://www.opensource.org/licenses/mit-license.php */
html,body,address,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,div,p,pre,blockquote,hr,bdo,span,a,small,b,i,em,strong,br,del,ins,abbr,dfn,sub,sup,q,cite,code,var,kbd,samp,map,area,iframe,img,table,tr,th,td,caption,thead,tfoot,tbody,colgroup,col,form,label,fieldset,legend,input,textarea,select,option,optgroup,button,command,details,menu,summary,article,aside,header,footer,nav,section,figcaption,figure,main,mark,rp,rt,ruby,time,wbr,audio,canvas,embed,object,param,source,video,datalist,keygen,meter,output,progress {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
}
html {
  overflow-y: scroll;/*Firefox用縦スクロールバー*/
}
html,body {
  height: 100%;
}
body {
  line-height: 1.6;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
ul,ol,dl {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a,a:link,a:visited {
  color: #333;
  text-decoration: none;
}
a:hover,a:active {
  color: #777;
}
a:focus {
  outline: none;
}
article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
  display: block;
}

Firefox用縦スクロールバーのheight:100%はあってもなくてもいいかもです。min-height:100vhを必要に応じて設定すればいいのかなと思います。

こちらはミニマム仕様です。改変せずにこのままで良いという場合はこちらをご利用いただければ多少の軽量化が見込めます。

/* Copyright(C) 2009 web design lab (https://www.webdlab.com/) Licensed under the MIT License http://www.opensource.org/licenses/mit-license.php */
html,body,address,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li,div,p,pre,blockquote,hr,bdo,span,a,small,b,i,em,strong,br,del,ins,abbr,dfn,sub,sup,q,cite,code,var,kbd,samp,map,area,iframe,img,table,tr,th,td,caption,thead,tfoot,tbody,colgroup,col,form,label,fieldset,legend,input,textarea,select,option,optgroup,button,command,details,menu,summary,article,aside,header,footer,nav,section,figcaption,figure,main,mark,rp,rt,ruby,time,wbr,audio,canvas,embed,object,param,source,video,datalist,keygen,meter,output,progress{margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent;box-sizing:border-box;}html{overflow-y:scroll;}html,body{height:100%;}body{line-height:1.6;font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}ul,ol,dl{list-style:none;}table{border-collapse:collapse;border-spacing:0;}a,a:link,a:visited{color:#333;text-decoration:none;}a:hover,a:active{color:#777;}a:focus{outline:none;}
article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block;}

ご利用の際ですが、一行目のCopyrightは外しても残してもどちらでもOKです。改変もお好きなようにご自由にご利用ください。

いかがでしたか、ネット上には様々なリセットCSSがあります。ダウンロードしてそのまま使ってもいいのですが、一から自分でオリジナルのリセットCSSを作ってみるのもいいのではないかと思います。

そのベースとして今回ご紹介しましたリセットCSSを使っていただいて、改変もじゃんじゃんしてもらって全然構いませんので、よりご自分にとって使いやすいリセットCSSを作っていただければと思います。

Web制作初心者の方ならCSSの知識も深まりますしコーディングの効率も上がるのではないかと思います。

関連リンク

【Labs】リセットCSS