はじめに

クロスブラウザとは、ブラウザそのもののことではなく、IEを含めたモダンブラウザ上で同じように表示させるためのテクニックを指します。

Summary

特にクロスブラウザで注意点と対策

クロスブラウザにおいて注意する点を紹介し対策を記す

ブロック系

最もクロスブラウザで異なるのが、padding, margin, borderなど要素のレンダリングです。

ブラウザ毎にレンダリングを指定する前に、スタイルをリセットしておく

body要素

BODY要素にスタイルを適用することで、統一したページが容易にできる。

好みだが、コンテナ部分を中央に寄せる場合に使える。

全体のフォント

CSSでフォント・ファミリーを指定しないと、ブラウザ依存のばらばらのフォントが利用される。たとえば、IE6だけをとってみても、HTMLの文字セットがutf-8の場合は「Times New Roman」になるが、Shift-JISやEUC-JPの場合は、インターネットオプションのデフォルト(指定)フォントで表示される。

また、総称ファミリー名（generic-family）である「sans-serif」でも環境に依存してしまいます。たとえばIE6の場合、文字セットがShift-JISまたはEUC-JPの場合は「Lucida Sans Unicode」で、utf-8では「Arial」が表示されるそうです。(ん？逆じゃぁねーの？)

よく雑誌などでも推奨されているものを以下に示す。

《sample.css》

body{
　font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
　color: #000000;
}

ただし、これにも問題はあります。Windowsの環境に'ヒラギノ角ゴ Pro W3'がインストールされている場合は当然これが適用されるわけですが、アンチエイリアスがかからずバランスの悪い文字であったり、小さい文字がアウトラインで表示されてしまうためギザギザになってしまうそうです。

そこで、解決策としては、Windows用フォントCSSと、Mac用フォントCSSを用意して、OSを判断して切り替える方法です。

head内の記述

var os = (!navigator.appVersion.indexOf ("Win")) ? "win" : "mac";
document.write ('<link rel="stylesheet" href="/css/font_' + os + '.css" type="text/css" />');

それぞれのCSSファイルは次の通りである。

Windows用CSS(font_win.css)

