menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) 【jQuery入門】jQueryで日時を表示
  7. (10↑) 【HTML5】HTML5・ページ作成の基本
  8. ( 9↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 8↓) 【Mac Tips】MacにInkscapeをインストール
  10. ( 6↓) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

【CSS Tips】リセット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%;
}
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,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 (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,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の知識も深まりますしコーディングの効率も上がるのではないかと思います。

関連リンク

【CSS Tips】リセットCSS

  • カテゴリー:Labs