多くのブラウザーで見栄えを合わせる方法 - CSSカスタマイズ
Webブラウザーは、Internet Explorer だけではありません。CSSカスタマイズして出来るのは、世界に多分 1つしかない、自分だけのマイページ。出来るだけ多くの方に、自慢したいですよね。
そこで、「多くのブラウザーで見栄えを合わせる為の」CSSの書き方について、私が使っている方法を纏めてみました。
**** 手順
o 多くのブラウザーで見栄えを合わせるには、「各ブラウザーの表示方法の違いを、CSSで上書き」する方法が簡単です。
o 出来るだけ、上書きと、標準の書き方で済ませます。そして、特別に個別対応したい所だけ「CSSハック」を使います。
** 1. 「各ブラウザーの表示方法の違いを、CSSで上書き」します
o 高さや幅の計算方法を、Internet Exploerに「強制的に」合わせます。
o この記述を書くだけで、ブラウザー間での見栄えの大きな違いは無くなりました。派手にカスタマイズする時に、おすすめです。
---- ここから ---------------------------
* {
box-sizing: border-box; /* Opera。CSS標準になる予定 */
-moz-box-sizing: border-box; /* Firefox */
-khtml-box-sizing: border-box; /* Apple系みたいです。念の為の、おまじない */
-webkit-box-sizing: border-box; /* Safari 3。Windows版で確認 */
margin: 0px; padding: 0px;
}
---- ここまで ---------------------------
o *だけ書くと、全要素に対して適用します。
o 変更手順は、* の場所を探して（なければ追加）、指定を追加する形になります。
o border: 0px;は、推奨から外しました。理由は、<hr>タグを使う時に手間がかかったからです。
** 2. 「ブラウザー間で、見栄えの違いが気になる所」を見つけたら、CSSで微調整します
o なるべく、1種類のCSSで全てのブラウザーに対応できるよう、頑張ってみます。
o といっても、見栄えを完全に同じにするのは無理です。こだわり部分以外は割り切る事も大切です。
** 3. 特定のブラウザーだけCSSを変更したい時は、「CSSハック」を使います
o 標準の書き方で、見栄えが違うブラウザーがある場合、見栄えを無理やり合わせる事が出来ます。
o ブラウザーの特性や不具合を利用する「無保証な」方法です。
o CSSハックの方法は、必要になった時に Web検索します。間違った情報も混じっていますので、可能でしたら、実際に動作確認すると安心できます。
+ この他に、新ブラウザーの登場やバージョンアップがあると、CSSハックの書き方が変わる事もあります。
例： Safariと Google Chrome ブラウザーに対応する場合
---- ここから ---------------------------
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* ここに、Safariと Google Chrome ブラウザーだけで有効にしたい設定を記述します */
}
---- ここまで ---------------------------
o Safari 3で確認しました。他のバージョンでも使用出来るかどうかは、未確認です。
** 4. 横幅を縮める場合は、少し余裕を持たせます
o 文字の形は、Windowsと Mac OSで、少し違います。別のフォントを使っているからです。
o そこで、少々文字の形が変わっても見栄えが変にならないように、（特に横幅は）少し余裕を見る事をおすすめします。
** 5. フォントの見栄えを合わせたい時は、font-family
o ある程度合わせたい時は、font-familyに、使用して欲しいフォントの名前を並べます。
o Windowsの他に、Mac OSなどもありますから、それぞれで利用出来そうなフォント名を並べます。
o 書き方の例（この場合、bodyの場所に追加する形になります。）
---- ここから ---------------------------
body {
font-family:"Osaka", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Times New Roman", sans-serif;
}
---- ここまで ---------------------------
o 使って欲しいフォントから順に書きます。
o 「Osaka」は、Mac OSのフォントです。最近では、ヒラギノ系のフォントを指定する方が、評判が良いみたいです。
o 「メイリオ」は、Windows Vistaで新しく追加されたフォントです。
o 最後に、cssの仕様で決められているフォント名を書きます。例の場合は「sans-serif」。
ご参考。font-familyの説明（HTMLスタイルシートリファレンス） ▽http://www.htmq.com/style/font-family.shtml
# 文字の見栄えを完全に合わせる為には、画像などにするしかありません。
# でも、画像などで表現してしまうと、文字の検索やコピーが出来ませんから、使う側が不便です。
#
** 6. たまには後回しもおすすめです
o 操作性に関係が無いような部分は、後回しにするのもおすすめです。CSSカスタマイズの楽しみを、将来の自分の為に残す感覚です。
o 動画制作に飽きてきた時の気分転換など、気が向いた時に、また楽しみます。
o to_dkのzoomeマイページは Safariブラウザーで見栄えが異なります。原因もほぼ把握しているのですが、修正は保留しています。
** 7. ご参考：主要ブラウザーについて（＝携帯電話の特殊ブラウザーは除きます）
▽Internet Explorer : 一番多く使われています。今の所、バージョン 7、 6 の順で多いみたいです。最新版は 8。
▽Firefox : Webプログラマーに好評です。
▽Safari : iPhoneなどの Apple製品で人気です。
▽Opera : PHSで人気があるみたいです。Wii（ゲーム機）バージョンがあります。
他にも、▽Google Chromeなどがあります。
＝＝
関連ページ：
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
＞ zoome マイページ。プレビューでの失敗例と対策
CSS。他の方の便利メモ
(2010年5月27日変更。*で指定する箇所から、border: 0px;を外しました。理由は、hrタグの横線が消えるからです。)