body {
font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

Mac用CSS(font_mac.css)

body {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}

ちなみに、Windowsにヒラギノフォントをインストールしているユーザーがどれくらいいるかと考えると、あまりにマニアックで一般的にはそこまでする必要は少ないと考えてよい。また、JavascriptがOFFになっていれば無意味である。

背景

背景色の指定と、画像の指定

《sample.css》

body{
　background-color: #CCFFFF;
　background-image: url('../../img/bg-green-wall.gif');
}

テキスト・レイアウト

幅800ピクセルで中央表示させる方法

《sample.css》

body{
  margin: 0px auto;
  text-align: center;
  width: 800px;
}

a要素：リンク

通常のリンクの色指定(未訪問)

訪問済の色指定

ポイント時(マウスオーバー時)の色指定

クリックされた瞬間の色指定(選択中)

See the Pen crossBrowser.a by T.Augustine (@AugustinePoNoja) on CodePen.

マウスオーバーの色指定

《sample.css》

a:hover {
    color: red;
    background-color: #FFFF66;
}

《ブラウザ表示》

p要素：パラグラフ

もっとも簡単な段落を表す要素ですが、１文字だけインデントしたい場合がよくあります。

１行目の１文字だけインデント

《sample.css》

p {
　text-indent: 1em;
}

《ブラウザ表示》

《sample.css》

p {
　text-indent: 0;
}

《ブラウザ表示》

Hn要素：見出し

スタイルシートの最も活躍するケースです。

見出しのフォント

レベルによってフォントサイズや太さを変える

《sample.css》

h1, h2, h3, h4, h5, h6{ text-align: left; }　　　　　←①すべて左寄せで統一
h1 {
　font-family: 'ＭＳ Ｐゴシック',Osaka,sans-serif;
　font-size: 18pt;　　　　　　　　　　　　　　　　　　←②フォントサイズを固定
}
h2, h3 {
　font-family: 'ＭＳ Ｐゴシック',Osaka,sans-serif;
　font-size: 1.3em;　　　　　　　　　　　　　　　　　　←③フォントサイズを可変
}
h4, h5, h6 {
　font-family: 'ＭＳ Ｐゴシック',Osaka,sans-serif;
　font-size: 1em;
　font-weight: bold;　　　　 　　　　　　　　　　　　　←④フォントの太さを太く
}
h5, h6 {
　font-style: italic;　　　　　　　　　　　　　　　　　←⑤フォントスタイルをイタリック
}

ブロック（マージン・パディング・境界線）と背景

レベルによって行間マージンと内部パディング、境界線の太さを調整と背景の指定

《sample.css》 h1 { 　margin: 1.5em 0.5em 0.5em;　　　　　　/* ① 外側の余白をまとめて指定する（上、右、下、左 の順）*/ 　padding: 4px 20px 0px;　　　　　　　　/* ② 内側の余白をまとめて指定する（上、右、下、左 の順）*/ 　border-top: 1px solid #CCCCCC;　　　　/* ③ 上境界線をまとめて指定する（太さ、線の種類、線の色）*/ 　border-bottom: 1px solid #CCCCCC; 　position: relative; 　left: 0px; 　background-color: #999999;　　　　　　　　　　　/* ④ 背景色を指定する*/ 　background-image: url('../img/34bar_sv.jpg');　 /* ⑤ 背景画像を指定する（背景色より優先される）*/ 　background-repeat: repeat-x;　　　　　　　　　　/* ⑥ 背景色の繰り返しを指定する*/ } h2 { 　padding-left: 5px;　　　　　　　　　　/* ① 左外側の余白を指定する*/ 　border-top-width: 1px; 　border-bottom-width: 0px; 　border-left-width: 10px;　　　　　　　/* ② 左側境界線の太さを指定する*/ 　border-top-color: #990000; 　border-left-color: #990000;　　　　 　/* ③ 左側境界線の色を指定する*/ 　border-top-style: solid; 　border-left-style: solid;　　　　　　 /* ④ 左側境界線の種類を指定する*/ 　background-color: #FFFFCC;　　　　　　/* ⑤ 背景色を指定する*/ 　width: 95%; } …

TABLE要素：表

ここでも何かと活躍するスタイルです。罫線自体をスタイルで書くやり方や、幅、背景、テキスト文字の調整などです。

テーブルの境界線

境界線をスタイルで書く

See the Pen crossBrowser.table01 by T.Augustine (@AugustinePoNoja) on CodePen.

テーブルの背景

背景色を指定する

table th
{
　background-color: #CCFFFF;
}
table td
{
　background-color: #CCCCCC;
}

《sample.html》

IMG要素：画像

画像に対しては、何も指定しないと境界線がついてしまうのでこれを消したい場合に使います。

境界線

境界線を書かない

《sample.css》

img.border0
{
　border-width: 0px;
　border-style: none;
}

《sample.html》

<p>ボーダーあり(指定なし)　<a href="#"><img alt="↑先頭へ" src="../../img/t07_aa_03.gif" width="60" height="12" /></a></p>

<p>ボーダーなし(指定０)　<a href="#"><img alt="↑先頭へ" src="../../img/t07_aa_03.gif" width="60" height="12" class="border0" /></a></p>

《ブラウザ表示》

フィルター（IE独自機能)

Internet Explorer4.0以上の独自機能です。フィルター機能(グラデーション)を利用してぼかしを入れる

画像に対して円状のグラデーションを施す

《sample.css》

.grad_circle
{
  width: 228px;
  height: 125px;
  filter: Alpha(opacity=100 ,finishopacity=0,style=2);
}

《sample.html》

<img alt="フィルターなし" src="../../img/int-h1.jpg" width="228" height="125" style=" border: 1px solid #0000CC;" />

<img alt="フィルターあり" src="../../img/int-h1.jpg" width="228" height="125" style=" border: 1px solid #0000CC;" class="grad_circle" title="IE以外ではそのまま表示されます。" />

《ブラウザ表示》

DIV要素の中央寄せ

IE以外のモダンブラウザ（Firefox、Opera、Ssafariなど）では、IEで通用した技が使えません。

IE7での《sample.css》

body{
  margin: 0px auto;
  text-align: center;
  width: 800px;
}
.normal{

margin: 0px auto;　　　① 左右のマージンをautoにする
text-align:left;　　　　　　　　　　　　② そのままにしておくと、DVI内のテキストも中央揃えになるので、左寄席にしておく
border-width: 1px;
border-color: #000000;
border-style: dotted;
height: 100px;
width: 400px;　　　　　　　　　　　　　　③ 幅を指定する
}

DIV要素で段組

段組（回り込み）

段組をTABLE要素で表現するのは、アクセシビリティ上問題があります。スタイルシートを使ってスマートに作成しましょう。

《sample.css》

*.floating
{
　float: left;
　width: 200px;
　border: solid 1px #999999;
}

《sample.html》

<div class="floating"><p>Column 1</p></div>

<div class="floating"><p>Column 2</p><p>Column 2-2</p></div>

<div><p>Column 3</p></div>

<div style="clear: left;"><p>Column 4</p></div>

<div><p>Column 5</p></div>

《ブラウザ表示》

《sample.css》

div.floatingA
{
  border: solid 1px #cccccc;
  width: 100%;
  text-align: left;
}
div.floatingB
{
 width:200px;
 float:left;
 background-color: #CCFF33;
 border: solid 1px #66FF66;
}
div.floatingC
{
 width:545px;
 float:left;
 margin-left:10px;
 background-color: #FFFFCC;
 border: solid 1px #FFFF33;
}
div.floatingD
{
 width:100%;
 clear:left;
 background-color: #006633;
 border: solid 1px #003366;
 color: #FFFFFF;
}

《sample.html》

  <div class="floatingA">
    <h1>ヘッダー部分</h1>
  </div>
  <div class="floatingB">
    <h1>左フレーム</h1>
  </div>
  <div class="floatingC">
    <h1>右フレーム</h1>
  </div>
  <div class="floatingD">
    <h1>フッター部分</h1>
  </div>

《ブラウザ表示》

HR要素：フィルター

色・背景色

先ずはシンプルに、線の太さと色を指定します。

《sample.css》

hr
{
  color: #FF0000;
  background-color: #FF0000;  /* Netscape 用 */
  height: 5px;
}

《ブラウザ表示》

フィルター（IE独自機能)

Internet Explorer4.0以上の独自機能です。フィルター機能を利用してグラデーションのある仕切り線を描く

hr.grad1
{
  color: #0000CC;
  background-color: #0000CC;
  width: 90%;
  filter: Alpha(opacity=100 ,finishopacity=0,style=1);
  height: 4px;
}
hr.grad2
{
  color: #00CC00;
  background-color: #00CC00;
  width: 90%;
  filter: Alpha(opacity=100 ,finishopacity=0,style=3);
  height: 4px;
}

《sample.html》

<hr class="grad1" />

<hr class="grad2" />

<p style="text-align: center; font-size: small;">coptyright(c) 2007.11.26 T.Augustine.</p>

《ブラウザ表示》

複数のスタイル

複数のスタイル同時利用

複数のスタイルを同時に使用する場合

《sample.css》

class="AAAA  BBBB"    ← 空白で区切

 

IT用語辞典

 

Copyright (c) 2006-2011. T.Augustine.