こんにちは、木根です。
今まで、スマホサイトのみでHTML5を使っていたのですが、慣れるためにももっと使っていかなければという思いから、最近PCサイトでも導入しつつあります。
HTML5導入にあたり最低でも下記２点の問題があり、対応しなければいけません。
1．reset.cssのHTML5対応
2．IE8以下の対応
■reset.cssのHTML5対応について
※reset.cssとは
ブラウザごとにデフォルトのスタイルが設定されているのですが、各ブラウザで違っていたりするので、それをリセットしてスタイルがまったくついていない状態にするためのcssです。
絶対に使わなければいけないものではないのですが、ブラウザごとの表示の違いを最小限にできたり、意図しないスタイルがついてしまうことを避けられるので自分はほぼ毎回使っています。
問題として、HTML5には新しいタグがあるので、今までのものだとそのタグのリセットは出来なくなります。
そこで、cssの見直しを行いました。
cssを新しくする時に迷ったことがあるのですが、今まで通りreset.cssでいくか、最近流行りつつあるNormalize.cssでいくかということです。
※Normalize.cssとは…
Normalize.cssは、必要な部分だけリセットして他のデフォルトスタイルは残す というものです。
下記ページはNormalize.cssを使った場合のデモページです。
http://necolas.github.com/normalize.css/demo.html
結構そのままのスタイルの部分が多いかなという印象です。
いろいろと迷いましたが、結局reset.cssをベースにしたものにしました。
今まで慣れ親しんできたのと、一からスタイルを設定するのが楽しい性分なので。
これで、とりあえずreset.css問題は解決です。
■IE8以下の対応
IE8以下では、HTML5要素につけたスタイルを反映してくれません。
IE6だったらまだしも、さすがにIE8を切り捨てることは出来ませんね…
そこで欠かせないのがhtml5.jsです。
このJapaScriptを使うことにより、IE8以下でもHTML5タグのスタイルが反映されます！
これでIE8以下対応もOKです。
これからは可能な限りHTML5を使って行きます！！
