簡単ホームページをメモ帳で作ろうよ


第23回:フレーム!フレーム!紅組!!

<nifty:FROM40PC/MES/15/1447>

フレーム機能でブラウザ画面を分割

<FRAMSET >フレームの中身</FRAMESET>

これが一番基本となるタグです。<BODY>タグは書かなくても構いません。
でも、これだけではどのように画面を分割するかが指定されていないので、
画面をどういうふうに分割して表示させるかの属性を追加して記述します。

<FRAMSET COLS="" または ROWS="">

COLSは縦割り、ROWSは横割りの表示割合の指定です。""の部分にはピクセル数で幅を
指定するか、もしくは、パーセントを入力します。
たとえば
<FRAMESET COLS="25%,75%">
とすれば、ブラウザの画面を縦割りにし、ブラウザの左右の幅に対して左を25%
右を75%の割合で分割することになります。この場合ブラウザのウィンドウサイズによって、
左右それぞれに表示される幅も変化します。25+75=100のように、合計で100になる数字を入れます。
<FRAMESET COLS="25%,75%">の場合は、イメージとしてはこんな感じです。

注*別に、左右に表示させるファイルが必要です。

また、ピクセルで指定すると、ブラウザの幅や高さに関係なく、絶対的な指定をすることができます。
ブラウザの画面を横割りにして、ピクセル数で指定する例はこんな感じです。

<FRAMESET ROWS="150,*">フレームの中身</FRAMESET>

"150,*" の部分がミソですね。150はピクセル数を、*(アスタリスク)は「残り」を表します。
ROWSは横割りのことです。
つまり、<frameset rows="150,*">とは、横割りにしたうえで、ブラウザの上から
150ピクセルのところで画面を分割、上段と下段に分けています。
下段の表示サイズは上から150ピクセル分を引いた残りを表示させるようになります。
この場合は上段の150ピクセル分は絶対指定なので、ブラウザのウィンドウサイズを変えても変化しません。
変化するのは下段のみとなります。
つまり、*(アスタリスク)を用いると、片方の表示サイズをブラウザに計算させて表示させる
ことができるわけですね。

さて、今度はフレームの中身について書いていきましょう。
さきほどのタグだけでは画面を分割する指定をしただけですから、それだけでは
ブラウザ画面には何も表示されません。表示させる中身がないからです。
そこで、それぞれの画面に表示させるファイルを指定してあげるタグが必要になります。

それぞれのフレームに表示させるソースを指定

<FRAME SRC="表示させるファイル名">

このタグを、さきほどの基本的なタグ<FRAMESET>~</FRAMESET>にはさみますから
たとえばこんな感じになります。

<frameset rows="100,*">
<frame src="表示させるファイル名1(上段)">
<frame src="表示させるファイル名2(下段)">
</frameset>


rowsと書いていますから、これは横割りの例です。
ちょっとサンプルを作ってみましょう。
表示させるファイル名にはこれから作成するページの名前を仮に入力しておき、
以下のようにしておきます。

<frameset rows="100,*">
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>


上段と下段に表示させるページを簡単に作ってみましょうか。

<body bgcolor="aqua">
<center>
ふろよんブラザーズ<br>
○いがちん ○夜郎 ○ひで ○きゆぶの ○みつりん
<center>
</body>


これを frame1.htm とでも名付けて保存しておきます。
<body bgcolor="pink">~</body>として背景に色を指定しているのは、比較しやすいようにするためです。
これを上段のページとしましょう。次に、

<body bgcolor="aqua">
<blockquote><blockquote>○いがちん <br>
ゲームと過去ログをあやつる達人。<br>
○夜郎 <br>
自作にハマってさあたいへん。<br>
○ひで <br>
休日返上で仕事の鬼と化しても、自作はやめられない。<br>
○きゆぶの <br>
トンネルと暮らしてタイムゴーズバイ。<br>
○みつりん<br>
FFでいえば、赤魔導師。黒も白も使えるけど中途半端かも。
</blockquote></blockquote>
</body>


