リセットCSS

前回ファンブログのスタイルシートを読み込まずにhtmlファイルを表示したら、思い通りに表示されませんでした。

ソースは同じなのに何故、違う表示がされるのか？
それは、スタイルシートの初期値が違うからです。

InternetExplorerやfirefoxなどのブラウザはそれぞれにスタイルシートの初期値を持っています。
何もスタイルシートを読み込まない場合、その初期値を使います。

前回使ったhtmlファイルは、「縦書きHTML」という記事で使ったソースを流用しました。そのソースはファンブログのスタイルシートを基準に作られています。だから、そのファンブログのスタイルシートを先に読み込まないと基準値が違うために、表示が変わります。

これと同じことは、ブラウザを変えただけで起こります。

しかし、今見ているページはInternetExplorerで見ても、firefoxで見ても、ほとんど同じように表示されます。それは、各ブラウザの初期値をファンブログのスタイルシートでリセットしているからです。

ファンブログの設定画面からスタイルシートを見ると先頭25行にこのように書かれています。

@charset "shift_jis";
/* ----------------------------------- */
/* basic_gray CSS for fanblog      */
/* ----------------------------------- */

/* ブラウザ間の見栄えを統一するための記述 */
/*     この部分は編集しないでください     */
html { background: #fff;color: #000;overflow-y: scroll; }body { /* この行は長いので省略 */
/* Clearfix */
.clr:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
	/* IE6用 */
	* html .clr {
		display: inline-block;
	}
	/* IE7用 */
	*+html .clr {
		display: inline-block;
	}
/* ここより上部は編集しないでください */

この２５行が各ブラウザの基準値を上書きするリセットCSSです。IE6用とかIE7用とか書かれている部分で、基準値を統一しているわけです。これを変更すると、ブラウザによって表示が変わってしまう。だから「ここより上部は編集しないでください」と書かれて注意を促しているわけです。

リセットCSSはYahoo!なども公開していて、いろいろなものがあります。
「リセットCSS」で検索すると色々出てきますが、このサイトなどが参考になります。
HTML初心者が知っておくべきリセットCSS と3つのポイント

前回のソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="http://fanblogs.jp/ayzfqir5/style.css" rel="stylesheet" type="text/css" />
<title>年賀状</title>
</head>
<body>
<div style="background:url('URL') bottom right no-repeat;width:10cm;height:14.8cm;padding:0;writing-mode:tb-rl;font-family:'HG正楷書体-PRO'">
	<p style="font-size:6em;font-weight:bold;color:#d00;margin:20px 20px 0 0">謹賀新年</p>
	<p style="font-size:1.6em;font-weight:bold;margin-top:1em">慎んで新年のお喜びを申し上げます</p>

	<div style="margin:17em 15em 0 0;padding:0">
		<p style="font-size:2em;font-weight:bold">東京都千代田区永田町一ノ一</p>
		<p style="font-size:2em;font-weight:bold;margin-top:6em">やまだ たろう</p>
	</div>
</div>
</body>
</html>

この<link href=”http://fanblogs.jp/ayzfqir5/style.css” rel=”stylesheet” type=”text/css” />を変更して、リセットCSSの必要部分のみ、直接ファイルに書き込みます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
html{
	background: #fff;
	color: #000;
}

body{
	font: 12px/1.2 "MS Pゴシック",Arial,Helvetica,Verdana,sans-serif;
	margin: 0;
	padding: 0;
}
div,p,th,td{
	margin: 0;
}
img{
	border: 0;
}
h1,h2,h3,h4,h5,h6{
	font-size: 100%;
	font-weight:bold;
	margin:1em 0;
	padding: 0;
}
em, strong {
	font-style: normal;
	font-weight: bold;
}
ol, ul, dl {
	margin:1em;
}
ol li {
	list-style:decimal inside;
}
ul li {
	list-style:disc inside;
}
dl dd, ol li, ul li {
	margin-bottom:0.5em;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
caption,th{
	font-style: normal;
	font-weight: normal;
	text-align: left;
}
</style>
<title>年賀状</title>
</head>
<body>
<div style="background:url('URL') bottom right no-repeat;width:10cm;height:14.8cm;padding:0;writing-mode:tb-rl;font-family:'HG正楷書体-PRO'">
	<p style="font-size:6em;font-weight:bold;color:#d00;margin:20px 20px 0 0">謹賀新年</p>
	<p style="font-size:1.6em;font-weight:bold;margin-top:1em">慎んで新年のお喜びを申し上げます</p>

	<div style="margin:17em 15em 0 0;padding:0">
		<p style="font-size:2em;font-weight:bold">東京都千代田区永田町一ノ一</p>
		<p style="font-size:2em;font-weight:bold;margin-top:6em">やまだ たろう</p>
	</div>
</div>
</body>
</html>

黄色い部分が変更箇所です。その中の赤文字は今回不要ですが、場合によって使う可能性のあるものを残しました。長く見えますが、赤い部分を削除すればそれほどでもないと思います。

文字数制限のため、つづく。ほんとファンブログでは、何も書けんな。

リセットCSS

前回のソース

共有:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル