ホームページ悪戦苦闘



 今回のエッセイは、ホームページ作成の話。ホームページを持ってる人には、ちょっと参考になるかも。ホームページを持ってない人も、それなりに楽しく読めるように書くつもり。

 さあ、行ってみよう!

 ホームページって、HTMLというお約束で書かれているのは知ってる?

 HTMLってのは、標準化団体のワールドワイド・ウェブ国際コンソーシアム(W3C)が規定したマークアップ言語なんだ。HTMLは「HyperText Markup Language」の頭文字をとったものなんだよ。いまは、HTMLの拡張規格『XHTML』が決められたけど、まあそれは、別のお話。

 ところで、マークアップ言語ってなんだろう? ごく簡単にいうと、文章に印を付けることで、その出力の書式を定義する言語のことなんだ。わけわかんない? じゃあ、ちょこっとだけ実例を見せよう。

<TITLE>エッセイだよ</TITLE>

 こんな感じ。これは、そのページのタイトルの記述だよ。<TITLE>っていうのが、タイトルを現す印さ。タグって呼ばれてる。もちろんブラウザが、このタグは消して表示するよ。

 このように、文章に印(タグ)をつけて、どのようにその文章が表現されるかを記述しておくのさ。これがマークアップってやり方。ちなみに、経済用語のマークアップとは別物だから、お間違えなく。

 ここで、問題を二つに分けよう。いまぼくは、「その文章がどのように表現されるか」と言ったよね。これを、そのまま文章のレイアウトと考えないでほしいんだよ。たとえば、雑誌なんかを見てもらえばわかるとおり、紙面は華やかに飾られているよね。さまざまにレイアウトが工夫されている。でも、文章の内容を伝えたいだけならば、雑誌のようなレイアウトは必要だろうか? そんなことはないよね。小説の単行本を開けばわかるように、文章だけを読ませたいなら、レイアウトは必要最小限でいい。でも、その小説にも、タイトルはあるだろうし、章もあるだろう。節もある。註釈もあるかもしれない。そう。文章にも「構造」があるわけだ。

 というわけで、このエッセイでは、文章の基本的な構造のことを、「骨格」とか「骨組み」と呼ぶことにしよう。そして、雑誌のような華やかな体裁のほうは、「見た目」とか「美観」とか呼ぶことにしよう。

 さて。HTMLにマークアップされている「その文章がどのように表現されるか」というのは、骨格のほうなんだよ。早い話、HTMLってのは、コンテンツの内容を記述することであって、美観を記述することじゃないんだ。HTMLの本来の目的は、骨組みを作ることなんだね。その意味で、HTMLのことを「構造化言語」と解説している人もいるよ。でも、どうやら、「構造化言語」というのは、プログラミングの世界での専門用語らしくって、それはそれで、厳格な定義があるらしいんだ。だから、HTMLを構造化言語と言い切ってしまうのには問題があるらしい。まあ、このエッセイでは、そのことに踏み込む必要はないだろうね。ただ、HTMLを構造化言語と言ってる人もいることは覚えておいてね。そうすれば、どこかで、その表記にであっても、混乱しなくてすむだろ?

 ちょっと、話題がそれたね。文章の構造(骨格)に戻ろう。

 たとえば、ここに「見出し」があって、ここに「段落」があるよ。ここが「本文」だよ。というのが、文章の構造(骨格)。では、その「見出し」の文字を、どんなフォントで、どんな大きさで、どんな色で表示するかってのが見た目。この違い、わかるよね?

 もともと、インターネットは科学者のものだから、美観なんてのは問題じゃなかったんだよ。だから、彼らの作り出したHTMLってテクノロジーは、とっても論理的だけど、ちっともおもしろくないんだ。

 そりゃね、科学者だけが、細々とインターネットを利用していたころはそれでもよかったよ。見た目なんか、それほど重要じゃないからね。それにもちろん、骨格をキチンと表現するのはとっても重要だよ。もしも、世界中のウェブ制作者が、見た目のことなんか気にしないで、HTMLの標準仕様だけを順守して、クールな技をぜんぜん使わなかったら、ウェブページは、いまより、すごく軽くて、真の意味でクロスプラットフォームになれる。

 でもさあ、この世から、華やかに彩られたウェブページが消えることを考えてごらんよ。どのスーパーに行っても、同じ缶詰が(しかも数種類しかない!)同じ値段で、同じような棚に並んでる国に住みたいと思う? 思わないよね。ソ連だって崩壊したんだから。

 というわけで、ホームページを華やかに彩るために、HTMLは、ページの美観も表現できるように拡張されたんだ。すばらしい!

 いや、じつはぜんぜん、すばらしくないんだ。むしろ悲劇かもしれない。

 HTMLは、もともと骨格を記述するものだから、そこに「見た目」の情報を付け足したおかげで、ブラウザが、その「見た目」を勝手に解釈して表示するようになっちゃったんだよ。つまり、デザインが違って見えちゃうんだ。代表的なブラウザは、マイクロソフトのインターネット・エクスプローラーと、ネットスケープのネットスケープ・ナビゲーター(コミュニケーター)だけど、この二つのブラウザは、同じページでも、ずいぶん見た目が違う。頭が痛い問題だよね。まったく悲劇だよ。

 まあ、上に書いたとおり、HTMLが最初からウェブページのレイアウトをしっかりコントロールすることができなかった、というのがそもそもの問題で、ブラウザがその問題を非標準的な方法で解決するような進化をしちゃったのが、さらに大問題なわけ。

 厳密っていうか、厳格っていうか、厳しい言い方をすれば、そこに「テキストがある」っていう骨格を示したあと、その「テキストの見え方」を規定することは、構造的にはやってはいけないことなんだよ。エレガントじゃない。

 意味わかる?

 骨格に装飾を加えるってことは、よく理科室とかにある骨格標本に、きれいな服を着せるようなもんさ。不気味だよね。

 だから、ブラウザ固有のタグを使って、骨格をグチャグチャにするのはよくないことなんだよ。だって、この世には障害者用ブラウザとかあるし、PDAとか、最近じゃ携帯電話でもウェブが見れる時代だ。そういうブラウザや機器でも、キチンと表示されることを約束するには、骨格だけであるべきなんだ。

 と、そういう考えを突き詰めて、あくまでもHTML本来の役割にこだわる人のことを、HTML原理主義者って呼ぶんだ。なんか、怖そうな人たちだよね。

 とはいえ、さっきも言ったけど、ぼくらはどのスーパーに行っても、同じ缶詰しか買えないような国に住みたくないわけさ。ウェブページを美しくしたい。でもHTMLには、あんまり手を加えたくない。ジレンマだね。

 さあ、そこで救世主の登場だ! その名もカスケーディング・スタイルシート! 約してCSSだ。みんな、拍手!

 このテクノロジーはすごいよ。なんたって、各ブラウザがページ要素(スタイルの内容)を表示する際に、既定の設定値より優先されるんだよ。だから、ページの骨格を保ちながら、コンテンツの美観をコントロールすることもできるんだ。クールだぜ!

 意味がわからない?

 うーん。簡単に言うとね、ウェブページを作るときは、まずHTMLでページの骨格をシンプルに表記するわけ。できる限り、見た目の情報は入れないようにしてね。

 で、そこにスタイルシートっていうのを被せるのさ。スタイルシートに、フォントサイズや、ページの左右のマージン。あるいは「見出し」の部分は、ボールドで、かつフォントの色は青だよ。なーんて書いておくわけ。これは、みんな見た目に関する部分だよね。

 さあ、そういうページを表示するとき、ブラウザはどうするか。まず、スタイルシートをサポートしているブラウザなら、もちろんスタイルシートを読み込んで、ウェブの制作者が意図したとおりの表示をする。HTMLの骨格に「見出し」があったとする。さらに、スタイルシートには、「見出し」をボールドの青い色で表示するって書いてあるから、ブラウザは、ちゃんと、そうしてくれるんだ。やったね。拍手!

 でも、スタイルシートをサポートしていないブラウザだとどうなるか?

 大丈夫。心配しないで。スタイルシートをサポートしていないブラウザは、ただ、そのスタイルを無視するだけなんだ。でも、HTMLで骨格を表記してあるから、レイアウトはともかく、コンテンツはキチンと表示されるって具合さ。バンザーイ!

 もうわかったよね。「HTML」には、本来の目的に役割に専念してもらって、ページの美観はスタイルシートに任せるのさ。このように、骨格と美観(レイアウト)の記述部分を分けることで、どんなブラウザでも、あるいは、いろんな機器にも対応しようってことなんだよ。これでもうHTML原理主義者に怒られることもないし、しかも、ソースコードが、とってもシンプルになるっていう、ステキなオマケ付きだよ。

 さらに、スタイルシートを使うと、もっとすばらしいことがあるんだ。さっき骨格とレイアウトを分けれると書いたけど、文字通り、完ぺきに「分ける」ことができるんだ。そう。スタイルシートは、ページのソースコードに直接書き込まなくてもいい。外部にファイルとして置いておけるんだ。たとえば「本文スタイル」というスタイルシートを作ったとしよう。こいつを別ファイルにして(CSSファイルと呼ぶ)、HTMLファイルと同じディレクトリに入れとけばいいんだ。で、HTMLファイルの方に、CSSファイルを読み込むよと、設定を書いとけばいい。

 これのどこが便利なのかって? もう、すごく便利だよ!

 そうだな。たとえば、小説の本文ページが、100ページあったとしよう(100ファイルと言うべきだな)。この100ページものレイアウトを変更したいと思ったとき、あなたならどうする? HTMLを一つずつ開いて、地道に変更していく? それは大変だよ。ぼくには、よーくわかる。だって最近やったから。

 さあ、そこでスタイルシートだ。スタイルをCSSファイルにして、外部に置いとく。そのCSSファイルを、本文のHTMLファイルに読み込ませるってことは……

 そう! そのたった一つのCSSファイルさえ書き換えれば、HTMLファイルが100個あろうが、千個あろうが、全部のファイルに対して、一気に新しいレイアウトが反映されるってことさ。なんてすごいことだろう!

 さあ、スタイルシートが、どれだけすばらしくて、どれだけ優れているか、これでよくわかったよね。今日からHTMLでフォント指定なんかやめよう! みんな、スタイルシートを使おうぜ!

 と、言いたいところなんだけど、残念ながら、ここでも大きな問題がある。

 そう。またもや、マイクロソフトとネットスケープさ。こいつら、スタイルシートでも見た目が違うんだよ。なんでだよ。話が違うじゃんか。スタイルシートは、夢の新技術じゃなかったのかい。

 じつは、悪いのはNetscapeなんだ。

 マイクロソフトは、早々に悔い改めて、IE4あたりから、徐々に標準仕様を順守するようになった。だからIE6は、かなりいい出来だよ(言っとくけど、セキュリティホールとかは別問題だよ)。しかもIE4とIE5時代の、独自仕様の部分も、キチンと表示できる。それだけじゃないよ。なんと過去のバージョンの「バグ」も、わざと残してあるんだ。どういうことかって? ウェブデザイナーが、そのバグを回避しようとして、それぞれ回避策を取ってるわけだけど、その「バグ」自体がなくなっちゃうと、今度は、回避策が邪魔をして、デザインが狂っちゃうんだ。だからIE6は、過去のバージョンのバグも再現できるようになってる。すごい話だよね。古代メソポタミア人は、こういうのを「本末転倒」と呼んだらしいけど、まあ、現実的な回答だね。

 問題はネットスケープだ。約してネスケ。ネスケくんは、いつまでも、いじいじと独自仕様にこだわった。まあ、マイクロソフトに勝負を挑まれ方から、独自仕様の拡大に走っちゃったんだけど、そのせいもあって、本当に負けちゃったよ。一時は、みーんなネスケを使ってたのに、最近の調査では、もうシェアは7パーセントだってさ。ボロ負けだね。

 でも。ネスケくんは、ただ負けただけじゃなかった。シェアが、どーんと、下がっちゃったおかげで、独自仕様を捨てることができるようになったんだ。なぜかって? 過去の仕様を切り捨てても、困るのは7パーセントの人だけだからさ!

 そんなわけでネスケも、やっと悔い改めて、Netscape6で、ワールドワイド・ウェブ国際コンソーシアム(以後、W3Cと書くよ)に従うことにしたんだよ(オープンソースになったからって気もするけどね)。だからNetscape6とIE6では、ページのデザインは、やっと、ほとんど同じように表示されるようになったよ。もっとも、Netscape6は、6.2.2になっても、まだバグが多いけどね。(まったく、なにやってんだか)

 ふう。なんにせよ、Netscape6の登場は大歓迎だ。長い道のりだったね。これで、ようやくぼくらはW3Cの標準規格に基づいたサイトを作れるようになった。よかった、よかった。

 そういえば、最近話題の、オペラってブラウザ知ってる? このブラウザを開発しているのはノルウェーの小さな会社なんだけど、このブラウザは、最初から標準仕様に沿っているから、表示に問題はないよ(バグは別だけどね)。

 と、こんなところが、ウェブブラウザの歴史。

 ここから先は、実践テクニックといこう。もっとも、ぼくのテクニックなんて、ホントたいしたことないから、初心者向けだよ。さらに、小説サイト限定だから、ぜんぜん一般的じゃない。ホームページの作成に興味のない人は読み飛ばしてね。

 おや? 読むの? オッケイ。じゃあ、ついてきて。

 上でスタイルシートのことを書いたよね。とてもいいテクノロジーだと思う。クールだよね。だからぼくは、これから、なるべくスタイルシートを使ってページを作っていこうと思ってるんだ。

 IEだったら、3以上、Netscapeなら、4以上でスタイルシートをサポートしているから、そろそろ、いいだろ? 使っても。(まあ、Netscape4は、完全にはサポートしてないけどさ。こんちくしょうめ)

 と、思ったのがじつは一年ぐらい前で、小説の本文ページや、このエッセイのページなんかに、スタイルシートを使ってみた。ところが、当時のぼくは、そんなに知識がなくて、大きな失敗をしてしまったんだ。それはね、文字(フォント)のサイズを「ピクセル」って単位で指定しちゃったんだよ。

 どういうことかというと、ピクセルで指定すると、IEでもNetscape4でも、同じような大きさに表示されるから、すばらしいと思っちゃったんだよね。しかもだよ。じつは、WindowsとMacintoshでも、表示されるフォントサイズが違うんだけど、このピクセルで指定すると、OSの違いまでなくなるんだ。まったく、すばらしいよね!

 ところが、すばらしくなかったんだよ。大きな落とし穴があった。なんと、ピクセルでサイズを指定すると、ブラウザで、文字サイズを変更できないんだ!

 ガーン。し、知らなかった…… 大ショック!

 そりゃ、自分のページだもん。完全にコントロールしたいとは思うよ。文字サイズを、ビシッと統一してさ。でも、ちょっと待った。ぼくも過去のエッセイで、おジイさんとおバアさんがインターネット始めたって話を書いたよね。彼らは、間違いなく老眼な人たちだ。若くても視力の悪い人だっているだろう。そうじゃなくても、モニタで文字を見るのは辛い。とくに、ぼくのページは小説だから、文字の量が半端じゃない。目が疲れてきたら、文字を大きくしたいことだってあるはずだよ。

 さあ、考えてみよう。自分のデザインを優先するか、それとも、見てくれている人のことを優先するべきか? To be or not to beだ。ハムレットは思い悩んだけど、ぼくの答えは明白だよ。訪問者を優先するべきさ! みんなの自由を奪ってはいけない。カッコよく言うと、アクセシビリティを大事にするってことだ。

 ここで白状しておくね。じつは、この問題に気づかせてくれたのは、うちのページに来てくれたお客様のメール。雑談掲示板にも、ちょこっと書き込まれていたから書いちゃうけど、ちー坊さんに、文字サイズが変更できないって指摘してもらったんだ。

 ちー坊さん、ありがとう! この場を借りてお礼を申し上げます。

 さあ、そういうわけで、こんなエッセイを書いちゃうほどに、ぼくはスタイルシートのことを勉強し直した。(われながら、健気だと思うよ)

 フォントサイズの指定方法は、じつはいろいろあるんだ。書き出してみよう。

