【初めてのコーディング前に】クロスブラウザ対応に必須！リセットCSSのすゝめ

数ある記事の中から目を止めて頂き、ありがとうございます。
こんにちは！
Liall.（リアル）のディレクション担当、藪内です。
「Liall.ってなに？」という方はこちらから是非サイトを覗いてみてください！

ProgateやドットインストールでHTML＆CSSの学習が進み、そろそろ模写コーディングでもしてみようかなぁとお考えの方！
実際に模写コーディングしてうまくできたなぁと思っている方！
きちんとクロスブラウザ対応を考えていますか？
マルチブラウザ対応・クロスブラウザ対応というのは、要は「制作するホームページがどのブラウザ（IEとかGoogle Chromeとか）でも、同じ表示、同じ動作をするように制作しようね！」ということです。
現実問題として、現存する全てのブラウザに対応するというのは現実的ではないので、ある程度主要なブラウザを対応していくのが基本となると思います。（クライアントの希望が最優先ですが、基本的に対応ブラウザの種類が増えると費用も上がるので）

ところが、クロスブラウザ対応を意識してコーディングの練習している独学者ってどれほどいるんでしょうか？
プログラミングのスクールで学習を進めている人は、その辺りのフォローもあると思います。（行ったことないので正確なところは不明ですが、流石にあるでしょう）
私が勉強した職業訓練では、きちんと説明があり、実際に練習でコーディングする際にも複数ブラウザで確認するよう指導がありました。
実際に誰かに教わらないと、ブラウザごとに表示が変わってしまうなんて知らない人が多いと思います。
また私がProgateやドットインストールでHTML＆CSSを勉強していた頃は、そこまで深く掘り下げて説明があったわけではないので、頭の中に残ってなかったです。

そこで今回は独学者かつ初心者向けに、クロスブラウザ対応に必須のリセットCSSについて記載していきたいと思います！
お勧めのリセットCSSについても記載していますので、リセットCSS探している方はご利用ください！

【クロスブラウザ・マルチブラウザとは】

上記にも記載した通り、要は「制作するホームページがどのブラウザ（IEとかGoogle Chromeとか）でも、同じ表示、同じ動作をするように制作しようね！」ということです。
ではなぜそんなことが必要になるのでしょうか？

①ブラウザ間でサポートしている技術に差がある
➡例えばCSSの「position: sticky;」に対応していないブラウザとしてIEがあります。
そのため、「スクロールしたあとヘッダーを上部に固定して表示したい（例：Liall.のサンプルサイト）」という希望がある場合、対応ブラウザにIEが含まれるとposition: sticky;は使用できないので従来通りcssとjQueryで制作する必要があります。

②ブラウザごとに初期スタイルが違う
➡ブラウザごとに独自のスタイルシートが適用されています。
そのため、デフォルトのフォントやチェックボックス等のデザインが違います。この違いを知らないまま、何か一つのブラウザのみで確認しながら制作すると、別ブラウザではデザインが崩れたホームページが表示されてしまう可能性があるのです。

②に関しては、多少デザインが変わったところで大きな問題は生じにくい場合が多いと思います。
一方で、①に関しては大きな問題が生じる可能性がそこそこありそうですね。
だからこそ、クロスブラウザ対応・マルチブラウザ対応が必要になってきます。
ちなみに、自分が使用しようと思った技術がどのブラウザで対応しているかについては、「Can I use」にて確認できます！

【クロスブラウザ対応の最初の一歩】

全てのブラウザの対応は現実的ではありません。
ですが、主要なブラウザで「表示崩れ・バグ」を出来る限り減らすことはできます。
その第一歩が、リセットCSSを使用して、各ブラウザの初期スタイルを削除してしまうことです。

【リセットCSSとは】

ブラウザごとのデフォルトのスタイルを削除するために使用するCSSのことです。
使用することで、ブラウザ間でのデザインの差異がほぼなくなります。
Liall.では制作するWebサイトの全てにリセットCSSを適用しております。
おそらく世の中のWebサイトの大半がリセットCSSを使用されていると思います。
リセットCSSを使用すると多少デメリットがありますが、それを補って余りあるメリットがあるからです。

リセットCSSを使用するメリット
・ブラウザごとのデザインを簡単に揃えられる
リセットCSSを使用するデメリット
・リセットした項目を自分で記述する必要がある

むしろ自分で記述する方が分かりやすいので、私としてはデメリットとすら思いませんが、本当は全てのブラウザがデフォルトのスタイルを統一してくれてるのが一番助かりますよね。笑

【どんなリセットCSSを使えばいいの？】

今や色々なリセットCSSが世の中に出ているので、少し調べれば良さげなものが手に入ると思います。
一番良いのはいくつかリセットCSSを試してみて、ご自身が使いやすさが一番だとは思います。
リセットCSSも大別すると2種類存在し、「全部のCSSを一旦リセットするタイプ」と「一旦全部のCSSをリセットしつつ、いくつかデフォルトのスタイルを適用してくれるタイプ」があります。
私が使いやすいなと思ったものは、全てをリセットするタイプのリセットCSSです。
ですが、全てリセットするタイプのCSSはそれだけ自分で記述する量が増えますので、少しでも記述量を減らしたい人は後者のリセットCSSを使用されるのが良いと思います。

【お勧めのリセットCSS】

destyle.css

現在の制作環境に合うよう開発された、使い勝手がよさそうな新しいCSSリセット -Destyle.css

A Modern CSS Reset

古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット -A Modern CSS Reset

前者が「全部のCSSを一旦リセットするタイプ」、後者が「一旦全部のCSSをリセットしつつ、いくつかデフォルトのスタイルを適用してくれるタイプ」です。
慣れてきたら、自分の使いやすいようにカスタマイズしていけばよいですが、とりあえずこの二つがオススメかなと思います。
世に出ているリセットCSSは、古いものもあるので、これから始める場合にはあまり古いものは避けた方が無難です。
その中で割と使いやすそうな、癖の少ないものをピックアップしてみました。

【終わりに】

まずはリセットCSSを導入してみてください！
これだけでクロスブラウザ対応がかなり楽になります。
今まで一つのブラウザでしか確認してなかった方は、今後は主要なブラウザ（Google Chrome、Firefox、Edgeくらいが最低ラインだと思います）でも確認してコーディングしましょう！
初めて知ったという人は、今後は頭の片隅に置きながら作業を進めてみると良いと思います。
とても簡単に導入できる内容ですから、サクサクやっちゃいましょう！

今後Liall.では「今日のあなたのお役に立つ」情報をnoteを始めSNSやYouTubeを中心に発信して参ります。ぜひご覧下さいませ。
Liall.へのお問い合わせはこちらから承っております。
Twitter・Instagramも更新中！