前回ファンブログのスタイルシートを読み込まずに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;
}
/* ここより上部は編集しないでください */この２５行が各ブラウザの基準値を上書きするリセットCSSです。IE6用とかIE7用とか書かれている部分で、基準値を統一しているわけです。これを変更すると、ブラウザによって表示が変わってしまう。だから「ここより上部は編集しないでください」と書かれて注意を促しているわけです。
「リセットCSS」で検索すると色々出てきますが、このサイトなどが参考になります。
HTML初心者が知っておくべきリセットCSS と3つのポイント
前回のソース
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <link href="https://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="https://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>
黄色い部分が変更箇所です。その中の赤文字は今回不要ですが、場合によって使う可能性のあるものを残しました。長く見えますが、赤い部分を削除すればそれほどでもないと思います。
文字数制限のため、つづく。ほんとファンブログでは、何も書けんな。