menu
menu

リセットCSSを作ってみました | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook8
  • はてなブックマーク4
  • Google+2
  • Pocket0
  • Twitter1

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

  • Labs

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
  • facebook8
  • はてなブックマーク4
  • Google+2
  • Pocket0
  • Twitter1