§03-03…CSSの初期化・基本設計 – オンライン無料パソコン教室

§03-03…CSSの初期化・基本設計

(01) さて、OSやブラウザーなどの環境により、初期状態でのフォント・margin・paddingなどの仕様が若干異なります。できる限りその差異を埋めるためには、CSSの先頭に以下のような記述をしておきます(「transparent」は透明の意)。こうしておくと各要素の書式設計をいちから(たとえば「a要素には青字・下線を設定」など)しなければなりませんが、ブラウザーによる表示の差異を最小限にとどめることができます。

*{
margin:0;
padding:0;
border:0;
color:#000000;
background-color:transparent;
font-size:100%;
font-family:sans-serif;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-align:left;
}  (例1)

§03-03

(02) またある程度ブラウザー間のデザインの差異を許容する場合は、標準的な使いやすい部分だけを登録して、先に書いておいてもよいでしょう(下に追加すれば上書きされる)。

body{
margin:2px;
}
h1, h2, h3, p{
font-weight:normal;
margin:0 0.5em;
line-height:1.5;
}
th, td{
border:solid 1px #666666;
text-align:center;
padding:0.2em;
}
ul, ol{
margin:0.5em 1em;
list-style-type:square;
list-style-position:inside;
padding:0;
}
ol{
list-style-type:decimal;
}
div.secfoot{
text-align:center;
clear:both;
}  (例2)

広告ブロックブラウザーではコンテンツが表示できません