ホームページリーダーを使って、自分のページを表示したとき、まず感じたのは、各ページの先頭にあるサイト内のナビゲーションバーが、ウザイなということです。テキスト・ブラウザ Lynxを使うときも同じように感じます。
私は、自分のサイトのどのページからも、サイト内のすべてのページへ移動できるように、各ページの先頭にナビゲーションバーを置いています。一度、インデックス・ページに戻ってから、他のページへ移動するのが、自分でも面倒だと思うからです。ただ、構造を記述するというHTMLの原則から言えば、ページの表示部分の先頭にはh1が来るべきです。
なにより、ホームページリーダーを使うとき、ページを移るたびに、同じサイト・ナビゲーションを読み上げられるのは、正直に言って、辟易させられます。また、Lynxの場合、<head>内に、ナビゲーション情報を記述しておけば、
といった、基本的なナビゲーションが表示されます。結果的に、それともダブル事になりますので、よけいに煩わしく感じます。こうした機能は、iCabとか、Mozillaといった、最新の視覚表示用ブラウザでも実装されています。
参考までに、
<head>
内の記述の仕方を書いておきます。
<link rel="start" href="ドキュメントの最初のページのurl"> <link rel="index" href="ドキュメントの索引のページのurl"> <link rel="prev" href="ドキュメントの前のページのurl"> <link rel="next" href="ドキュメントの次のページのurl">
Mozillaのリリース・1.0では、この機能（サイトナビゲーションバー）は、除かれるようです。
Mozilla 1.1 で復活しました。
こうした問題は、スタイルシートを使えば、スマートに解決できます。例として、少し遊んでみます。 Opera、 Mozilla、 Netscape 6 といったウエブ標準の実装が進んだ最新のブラウザでは、このページを表示しているウインドウの左下に、常に
と表示されているはずです。もちろん、リンクとしても機能しています。これは、 HTML としては、ページの最後部に書いてあります。スタイルシートによって、常にウインドウの左下に表示されるようにしてあります。 HTML とスタイルシートのコードは以下の通りです。
<div id=#jumptotop>
<a href=#top>
▲ 先頭へ
</a>
</div>
/* stylesheet type=text/css */
div#jumptotop {
position:fixed;
top:90%;
left:1em;
z-index:0;
font-size:0.8em;
}
id属性の識別子#jumptotopは、お好きな名前を付けてください。
h1に、
<a name=top id=top >とアンカーを設定して下さい 。
positionの指定は、
bottom:10%;とか、
bottom:1em;とするのが自然に思いますが、そうすると、なぜか、ネットスケイプでは動作しません。
これと同じ要領で、ナビゲーション部分を記述すれば、視覚レイアウトのスタイルシートが動作するブラウザでは、常にナビゲーション部分をウインドウの上部に表示させる事もできます。スタイルシートの適用されないテキストブラウザや、音声ブラウザでは、
HTML
で記述した構造部分に表示されることになります。ページの最後部か、h1タグの下か、それはドキュメントの形によって違うでしょう。ナビゲーションをウインドウの上部や、左側に常に表示する事は、別にフレームを使わなくとも、このようにスタイルシートで可能です。しかも、フレームを使った場合の、ナビゲーションの複雑化や、ブックマークの混乱といった問題もありません。
ただこのスタイルシートの機能は、マイクロソフト社のウインドウズ強制抱き合わせブラウザ（インターネット・エクスプローラ）では、その最新版（IE 6.0）でも機能しません。皆で考えた標準を、守り、育てることより、自分の独自拡張を標準化することに執着するこの会社の性格のあらわれでしょう。ただし、このブラウザの市場でのシェアは無視できませんし、スタイルシートを使っても、ユーザーのウインドウの一定部分を占有することになるという意味では、フレームと同じです。そうした意味もあって、この方法を採用はしていませんが、少なくとも、フレームを使うよりは、はるかにマシではあると思います。
ウインドウの上部にナビゲーションバーをスタイルシートを使って付けました。そのため、『ページの先頭へ』は、固定の表示に戻しました。position:fixedを、２ヶ所以上使うと、Windows版の Mozilla 1.0 と Netscape 7.0 では表示が乱れたからです。
上記の設定しばらく続けて、結局止めました。 Mozilla 、 Netscape 6 はもちろん Opera でも問題なく表示されたのですが、 Windows 強制抱き合わせボロブラウザ・5.5、6.0では、このスタイルシートが効かないだけでなく、一部のページではロゴ画像が飛んでしまいます。ウインドウサイズをマウスで変えたりすると出てきますので、CSSのwidth指定におけるこのボロブラウザのバグによるものと思います。ただ、再現条件が特定できず対処方法も見つからないので、仕方なく止めました。なかなかすっきりとカッコ良かったと思うのですが残念です。少し前までは、Netscape Navigater 4.7 のCSSバグに悩まされたのですが、今やIE がその足を引っ張っています。これを使い続ける意味ってどこにあるのでしょう。（2002年10月7日）
2002年5月10日
