基礎作りが効く!!「ブラウザ毎の見た目の違い」を統一設定化しよう!

リセットスタイルを設定しよう

Internet Explorer、Firefox、Chrome、Safari…インターネットを使用するにあたり、現在では様々なブラウザが利用されています。じつは、ブラウザによってホームページの見栄えが変わってしまうことがあることを、ご存知でしょうか。その原因のひとつに、各ブラウザが用意する「デフォルトのスタイル」があります。たとえば、見出し一つとってもブラウザによって最初に設定される余白が少しずつ違ってくるのです。
これらの影響を避けるためには、「リセットスタイル」が有効です。リセットスタイルを設定することで、ブラウザが用意するデフォルトのスタイルをいったん白紙にし、そこから任意のデザインを指定することで、ブラウザごとの違いが出るのを防ぐことができます。

ベンダープレフィックスを活用しよう

CSSでできることは、日々増えています。たとえば、一昔前では対応が難しかった角丸や透明化も、現在では簡単にできるようになりました。しかし、これらの新しいCSSの技術は、一斉にすべてのブラウザに取り入れられるわけではありません。新技術が各ブラウザによって使えるようになるまでに時間差が出るため、「あのブラウザではできたのに、別のブラウザでは反映されていない」ということも起こり得ます。
それらを解決するのがベンダープレフィックスです。ベンダープレフィックスはまだ草案・開発段階の新技術を、先行して反映させてくれる便利な機能です。「-ms-」「-moz-」など、ブラウザごとに用意された拡張子をプロパティにつけることで実装できます。