擬似フレーム

◆解説

このスクリプトは１つの HTML をフレーム構成に似た表示形式にするスクリプトの例です

通常、表示する内容が多い場合はフレーム構成にしますが、「JavaScript の食えない事情」のように規模やメンテナンス性の観点で１つの HTML にする場合も少なくありません

このような構成のページでは目次から該当の項目にジャンプすると、他の項目に移動する時にはページの先頭に戻る必要があるのが難点です

このような場合には「MozTips」のように目次部分を position:fixed; な構成にすれば良いのですが、 IE では動作しなかったりします

このスクリプトは position:fixed; の代わりに overflow と height を制御することで擬似フレーム表示にするものです

◆HTML構成( ３分割の例 )

<body>

<div class="pane" id="title">
タイトル部分の要素
</div>

<div class="pane" id="contents"><div class="content">
目次部分の要素
</div></div>

<div class="pane" id="body"><div class="content">
本文の要素
</div></div>

</body>

この例はウィンドウ上部にタイトル部分で、その下の領域を左右に分割し、左が目次部分で右を本文と想定しています

◆スタイル


/* 各ブロックをウィンドウ枠に合わせる */
body     { margin:0 0 0 0; padding:0 0 0 0; }
.pane    { margin:0 0 0 0; padding:0 0 0 0; }
/* 各枠の内容領域を設定する */
#title   { padding:1em; }
.content { padding:1em 0.5em 1em 0.5em; }
/* 各ブロックをレイアウトする */
#contents{ position:absolute; left:0px; width:10em; }
#body    { margin:0 0 0 10em; }
/* 必要なら本文の最低限の幅を設定する */
#body .content{ min-width:25em; }

本来なら目次と本文のレイアウトは目次領域( id=contents )に幅( width )と左寄せ( float )を指定したいのですがブラウザ毎にレンダリングが異なるため、目次領域には絶対配置( position:absolute )を、本文領域( id=body )は左マージン( margin )を使用しています

◆スクリプト

この toggleStyle 関数は panes 配列で定義された id名を持つ要素の設定状態を反転させ、その結果の設定状態を呼び出し元に戻します

*1 ブラウザのウィンドウに関する情報は W3C の仕様にはありませんが、仕様範囲外なので準拠していなくってもショーがないです(笑)

*2 IE のスクロールバー制御は趣旨とは外れますが、あまりにもカッコ悪いので...

◆注意とヒント

●このスクリプトは IE5.5, IE6, Mozilla1.5, Opera7.23( 以上 Windows ), Safari1.2( 以上 Mac ), Opera7.23( 以上 FedoraCore ) で確認していますこれより古いバージョンのブラウザでは正常に動作しないかもしれません

●IE 以外のブラウザでは擬似フレーム表示の際、スクロールバーが表示されていても「PageDown」キーなどのページ操作はできません

●Opera, Safari では擬似フレーム表示状態では目次部分のクリック操作をしても本文の該当部分にジャンプしません

●このスクリプトの様に、スタイルの変更を該当する要素の style オブジェクトで行う方法は media type の指定方法がないので印刷時( @media print )にも適応されるため、文章全体を印刷することができません
この意味で初期状態では擬似フレーム表示にすることは避けた方が良いでしょう

●擬似フレーム表示状態でも印刷可能にするためには変更内容をスタイルシート( STYLEタグ )で実現する必要がありますが IE ではスタイル要素の変更をサポートしていないので Mozilla のみでしか有効ではありません

一応、コードを示しておきます ( 実際にはブラウザ判定をしないと IE ではエラーになります )