これを frame2.htm として保存しましょう。
<blockquote>というタグはずいぶん前に登場したものですが、左端からでなく、
ちょっと間をあけてから表示させるタグでした。
では、framea.htm を開いてみるとどうなるでしょうか。



縦割りならば、たとえばこんな感じのサンプルはいかがでしょう。

<frameset cols="25%,75%">
<frame src="frame3.htm">
<frame src="frame2.htm">
</frameset>


これを frameb.htm として保存します。次に、左右に表示させるページを
作ります。以下のようにしておきます。

<body bgcolor="pink">
ふろよんブラザーズ
<p>
○いがちん<br>
○夜郎<br>
○ひで<br>
○きゆぶの<br>
○みつりん
</body>


これを frame3.htm とでも名付けて保存しておきます。
これを左のページとしましょう。次に、右のページはさきほどの frame2.htm
を転用します。

<body bgcolor="aqua">
<blockquote><blockquote>○いがちん <br>
ゲームと過去ログをあやつる達人。<br>
○夜郎 <br>
自作にハマってさあたいへん。<br>
○ひで <br>
休日返上で仕事の鬼と化しても、自作はやめられない。<br>
○きゆぶの <br>
トンネルと暮らしてタイムゴーズバイ。<br>
○みつりん<br>
FFでいえば、赤魔導師。黒も白も使えるけど中途半端かも。
</blockquote></blockquote>
</body>

以上の三つのファイル frameb.htm frame2.htm frame3.htm がそろった
ところで、frameb.htm をブラウザで開いてみましょう。


ここでブラウザのソースの表示をさせてみましょう。


表示されたソースは、frameb.htm のものですよね。

このように、フレームを使っているページのソースを見ると、表示されるのはフレームを分割指定する
ページのソースのみで、上下左右に表示されているソースのものではありません。
それぞれのページのソースを見る場合は、上の例であれば frame2.htm fram3.htm を直接指定
する必要があります。

ところで、フレームページの境界線ですが、マウスのドラッグで移動させることができます。
試しに、frameb.htm をもう一度開いて実験してみましょう。
縦割りのページですから境界線が縦に表示されていますよね。
その境界線上にマウスカーソルを合わせて、左右にドラッグ(マウスの左ボタンを押したまま、
左右にマウスを移動させること)してみましょう。
自由に移動できますよね。つまり、標準状態では境界線を任意の位置に移動させることが
できるようになっています。

これを禁止させたい場合は、<FRAME SRC="">に属性を加えて、
<FRAME SRC="" NORESIZE> とすれば境界線が移動できなくなります。
frameb.htm を書き換えると、次のようになります。

<frameset cols="25%,75%">
<frame src="frame3.htm" noresize>
<frame src="frame2.htm">
</frameset>


これを framec.htm とでも名付けて保存して、確認してみましょう。
どうでしょう、今度は境界線にカーソルを合わせてもドラッグができなくなっています。

(見た目は同じです)

さて、本日はここまでです。次回はさらに境界線をいじってみようと思います。
具体的には、境界線を表示させないようにしたり、境界線に色を付けたりしてみたいと思います。

Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson10
Lesson11 Lesson12 Lesson13 Lesson14 Lesson15 Lesson16 Lesson17 Lesson18 Lesson19 Lesson20
Lesson21 Lesson22 Lesson23 Lesson24 Lesson25 Lesson26 Lesson27 Lesson28 Lesson29 Lesson30

みつりんの簡単ホームページ講座トップ

トップページへ コマンドプロンプト VBAで遊ぼう パレットへ(注) ホームページ道場へ(注)
(注)@nifty会員のみご利用いただけます 30日で完成ホームページ本 ファイルの開き方

Since 15/06/1999
ホームページの内容の転載を禁じます made by mitsurin