制作者の活動(PR)。

アイドル女優・堀北真希ちゃんはうさぎの耳が似合うと思って作った女子大生キャラクタ
主な堀北真希うさぎ収録作品

人気女優をモデルにした創作キャラクタのイラスト例とアニメーション動画

CSS(カスケーディングスタイルシート)実習のおまけ(1) - インターネットエクスプローラ対策。

前回の実習(8) - レイアウト関連の指定(2)・ポジショニング(位置指定配置)までで、基礎となる話しを一通り終えました。

ですが、最後のところで述べた通り、インターネットエクスプローラ 6.0で見ると、表示が若干おかしくなっております。

今回は入門篇のおまけとして、インターネットエクスプローラ 6.0対策を解説します。

CSS(カスケーディングスタイルシート)実習のおまけ(1) - インターネットエクスプローラ対策・目次。

インターネットエクスプローラでの問題点。

インターネットエクスプローラは、4.0からCSSを実装しておりますが、その実装に大きな問題点がありました。

問題点は幾つかありますが、その中でも特に重大なのは、要素の横幅(widthプロパティ)と要素の高さ(heightプロパティ)の計算方法でした。

正規の仕様では、これらの値にはパディングや枠線の太さは算入しないものとされているのですが、インターネットエクスプローラでは長らく参入した値を取扱っていたのです。

前回のスタイルをもう一度見てみましょう。

ファイヤーフォックスで見た場合

ファイヤーフォックスで見た場合、スタイル定義通りに描写されているのが分かります。

インターネットエクスプローラ 6.0で見た場合

しかし、インターネットエクスプローラ 6.0で見た場合、横幅に枠線の太さやパディングが参入された値となっているため、その分左側の項目の幅が狭くなってしまいました。

このような問題があったため、インターネットエクスプローラ 6.0以降(マッキントッシュ版では5.0以降)からは標準準拠モードと呼ばれる描画モードが実装されたのですが、インターネットエクスプローラ 6.0ではXHTMLで書かれた文書は標準準拠モードになってくれないのです。

標準準拠モードにしたいためだけに文書型を変更するのも本末転倒ですので、何らかの方法で対処する必要があります。

今回やりたい事。

さて、前置きはこのくらいにして、実際にすべき事を挙げてみましょう。

インターネットエクスプローラ 6.0では標準に従った横幅とならないため、インターネットエクスプローラ 6.0でのみローカルルールに則った横幅を指定する事とします。

問題の箇所に与えたスタイルを見ますと、以下のようになっております。

ul#RELATED_LIST {
    width: 10em;
    margin: 0;
    padding: 1em 1em 1em 2em;
    border: 1px solid #ccc;
    position: absolute;
    top: 6.4em;
    left: 1em;
    }

このように、横幅10文字分としているのですが、実際には左右のパディングがそれぞれ 2文字分と 1文字分、更に左右の枠線が 1ピクセルずつとこれらの幅が横幅に参入されたため、インターネットエクスプローラ 6.0では10-( 2+ 1)=10- 4= 7文字分、更にそれから 2ピクセルズ分小さくなった幅が採用されている事になります。

インターネットエクスプローラ 6.0に対しては、逆に加算した値、すなわち 10+( 2+ 1)=13文字分に 2ピクセルズ分の幅を加えた値とする必要がある事になります。

但し、CSSでは値の異なる単位を加算減算する事は出来ませんので、たかだか 2ピクセルの誤差は仕方がないものとして諦める事にしましょう。

実際にやる方法。

さて、インターネットエクスプローラ 6.0でのみ特定のプロパティを適用するにはどうしたら良いでしょうか。

インターネットエクスプローラ 6.0まででのみ有効なセレクタ。

実は、インターネットエクスプローラ 6.0まででは、以下のセレクタが有効になると言うバグがあります。

* html セレクタ {
    (プロパティ)
    }

実はこのセレクタは

と言うセレクタであり、CSSの文法上何のエラーでもありません。

ですが、HTML文書に於いては<html>要素は最上位の要素であり、従ってそれより上には何の要素も存在しないため、一般のウェブブラウザであれば該当する要素が無いものとして実質無効となるだけです。

このため、インターネットエクスプローラ 6.0まででの問題を解決するために、このセレクタを用いてインターネットエクスプローラ 6.0までにとって適切なプロパティに変更すると言う場合に使われるのです。

同様に、インターネットエクスプローラ 7.0にも

*+html セレクタ

と言うセレクタが有効になると言うバグがあります。これも

を意味する正当なセレクタですが、<html>要素の前には何の要素も無いため、やはり一般のウェブブラウザでは無効になります。

インターネットエクスプローラ 6.0まででのみ有効なスタイル定義。

今回もこのセレクタを用いて、適切な横幅を与える事にしましょう。

