リセット
同じＯＳ、同じ機器を使っていても、Ｗｅｂブラウザが違うと表示も変わる場合が多い。 それぞれの初期の使用するフォントが違っていたり、文字の大きさが違っていたり、 背景色も違っていたりということで、いわゆる表示の崩れがおこる。
リセットせずにWindows10のIE11とEdgeで文字を表示してみたサンプル。
同じＯＳで表示している同じＨＴＭＬでも、表示しているフォントや大きさ、余白の取り方が違う。 ましてや、ＰＣとスマホと別環境では、同じフォントが使えないなどの表示上の問題が起こる。 とはいえ、全ての環境での確認は不可能なため、諦めるという選択肢もありだとは思うが、 出来るだけ大きな表示の崩れを防ぐようにしたい。
それを出来るだけ同じに近づけようとするのがリセットという手法をすることである。 リセットをするには、ＣＳＳを使うことになる。
html,body,div,h1,h2,h3,h4,h5,p,span
上記のように、使用するタグを全部記述するというもの。 これで、ブラウザ側の初期設定がクリアーさせる。 しかし、クリアーされるだけなので、ブラウザ間の差が埋まるわけでもない。 可能な限り、ＣＳＳでそれぞれのタグで指定する。
html
{
color:#000;
background:#FFF
}
上の例は、ＨＴＭＬタグに対して、文字は黒、背景は、白と色の統一を指定したもの。 いまどき、文字が黒以外、背景が白以外のブラウザは、殆どないかもしれないが 一応、やってきましょう。 逆に言えば、自分のサイトは、文字は白、背景は黒などとイメージ統一にも利用できますね。 あとは、フォントと余白の調整を行えば差が少なくなっていきます。
リセットで、ブラウザ間の表示の差異を少なくできるメリットがありますが デメリットもなくはないです。 ＣＳＳで、タグごとにスタイルを指定していくわけなので、表示がやや重くなることも あります。 古いスマホを使用している環境では顕著に症状が出る可能性があります。