■ポイント(pt)
 印刷物のデザイナーにはお馴染みの単位らしいよ。ぼくには、よくわかならないけどね。

■ピクセル(px)
 さっき話した単位。たとえば15pxって指定すると、もう、なにがなんでもブラウザは文字を15ピクセルで表示するんだ。変更ができない。どうしても、デザインを崩したくないページ以外には使っちゃいけないね。

■文字の高さ(em)
 エムて読むんだ。フォントのポイント数と等しい距離の単位のことだよ。難しいね。でも、これだと相対単位だから、ブラウザで文字サイズを変更できるよ。でもIE3ではサポートしてないから注意が必要だ。(回避策はあるよ)

■パーセント(%)
 これは、分かりやすいよね。そう、すばりパーセントだよ。いかにも相対単位って気がするじゃないか。でもパーセントにはブラウザによってバグがあるらしい。やれやれだ。(ぼくが試した範囲では、やっぱりNetscapeが変)


 こんなとこかな。あと「xハイト」っていう、小文字の高さを示す単位もあるみたいだけど、ブラウザが完全にサポートしていないから、これは使わない方がいいらしいよ。そうそう。「キーワード」で指定する方法もあるね。でも「キーワード」は使いにくいからパス。(IEとNetscapeで、かなり変わっちゃうんだ。Macintoshでも変わるらしいし)

 とりあえずぼくは、ちー坊さんに指摘されてから、パーセント指定で、一時しのぎをしたんだ。じつは、パーセントだと、IEとNetscapeで、わりと文字の大きさが揃うから。でもNetscape4がバグっぽいから心配だよね。そこで「em」を採用することにした。

 具体的に、ぼくのスタイルシートを書き出してみるね。いま、みんなが見てるこのページも、下に書いてあるスタイルシートで表示されてるんだよ。

