携帯電話から法律・金融情報まで使えるのもは何でもツカウ

個性を出すためにブログのカスタマイズをする。

ブログを始める誰もがそう思う事だと思います。

私もブログを始めた頃はブログカスタマイズのサイトを渡り歩いたものです。

なにしろ、特にSeesaaブログはテンプレートが(´･ω･`)ションボリなので、
カスタマイズしないと見栄えが整わないんですよね・・・。

しかしカスタマイズをしていく上でどうしても避けられない問題が発生します。

それは、

使っているブラウザが違うと表示されるデザインが崩れてしまう可能性がある。

という事です。

代表的な崩れ方として、右サイドバーが落ちるという現象があります。(後述します)

この原因の解消を後回しにしてしまうと後々修正がものすごく大変になりますし、致命的なミスだと取り返しがつかなくなってしまうなんていう事もありますので、カスタマイズを始める前に注意しておきましょう。

猛烈にシェアを伸ばすMozilla系ブラウザ　Firefox

現在世の中で最も使われているブラウザはご存知Microsoft Internet Explorer(以下IEと呼びます)です。

そのシェアは現在のところおよそ9割近く、10人に9人がIEを使っている計算です。

しかし、
現在シェアを猛烈な勢いで伸ばしてきているブラウザにはMozilla系のFirefoxがあり、

『数年後には4人に1人がMozilla系のブラウザを使っているのであろう』

なんていう事も言われています。

こうなってくると

IEを使っている人だけが正常に見ることが出来たら満足だ！

なんて言っていられませんね。

Firefoxと同様の表示形式を持つブラウザとしてはOperaやSafariといったブラウザもありますが、この記事はFirefoxのみをご紹介します。

ここでひとつ質問です。

IEとFirefoxで表示させた場合、どんな不整合が発生するかご存知でしょうか？

例えば、以下の様な不整合が発生します。

• サイドバーが落ちる（←よくある問題）
• 画像がセンタリングされない
• 文字が小さすぎて読めない
• 背景色が表示されない

特にデザインが崩れてしまう(サイドバーが落ちてしまう)不具合の大半の原因は、

• IEは後方互換モード(以下互換モードと略)と呼ばれる表示形式を使っている。
• Firefoxは標準準拠モード(以下準拠モードと略)と呼ばれる表示形式を使っている。

この違いによって引き起こされているのです。

この2つのモードの違いを一言で表現すると、

ブラウザの仕様の解釈の違いに起因する表示上の相違

といえますが、
そもそもIEの互換モードの方が独自路線を突き進んだために生まれた負の遺産というべきものなのです。

標準準拠モードの方がWebの世界では標準と扱われています。

ブログのデザインが崩れてしまう事は、特にアフィリエイトなどショップ系のブログを作られている方にとっては、かなり重大な問題です。

IEの致命的な問題〜paddingとwidthを一緒に設定するな！

このモードの違いによる表示の不整合は、WidthやPaddingを設定すると顕著に出現します。

具体例として、以下のようにスタイルシートを設定したとしましょう。

右図の様なレイアウトにしようとして作成したスタイルとします。

#container{

widht:750px;
}

#content{

float:left;
width:550px;
padding-left:10px;
}

#links{

float:right;
width:200;
}

こうやって設定すると、ブラウザでは以下のように表示されます。

• IEでの表示・・・・・思っていた図の通りに表示される
• Firefoxで表示・・・右サイドバーが落ちる

この右サイドバーが落ちてしまう原因は、#contentの幅の値が大きすぎるからなのですが、

なぜ同じ設定を使っているにも関わらず、違う表示になってしまうのでしょうか？

それは、IEとFirefoxでは以下のように異なる解釈をしているからなのです。

• IE(互換モード)の解釈

  • #contentの幅　＝　文字入力ができる幅540px　＋　左padding(10px)
    　　(#contenの幅は550px)

• Firefox(準拠モード)の解釈

  • #contentの幅　＝　文字入力ができる幅550px 　＋　左padding(10px)
    　　(#contentの幅は560px)

よって、このスタイルをFirefoxで表示させた場合は、

#contentと#linksの幅の合計　＝　560px　＋　200px　＝760px

という計算になるので、
合計が#containerの値(750px)を超えてしまい、右サイドバーが落ちてしまうのです。

また、border（枠の線）を設定したときもこれと同じ現象が発生します。

つまり、
IEのwidthというのは『その要素全体の横幅』という解釈で、
文字入力で使える範囲は設定したwidthからpaddingとborderの値を引いた値であり、
それに比べてFirefoxのwidthというのは『文字入力範囲の横幅』という解釈で、
その要素全体の横幅はpaddingとborderを合計した値になっている
という事です。

この解釈の違いがありますので、widthとpaddingを一緒に設定するとデザインが崩れてしまうのです。

以上の内容をまとめると以下の様な計算式になります。

• IE(互換モード)での表示

  • 表示される幅　＝　width

    • widthはpaddingとborderを含む
    • 文字入力範囲が狭まっている事に注意してください。
      上の例の場合だと文字入力範囲の横幅は
      width(550px)　−　左padding(10px)　＝　540px　になります。
      
      
• Firefox(準拠モード)の表示

  • 表示される幅　＝　width　＋　padding　＋　border

IEの致命的な問題〜floatとmarginを一緒に設定するな！

IEには上記の『padding＋width』の現象よりも、さらに奇怪な現象(というよりバグ？)があります。

それは

回り込み指定(float)と一緒にmarginを設定すると、marginの値が倍になる。

という現象です。

しかも倍になるのは回り込み指定した方向のmargin分だけで他の方向のmarginは倍にならないんです・・・。

例えば、
『float：left;』と設定すると左方向のmarginのみが倍になって
『float：right』と設定すると右方向のmarginのみが倍になるんです。

まったくもって不可解な現象です。

具体的な例でいうと

#content{

float:left;
width:500px;
margin-left:10px;
margin-right:10px;
}

とスタイルを設定すると、このスタイルの横幅は、

横幅　＝　width(500) + 左margin(10)×２　＋　右margin(10)
　　　　＝　530px

と、なってしまうんです。

ここまでくるともう理解不能じゃぁぁぁ！(ノ ﾟДﾟ)ノ ＝＝＝＝ ┻--┻

という感じで投げ出さないで下さい・・・。

IEを使っている限りはこの不具合とは離れられない運命ですので、仲良く付き合っていくしか方法はありません。

『あきらめる』というのも解決方法の一つですので。

徹底しましょう！レイアウトに関わるスタイルを設定する原則

以下はまとめになります。

レイアウトを決めるスタイルを作成するときは以下の2点を厳守しましょう。

• widthとpadding、borderは一緒に設定しない！

• floatと左右marginは一緒に設定しない！

つまり、レイアウトを決定するIDやクラスには『widthとfloatの設定しかしない』と思っていた方が無難です。

paddingやmarginは、中に入れる要素のスタイルで代用しましょう。

borderは代用方法が無いに等しいので、使用する際は微妙にレイアウトがずれることを覚悟して設定しましょう。

Firefoxでレイアウトを確認してみる

今回の記事はIEとFirefoxでの表示のされ方の違いについてご紹介してきましたが、この記事を読まれた方は、

自分のブログがFirefoxでどのように表示されるのかな？

と気になってきたのではないでしょうか。

ちなみに、私は2ヶ月ほど前に初めてFirefoxで自分のブログを確認してみたのですが、

しっかりと右サイドバーが落ちていました。

その他にも、自分が思っていたよりも文字が小さすぎたり、センタリングしたつもりの画像が左寄りになっていたりしてましたので、1ヶ月くらい修正に追われる日々をすごす事が決定・・・。

Firefoxのダウンロードは右のボタンのリンク先からダウンロードが可能になっています。

嬉しいことに、FirefoxはインストールしてもWindowsの再起動は必要ないですし、IEのお気に入りも自動でコピーして取り込んでくれますのでものすごく親切です。

そして最近FirefoxでもGoogleツールバーをインストールできるようになったので、PagerankもFirefox上で確認が可能になりますます利便性が高まってきています。

さらに、

現在ベータ版が公開されているIEの新バージョン(ver７)では、Firefoxなどと同じ準拠モードが採用されるという記事もあります。

この様に、世の中のブラウザがどんどん準拠モードになっていく傾向にあります。

時代を先取りする感覚で自分のブログが準拠モードでどのように表示されるのかを確認してみても面白いのではないでしょうか。