用語注記テンプレート(9)

 注釈を脚注欄に表示します。
 用語はspanタグで囲み、脚注欄はdivタグで作っています。
 フレームを使っていないのに、フレームのような効果の出るところが取り柄かと思います。タグを多用せず、シンプルなところも特長です。

  注釈1 ←マウスが通過すると、下の脚注欄に注釈を表示
  注釈2

 長い本文の途中でも、脚注欄への表示は変わりません。
 脚注欄は、スタイル・シートでウィンドウの下に表示するように指定しています。(bottom:0px)これを上に表示することもできます。(top:0px)
 なお、文章が長くなると、下の文は脚注欄の下に隠れますその動作のために、本文全体を<div>タグで指定したコンテナ(id="contents")に置き、それよりも脚注を手前に表示するという工夫をしています。
 その分、コンテナの中にdiv要素を入れ子にすることができません。段落を作るときは、pタグで段落を置き、段落間などはスタイル・シートで指定することになります。
 脚注欄は初め画像で作りましたが、後でdivタグで指定しました。見栄えを工夫するには画像を置くことも可能です。(その場合も、固定したdivisionに置き、z-indexで前面・背面の配置を指定するようにします。)
 その他、divタグを使ったページ作りはシンプルなのが長所ですが、JavaScriptでデータを取り出せないので、用語注記テンプレート(7)と同様に、語句の転記ができません。
これが注釈1。
長さをそれほど気にせずに書くことができます。
ただし改行が多くなると欄をはみ出してしまうので注意。
これが注釈2。
脚注が長くなるときは、脚注欄の高さを変更して調節します。