スタイルシート(Cascading Style Sheet)については「16.スタイルシートとHTML4.0」「17.スタイルシートの基本」の中で既に述べました。 特に後者では、従来の論理タグを用いた Web ページデザインに対して、全く同じようなデザインをスタイルシートで定義するとどうなるかを簡単に説明しました。 しかし従来のタグでは表現できなかったこともスタイルシートを使えば可能になるのであり、初心者が興味を抱くのもおそらくその点でしょう。

例えば上の題字のように、立体効果をねらった図案文字もその1つです。Internet Explorer 3.0 以上と Netscape Navigator 4.0 以上でほとんど同じように見えているはずです。 その他のブラウザ(Netscape 3.0x など)では立体文字は表現できないので普通の文字で表示しています。ですから以下は IE3.0 以上、Netscape 4.0 以上に当てはまる話だということをあらかじめ理解しておく必要があります。

スタイルシートが宣伝された当初から、この種の立体文字は知られていました。その頃スタイルシートをサポートしているメジャーなブラウザは Internet Explorer 3.0x だけだったので、スタイルシートによる立体文字の作り方で今知られているものは、大抵 IE 対応のものです。 例えば上の題字は、43ポイント大の文字を5重に重ね、文字色を少しずつ変えて立体効果を出しています。

<DIV align="center">
<DIV style = "color: #FFDD00; margin-top: 12pt;font-size: 43pt; font-family: MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</DIV>
<DIV style = "color: #FFAA00; margin-left: 3pt; margin-top: -50pt; font-size: 43pt; font-family: MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</DIV>
<DIV style = "color: #FF8800; margin-left: 4pt; margin-top: -50pt; font-size: 43pt; font-family: MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</DIV>
<DIV style = "color: #FF0000; margin-left: 5pt; margin-top: -50pt; font-size: 43pt; font-family: MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</DIV>
<DIV style = "color: #000000; margin-left: 6pt; margin-top: -50pt; font-size: 43pt; font-family: MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</DIV>
</DIV>

それぞれの DIV タグの STYLE に文字色、前の文字領域からの間隔、文字の左右へのずれ、文字サイズ及び字体を指定しています。 文字色は、段階的な変化を表すために16進数で表示した方が効果的です。注意すべきは、このように文字が重なる場合、前に書いたタグより後に書いたタグの方が上に表示されることです。 だから上の例では、一番最後に書いたタグ(文字色黒)が一番上に表示されています。タグ上では、一番最初のタグを基準として、以下のタグで margin-top や margin-left を指定しますが、後のタグほど上に表示されるわけですから、 2番目以降の margin-top はマイナスの値(-50pt)になっています。

タグは、ここでは DIV を使用していますが、P タグや FONT タグでも出来ないわけではありません。しかし、作り方がかなり違ってきます。タグを P や FONT に変えただけで、表示がまるで違ってしまいます。 自分でいろいろ試してみるのも良いでしょう。

Netscape も 4.0 になって Cascading Style Sheet をサポートするようになり、スタイルシートを表示できるWWWブラウザが増えました。 とはいえ、IE と Netscape のスタイルシートへの対応の仕方は、共通の部分もあるが、また相違する部分もあり、実際にそれぞれのブラウザで試してみないと思わぬ結果を招きます。 上の立体文字などは、その典型的な例で、上に示したタグのまま Netscape で表示させると、とんでもない形になります。

Netscape の場合、スタイルシートだけで立体文字を作ろうとすると、文字と文字がうまく重ならない、或いは表示されない文字がある、という結果になります。 ではどうすれば良いか。Netscape でも IE と同様の表示が出来ないか、という問い合わせを受けることがあります。これを書いているのも、そうした質問がきっかけです。

Netscape には、<LAYER> タグという秘密兵器があります。Dynamic HTML がそうであったように、スタイルシートで何か特殊なことをしようとするなら、Netscape では <LAYER> タグを応用した方がいいのです。 上の立体文字の場合、Netscape では次のようにタグを書くと、IE と同様の結果を得ることが出来ます。

