堀北真希うさぎ
主な作品
堀北真希うさぎ：平成初頭のボシュロム製コンタクトレンズのCM風にコンタクトレンズを装着している場面を含んだ仮想CM動画

ページ案内▼

CSS非対応環境の表示色を設定する。

CSSの書き方使い方で紹介したスクリプトをここで改めて詳しく解説しましょう。

CSS非対応環境の表示色を設定する・目次。

ネットスケープ 4.xで専用のCSS定義ファイルを用いる場合。

if (!(document.layers || document.all || document.getElementById)) {
    document.bgColor="背景色";
    document.fgColor="文字色";
    document.linkColor="未閲覧のアンカーの色";
    document.vlinkColor="閲覧済のアンカーの色";
    document.alinkColor="指定しているアンカーの色";
    }
if (document.layers) {
    document.write('<link rel="stylesheet" type="text/css" href="CSS定義ファイルのURL">');
    }

1. CSS非対応環境での表示色設定。

スクリプトの始めの以下の部分は、CSSに対応しない環境の場合の表示色設定を行っております。

if (!(document.layers || document.all || document.getElementById)) {
    document.bgColor="背景色";
    document.fgColor="文字色";
    document.linkColor="未閲覧のアンカーの色";
    document.vlinkColor="閲覧済のアンカーの色";
    document.alinkColor="指定しているアンカーの色";
    }

1.1 CSSに対応していない環境か。

if文。

一行目のif文は、簡単に言えば「CSSに対応した環境で無ければ、後続の文を実行せよ」というものです。

条件式。

条件式の具体的な意味ですが、「!(…)」は括弧内の条件が満たされていないことを条件とする論理演算子です(論理否定)。ここでは

が否定される事が条件となります。この中の「条件A || 条件B」とは「条件Aが成り立つか、さもなければ条件Bが成り立つ事」が条件という条件式を作る論理演算子です。ここでは「document.layers || document.all || document.getElementById」となっていますので「document.layersが成り立つか、さもなければdocument.allが成り立つか、それもダメならdocument.getElementByIdが成り立つ事」が条件となります。

以上を纏めるとこの条件式は「ネットスケープ 4.xであるか、さもなければインターネットエクスプローラ4.0以降である、そうでなければCSS対応ブラウザ(ネットスケープ 4.x及びインターネットエクスプローラ4.0以降を除く)であること」を意味します。ネットスケープ 4.x及びインターネットエクスプローラ4.0以降もCSSには対応しているのでこの条件式は「CSSに対応したブラウザである事」というものと同義になります。

この条件が論理否定されていると言う事は、結局一行目の条件判断は「CSSに対応したブラウザでないなら」つまり「CSS非対応のブラウザなら」と言うことになる訳です。

1.2 CSSに対応していない環境での表示色設定。

以下に示す二行目以降の部分は前述の「CSS非対応ブラウザか」と言う条件を満たした場合に限り実行されます。

document.bgColor="背景色";
document.fgColor="文字色";
document.linkColor="未閲覧のアンカーの色";
document.vlinkColor="閲覧済のアンカーの色";
document.alinkColor="指定しているアンカーの色";

これらはいずれも表示色に関連したオブジェクトです。値としてCSSで利用出来るカラーコードのうち、「十六進数六桁」「カラー名」が使えます。

つまり、この文はCSSに対応していない環境で実行される表示色設定となる訳です。

2. ネットスケープ 4.x専用のCSSを読み込ませる。

この後に書かれている部分はネットスケープ 4.x専用のCSSを読み込ませる為のものです。

if (document.layers) {
    document.write('<link rel="stylesheet" type="text/css" href="CSS定義ファイルのURL">');
    }

一行目の「if (document.layers)」は前述の通り、ネットスケープ 4.x独自のオブジェクト「document.layers」が実装されてる事を条件としており、すなわち「ネットスケープ 4.xか」という条件判断となります。

二行目は一行目の条件式が満たされた場合に限り実行されるもので、「document.write()」メソッドで「<link rel="stylesheet" type="text/css" href="../CSS定義ファイルのURL">」というHTMLを書き出しています。これはCSS定義ファイルをリンクする<link>要素をHTML文書に埋め込んでいるものです。

ネットスケープ 4.xでCSSを利用しない場合。

この場合、スクリプトはこの様になります。

if (!(document.all || document.getElementById)) {
    document.bgColor="背景色";
    document.fgColor="文字色";
    document.linkColor="未閲覧のアンカーの色";
    document.vlinkColor="閲覧済のアンカーの色";
    document.alinkColor="指定しているアンカーの色";
    }

一行目の条件式は前述通り、「!(…)」となっているので、この中の条件が満たされない事が条件となります。

「!(…)」の中身は「document.all || document.getElementById」つまり「document.allが実装されているか、さもなければdocument.getElementByIdが実装されている」というものです。前述の通り「document.all」はインターネットエクスプローラ4.0以降を表わし、「document.getElementById」はW3Cの公式規格で定められているCSS関連のオブジェクトで、ネットスケープ 4.xやインターネットエクスプローラ4.0以降では定義されていないものです。つまり、「インターネットエクスプローラ4.0以降かネットスケープ 4.x及びインターネットエクスプローラ4.0以降以外のCSS対応ブラウザ」と言うことになります。ここでネットスケープ 4.xが除外されているので結局この条件式は「ネットスケープ 4.xを除くCSS対応ブラウザ」という条件を表している事になります。

一行目ではこの条件を否定しているので結局「ネットスケープ 4.xを除くCSS対応ブラウザでない」すなわち「CSS非対応かネットスケープ 4.xか」という条件となる訳です。

あとは前述の場合と同じですが、ネットスケープ 4.xで独自のCSSを使わないのでこれだけとなります。

何度も書いていますが、ネットスケープ 4.xは欠陥商品であり、特にCSSの処理には重大な欠陥を孕んでおります。ネットスケープ 4.xでのCSS利用を諦めたこちらのスクリプトの方が安心して利用出来るでしょう。

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

marguerite.site@gmail.com