HTMLのフレーム分割
ホームページ作成に役立つHTMLタグで、フレーム(frame)ページを作成する方法について掲載します。
frame(フレーム)とは、わかりやすく言うと、ウェブページの中に、ウェブページを表示させる機能を持ったHTMLタグのことです。
フレーム（frame）を使用すると、上下左右にウェブブラウザの画面を分割して、それぞれ別のウェブページを表示させることができます。
フレームタグは、使い方によっては便利なHTMLタグですが、使い方をあやまると、訪問者に迷惑をかける恐れがあるので、しっかりその性質をつかんで使いこなす必要があります。
フレームページは、一度に複数のウェブページを表示させることができるので、とても便利なのですが、今日のような検索エンジンの仕組みを考えると、実はあまりお勧めできる機能ではないのです。
なぜかというと、グーグルや、ヤフーなどの検索結果に表示されるあなたのウェブサイトへのリンクが、必ずフレームを指定しているページになるとは限らないからです。
フレームを指定しているウェブページではなく、フレームで分割されているページにたどりついてしまった訪問者は、最悪の場合、他のページを閲覧できずに戻ってしまう場合もあるのです。
大きな原因としては、サイトコンテンツ自体が、フレーム分割を指定しているページではなく、フレームで分割されているページの方にあるからですね。
検索エンジンは、コンテンツに直接リンクを行うので、フレームを使用するときには、このあたりに注意する必要があります。
もちろん、検索エンジン側のアルゴリズムも日々進化して、フレームページであることを認識したら、ちゃんと修正されるとは思いますが、保証はないです。
さらに、ウェブページ作成で、フレームタグを使用して、ウェブページの画面を分割する場合には、最も注意すべき点があります。
それは、ウェブブラウザ自体が、フレームに対応していないものもあるという前提で、フレームを使用するということです。
インターネットエクスプローラなどのウェブブラウザは、HTMLタグを独自に解釈し、ウェブページの表示に反映させます。
同じHTMLタグでも、ウェブブラウザによっては表示内容が異なるのは、それぞれのウェブブラウザで多少なりともHTMLタグの解釈が異なるからです。
まだ解釈が異なるぐらいならよいのですが、フレームのようなHTMLタグでは、それ自体が対応していない場合があります。
以前に比べれば、そんな心配をしなくてもよくなりましたが、フレームタグには、フレームに対応していないウェブブラウザに対して処理を行わせる方法もあるので、覚えておくと便利です。
ホームページ作成に使用するフレームタグには、さまざまな使用方法があります。
それでは、順に解説していきます。
- frame(フレーム)の基本
- フレームタグで上下左右の画面分割を指定
- フレームタグで画面３分割指定
- フレームを入れ子にした指定
- frameの境界線を消す
- frameの境界線の幅の設定
- frameの境界線の色の設定
- フレーム名をつける
- フレーム使用時のリンク指定
- frame分割サイズの固定
- フレームタグのスクロールバーの指定
- フレームタグのマージンを指定する
- フレーム未対応ブラウザへの対策
frame(フレーム)の基本
frame(フレーム)の指定を行うと、ウェブページの画面を分割することができます。
frame(フレーム)のページは、分割を指定するページと、そこへ読み込まれるページによって作られています。
例えば左右に2分割するウェブページを作成する場合は、分割を指定するウェブページが１ページ、左右に表示されるウェブページがそれぞれ１ページずつ、計３ページが必要になります。
フレームタグを使用して、左右に２分割するページを作成する場合は、以下のように記述します。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset cols="100,*">
<frame src="sample1.html">
<frame src="sample2.html">
</frameset>
</html>
このホームページのHTMLタグを「index.html」というファイル名で保存するとします。
そうすると、index.htmlにアクセスすると、sample1.htmlとsample2.htmlが左右分割された状態で表示されます。
この場合は、別のウェブページ、sample1.htmlとsample2.htmlファイルを用意しておく必要があります。
上記のように、分割を指定するホームページでは、HTMLタグのbodyタグは使用しません。
ただし、noframesを指定する場合は除きます。
ホームページ作成に使用する、フレームタグの基本はこんなところです。
それでは、実際にウェブページを分割表示させるHTMLタグについて説明します。
ウェブページの分割の指定には、2種類のタグを使用します。
framesetタグに囲まれた部分で、frameタグを使用します。
「<frameset> ～ </frameset>」が、画面の分割方法を指定するHTMLタグです。
上記のように、「<frameset cols="100,*">」と指定すると、左右の画面分割を指定することができます。
この場合は、左100ピクセルと、右は残り全てという指定になります。
「<frame src="">」を使用すると、読み込むページを指定することができます。
「"」と「"」のあいだには、表示させたいウェブページまでの絶対パスまたは相対パスを記述します。
上記の例のように…
最初に、「<frame src="sample1.html">」と指定すると、左のフレームには、同じフォルダ内にあるsample1.htmlというウェブページを表示しなさいという指定になります。
次に、「<frame src="sample2.html">」と指定すると、右のフレームには、同じフォルダ内にあるsample2.htmlというウェブページを表示しなさいという指定になります。
フレームタグで上下左右の画面分割を指定
framesetタグで、画面の分割方法を指定することができます。
前述したframesetタグでは、左右に画面分割していましたが、指定方法を変えると、画面を上下に分割することもできます。
画面の分割方法には、左右の分割と上下の分割があります。
この分割方法と各フレームのサイズを、framesetタグで設定します。
framesetタグ内で、colsを使用すると、左右に画面分割を行い、それぞれのサイズを指定することができます。
framesetタグ内で、rowsを使用すると、上下に画面分割を行い、それぞれのサイズを指定することができます。
フレームサイズの指定方法は、cols=""または、rows=""を使用することで、分割する画面領域のサイズを指定することができます。
サイズの指定は、ピクセル数かパーセント、または、*（アスタリスク）で指定することができます。
数字のみの指定では、ピクセル数で指定ということになり、数字の後ろに%が付くと、パーセント指定となります。
*（アスタリスク）を使用すると、残りすべてという意味になります。
サイズを記述する順番は、左右に分割する場合は左のフレームから順に、上下に分割する場合は上のフレームから順に指定していきます。
例えば、上下に2分割する場合は、以下のように記述します。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset rows="20%,80%">
<frame src="sample1.html">
<frame src="sample2.html">
</frameset>
</html>
このホームページのHTMLタグを「index.html」というファイル名で保存するとします。
そして、index.htmlにアクセスすると、sample1.htmlとsample2.htmlが上下に画面分割された状態で表示されます。
<戻る>
フレームタグで画面３分割指定
次に、ウェブページの画面表示を、上下に3分割する場合は、以下のように記述します。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset rows="50,100,*">
<frame src="sample1.html">
<frame src="sample2.html">
<frame src="sample3.html">
</frameset>
</html>
このホームページのHTMLタグを「index.html」というファイル名で保存するとします。
そして、index.htmlにアクセスすると、sample1.htmlとsample2.html、さらにsample3.htmlが上下３分割された状態で表示されます。
<戻る>
フレームを入れ子にした指定
ホームページ作成のHTMLのframe(フレーム)を入れ子にすると、上下左右の分割を組み合わせて表示させることができます。
例えば、ウェブページの画面を左右に分割し、右側のフレーム(frame)を更に上下に分割する場合は、以下のように記述します。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset cols="100,*">
<frame src="sample1.html">
<frameset rows="50,*">
<frame src="sample2.html">
<frame src="sample3.html">
</frameset>
</frameset>
</html>
このように作成したホームページのHTMLタグを「index.html」というファイル名で保存するとします。
そうすると、index.htmlにアクセスすると…。
sample1.htmlがホームページの左画面に表示されます。
さらにホームページの右上にはsample2.htmlが表示され、ホームページの右下にはsample3.htmlが表示されます。
上記の例では、まずホームページ画面の左右の分割を指定して、左のフレームにsample1.htmlを読み込んで表示させています。
続いて、ホームページ画面の右フレームの部分で、上下の分割を指定しています。
ホームページ画面の右上にはsample2.htmlを表示させ、ホームページ画面の右下にはsample3.htmlを表示させています。
読み込みの指定が完了したら、まずは上下の分割を終了し、続いて左右の分割を終了させます。
さらに詳しく、HTMLタグと照らし合わせて説明します。
まずは、「<frameset cols="100,*">」で、ホームページ画面の左右の分割を指定しています。
次に、「<frame src="sample1.html">」で、ホームページの左のフレームにsample1.htmlを表示することを指定しています。
さらに、「<frameset rows="50,*">」で、ホームページ画面の上下の分割を指定しています。
次に、「<frame src="sample2.html">」で、ホームページの右上のフレームにsample2.htmlを表示させることを指定しています。
次に、「<frame src="sample3.html">」で、ホームページの右下のフレームにsample3.htmlを表示させることを指定しています。
これで、各フレーム位置と、フレームサイズが指定できたので、framesetタグを閉じていきます。
まずは、最初の「</frameset>」で、ホームページ画面の上下の分割を終了させます。
続いて二回目の「</frameset>」で、ホームページ画面の左右の分割を終了させます。
入れ子を使用する場合は、最後に開いたタグほど、最初に閉じていきます。
入れ子をうまく使うことで、様々な分割レイアウトを指定することができます。
<戻る>
frameの境界線を消す
ウェブページ作成で、framesetタグに、frameborderを追加すると、フレームの境界線を消すことができます。
「<frameset cols="200,*" frameborder="">」という感じに使用します。
frameborderタグの「"」と「"」のあいだに境界線を消すか消さないかの設定をします。
例えば、「0」であれば、境界線を消します。
「1」であれば、境界線を表示します。
例えばこんな感じです。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset cols="200,*" frameborder="0">
<frame src="sample1.html">
<frame src="sample2.html">
</frameset>
</html>
frameborder属性を使用しない場合は、初期設定として「1」が割り当てられます。
frameborder属性で境界線を消した場合、ウェブブラウザにより、表示形式の違いが出てきます。
Netscape、Firefoxの場合は、境界線は完全に消えます。
しかし、IE、Operaの場合は、ほんの少し線が残ってしまいます。
どちらの環境でも境界線を消したい場合には、border属性を指定すると良いでしょう。
フレーム(frame)の境界線を消してしまうと、ウェブブラウザによっては、その境界線を動かせなくなってしまいます。
つまり、ウェブブラウザで表示された状態を、訪問者側で変更できなくなるということです。
<戻る>
frameの境界線の幅の設定
ホームページ作成で、framesetタグに、borderを追加すると、境界線の幅を設定できます。
前述した、frameborder属性では、境界線の表示・非表示を設定するだけです。
しかし、このborder属性は、任意の幅を設定できます。
例えば、以下のように記述します。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset cols="200,*" border="5">
<frame src="sample1.html">
<frame src="sample2.html">
</frameset>
</html>
「border=""」という感じに使用します。
「"」と「"」のあいだには、境界線の幅をピクセル数で設定します。
さらに、「0」を指定すると、境界線を消すことができます。
境界線を消してしまうと、ウェブブラウザによっては、その境界線を動かせなくなるので、注意が必要です。
frameの境界線の色の設定
ウェブページ作成で、framesetタグに、bordercolorを追加すると、境界線の色を指定できます。
「bordercolor=""」といった感じで使用します。
「"」と「"」のあいだに、境界線の色を指定します。
例えば、以下のように記述します。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset cols="200,*" border="20" bordercolor="#0000ff">
<frame src="sample1.html">
<frame src="sample2.html">
</frameset>
</html>
HTMLでの色の指定は、シャープ（#）で始まる6桁のカラーコードか、redやgreen、whiteといったカラーネームで行います。
<戻る>
フレーム名をつける
ウェブページ作成で、フレームで画面分割を指定したときに、それぞれのフレームに名前を指定しておくことで、リンクを利用したときに、他のフレームを切り替えることができます。
例えば、ウェブページの画面を左右に２分割したとします。
そして、ウェブページの左のリンクをクリックしたときに、左のウェブページではなく、右のウェブページが切り替わるようにできるということです。
通常のHTMLタグのリンクでは、左側のページが切り替わってしまいます。
しかし、最初にフレーム名を指定しておいて、それぞれのリンクタグにもフレーム名を指定することで、指定されたフレームを切り替えることができます。
例えば、以下のように記述します。
<html>
<head>
<title>Frame Sample</title>
</head>
<frameset rows="100,100,*">
<frame src="sample1.html" name="top">
<frame src="sample2.html" name="middle">
<frame src="sample3.html" name="bottom">
</frameset>
</html>
フレーム(frame)で画面を「上・中・下」に３分割しています。
上のフレーム(frame)には、「top」。
中のフレーム(frame)には、「middle」。
下のフレーム(frame)には、「bottom」というフレーム名をつけています。
このようにフレーム分割を指定したときに、フレーム名も一緒に指定しておきます。
フレーム名は、「name=」の後の「"」と「"」とのあいだに任意のフレーム名を指定します。
フレーム名には、アルファベットで始まる半角英数字（一部の記号も使用可）で好きな名前を指定できます。
フレーム名に使用できる記号は、ハイフン（-）、アンダーバー（_）、コロン（:）、ピリオド（.）の4つです。
<戻る>
フレーム使用時のリンク指定
そして、上のフレームのリンクをクリックしたときに、中のフレームページを切り替えさせるためには、上のフレームのリンクには以下のように書きます。
「<a href="sample4.html" target="middle">中のフレームページの切り替え</a>」
このように記述すると、middleフレームに表示されていた「sample2.html」を「sample4.html」に切り替えさせることができます。
ホームページ作成で、フレームを使用しているときのリンクタグに、targetを追加すると、リンク先のページをどのウィンドウ（フレーム）に表示するのかを指定できます。
上の例では、そのままフレーム名を指定していますが、それ以外にも知っておくと便利な命令があるので、ここで紹介します。
「_blank」を使用すると、新たにブラウザを立ち上げて表示します。
「_top」を使用すると、フレームの分割を廃止して画面全体で表示します。
「_self」を使用すると、リンク元と同じウィンドウ（フレーム）に表示します。
通常のリンクタグの場合と同じです。
「_parent」を使用すると、親フレームに表示します。
以上、あなたのウェブサイトに合わせて、便利に使い分けてください。
<戻る>
frame分割サイズの固定
ウェブページ作成で、frameタグに、noresizeを追加すると、フレームのサイズ変更（境界線の移動）を禁止することができます。
フレームの境界線をマウスでドラッグすると、通常はその境界線を動かすことができますが、このnoresize属性を指定すると境界線の移動ができなくなります。
例えば、以下のように記述します。
<html>
<head>
<title>フレームサンプル</title>
</head>
<frameset cols="200,*,100">
<frame src="sample1.html">
<frame src="sample2.html">
<frame src="sample3.html" noresize>
</frameset>
</html>
この例では、2本ある境界線のうち、右側の境界線を移動禁止に指定しています。
フレームページで境界線を移動禁止にした場合、訪問者側のパソコンで、ウェブページのサイズを自由に変えられなくなるので、自由度がなくなってしまいます。
そのあたりを理解して、使用してください。
<戻る>
フレームタグのスクロールバーの指定
frameタグに、scrollingを追加すると、スクロールバーの有無を指定できます。
「scrolling=""」の「"」と「"」とのあいだに指定します。
指定できる項目には以下のようなものがあります。
「yes」を指定すると、常にスクロールバーを表示します。
「no」を指定すると、スクロールバーを表示しません。
「auto」を指定すると、必要に応じてスクロールバーを表示します。
何も指定がない場合は、この設定が使用されます。
例えば、以下のように記述します。
<html>
<head>
<title>フレームサンプル</title>
</head>
<frameset cols="50%,50%">
<frame src="sample1.html" scrolling="yes">
<frame src="sample2.html" scrolling="no">
</frameset>
</html>
この例では、左のフレームにyes、右のフレームにnoを指定しています。
スクロールバーを消してしまうと、ページの内容や閲覧者の環境によっては、ページの一部を見られなくしてしまう可能性があるので、注意が必要です。
フレームタグのマージンを指定する
マージンとは、簡単に説明すると、余白のことです。
frameタグに、marginwidth=""や、marginheight=""を追加すると、フレームの枠と内容との間にマージンを指定できます。
これも「"」と「"」とのあいだに指定します。
marginwidthを使用すると、左右のマージンをピクセル数で指定できます。
marginheightを使用すると、上下のマージンをピクセル数で指定できます。
例えば、以下のように記述します。
<html>
<head>
<title>フレームサンプル</title>
</head>
<frameset cols="30%,*,20%">
<frame src="sample1.html">
<frame src="sample2.html" marginwidth="30" marginheight="30">
<frame src="sample3.html" marginwidth="0" marginheight="0">
</frameset>
</html>
この例では、左のフレームは指定なし。
中央のフレームはマージンを30ピクセルに指定しています。
右のフレームはマージンを0に指定しています。
<戻る>
フレーム未対応ブラウザへの対策
ここまで説明してきたHTMLのフレームタグに対応していないウェブブラウザに対応するためには、noframesタグを使用します。
noframesタグに囲まれた内容は、フレーム未対応のブラウザで表示されます。
フレームに対応したブラウザでは、この部分は表示されません。
このタグは、framesetタグに囲まれた部分で使用します。
「<noframes> ～ </noframes>」内にbodyタグを記述して、その中にフレーム未対応ブラウザ向けの内容を記述していきます。
例えば、以下のように記述します。
<html>
<head>
<title>フレームサンプル</title>
</head>
<frameset cols="100,*">
<frame src="sample1.html">
<frame src="sample2.html">
<noframes>
<body>
<h1>フレーム未対応ブラウザ向けの内容</h1>
<p>フレームに対応していないブラウザ向けの内容を記述します。</p>
<p><a href="memu.html">メニューはこちら</a></p>
</body>
</noframes>
</frameset>
</html>
noframesタグに囲まれた部分が、フレーム未対応のブラウザで表示されることになります。
ウェブページ作成で、フレームを使う際には、フレーム未対応ブラウザ向けの内容をできるだけ用意しておくようにしましょう。
メッセージを書いておくだけでなく、メニューへのリンクなどを用意しておくと親切ですね。
<戻る>