魅力的なホームページとは
インターネットやイントラネット上に個人ホームページを開くことによって、今や誰でも自由に情報発信ができる時代となった。しかしホームページを開いたはよいが、内容(コンテンツ)が一向に更新されないページは実に多い。何を情報発信したらよいか迷っているのであろう。一方、更新されてはいるがその内容はごみ情報ばかりで読む価値のないページは更に多い。
どのようなページが優れているのか評価することは、個人の主観が入るので非常に難しい問題である。しかしページの“見てくれ”ではなく“内容”の方が重視されるべきだという主張に異論を差し挟む人は少ないであろう。
最近私が気になっているのは、アニメーション画像やJavaアプレットなどを用いて派手に飾り立てているページが多いことである。飾り立てること自体はそれはそれで良しとしよう。問題は、そのようなページだけが高い技術を駆使した優れたページであるとみなす世の中の風潮の方である。
確かに、何の飾りもないテキスト情報だけの羅列では余程内容が魅力的でない限り誰もそのページを再訪しようとは思わないであろう。したがってある程度は、アクセントを付ける為の装飾は必要であろうと思うし、そのための手段の一つとしてダイナミックな画面構成が求められるのは至極当然のことと言えるであろう。
しかし私は自分の場合に限って言えば、ダイナミックなページにするためにJavaアプレットを使おうとは(当分の間?)決して思わない。そういうページを開こうとすると“Javaを起動中です”などという表示が出て長々と待たされることが多いからである。ダイナミックな画面を構成するのにJavaアプレットなど使わなくても、HTML言語の範囲内で十分に実現可能だと信ずるからである。そこで本稿では、HTMLの新しい機能を用いて魅力的なページを作る方法について紹介することにしたい。
HTML 4.0
HTML言語に従来からある各種の機能を駆使すれば、ダイナミックで魅力的なページを構成することは可能であるが、どうしても沢山のファイルをダウンロードして画面の一部を何度も描き直さなければならなくなり、結局は“Javaを起動中です”の場合の使い勝手とたいして変わらないことになりかねない。ところが最近知ったのだが、HTML言語の第4.0版では、かなり魅力的な機能が導入されていて、今まで私がHTMLの記述で不満に感じていたことの多くが解決されようとしている。ここではその一部の仕様を例とともに紹介する。
ただ残念なことは、これらの機能はまだ一部のブラウザでしか利用できない点である。たとえば Netscape 4.5(NS)ではまだ使えないが、Internet Explorer 4.0(IE)では一部の機能が実現されている。ここで紹介する機能が実体験できないブラウザ(NSとIEの古い版)の利用者のために、以下では「NSでは‥‥」として別ファイルで参照できるようにした。
インラインフレームの機能
従来のフレーム機能に加えてインラインフレームの機能が追加された。フレーム機能というのは、画面をボーダー(border)と呼ばれる枠で区切って複数の表示領域に分ける機能である。それぞれの領域にスクロールバーを付けることもできる。インラインフレームでは、これらの枠にイメージを挿入するときのような感覚で各種の情報を挿入表示できる点が特長である。以下のようにインラインフレームは iframe というタグを用いて記述する。
<iframe name="フレーム名" src="xxxxx.htm" frameborder="0" .... >
(ここには、インラインフレーム機能をサポートしていないブラウザ
の場合に、警告の意味で表示したいメッセージなどを書くことができる)
</iframe><p>
<a href="xxxxx.htm" target="フレーム名"> ***タイトル等*** </a>
href=で指定したファイル xxxxx.htm が、target=で指定されたインラインフレーム上に表示される。iframe タグをサポートしていないブラウザでは、<iframe>と</iframe>の間に示した文が替わりに表示されるので警告として利用することができる。
******************** コーディング例 ********************
<html>
<head>
<title>Inline Frames</title>
</head>
<body BACKGROUND="images/recbg.jpg">
<div>
<h1 align="center"></h1>
<p>クリックして、右側の窓から表示先を選択してください。</p>
<iframe name="branch" src="fnavi.htm" width="350" height="190" align="right" frameborder="0">(あなたのブラウザは残念ながら in-line frame の機能をサポートしていません。<br>
表示された様子を知りたければ<a href="images/pattern1.jpg">ここ</a>をクリックしてください)</iframe>
<p>
・<a href="fnavi.htm" target="branch">私め</a> <br>
・<a href="fnavi1.htm" target="branch">ソフトウェアの法則</a> <br>
・<a href="fnavi2.htm" target="branch">素朴な疑問</a> <br>
・<a href="fnavi3.htm" target="branch">私の作文作法</a> <br>
・<a href="fnavi4.htm" target="branch">素歩人徒然</a> <br>
・<a href="fnavi5.htm" target="branch">その他 もろもろ</a> </p>
・<a href="fnavi6.htm" target="branch">メールアドレス</a> </p>
<p>
・<a href="http://www.hi-ho.ne.jp/skinoshita/cshunhp.count" target="count">最新カウンター値 </a>
<iframe name="count" src="http://www.hi-ho.ne.jp/skinoshita/cshunhp.count" width="60" height="50" align="center" frameborder="10">(あなたのブラウザは残念ながら in-line frame の機能をサポートしていません)</iframe>
<br><br><br>
</p>
</div>
</body>
</html>
********************************************************
この表示結果は以下のようになる。
ただしNSでは正しく表示されないのでここをクリックして確認してください。
例:インラインフレーム
********************************************************
Inline Frames