<STYLE TYPE="text/css">
<!--
A:LINK {
color : blue; TEXT-DECORATION: none
;}
A:VISITED {
color : purple; TEXT-DECORATION: none
;}
A:HOVER {
color : red; TEXT-DECORATION: underline
;}
BODY {
font-size : 0.9em;
margin-left : 18%;
line-height : 1.5em;
margin-right : 18%;
}
TH {
font-size : 15px;
;}
TD {
font-size : 15px;
-->
</STYLE>
IE用のスタイルシートだよ。

 すごくシンプルだよね。なにせ、本文ページ用だから、こんなもんで十分なんだよ。じゃあ、上から順に説明しようか。

これは、リンクの張られた文字の色。装飾は(アンダーラインとか)なしという設定だよ。

A:LINK {
color : blue; TEXT-DECORATION: none


これは、すでに表示したリンク文字の色。紫に指定してある。

A:VISITED {
color : purple; TEXT-DECORATION: none


これは、リンクの文字の上に、マウスポインタがきたときの動作だよ。文字を赤くして、さらにアンダーラインを出すって指定さ。残念だけど、Netscape4では、これらは反映されないんだ。だれか、Netscape4の開発者に文句言ってきてよ。

A:HOVER {
color : red; TEXT-DECORATION: underline


さあ、いよいよ、文字サイズ。

BODY {
font-size : 0.9em;
margin-left : 18%;
line-height : 1.5em;
margin-right : 18%;


 だいたいわかるよね。最初の「BODY」っていうのが、まあ、ページ全体に適用するよって意味。で、フォントサイズが「font-size : 0.9em」で、左右のマージンが「18%」。中間の「line-height : 1.5em」は、行間のことだよ。左右のマージンだけは、%で指定してるよ。

その下に、

TH {
font-size : 15px;
;}
TD {
font-size : 15px;


 というのがあるよね。これは、セル(表組みだね)の中の文字サイズ指定。ここはピクセルで指定してある。表の中は、文字サイズが変わってしまうと、どうしてもデザインが崩れてしまうからね。試しに、このエッセイをブラウザで文字サイズを変更してみてよ。IEだったら、最大サイズにしてみて。文字が、どかーんと大きくなるけど、スタイルを書いた、背景が白い部分(ここが表組みになってるんだ)の文字サイズは変わらないはずだよ。表組みが崩れたら、かえって見づらいから、こういう指定にしておいた。Netscapeでは、em指定があると、px指定部分も大きさが変わっちゃうけど(Ver.4も6も)、これはNetscapeのバグだね。

 どうかな。少しは役に立つ? もし、小説サイトを持ってる人で、いまの自分のページに不満があったら、ぼくの方法を試してみて。ちなみに、このスタイルは、<HEAD>タグの間のどこかに入れてね。たとえば、<TITLE>タグのすぐ下に入れれば、まず間違いないはずだよ。それで、数値をいろいろ変更しながら、ブラウザで確認してね。

 さあ、少しだけ高度な話をしようか。

 上のスタイルはIE用に書いたんだ。さっきIE6とNetscape6は、標準仕様に近いって書いたよね。だから、Netscape6は、IE用のスタイルシートを適用しても問題ないよ(完ぺきじゃないけどね)。

 ところが! Netscape4はダメ。盲腸だよね、このブラウザ。どうしてくれようか。って、Netscape4用のスタイルシートを専用に用意するしかないんだよ。以下がそれ。

<STYLE TYPE="text/css">
<!--
BODY {
font-size : 1.2em;
margin-left : 18%;
line-height : 1.7em;
margin-right : 18%;
}
TH {
font-size : 15px;
;}
TD {
font-size : 15px;
-->
</STYLE>
Netscape用のスタイルシート


 こんな感じ。Windows版でしか確認していないけど、これで、IEとNetscape4の違いは、ほとんどなくなる。ただし、リンクの文字色は反映しないから外してあるよ(表組み部分のポイント指定は、文字サイズを変えなきゃ反映されるから入れてある)。具体的にどうなるかというと、下の図を見てね。

IE6 Netscape4.78


 どう? ほとんど一緒でしょ。ついにNetscape4を手なずけたぞ!

 でも、このスタイルをHTMLファイルに書いちゃったら、IEで見てる人はどうなるのかって? 答えは簡単だよ。文字サイズが、大きくなっちゃうのさ! 困るよねえ! 見てる人が、自分の意思で文字サイズを変更するのはいいけど、最初から、意図に反してデカイ文字が表示されちゃうのはいやだ。

 そこで、見に来てくれた人のブラウザを判定して、それに合ったスタイルシートを読み込んでもらうって方法を採用せざるを得ないんだ(だから、IE用とNetscape用を用意したんだよ)。本当は、こんなことやりたくないんだけど、この世にNetscape4が存在しているうちは、しょうがないんだよ。まあ、Netscapeユーザーはたった7パーセントだから、無視しちゃえばいいんだけどさ。というか、無視すべきなのかもしれない。もうNetscape4は、使わないでくださいって、ぼくらウェブページを作ってる者の切実な願いを表明するためにも!

 それでも、7パーセントの人を無視したくない人は、ここから先も読んでみて。

 おっと、その前に。ブラウザ判定をする場合は、外部スタイルシートを使うからね。下ごしらえをしておこう。上に書いたスタイルを、ページに埋め込むんじゃなくて、別ファイルにしておくんだ。これが「外部スタイルシート」って意味だよ。だからまず、上のIE用のスタイルとNetscape4用のスタイルを、それぞれ、テキストファイルにして保存しよう。ただし、拡張子はTXTじゃなくて、CSSだよ。IE用のスタイルには、「winie.css」という名前をつけて保存(いや、名前はなんでもいいんだけどね)。Netscape用は「nn.css」という名前で保存しておこう。ここで注意事項。この二つのCSSファイルは、表示したいHTMLファイル(ウェブページ)と、同じディレクトリに置いておかなきゃダメだよ。

 準備はオッケイ?

 ここから先は、JavaScriptというテクノロジーが必要になる。厄介だね。

 JavaScriptってなに?

 うーん。その質問に答えるには、ぼく自身、もっと勉強しないと自信がないな。ま、いろんな動きをウェブページに与えるプログラミング言語のことだよ。こいつのいいところは、大して(あるいはまったく)プログラミングのことを知らなくても、見よう見まねで、簡単なことならできるってことかな。

 というわけで、ブラウザ判定Scriptだ。ぼくは、大してではなく、まったくプログラミング言語に無知だから、人が書いたやつを拝借しよう。おっと、言っとくけど盗んだんじゃないよ。ネットを探してごらんよ。たくさん、自由に使っていいScriptが公開されてるから。そいつを借用して、自分の目的に合ったものに改良しちゃえばいいのさ。

 で、いろいろダウンロードして試したんだけど、なーんか、みんなうまく動かないんだよね。ぼくが試した中では、唯一、Steve Mulderって、オッサンの作ったやつだけだった。スティーブ、ありがとう!(ぜんぜん、知らない人だけど)。

 ところが、スティーブのオッサンがサイトで公開してるJavaScriptは、IEのバージョンと、WindowsとMacintoshを判定するものなんだ。IEとNetscapeを判定するものじゃなかった。うはあ。こりゃ改良が大変そうだ。世の中甘くないね。

 能書きはこんなところで、さっそく公開。

<SCRIPT type="text/javascript">
<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) < 4 )) {
document.write("<LINK REL=stylesheet HREF=\"ie3.css\" TYPE=\"text/css\">"); }
else if ((navigator.appVersion.indexOf("Mac") != -1)) {
document.write("<LINK REL=stylesheet HREF=\"mac.css\" TYPE=\"text/css\">"); }
else {
document.write("<LINK REL=stylesheet HREF=\"winie.css\" TYPE=\"text/css\">"); }
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) < 5 )) {
document.write("<LINK REL=stylesheet HREF=\"nn.css\" TYPE=\"text/css\">"); }
else {
document.write("<LINK REL=stylesheet HREF=\"winie.css\" TYPE=\"text/css\">"); }
// -->
</SCRIPT>


 どうだろう。これ、キチンと合ってるかな? あんまり自信がないんだ。とりあえず、ぼくの環境では動く。(プログラミングに詳しい方で、かつお暇な方は、上のScriptを、どうか検証してやってください。そして、もし間違いや、こうした方がもっとエレガントだよという箇所があれば教えてください)

 えーと、簡単に説明すると、このScriptで、まずIEのバージョンを調べて、IEが4以下だったら、ie3.cssというスタイルシートを読み込む(IE3はemが利かないから、その回避策だよ)。

 つぎに、Macintoshだったら、mac.cssを読み込む。白状すると、この部分はキチンと動くかわかんない。Macintosh持ってないから確認できないんだ。でも、一応、将来のために入れといた。

 で、IE4以上なら、winie.cssを読み込むんだ。winie.cssは、上で紹介した、IE用のスタイルシートのことだよ。

 さあ、いよいよ、Netscapeの判定だ。Netscapeが5以下だったら、nn.cssを読み込む。nn.cssは、上で説明したNetscape用のスタイルのことだよ。さて。Netscapeが6だったら、IEと同じだから、今度はwinie.cssを読み込むって設定だ。

 わかった?

 もしも、このJavaScriptをそのまま使うんだったら、言うまでもないけど、ie3.cssと、mac.cssも用意して、同じディレクトリに入れとかないとダメだよ。ぼくは、上で書いたIE用のスタイルから、フォントサイズの指定を外してたものを用意して、それを「ie3.css」と、「mac.css」とした。自分で確認できないから、フォントサイズはブラウザのデフォルト設定にお任せしちゃおうってことさ。それが一番安全でしょ?

 どうだった? ぼくがここ数日悪戦苦闘したホームページ作成のテクニックを紹介してみたけど、面白く読めた? まあ、後半は、われながら面白い話じゃないとは思うけど……

 最後に、白状しておくよ。このエッセイを書いたのは、じつは、ぼく自身が勉強したことを復習するためだったんだ。こうして文章にまとめると、頭に入るからね。とはいえ、興味のある人には、ちょこっとだけ参考になったんじゃないかな。なってたらいいなと願ってます。


≫ Back


Copyright © TERU All Rights Reserved.