ブラウザ独自の描画初期値

HTML でマークアップ(文章の段落などの構造やフォントサイズなどの見栄えの指定)された文書は、文字サイズや余白などをブラウザが独自に解釈した書式で表示します。したがって、HTML の書式が正しければ、スタイルを指定しなくとも、ブラウザで表示された Web ページを見れば、どのような要素をつかっているか認識することができます。
ところが、ブラウザ毎に独自の初期値があるため、思い通りのレイアウトや表示ができない弊害があります。自分の思い通りの描画をするためには、ブラウザスタイルを初期化し、それぞれの要素に対し、CSS をつかい自分で再設定していく必要があります。

ブラウザスタイルの初期化

代表的な初期化は、body の属性としてマージンを 0(ゼロ)に指定します。
初期化は body だけでは足りませんので、必要な要素まで初期化します。下記に、全ての初期化すべき内容をまとめました。実際には、全ての要素を初期化した場合、全ての要素の再設定が必要となりますので、必要に応じて初期化しましょう。
ol を margin:0; にすると、リストの頭につく数字も隠れてしまいますので、注意しましょう。
初期化は、1つの外部スタイルシートとして、まとめておけば便利です。

全てのブラウザスタイル初期化

body,form,fieldset {
    margin:0;
    padding:0;
}
fildset {
    border:none;
}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,di,dd {
    margin:0;
    padding:0;
}
blockquote,li,dt,dd {
    margin-left:1em;
}
li {
    list-style:none;
}
input,textarea {
    font-size:1em;
}

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > CSS > ブラウザ初期化