WebStationビジネス書の書評を中心に、Webデザインなどの情報を紹介しています。
  • toshi@Twitter
  • Facebookページ
  • RSSリーダーの登録

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS(スタイルシート)のリセット

html_05.png

今回はCSS(スタイルシート)のリセットについて紹介します。

CSSのリセットが必要な理由

ブラウザの種類(IEやSafari、Google Chromeなど)によって、初期状態で適応されるCSSが異なります。そのため、作成したCSSに記述していないタグや属性などは、ブラウザの初期状態で動作することになります。つまり、ブラウザの種類によって見え方が異なるといったことが起こってしまうのです。

そこで、CSSを初期化する(リセットする)必要が出てくるのです。

CSSのリセット方法

CSSのリセットには多くの方法が提案されています。今回はHTML5対応でよく使われているHTML5 Doctor CSS Resetを用いることにします。

CSS
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent
}
body {
  line-height:1
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block
}
nav ul {
  list-style:none
}
blockquote,q {
  quotes:none
}
blockquote:before,blockquote:after,
q:before,q:after {
  content:none
}
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent
}
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none
}
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold
}
del {
  text-decoration:line-through
}
abbr[title],dfn[title] {
  border-bottom:1px dotted;
  cursor:help
}
table {
  border-collapse:collapse;
  border-spacing:0
}
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #ccc;margin:1em 0;
  padding:0
}
input,select {
  vertical-align:middle
}

それぞれの詳細については、実際にCSSをコーディングしながら理解していきましょう。ここでは、リセットが必要だということだけ覚えておいてください。

最後に

今回は、CSSリセットについて紹介しました。CSSリセットには、他に

などが有名です。必要に応じて参照してください。

ソーシャルリンク

トラックバック

トラックバックURL

この記事にトラックバックする(FC2ブログユーザー)

コメント

ド素人直った!

CSSのbodyの指定だけが適用されず、2日間検索といろんな調整を重ねていたんですが、ここに書いてあるCSSをリセットするやりかたで、ようやく解決しました!!!
助かりました。ありがとうございました!!!(>_<)

2016/03/29 Tue 23:51

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。