ブラウザーの差異をなくす - CSS reset手法とCSS resetフレームワーク
2009/08/28 13:19Update
同じHTML/CSSなのに、違うでブラウザーでの表示が違いがあるとのことがあります。こうした「ブラウザーごとのCSS解釈の違い」をなくすために「CSSリセット」という手法があります。
「CSSリセット」は、「ブラウザーのデフォルト・スタイル」を明示的に設定することで、各要素の表示スタイルを統一することができます。
例えば、一番関連CSSリセット例:
■ YUI library:Reset CSS
■ Meyer CSS Reset page
■ Maestro reset CSS
■ CSS Tools: Reset CSS
■ Reset CSS 10選
「英語」
例えば、一番関連CSSリセット例:
*{
padding:0;
margin:0;
border:0;
}
CSS Resetフレームワーク
■ YUI library:Reset CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
■ Meyer CSS Reset page

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
■ Maestro reset CSS

■ CSS Tools: Reset CSS

■ Reset CSS 10選
「英語」
Sponsored Link
Comments
- Relative Articles
- CSSとは - (2008/05/24 11:40)
- CSSの基本文法 - 入門 - (2008/05/24 19:05)
- CSSの基本文法 - セレクタの組み合わせ - (2008/05/24 20:24)
- CSSの利用方法 - (2008/05/24 22:02)
- CSSの利用方法 - 外部スタイルシート - (2008/05/24 22:26)
- CSSの利用方法 - 内部スタイルシート - (2008/05/24 23:38)
- CSSの利用方法 - インライン・スタイル - (2008/05/25 15:19)
- CSS基本文法 - 擬似クラスと擬似要素 - (2008/05/25 22:49)
- CSS基本文法 - CSSダイナミック・擬似クラス - (2008/05/25 23:23)
- CSS基本文法 - CSS :target擬似クラス - (2008/05/26 11:59)