sitemap-gif

クロスブラウザのためのテクニック

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

Summary

  • W3Cに準拠した、正しいHTML/CSSを記述する
  • 最初にスタイルをリセットする
  • 個別ブラウザ対応のスタイルを書く
  • 画像のリサイズをしない(CSS/HTML)
  • フォントレンダリングの確認は全ブラウザで行う("Lucida"は使用しない!)
  • テキストサイズの指定は、「%」または「em」を使う
  • フロート要素には、「display:inline」「overflow:hidden」のどちらかを使用する
  • overflow:auto」がきいている包括箇所には高さ横幅(「height」「width」)などを指定してhasLayoutの値を「true」にしてください。
  • CSS3のセレクタはまだ使わない。
  • 透過PNGは、まだ使用しない。

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

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

ブロック系

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

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

TOPへ

body要素

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

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

全体のフォント

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

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

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

 注意
  • MacOS9IE5ではfont-familyの複数指定は無効になる。
  • MacにMicrosoft Officeをインストールしていると、‘MS Pゴシック’も一緒にインストールされている。
  • フォント名に日本語が使われていたり、スペースが入っている場合は、必ずクォーテーションで括りましょう。また、それ以外の場合は括ってはいけません。

《sample.css》

body{
 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',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,'MS Pゴシック',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;
}
TOPへ

a要素:リンク

通常のリンクの色指定

クリックされた瞬間の色指定

訪問済の色指定

《sample.css》

 a:link{ color: blue; }
 a:active{ color: red; }
 a:visited{ color: purple; }

《ブラウザ表示》

設定方法や共通スタイルの説明はブラウザの設定・操作を参照してください。

マウスオーバーの色指定

《sample.css》

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

《ブラウザ表示》

設定方法や共通スタイルの説明はブラウザの設定・操作を参照してください。

TOPへ

p要素:パラグラフ

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

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

アンカーテキストにマウスカーソルを乗せた状態

《sample.css》

p {
 text-indent: 1em;
}

《ブラウザ表示》

ここでは、IE7,NN7.x,FireFox2.0.0.xの最新版で評価してます。これ以前のバージョンでは多少解釈の違いからくる誤差があることをご承知おきください。

TOPへ

Hn要素:見出し

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

見出しのフォント

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

《sample.css》

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

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

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

sample image

《sample.css》

file.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%;
}
…

《sample.html》

H1はこんな感じに、上下境界線が僅かにあり背景は画像です

H2はこんな感じに、左と上の境界線と背景は塗りつぶしです

TOPへ

TABLE要素:表

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

テーブルの境界線

境界線をスタイルで書く

《sample.css》

table {border-collapse: collapse;}  ①表の枠(ボーダー)の表示モデルを結合ボーダーモデルに指定する
th, td { border: 1px solid #CCCCCC; } ②セルの枠を指定する

《sample.html》

<table summary="境界線をスタイルで書く">
<tr><th abbr="title1">title1</th><td style=" width: 200px;">文字</td></tr>
<tr><th abbr="title2">title2</th><td> </td></tr>
</table>

《ブラウザ表示》

title1文字
title2サンプル

テーブルの背景

背景色を指定する

《sample.css》

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

《sample.html》

title1文字
title2サンプル

TOPへ

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

《ブラウザ表示》

ボーダーあり(指定なし) ↑先頭へ

ボーダーなし(指定0) ↑先頭へ

 注意: IE, FireFox, Netscapeで再現されます。Operaではボーダー線は出てきません。

フィルター(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以外ではそのまま表示されます。" />

《ブラウザ表示》

フィルターなし フィルターあり
TOPへ

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;              ③ 幅を指定する
}
TOPへ

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>

《ブラウザ表示》

Column 1

Column 2

Column 2-2

Column 3

Column 4

Column 5

《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>

《ブラウザ表示》

ヘッダー部分

左フレーム

右フレーム

フッター部分

TOPへ

HR要素:フィルター

色・背景色

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

《sample.css》

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

《ブラウザ表示》

本文…


coptyright(c) 2008.12.03 T.Augustine.

フィルター(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>

《ブラウザ表示》

本文…IE以外ではそのまま表示されます。



coptyright(c) 2007.11.26 T.Augustine.

TOPへ

複数のスタイル

複数のスタイル同時利用

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

《sample.css》

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

IT用語辞典


 GOOGLE LOGO

inserted by FC2 system