menu
menu

キーワード検索

 

最近の投稿

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

  • Labs

Reset CSS

こんにちは(・∀・)

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

ということで、早速WebデザインラボのオリジナルリセットCSSを作ってみました。と言っても今まで使っていたオリジナルのリセットCSSをちょこっと変えただけなのですが。。。

HTML5対応です。

リセットCSS

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


/* Copyright(C) 2009 WEB DESIGN LAB (http://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%;/*Flashフルスクリーン用*/
 }
body {
 line-height: 1.6;
 font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック","MS PGothic",sans-serif;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 }
ul,ol {
 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用縦スクロールバーとFlashフルスクリーン用のheight100%はなくてもいいかもです。

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


/* Copyright(C) 2009 WEB DESIGN LAB (http://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 Pゴシック","MS PGothic",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}ul,ol{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の知識も深まりますしコーディングの効率も上がるのではないかと思います。

関連リンク

リセットCSS

  • カテゴリー:Labs