|
初級篇★ページ作りの基礎知識1. HTMLを書いてみよう VOL6.フレームページを作ってみよう その1.画面の分割と表示ファイルの指定
フレームページについては、もう皆さんよくご存知だと思いますが、ブラウザをいくつかの枠に分割して、それぞれの枠に別々のページを表示出来るようにしたもので、商用のサイトでは特によく使われている手法ですね。では、まずこちらのSample1をご覧になってみて下さい。これは、Magazine Workshopのトップページをフレーム仕立てにしてみたものです。
フレームページを使うには、スクリプトの冒頭部分で宣言するドキュメントタイプを、フレーム用に書き換える必要があります。本当は、どのスクリプトにもこのドキュメントタイプを宣言する必要があるのですが、作成ソフトによっては自動で書き込んでくれないものがありますので、とりあえず理屈は抜きにして、フレームを使う場合は冒頭に以下のスクリプトを加えるようにして下さい。これについて詳しくはColumn３「ドキュメントタイプについて」でご説明しています。 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN" また、作成ソフトによっては、HTML編集画面にせっかく書き込んでも、勝手に値が書き直されてしまって自由にフレームの分割を指定できないものがあります。こういう時は、もう仕方がないのでメモ帳などのテキストエディタを使って、全て自分で書いてしまいましょう。フレームの分割そのものを指定するスクリプトは下でもご覧になれる通り、それほど複雑なものではありません。作成ソフトを使わないでHTMLを書く手順については、Column６ を参考にして下さい。
ではSample1のソースですが、まずマーカーで印を付けた部分に注目して下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" <html>
通常のページでは、<head>〜</head>と<body>〜</body>が１ページに1セットづつあるのですが、フレームページでは、<body>タグの代わりに<feameset>〜</frameset>を使って、画面を分割してゆきます。 <FRAMESET COLS="26%,74%">は、縦に分割して列を作り = 画面の横幅を分割する <FRAMESET ROWS="80%,20%">は、横に分割して行を作ります。= 画面の縦幅を分割する そこで、このスクリプトの場合、まず画面の横幅を26%と74%に分割することを指定して、更にその１列目を80%と20%に分割するように指定していることになります。こうして分割された枠それぞれにどのファイルを表示させるかは、その次の行に書かれていて、上の段には「framesamplepage1.htm」を、下の段には「framesamplepage2.htm」をそれぞれ指定しています。このように、表示させるページは<FRAME SRC="表示させるページのファイル名（もしくはパス）">で指定します。１列めはこれで終わりですので、</FRAMESET>を書いて終了。 >> ファイル名を指定する時の、「パス」の指定方法についてはこちらをご参照下さい。 ２列目は分割しませんので、<FRAMESET ROWS...>を書く必要はなく、表示させるページ「framesamplepage3.htm」のみを指定して、最後に始めの<FRAMESET COLS="26%,74%">を括る</FRAMESET>で終了、ということになります。 もし、２列めも分割するなら、 <FRAMESET
COLS="26%,74%"> <FRAMESET ROWS="60%,20%,20%"> </FRAMESET> このように<FRAMESET ROWS...>〜</FRAMESET>で挟んで、分割した数だけ、それぞれの枠に表示するファイルを指定すればOKです。こちらは Sample2 でご確認下さい。もちろん、縦に分割したものを横に区切るばかりでなく、横に分割したものを縦に区切ることも可能です。その場合は、下の例のように<FRAMESET ROWS...>から先に書いて下さい。下の例は Sample3 でご覧になれます。なお、それぞれの枠にはページだけではなく、指定すれば画像のみでも表示させることができます。 <FRAMESET ROWS="80%,20%"> <FRAMESET COLS="60%,20%,20%"> </FRAMESET>
各枠のサイズは、%の他にピクセルで指定したり、「 * 」を用いて割合で示すことも出来ます。 例えばSample1で、<FRAMESET COLS="26%,*">と書いたとすれば、まず100%のうちから26%が確定され、残りを自動計算して表示してくれます。この場合は74%ですね。これはピクセルで指定した値がある時でも同じです。 また、<FRAMESET COLS="60%,20%,20%">は、<FRAMESET COLS="60%,*,*"（or "60%,1*,1*"）と書くこともでき、この場合は、100%のうちから60%の残り40%を２分割する、つまり20%づつに分割するという意味になります。これを応用すると、「"60%,2*,1*"」→60%差し引いた残りを2/3と1/3に分割する、「"*,300,*"」→中央に300ピクセルを確保した残りを等分する、というように指定して自動計算させることができます。見る側のディスプレイの幅が多様ですので、特に幅を固定したい枠があればそれのみピクセルで指定し、残りを「*」で示しておけば便利ですね。
★サイズ変更の禁止★ このように定められたサイズは、通常、見る側が枠線にマウスをポイントして左ボタンを抑えながらドラッグすると、自由に変更することが出来ますが、変更できないように設定することも可能です。<FRAME SRC...>タグ内に NORESIZE と書き込みましょう。NORESIZE と書き込まれた枠を構成する全ての枠線が、変更不可になります。ただし、複雑なレイアウトの場合、その枠に関連しない線は変更可能なまま残りますので、全て不可にしたければ、それぞれの<FRAME SRC...>タグ内に書き込む必要があります。以下の例は、Sample4 で実際の動作を確認して下さい。 <FRAMESET ROWS="80%,20%"> <FRAMESET COLS="60%,20%,20%"> </FRAMESET> これで好きなように画面を分割して、それぞれの枠に指定したファイルを表示させることが出来るようになりました。しかしリンクをクリックした時、特に指定がなければリンク先ページはリンク元と同じ枠に表示されてしまいます。ネット上でよく見かけるフレームページのように、リンクボタンを固定して別の枠にリンク先を表示させるにはどうしたら良いのでしょうか。それは次の章で詳しく解説してゆきましょう。
>> 初級篇1.VOL6.フレームページを作ってみよう・その2
|
2006.7.16.-7.17.+7.19.
★ドキュメントタイプとテキストエディタ★