スタイル定義ファイル style.css の末尾に、以下の記述を加えます。

/* IE 6.0対策 */
* html ul#RELATED_LIST {
    width: 13em;
    }

ここでは、初めに述べた通り、インターネットエクスプローラで適切な値となる 13文字を横幅として際定義しております。

ここまででのスタイル定義ファイルの纏め。

以上のスタイルを纏めると、スタイル定義ファイル style.css は以下のようになっているでしょう。

@charset "shift_jis";

* {
    margin: 0;
    padding: 0;
    border: none 0;
    background-color: #fff;
    color: #000;
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    font-size: 100%;
    font-style: normal;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
    line-height: 1.5em;
    text-indent: 0;
    }

html {
    background-color: #fff;
    }

body {
    padding: 2em 1em;
    background-color: #fff;
    }

h1 {
    margin-bottom: 1em;
    background-color: #ff0;
    color: #090;
    font-style: italic;
    font-weight: bold;
    font-size: 200%;
    line-height: 1.2em;
    text-align: center;
    }

h2 {
    margin: 3em 0 1em 11.833em;
    padding: 0 6px;
    border-color: #cc0;
    border-style: solid;
    border-width: 1px 2px 4px;
    background-color: #fff;
    background-image: url("Background-H2.GIF");
    background-repeat: repeat-y;
    background-position: right top;
    color: #090;
    font-size: 120%;
    line-height: 1.2em;
    clear: left;
    }

p {
    margin: 1em 0 0 15em;
    text-indent: 1em;
    }

ul {
    margin: 1em 0 0 17em;
    list-style-image: url("ListMarker.GIF");
    list-style-type: disc;
    }

hr {
    border: 1px solid #888;
    margin: 3em 0 1em;
    }

a:link {
    color: #090;
    text-decoration: underline;
    }

a:visited {
    color: #000;
    text-decoration: underline;
    }

dfn {
    border-bottom: 2px solid #cc0;
    color: #090;
    }

em {
    padding-top: 4px;
    background-color: #fee;
    background-image: url("Background-EM.GIF");
    background-repeat: repeat-x;
    background-position: left top;
    color: #000;
    }

/* 特別な要素へのスタイル指定 */
ul.images {
    list-style-image: none;
    list-style-type: none;
    }

ul.images img {
    float: left;
    }

ul#RELATED_LIST {
    width: 10em;
    margin: 0;
    padding: 1em 1em 1em 2em;
    border: 1px solid #ccc;
    position: absolute;
    top: 6.4em;
    left: 1em;
    }

h2#HEADINGS_OF_RELATED_LIST {
    display: none;
    }

/* IE 6.0対策 */
* html ul#RELATED_LIST {
    width: 13em;
    }

このスタイルを用いて、インターネットエクスプローラ 6.0で閲覧すると、

ファイヤーフォックス同様に適切な横幅になったのが分かります。

念のために、ファイヤーフォックスで閲覧した場合に副作用がない事を確かめておきましょう。

ファイヤーフォックスで閲覧した場合には、横幅が異常に大きくなると言うような副作用は出ていない事が分かります。

その他のインターネットエクスプローラ対策の応用。

要素の横幅高さの調整以外にも、インターネットエクスプローラ 6.0まで(場合に依っては7.0まで)に対する対策が求められる場合があります。

ある要素を画面に固定したい場合

CSSの仕様ではpositionプロパティに fixed 値を指定する事で、スクロールしても動かないようにクライアント領域の特定の箇所に固定させる事が可能になります。

現行のCSS対応ウェブブラウザでは殆どがこのプロパティを正常に扱いますが、インターネットエクスプローラ 6.0まででは無効な値にしてしまうため、そのままだと正常なレイアウトにならなくなります。

そこで、インターネットエクスプローラ 6.0に対しては、値として absolute 値を指定する事に依り、スクロールで動くもののレイアウト上は問題がない形にするようにします。

要素の前後に記号類を加えたい場合

入門篇では解説していませんが、CSSでは要素の前後に文書に書かれていない文字や記号を加える事も出来ます。

例えば、インライン引用である<q>要素の前後にCSSでカギ括弧などを加える事で、より引用と分かり易いスタイルにする事が可能になります。

しかし、これらはインターネットエクスプローラ 7.0まででは実現出来ないため、代わりに文字の色やスタイルを変えるなどして引用と分かるようにする事になります。

インターネットエクスプローラ固有のバグへの対策

仕様と実装の相違だけでなく、インターネットエクスプローラのスタイル実装にはかなり多くのバグが見られます。

場合に依っては、実際にインターネットエクスプローラ 6.0や7.0で確認してスタイル調整を個々に行わなければならない場合があります。

そのような場合に今回解説した対策が使えると言う訳です。

前後のページ。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com