質問: CSSについて教えて下さい。 どのブラウザでも想定通りに表示される様にフルCSSで作成を考えています。 コーディングが初めての経験になります。 初心者が陥りやすいミスなどありますでしょうか。 ブラウザチェックはどうすれば効率的でしょうか。 作成の際の注意点や参考サイトを教えて下さい。
回答: 最も最良の方法はブラウザごとに違いそうな表現を避けることです。 下記のサイトでは各ブラウザのバージョンごとに対応状況を示してくれています。 ■スタイルシートリファレンス 上記のようなサイトで、対応ブラウザが少ないものやIE6以前に対応してなさそうなものなどはできるだけ使わないのが良いと思います。 でないと、余計な記述が増えてメンテナンスが面倒になったり想定通りに表示されなかったりして、 そういうことに頭を悩ませる時間が非常に苦痛かつ無駄になります。 なので、もし時間的な余裕があるのなら、 上記のサイト内をひととおり見て「どういうことができるのか」を知り、 「どういう場面に使おうか」ということをメモや頭でまとめてからコーディングすると良いと思います。 動作確認にはWindowsであればIE5~9の表示を一度に確認できる「IETester」が便利です。 (サイトは英語ですがインストール時に日本語化できます) ■IETester また、Firefoxならば各バージョンのポータブル版をダウンロードして確認できます。 ■Firefox Portable それ以外のブラウザについてはとりあえず最新バージョンを実際にインストールして確認するのが確実です。 IE6をメインにコーディングすればだいたいのブラウザで問題ないと思いますが、もう少し先進的なことをする場合はIE7をメインにしてもいいかなと思います。 (IE6はYahoo!JAPANもサポート終了宣言してるので。) 確実に多くのブラウザで動作するようにするには、どうしてもWindowsとMac(あればLinuxも)の実機が必要になります。 もしそういう環境がない場合は、かなりの数のブラウザで動作確認用にスクリーンショットを撮ってくれる という便利なサービスが参考までに良いです。 ■スクリーンショット.jp ■BROWSER SHOTS URLを送信してスクリーンショットが見れるようになるまでしばらくかかるので「コーディングしながらリアルタイムに確認」というようなスピーディなことはできません。 また、もちろんWeb上にない(ローカルの)ファイルのスクリーンショットは撮れませんので逐一Web上にアップロードする必要があります。 いずれにしても、やっているうちに必ずIEでのバグとかに突き当たると思いますw そういう場合「仕様なのでしょうがない」と諦めて他の方法を探すか、 特殊な方法(「条件分岐コメントタグ」や「CSSハック」など)で回避するかの判断が重要で、 その記述が本当に必要かどうかは常に意識した方がいいと思います。 また、うまく動かないことに頭を悩ますということも経験として非常に重要なので、トライ&エラーの数ほど技術は上達していきます。 ちなみに余談ですが「フルCSS」という表現は、わからなくもないですがあまり的確な言葉ではない気がします。 かといって他に良い表現は見つかりませんが。