<LAYER top = 59 left = 0><CENTER><SPAN style = "color: #FFDD00; font-size: 43pt">
<FONT face = "MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</FONT></SPAN></LAYER>
<LAYER top = 56 left = 2><CENTER><SPAN style = "color: #FFAA00; font-size: 43pt">
<FONT face = "MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</FONT></SPAN></LAYER>
<LAYER top = 53 left = 4><CENTER><SPAN style = "color: #FF8800; font-size: 43pt ">
<FONT face = "MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</FONT></SPAN></LAYER>
<LAYER top = 50 left = 6><CENTER><SPAN style = "color: #FF0000; font-size: 43pt ;">
<FONT face ="MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</FONT></SPAN></LAYER>
<LAYER top = 47 left= 8><CENTER><SPAN style = "color: #000000; font-size: 43pt ;">
<FONT face ="MS明朝, 平成明朝, RyuminLightKL">立体文字の作り方</FONT></SPAN></LAYER>

注意しなければならないのは、LAYER タグで指定した top はページ上端からの絶対値だという点です。だからこれを適切に指定しないと他の文章などの上に重なってしまうので、用途に応じて調整する必要があります。 逆に left は一番最初の親 LAYER からの相対値であることがわかります。また LAYER は、ページ上に <CENTER> のようなタグがあっても、これを無視するので、 LAYER の中で個々に <CENTER> タグを指定しなければなりません。 また字体は <FONT> タグの face で指定しています。スタイルシートの font-family で指定すると、Netscape ではうまく行かないようです。

なお、Netscape のバージョン 5(Mozilla 0.7 など)やバージョン 6(Netscape 6)が公開されていますが、 こちらは IE と同じくスタイルを直接定義した方が具合がよいようです。但し IE の場合とはマージンの取り方が微妙に違います。

<div style="color:#FFDD00;margin-left:2pt;margin-top:12pt;font-size:43pt;font-family:MS 明朝, 平成明朝, RyuminLightKL">立体文字の作り方</div>
<div style="color:#FFAA00;margin-left:3pt;margin-top:-44pt;font-size:43pt;font-family:MS 明朝, 平成明朝, RyuminLightKL">立体文字の作り方</div>
<div style="color:#FF8800;margin-left:4pt;margin-top:-44pt;font-size:43pt;font-family:MS 明朝, 平成明朝, RyuminLightKL">立体文字の作り方</div>
<div style="color:#FF0000;margin-left:5pt;margin-top:-44pt;font-size:43pt;font-family:MS 明朝, 平成明朝, RyuminLightKL">立体文字の作り方</div>
<div style="color:#000000;margin-left:6pt;margin-top:-44pt;font-size:43pt;font-family:MS 明朝, 平成明朝, RyuminLightKL">立体文字の作り方</div>

HTMLに上の3種のタグを貼り付けて、IE と Netscape で表示のテストをしてみて下さい。どれか1つの方法でしかうまく表示できないのがわかります。 でもページを見に来る人は、どちらのブラウザを使用しているかわからないので、どちらか一方だけでは困りますね。また、Netscape 3.0x のように立体文字を表示できないブラウザのことを考える必要もあります。 それに対処するためには、例えば次のように JavaScript でブラウザとそのバージョンを取得し、変数 check に IE 3.0 以上なら1、Netscape 4.x なら2,、Netscape 5.x 以上なら3,それ以外なら0を入れます。

<SCRIPT Language="JavaScript">
<!--
check=0;
Br = navigator.appName;
Ver = navigator.appVersion;
Ver = Ver.substring(0,1);
if (Br == "Microsoft Internet Explorer" && Ver >= 3) check = 1;
else if(Br == "Netscape" && Ver == 4) check = 2;
else if(Br == "Netscape" && Ver > 4) check=3;
else check = 0;

そして以下のように、check が1ならIE 用のタグを、check が2なら Netscape 4.x 用のタグを、check が3なら Netscape 5〜6 用のタグを、0なら立体文字を使用しない通常のタグを表示するように設定することが考えられます。

if(check == 1) document.write('(IE 用のタグ)');
else if(check == 2) document.write('(Netscape 4.x 用のタグ)');
else if(check == 3) document.write('(Netscape 5〜6 用のタグ)');
else document.write('<font size=43 face="MS明朝,平成明朝,RyuminLightKL">立体文字の作り方</font>');

もう1つは、あらかじめ3種類のページを用意しておき、同じ方法でブラウザ情報を取得したあと、<BODY> タグの onLoad イベントで、check が1なら IE 用のページに、2なら Netscape 用のページにジャンプさせるようにする方法です。 これは3種類のページを用意しなければならない面倒さはありますが、JavaScript に対応していないブラウザでは何も表示されない、という問題にも対処できる利点があります。




次のトピックは「スタートページを作ろう」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで