２００５年６月 スタイルシートで擬似フレーム構造をつくる
フレームタグはあまり好きじゃないのだ。
フレームセットファイルがフレーム要素ファイルを呼んでいるだけなので
ソースがすぐには見えないし、あとからフレーム構造にしようと思った時
移行がめんどくさい。
フレームセットファイルに元のファイル名をつけるべきなのか、
フレームセットファイルは新たなファイル名をつけるべきなのか。
でもメニュー部分をスクロールせずに固定させておきたいと前から思っていたので、
スタイルシートの工夫で擬似フレームが出来るなら万々歳だ。
さっそく擬似フレーム構造のスタイルシート
<style type="text/css"><!--
body {
background-color: #ffffff;
color: #000000;
font-size: 10.0pt;
padding: 0px;
overflow: hidden; ←ここで外のスクロールバーを消している
}
.item {
font-size: 10.0pt;
font-weight: 600;
border-style: solid; ←文字に外枠をつけている
border-width: 1px;
color: #80a0a0
}
a:hover { background-color:#35ffff;} ←カーソルが上にいった時のバックグラウンドの色
#menu {
position:fixed; ←スクロールしない固定ブロック
left:0;
top:0;
width:100%;
}
#mainwindow {
border: solid 1px #808080; ←ここはわざとわかりやすいように枠線をつけた。
width: 98%;
height: 90%; ←この割合は好みで変わるだろう
padding: 0px;
position:absolute; top:40px; ←固定ブロックの下にくるように。
overflow: auto; ←メインブロックでのスクロールを自動にした
}
-->
</style>
</head>
<BODY>
<div id="menu"> ←まずメニューブロックを宣言する
<span class="item"><a href="../index.html">HOME</a></span> <span class="item">
<a href="whatnew.htm">更新履歴</a></span> <span class="item"><a href="../cinemaTop.htm">
CINEMA</a></span> <span class="item"><a href="../bookTop.htm">
BOOKS</a></span> <span class="item"><a href="../mihaTop.htm">MIHA</a>
</span> <span class="item"><a href="../previous.htm">書きっぱなしの部屋</a>
</span>
</div>
</pre>
<div id="mainwindow"> ←ここからメインブロック
４月 １日以降の日記ページをテストにつかった。
<pre class="section">
あれこれあれこれと
これまでのページの内容のままでよい。
ページの上部のメニューは、上記のようにだらだらと一列に書き連ねた。（ここでは
便宜上改行しているが、本来は一行）
このださい書き方よりも横向きのリスト構造を使って書き直してもよいかもしれない。
このページの上のほうの「コンピュータ雑感へ」は、今まで縦書きだったが
今回は下のスタイルシートを利用して横書きにしてみた。
li , ul{
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}
このスタイルシートで出来上がったテストページはこちらにある。
後日に付け加え
現在、わたしのＨＰは残念なことにフレーム構造だ。
なぜかというと、このスタイルシート方式は、ウインドウズならば問題なく表示されるんだが、
マッキントッシュだとページ内のアンカーに上手くジャンプできないのだ。
そういうわけで、せっかくスタイルシートにしたのに、今は鼻つまみ者のフレームを
使っている。とほほ。。
さらに後日に付け加え
フレーム構造は便利な点が多いけれど、またノーフレームに戻した。
う〜むむ、すべてのファイルにメニューをつけたり、余計な手間とファイル容量を
必要とするノーフレーム。なんとかもうちょっとスマートに出来ないのかなあ