「擬似フレーム（疑似フレーム）」の作り方（IE6 にも対応、スタイルシート(CSS)、JavaScript使用）
- 〜
- 〜
（上メニューがあるページのみ）- 〜
という要素のみを書きます。それぞれ、 ヘッダバナー、左メニュー、上メニュー、本文部分に相当し、 フレームのように動作します。
2. スタイルシートを用いて以下のことを指定します。
- ブラウザのスクロールバーを消す。
html{ overflow: hidden; } - body 領域の内寸をブラウザの内寸に一致させる。
html{ height:100%; } body{ height:100%; width: 100%; } - #lt, #main に、 内容が領域内に表示しきれなくなったらスクロールバーを表示するように指定する。
{ overflow: auto; } - #header, #lt, #headmenu, #main に、 { position: absolute; } を指定する。
（これにより、位置がページ上での絶対座標で指定できるようになる。 IE6 も対応可。）
3. ページロード時 (onload) 及びページサイズ変更時 (onresize) に、 JavaScript を用いて、ブラウザの表示領域の内寸を取得し、それを元に
PC上でファイルを共有する方法
- 〜
- 〜
（上メニューがあるページのみ）- 〜
という領域の適切な大きさと位置を計算し、それぞれに指定しています。
個々の部分の詳しい解説を以下に記載します。
ページの作りは、以下に示します。（抜粋）
まず、 HTML ファイルのはじめの部分です。
HTML の開始部分です。特に他のページと違うところはありません。 このサイトでは、ページを読み込む時点でページの各部分の表示位置が必ずしも正確ではなくても、 後から JavaScript で正しい位置に動かします。 ですから、 loose.dtd を指定しても、特に問題はありません。 （strict の方を指定してもでも全く問題はありません。）
次は、ヘッダ（ 〜 ）のはじめの部分です。
この部分は、全ページ共通の各種外部スクリプトファイルの読み込みと、 ページ個別のコードです。
次は、ヘッダ（ 〜 ）の続きと、 全ページ共通のヘッダのバナーとメニューの部分です。
編集後記
この部分では、ヘッダのバナーと左メニューを出力するスクリプト （"header.js", "lt.js"）を読み込んでいます。
と
、 と
、 、 と
で囲まれた部分は、 それぞれ一つのフレームの様に動作します。これらも全ページ共通です。それぞれの部分で読み込んでいる "header.js" と "lt.js" は、 外部 JavaScript ファイルなので、全てのページから同じものを読み込んで使用することが出来ます。 左メニューの中には、マウスカーソルを持ってくると背景が変わるなど、 JavaScript で動作する部分もありますが、これも JavaScript で出力しています。 つまり、 "lt.js" には、 JavaScript を書き出す（ = document.write() ） JavaScript が書いてあります。こちらについての解説は、 自動生成メニューの作り方の方に書きました。
次は、ページの最後の部分です。
サイトマップ
0 コメント:
コメントを投稿