みなさんは、ブラウザは主に何を使われていますか？

↓こちらは、このブログの一ヶ月間の読者の方々のブラウザTop10なのですが、まだまだ半数以上の方々がIEを使われているようですね。。（少し見づらくて申し訳ありません…。）

ちなみに、こちらがIEのバージョン情報です。6.0を使っている方が、かなり多いんですね。

こちらはFirefoxのバージョン。圧倒的に2.0の方が多いです。

っと、いろいろなバージョンのブラウザを使われているので、どのブラウザで見ても、なるべく崩れたりしないように、サイトを構築していきたいものです。

本日は、MacやWindowsで複数バージョンのブラウザを共存させて、簡単にブラウザチェックができる方法をまとめてみました。

Windows IE編

Multiple IE

こちらは、かなり有名なのでお使いの方も多いのではないでしょうか？IE3〜IE7までを共存させる事ができるソフトです。とっても便利ですね。。ずいぶん前にこのブログでもご紹介しました。インストール方法はこちらからどうぞ〜。

IETester

こちらは、先日話題になっていたツールですね。共存というと少し違うのかもしれませんが、IE8.0 betaも確認できるところが良いですよね。

Mac IE編

2005年12月31日にサポートを終了したIE for macなのですが、IE6.0と7.0をMacにインストールできてしまうソフトです。ちなみに、めちゃめちゃ重いです。。さらに、7.0は、もっと重いです。。表示も6.0のままだったり…日本語も、フォントをインストールしないと文字化けます。。っと、使い勝手は良くないです。。が、BootCampやVMwareなどを使わずに、IEをMacで確認できるのは、ちょっと便利かも。

ies4osx

実際にインストールしてみると↓こんな感じです。

Mac Firefox編

Macで複数のバージョンのFirefoxを同時に起動させる方法

今回は、試しにfirefox3.0b4をインストールしてみました。ファイルをダウンロードして、開くと↓のウインドウが開きます。アイコンをデスクトップにドラッグ&ドロップ。

保存された、Firefoxの名前を変更します。（そうしないと、今お使いのFirefoxに上書きされてしまいます。）今回は、firefox3.0b4と名前を変更しました。名前の変更が終わったら、Applicationsフォルダにドラッグ&ドロップ。これで、Firefoxが２つ目がインストールされます。その後、Mac OS Xのターミナルを起動して、

$ /Applications/Firefox3.0b4.app/Contents/MacOS/firefox -ProfileManager

入力してreturnキーを。（Firefox3.0b4.appの部分は、変更した名前を入力してください。）

すると、プロフィールを選択するウインドウが開きます。ここに、新規でプロフィールを追加して、Firefox3.0b4は、別のユーザーが開く設定にすると出来上がり〜！

同時に、Firefox2.0と3.0が起動しました！

Mac Safari編

Multi-Safari

こちらは、MacのPantherやTigerをお使いのユーザーの方用ですが。。Safariの複数のバージョンがインストールできます。

Safari 2.0.4 for Leopard

こちらは、Leopardをお使いの方にSafari 2.0.4がインストールできます。

実際にインストールしてみました。少し分かりにくいですが…Safari2.0.4と3.1が同時に起動しました〜。

みなさんも気をつけてお試しください。

htmlもCSSもきれいに書いてるつもりでも、最後にブラウザチェックしてみるとブラウザごとに見え方が微妙に違って
最後の調整で意外と時間をかかってしまうことがあるんですよねぇ。。。

Internet Explorer6.0とFirefoxでは、きれいに見えるのに、Internet Explorer7.0でみるとズレてた・・・
Safariではズレズレ。。。

しかも、修正していくにつれてどんどんズレていく。。。こっちのブラウザにあわせたら、あっちのブラウザでズレ。。
なんて経験ございません？

っちゅうわけで、今回はブラウザごとにCSSを書く方法をご紹介。

例えば”test”って名前付けたクラスにCSSを書くと。。。

.test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑なんて、書きますよねぇ。。

こいつを。。。

1. Internet Explorer6.0に反映させるCSS

* html .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Internet Explorer6.0に反映させられます。

2. Internet Explorer7.0に反映させるCSS

*:first-child+html .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Internet Explorer7.0にだけ反映させられます。

3. Firefoxに反映させるCSS

html>body .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Firefoxに反映させられます。

4. Safari & Operaに反映させるCSS

html:first-child .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Safari & Operaに反映させられます。

このCSSを全部書けばそれぞれのブラウザごとにだけ、CSSが反映するので、ブラウザごとに修正できますね～。