ブラウザ デフォルトスタイルのリセット

コーディングの難しいところとして良く挙げられるものが、複数ブラウザへの対応です。

一口にブラウザと言ってもMicrosoftのInternet Explorer、AppleのSafari、MozillaのFirefoxなど様々なものがあり、そのブラウザごとに表示のされかたが異なってしまっているのが現状です。

その原因の一つとして各ブラウザにデフォルトスタイル（スタイルシート）が設定されているということが挙げられます。
例えば、H1タグで文章をマークアップした際に文字が大きく・太字になるのは、このデフォルトスタイルが設定されているためです。

このデフォルトスタイルをリセットすることで複数ブラウザへの対応が楽になります。

まず、もっとも簡単なものとしてユニバーサルセレクタ（* {style property}）を使用する方法があります。

例）

* {
        margin: 0;
        padding: 0;
        border: none;
        list-style-type: none;
        font-size: 100%;
        font-weight: normal;
        font-style: normal;
        text-align: left;
}

このように記述することで、全要素のスタイルをリセットすることができます。
しかし、この方法ではinputやtextareaなどのフォーム関連のタグのスタイルもリセットされてしまいます。フォーム関連のものはブラウザデフォルトのスタイルの方がユーザーは使い慣れてい
ますので、要素ごとにスタイルリセットをすることが望まれます。

例）

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;
	background: transparent;
	outline: 0;

	font-family: MS PGothic,"ＭＳ Ｐゴシック", Osaka;
	font-size: 100%;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}

img, fieldset {
	border: 0;
}

blockquote, q {
	quotes: none;
}

このようにフォーム関連のものだけブラウザデフォルトスタイルのままにしておくとユーザーにとって使いやすいウェブサイトにすることができます。

あとはこれをテンプレートにし、要素の追加・削除やスタイルの変更を行い、サイトごとに適した形にしていくことで複数ブラウザへの対応も楽になります。