Big Bang

パソコンの電源を入れた時、メモリー空間に無限の宇宙が拡がる

リセットCSS – HTML5で縦書き年賀状2

| 0件のコメント

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

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

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

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

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

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

リセットCSS

ファンブログの設定画面からスタイルシートを見ると先頭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;
	}
/* ここより上部は編集しないでください */

この25行が各ブラウザの基準値を上書きするリセット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>

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

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

コメントを残す

Top