※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 11.フレーム（画面分割）
さて、これまでにいろいろなタグを見てきましたが、すべて1ページ内での記述が主でした。
今回のフレームは、ガラっと視点を変えて、1ページの中に複数のページを表示する方法を説明していきます。
例えば、目次とその内容を同一ページ内に表示したいと思ったとき、目次部分はいつも同じですよね。
通常であれば、その目次をすべてのページに作っておく必要があります。
そして、コンテンツやページが増えた時は、すべてのページの目次を一つ一つ変更していかなければなりません。
この方法は、あまりにも効率が悪すぎます。
そこで、このようなページを作成するときに最も簡単な方法がフレームなのです。
それ以外には「SSI」という方法もありますが、こちらはサーバーによって使用できない場合があります。
フレームを使用しますと、複数のページを結合し、あたかもひとつのページのように表示できますので、目次は目次だけ、コンテンツはコンテンツだけと、切り離してページ作成ができます。
新しいページが増えても目次のページ一箇所を変更するだけでよくなり、メンテナンス性が向上します。
それでは、フレームを作成するためのタグを説明していきます。
※.このサイトの「ＨＰ作成の予備知識」−「8.フレームページの簡単な作成方法を教えて！」では、左右２分割の場合のフレームを簡単に作成する方法を解説しています。
参考にしてください。
■ フレームの作成
フレームは、次のようなタグで構成されます。
- 【記述サンプル】
- <HTML> （HTMLの始まり） <HEAD> （HEADの始まり） <TITLE>フレーム表示</TITLE> （TITLEの始まりと終わり） </HEAD> （HEADの終わり） <FRAMESET COLS="100,*"> （FRAMESETの始まり、左右に分割） <FRAME SRC="page1.html"> （page1の表示） <FRAME SRC="page2.html"> （page2の表示） <NOFRAMES> （NOFRAMESの始まり） <BODY> <A HREF="page1.html">page1</A><BR> <A HREF="page2.html">page2</A><BR> </BODY> </NOFRAMES> （NOFRAMESの終わり） </FRAMESET> （FRAMESETの終わり） </HTML> （HTMLの終わり）
フレームは、上記のようにページ分割の指定をするだけで、通常のタグは、記述できません。
NOFRAMESタグは、ブラウザでフレーム表示ができないとき、代わりに表示されるHTMLを記述します。
1.FRAMESETタグでは、フレームの構成要素の属性が指定できます。
| COLS="100,*" ROWS="100,*" COLS="20%,*" ROWS="20%,*" |
フレームの分割方法を指定します。 COLS属性は左右分割、ROWS属性は上下分割時に使用します。 それぞれ、分割したい数だけ、「,（カンマ）」で区切って記述します。 数字を指定した場合はピクセル単位で、％を使用した場合は画面比率で分割することができます。 指定しない部分は、「*」印を使用します。 |
| BORDER="4" | 区切り線の幅を指定します。 |
| FRAMEBORDER="yes" FRAMEBORDER="1" FRAMEBORDER="no" FRAMEBORDER="0" |
区切り線を表示するかしないかを指定します。 「yes」、「1」はする、「no」、「0」はしないを指示します。 |
| BORDERCOLOR="blue" BORDERCOLOR="#0000FF" |
区切り線の色を指定しします。 |
2.FRAMEタグでは、個々のフレームの属性が指定できます。
| FRAMEBORDER="yes" FRAMEBORDER="1" FRAMEBORDER="no" FRAMEBORDER="0" |
区切り線を表示するかしないかを指定します。 「yes」、「1」はする、「no」、「0」はしないを指示します。 |
| BORDERCOLOR="blue" BORDERCOLOR="#0000FF" |
区切り線の色を指定しします。 |
| MARGINHEIGHT="80" MARGINWIDTH="40" |
フレーム枠の内側に余白を挿入します。 MARGINHEIGHT属性は上部に、MARGINWIDTH属性は左部に余白を挿入します。 |
| NORESIZE |
区切り線の位置を固定します。 この指定をするとフレーム枠の大きさが変更できなくなります。 |
| NAME="frame1" |
フレーム枠の名前を指定します。 この指定をするとフレーム枠を指定したリンクが可能になります。 |
| SCROLLING="auto" SCROLLING="yes" SCROLLING="no" |
フレームのスクロールバーを表示するかしないかを指定します。 「auto」は自動表示、「yes」はする、「no」はしないを指示します。 |
それでは、次にいろんなフレームのタグの記述を見ていきましょう。
※フレーム処理をしている実際の画面を表示することができないので表組みでイメージをつかんでください。
■ フレームのサンプル
下記のサンプルは、HEADタグ、TITLEタグを省略しています。
|
|
|
||||||||
|
|
|
||||||||
|
|
|
||||||||
|
|
|
||||||||
|
|
|
||||||||
■ フレームでのリンク
フレーム内でリンクを使用する場合、少しだけ注意が必要になります。
ページ全体をリンク先のページ表示にするのか、それとも現在のフレーム枠の表示のみ変更するのか、別のフレーム枠の表示を変えるのかによりリンクの記述方法が変わってきます。
このとき大事なのは、フレーム枠の名前（フレーム名）とリンク（Aタグ）のtarget属性の名前です。
例えば、次のようにフレーム枠にそれぞれのフレーム名を指定した場合、
|
||||
上記のようなフレームで、「menu」というフレーム枠にリンクを記述する場合、
ページ全体の表示を変更する場合は、次のように「TARGET」属性に「_top」を使用します。
※「_top」は、ページ全体を入換える時に使用します。
<A HREF="page1.html" TARGET="_top">
「main」というフレーム枠の表示を変更する場合は、次のように「TARGET」属性に「main」を使用します。
※target属性にフレーム名を指定します。（大文字小文字に注意してください。）
<A HREF="page1.html" TARGET="main">
「menu」というフレーム枠の表示を変更する場合は、自分自身ですので次のようにいくつか記述方法があります。
※「_self」は、自分のフレーム枠を入換える時の指定です。
<A HREF="page1.html">
<A HREF="page1.html" TARGET="_self">
<A HREF="page1.html" TARGET="menu">
別ウィンドウで表示する場合は、次のように「TARGET」属性に「_blank」を使用します。
※「_blank」は、新しいウィンドウを開く時に使用します。
<A HREF="page1.html" TARGET="_blank">
例えば、「head」だけ残し、「menu」と「main」を新しいページに置き換えたい場合は、「TARGET」属性に「_parent」を使用します。
※「_parent」は、そのフレームが属しているフレームセット全体を入換える時に使用します。
<A HREF="page1.html" TARGET="_parent">
また、次のように「BASE TARGET」タグをHEAD句内に記述しますとそのページすべてを同一TARGETにすることができます。
※すべてのリンクがフレーム名「TARGET="main"」を指定したことになります。（大文字小文字に注意してください。）
<BASE TARGET="main">
次のようにTARGET属性に、存在しないフレーム名を指定した場合も別ウィンドウが開きます。（記述ミスの場合も別ウィンドウが開きますので注意してください。）
<A HREF="page1.html" TARGET="sub">