ついに卒業！ framesetタグ

フレームセットを使っていた時の画面

私が本館と呼んでいる「撮り鉄ギャラリーのホームページ」は最新版のHTMLではサポートされていないframesetというタグ（制御コードのようなもの）を使っていました。

画面上部の鉄道名の索引を固定表示した上で、下の写真をスクロールできるのが便利で、私がホームページを始めた20年以上前は割と一般的だったと思うのですが、入口のindex.htmlがスカスカで検索エンジンにうまく中身を読んでもらえないなどの難点があって、昨今はすっかり使われなくなっていました。（今のところ最新のブラウザでもきちんと表示されてはいましたが）

<frameset rows="16.5%,83.5%" frameborder="NO" border="0">
<frame name="top" src="topindex.html" noresize>
<frame name="bottom" src="topphoto.html">
</frameset>

framesetを使っていた撮り鉄ギャラリーのindex.html

確かにファイル名の指定だけで掲載内容に関する記述はもない。

上が旧版のコードで、2行目のtopindex.htmlというのが画面上部にある鉄道名のある索引部分で、3行目で下半分に入る画面のファイルを定義しています。このbottom側のframeに各鉄道毎のファイルを表示させていた訳です。

新しい画面　同じように作ったのでほぼ同じなのは当然だが

赤矢印の部分の隙間とカーソル部分が以前とは違う

毎度の事ながら、CSSなど数年に一度しか触らないので、以前のものを見ても「これなんだっけ」から始まるものも多い訳ですが、そこはいろいろ艱難辛苦？　古い参考書を眺め、ネットのあっちを調べ、こっちを調べしながら、ようやく上部の鉄道名索引と左部の撮影区間の索引を固定し、かつ右側の写真部分がスクロールする･･･という目的を達成できました。　

苦労した割にはCSSのコーディングの変更箇所は僅かで、基本は全ての区分を position: fixed; で固定し、右側の本文部分だけは height: 80vh; で高さを規定した上で overflow: auto; としてスクロールするようにしただけです。　但しframesetのように上部の索引を一つのhtmlで済ますことは出来なくなったので、鉄道毎に準備した全てのhtmlにこの索引のテーブルを付加しています。