HP.制作支援?

中程のコントローラーでBGMをお聴きになれます。

HP.を作る上でのヒントがここにはいっぱい? んなわけはあるはずない。
で、HTMLやタグ講座なんてのはよそ様でいっぱいやってるのでそちらにお任せするとして、実はブラウザ(インターネット閲覧ソフト)によって表示の仕方に差があったりするわけで、HP.制作者の意図どおりの閲覧がされているとはかぎらない。が、その割に制作者自身は以外とそのことに無頓着な場合が多いのはどうして…。
ということで、ブラウザによる表示の比較なんぞをちょいとね。
なお、ここでは基本的にMacでの話を中心に進めているので、Winについては特に触れてはおりません。あしからず。また表示解像度によってはレイアウトが崩れる場合もありますのであわせてご了承を。
*Safari(サファリ)はMac独自のブラウザで、Mac OS X 10.2.8以降でサポートされている。IE.はInternetExplore(インターネットエクスプローラー)の略称。そのほか用語について詳しくは PC雑学事典 で?

- Menu -
ブラウザによって
見え方が違う?
装飾文字は
つかえない?
BGMを
つけるなら
JAVAは
有効?
画像にも
フォーマット?
小技も
いろいろ…
タイトルをクリックするとテーマのところにとびます。

Safariで表示したOSAKA-STYLE (左)。
ウインドウサイズを同じにしていてもブラウザによって微妙に表示が違ったりする。
小さい方は上からIE5.2.3、Firefox 1.0.7、Opera 8.5。 クリックすると大きな画像で見れます。


ブラウザによって見え方が違う?
人気タグのMARQUEEを使ったキリ番ボードもブラウザによって見え方がずいぶん違う。
画像は左から、
IE.5.23、Netscape7.1、Firefox、safari1.0。

IE.5.23の場合はMARQUEEで指定した縦枠の長さより入力された行幅を優先するらしく、全幅分の枠ができる。
またSafariの場合、MARQUEEタグを認識しないのでつぶれたテーブルだけが表示される。なお、ver.1.2以降はNetscapeなどと同様にMARQUEEタグを認識できるようになった。

なおNetscape(日本語版)はNetscape日本
FirefoxはFirefox Centralで、ダウンロードでき、それぞれにMac用、Windows用がある。

サンプルは Pia's WEBSITE さんより頂きました。

Topへ


装飾文字は使えない?
HP.を作る上で、タイトルなどをHTMLタグによって装飾する場合、基本的にタグによる文字装飾ができるのはIE.5.5以上で、Netscapeなどでは対応していない。つまり、Macの場合はIE.5.23で、それ以降はMicosoftがサポートしていないので、SPAN style='fontや、font style= のタグにより指定された立体文字や影付き文字などの装飾文字はくずれて見える。

なお左の画像はSafariで表示したもの。サンプルは みーLove志乃姫 さんより頂きました。

また、通称虹色フォント(と呼ぶらしい)文字装飾もブラウザによっては効果の違いがある。

画像は上からIE.5.23、Netscape7.1、Firefox、Safari。

サンプルは、Pia's WEBSITE さんより。

Topへ


BGMをつけるなら
HP.上にMIDなどの音楽をつける方法もいろいろあるけれど、これもIE.でのみ有効なタグの場合はNetscapeなどでは聴こえない。Bgsound src="音源のURL" Loop="流す回数" = IE.でのみ有効。(流す回数を-1にすると連続再生)
このページの場合は、(新谷良子「Wonderful World」)
EMBED src="音源のURL" autostart="false" loop="false" height="20" Width="150" volume="30"

コントロールパネルを表示しない場合は
height="20" Width="150" (パネルの大きさ) の所を hidden="true" に。
※autostartの所をtrueにすると自動演奏。loopの所をtrueにすると連続演奏になる。また、volume="数字" は再生の際の音量を指定(なくても可)できる。
なお、音源についてはMID以外の.mp3(MP3)や.m4p(MP4=AAC)なども使えるけれど、MP4の場合は Windows media Player(IE.5.23+Quick Time)では再生できない。また、MIDの場合にもGM音源とVSC音源があり、VSC音源の場合はMID再生の環境によっては正しく再生されないことがあるとか。
ところでMIDなどによるBGMを聴く際のプラグインソフトとして、MacではQuickTime、Winの場合はWindows Media Playerがそれぞれデフォルトで用意されているけれど、QuickTimeの方がWindows Media Playerよりも読み込みがいいとのうわさも…。Win用もありこちらからダウンロードできるのでWindows機の方もいかが?。
余談ながら、gaiax系のコミュニティサイトでBGMを付ける時は、外部サイトに音源を置いてリンクさせる必要があるけれど、geocitiesからの場合はデータサイズが大きいとブラウザによってはうまく読み込めない場合がある。また音声ファイルをアップロードする場合、ホームページサービスが用意しているアップローダーでは、サイズやファイル名に制限があるのでFTPソフトを使ってアップした方が手っ取り早い。
Topへ


