疑似フレームページの作成

１．概要

このページでは上段のタイトル・プルダウンメニューが本体をスクロールしても固定しているのがお判りかと思います
つまり、ＣＳＳ(スタイルシート)を使ってフレームと同じ機能を持たせた「疑似フレーム」で作成しています

一般に使用される「フレームページ」は下記のソース１のように
index_frame.html 、left.html 、right.html　の３つのファイルで構成されています。

■ ソース１ index_frame.html

ところが疑似フレームでは index.html 一つで作成できます
それではこの疑似フレームの作成ついて具体的に解説します

２．サンプル

まずサンプルをご覧下さい

　■　上段部分を固定
　■　左側部分を固定

何れも固定する部分は背景色を緑色で表示しています
右側にはスクロールバーが表示されます。このスクロールバーでページをスクロールしても緑色の部分は常に固定しています

３．スタイルシート(ＣＳＳ)の設定

３．１上段を固定

まず下記のようにスタイルシートを作成します
コピー・ペーストして　style_tate.css のファイル名で同じフォルダーの中に作成します
上段の縦方向サイズは１００ピクセルとします

■ ソース２ style_tate.css

/* 上段を固定 */

BODY {
margin: 0;
padding: 100px 0px 0px 0px ;　
/* 上段の縦方向サイズを 100 ピクセルとします */
}

* html body{
overflow: auto ;
}

div#Header_area {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
/* BODY で設定した100ピクセルの値をセットします　*/
background-color : #aaff66 ;　/*　背景色 */
}

* html div#Main_area{
height: 100%;
overflow: auto;
}

ｐａｄｄｉｎｇ　: 100ｐｘ 0ｐｘ 0ｐｘ 0ｐｘ ;
この値は左から　　上、右、下、左　です

３．２　左側を固定

下記は左側を固定したスタイルシートです。
コピー・ペーストして　style_yoko.css のファイル名で同じフォルダーの中に作成します
とりあえずは１５０ピクセルとします

■ ソース３ style_yoko.css

/* 左側を固定 */

BODY {
margin: 0;
padding: 0px 0px 0px 150px ;
/* 左側の横サイズを 150 ピクセルとします */
}

* html body{
overflow: auto;
}

div#Left_area {
position: fixed !important;
position: absolute;
top: 0;
left: 0;
width: 150px;
/* BODY で設定した150ピクセルの値をセットします　*/
height: 100%;
background-color : #aaff66 ;
overflow: auto;
/* メニュー等の行が多い場合はスクロールバーを表示する */
}

* html div#Right_area{
height: 100%;
overflow: auto;
}

ｐａｄｄｉｎｇ　: ０ｐｘ 0ｐｘ 0ｐｘ１５０ｐｘ ;
この値は左から　　上、右、下、左　です。ここでは左側を１５０ｐｘに固定します

４．htmlの書き方

ｈｔｍｌの書き方は下記の通りです
スタイルシートは
<LINK rel="stylesheet" href="style_tate.css" type="text/css" id="print_style">
のように設定します
id="print_style" は印刷設定の時に使います

■ ソース４ index.html

<LINK rel="stylesheet" href="style_tate.css" type="text/css" id="print_style">
</HEAD>
<BODY>
<DIV id="Header_area" align="center">
　上段に表示するプログラムを記述します
　ただし高さは１００ピクセル以内
</DIV>

<DIV id="Main_area" align="center">
　　下段に表示するプログラムを記述します
</DIV>
</BODY>

５．印刷のためのスタイルシート

すでに経験されているようにフレームを使用したページのすべてを印刷できません
この疑似フレームでも同様です
解決方法は「疑似フレーム」を解除した印刷用のスタイルシートを準備します
これを style_print.css としてとりあえず同じフォルダーに保存します
下記は印刷用のスタイルシートです。疑似フレームの部分を書き換えています

■ ソース５　style_print.css

/* 印刷用のスタイルシートの一例 */

BODY {
margin: 0;
font-family : "ＭＳＰゴシック", sans-serif;
background-color : #f0f0f0 ;
color : #003300 ;
font-size : 11pt ;
}

実際には固定部分に「印刷」のリンクを設定し下記の部分を実行させます
印刷終了後は元のスタイルシートに書き換えます

function page_print(){
//-- スタイルシートの変更
document.getElementById('print_style').href = "style_print.css"
//-- 印刷
print()
//-- スタイルシートを元に戻す
document.getElementById('print_style').href = "style_tate.css" ;
}

具体例はサンプルのソースで確認してください

５．まとめ

閲覧者にとっては非常に親切なページとなるので、どうぞ活用してみて下さい

2011/05/24　

▲