基本スタイル初期化―ユニバーサルセレクタ脱却―
CSSを使ってコーディングしている方には基本中の基本、「基本スタイルの初期化」。
これはまあ、いちいちチマチマその時その時に要素要素に margin: 0; などのスタイルを記述するのが面倒だから一番最初に全要素まとめて初期化してしまえ、という方法です。
で、これ。
よくあるのが、*(ユニバーサルセレクタ)を使う方法。
* {
margin: 0;
padding: 0;
}
まぁ、いっちばんラクチンです。
しかし、この方法、レンダリングが重くなるという問題点があります。というわけで、最近は使われなくなってきています。
じゃーどうすんの?
使用するタグのみを初期化 (どどーん(SE))
ユニバーサルセレクタに比べたらあっきらかに面倒ですがね。見てくれるユーザーのことを考えたら重たいのはよろしくないです。
つーわけで、まぁ、とりあえずコピペッとけば OK じゃん?的 CSS を続きから。
html {
overflow-y: scroll;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
address,caption,cite,code,dfn,h1,h2,h3,h4,th,var {
font-style: normal;
font-weight: normal;
}
fieldset,img,abbr {
border: 0;
}
img {
vertical-align: bottom;
}
ol,ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
margin: 0 auto;
}
th,td {
margin: 0;
padding: 0;
}
th,td {
text-align: left;
}
caption,th {
text-align: left;
margin: auto;
}
object,embed {
vertical-align: top;
}
hr,legend {
display: none;
}
概ねこんなもんです。
あとはその人の好みの問題ですな。自由にカスタマイズしてください。
コメント
この記事のコメント・トラックバックRSS
コメントする