JAVAは有効?

タイトルなどでよく使われるJavaFlashもプラグインソフトのFlash PlayerのVersionによって表示の仕方が違ったりする。

←画像は、上がFlash Player7で、下がFlash Player6。
(違いを分かりやすくするために、色合いを強調してあります。)

なお、最新のFlash Playerは ここで ダウンロードできます。
(OSによっては未対応の場合があり。)

サンプルは、 pearl さんよりいただきました。


また、JavaFlashもBGMと同様に外部サーバーからのリンクの場合は、ブラウザの違いによって読み込みに差が出る。

←左は、上からSafari1.0、Fierfox、IE.5.23。

読み込みの良さではSafari1.0(Safari 1.2以降のバージョンでは下のFirefoxと同様に読み込めない)。Fierfoxの場合、形は読み込めるものの映像にならない。で、IE.5.23にいたっては、データそのものを読み込めない。
またWindowsの場合も、IE.6.0では問題はなく読み込めるけれど、Netscape 7.1では左のFirefoxと同じ状態になる。ということで、これについてはJAVAFlashを表示するHTMLタグがIE.でしか認識しない。ということもあるのかもしれない。

なお、これらのことは個々のインターネット環境やパソコンの性能なども関係してくるので一概にはいえない(検証の際のネット環境はADSL 12MB=公称)けれど、リンク先を外部サーバーにする場合はBGM同様それなりに注意が必要かも。

サンプルは、pxu14733 さんよりいただきました。

Topへ


画像にもフォーマット?



画像をWEBサイトに表示する場合のデータ量を減らすための圧縮の方式(フォーマット)にもいろいろあり、ブラウザよってはそれぞれの特徴を活かした表示がされないので注意が必要。

←画像は上から、
jpg =ジェイペグ。色数に関係なく劣化によって圧縮。写真などに向くが背景が付くために透過画像にはならない。

png =ピング。減色によって圧縮。256色以下のPNG8と、フルカラー(1670万色)のPNG24があり、PNG24(中上)の場合、WindowsのIE.では表示色の制限(256色)のためかうまく表示できない。また、PNG8(中下)では色数に制限があるため微妙な表現の画像には向かない。

gif =ギフ、ジフ。256色以下、減色によって圧縮。PNG8と同様に微妙な表現ができない。

ほかにも、Windows標準のbmp=バンプ(ビットマップ)方式があり、Macでは表示できないという話しがあったらしいが、現在は問題なく表示できる。

ちなみに、おなじWindowsでもFirefoxの場合は256色の制限はなくMacのSafariなどと同様に表示される。WindowsのIE.との表示の違いは、こちら で。
なお、時期 IE.の新バージョン(7.0)では表示色の制限がなくなるというハナシ。

Topへ


小技もいろいろありますが…

ホームページをつくる時に、HTMLタグによるちょっとした小技を使うたのしみもあったりするけれど、これも閲覧する側のブラウザによってはその効果が現れないこともある。

オンマウスでリンクに説明文つけることで、リンクページの内容をより分かりやすくすることができるといった小技も…。

a href="URL" title="説明文" 〜

上のFirefoxではリンクの説明文が認められるけれど、下のSafariには効果なし。確認した範囲ではInternet ExplorerはもちろんのことNetscapeでも表示されるようなので、Safariだけ特別ということかもしれない。ただし、この現象はSafariの旧バージョン(1.0)でのことで、ver.1.3以降はNetscape同様表示されるようになった。
画像はこのサイトのトップページのメニュー部分。よろしければご確認を。HOME からどうぞ。

なお、リンクに説明文をつけるのにScriptタグを使った方法もあるが、こちらはInternet ExplorerとOperaでしか認識できない。


背景を固定する場合も、HTMLタグによってはブラウザの違いで効果がでない場合がある。
body background="画像URL" bgproperties="fixed"
で、指定した場合。(下の画像は左がFirefoxで右がSafari)

左のFirefoxでは固定されずにそのままスクロールされる。

これはFirefoxだけでなくNetscapeも同様に固定されない。
<STYLE TYPE="text/css">
<!--
BODY {background-image:url("画像URL");background-attachment:fixed;}
-->
</STYLE>

Netscapeなどでも背景を固定するには、上のように指定。(なお、指定する際には<>の部分を半角で)

ファビコンなんぞを替えてみる?
HP.を開いたときにURLの前につく小さなアイコンのファビコン

これもいろいろ好みの画像を選んでのつけ替えも意外と簡単。
好みの画像(GIF、またはPNGのいずれかで16×16ピクセル程度)ができたら、
http://www.chami.com/html-kit/services/favicon/
に画像をアップするとファビコンをつくってくれる。
あとは、ダウンロード→解凍で出来たfavicon...というフォルダの中のfavicon.icoというファイルをHP.にアップし
<head>〜</head>の間に
<link rel="shortcut icon" href="favicon.ico">(指定の際には<>の部分を半角で)
というのを書き込むだけ。

Topへ



HOME