どうもこんばんは！
今回はフレームについて説明していきましょう。
1．フレームってなーんだ？
フレームとは画面を上下(あるいは左右)に分割し、1つの画面に2つ以上のページを表示するものです。
タブブラウザで複数のタブを並べて表示したもの、といえばわかりますでしょうか？
文章で説明するよりも実際に見た方が早いと思ったので、予めフレームを使用した模擬的なホームページを用意しておきました。
https://lightning-web.com/html/frame/test.html
これがフレームを利用したページです。
間に縦に線が入っていて、その線を境目に左右にページが分かれているのがわかりますでしょうか？
そして左側のリンクを押すと、右側のページだけが変わります。
（「押すとバグる」はとりあえず無視してください）
ではいつものようにこのフレームページを表示するためのHTMLタグから
<frameset cols="20%, 80%">
<frame src="01.html" name="left">
<frame src="02.html" name="right">
</frameset>
<noframes>
このページはフレーム対応のブラウザでご覧ください。
</noframes>
これだけです。非常にシンプルですね。
では順番に説明していきましょう。
2．<frameset></frameset>画面を分割する
<frameset cols="20%, 80%">
<frame src="01.html" name="left">
<frame src="02.html" name="right">
</frameset>
その1からその3にかけてテーブルをやりましたが、その最初と最後には<table></table>というタグを使いましたね。
テーブルは<tr><td>タグがないとテーブルになりませんが、<table>タグもなければテーブルになりませんでした。
今回のフレームも同様です。
この<frameset>がなければ画面を分割することが出来ません。
2-1．【属性】横(cols)に分割するか、横(rows)に分割するか
上で<frameset>は<table>と同様、と書きました。
しかし<table>は何の属性を指定しなくても動きますが
<frameset>は属性を指定しなければ機能しないという違いがあります。
それが画面を縦に分割するか、横に分割するかという属性です。
横に分割するには
<frameset cols="20%, 80%">
縦に分割するには
<frameset rows="20%, 80%">
となります。
それぞれ属性値に「20%, 80%」と入力していますがこれは画面全体を100％として
1つ目に指定するページを画面の20%、2つ目に指定するページを80%で表示する、というものです。
この属性を指定しなかったらHTML側は「画面を分割するのは横か縦か、配分はどうするのか」がわからないのだからそりゃ機能しませんよね。
3．<frame> は表示させるページの設定
<frameset cols="20%, 80%">
<frame src="01.html" name="left">
<frame src="02.html" name="right">
</frameset>
<frameset>タグの属性で画面を横(cols)に20%と80％に分割する、と指定しました。
<frame>タグではその20%と80%に分割したフレームそれぞれに何を表示させるかを指定します。
2つのページを表示させるために<frame>タグを2つ用意し、そこに表示させるページの設定をするわけです。
重要な属性は「src」と「name」の2つ。
フレームにおいてこの2つの属性はかなり重要です。
「src」は表示させたいページのアドレス。
この例だと20%側に01.htmlを、80%側に02.htmlを表示するように指示しているわけです。
そして「name」はその通り名前。
名前の付け方自体は任意ですが、今回は分かり易く左をleft、右をrightとしています。
名前の何が大事なの？ と思うかもしれませんので次で説明しましょう。
３-1．【属性】nameの重要さ
<frameset cols="20%, 80%">
<frame src="01.html" name="left">
<frame src="02.html" name="right">
</frameset>
今回左右に分割したフレームは、20%側のフレームに01.htmlを表示させ、名前をleft
80%側のフレームには02.htmlを表示させ、名前をrightと設定しました。
1-1で述べたように画面の分割設定がないとわからないし、表示するページを設定しないと意味がないのはわかるでしょう。
ではnameは何が大事なのでしょうか？
ここで再びサンプルページへと戻ってみましょう。
https://lightning-web.com/html/frame/test.html
「プロフィール」「イラスト」「トップページ」は理想通りに動きます。
しかし「押すとバグる」「押すとバグる2」はどう見ても挙動がおかしいですよね？
これはリンクの貼り方に問題があるからです。
01.htmlの記述を少し見てみましょう。
<a href="./profile.html" target="right">プロフィール</a>
<br><a href="./illust.html" target="right">イラスト</a>
<br>メール
<br><a href="./02.html" target="right">トップページ</a>
<br>
<br><a href="./01.html" target="right"><small>押すとバグる</small></a>
<br><a href="./02.html" ><small>押すとバグる2</small></a>
わざわざこのフレームの講座を見ている人に<a href="">が何なのかなんて説明しなくてもわかると思います。
しかし「target」という属性を使用したことはあまりないでしょう。
そんな「target」という属性を今回ほぼすべての<a>タグに使用しています。
3-2．左のフレームにleft、右のフレームにrightと設定した
<frameset>タグ内の<frame>タグのname属性で
ページの左側フレームにはleftという名前を、
右側のフレームにはrightという名前を設定しました。
そして<a>タグの設定した「プロフィール」「イラスト」「トップページ」ではtarget="right"と設定し、リンクをクリックすると
<frame>タグの属性でname="right"と設定した右側のフレームに表示されました。
そしてtarget属性を指定していない「押すとバグる」は本来右側のフレームに表示されるべきものを左のフレームで表示してしまいます。
またtarget="right"と設定した「押すとバグる2」も何故かname="right"である右側のフレームに表示されてしまいます。
3-3．<a>タグにおける属性「target」は表示先
説明せずとも大体わかったとは思いますが、target属性は表示先を意味しています。
<frame>タグで左側はname="left"、右側はname="right"と設定しましたので、
上で「target="right"と設定した「押すとバグる2」も何故かname="right"である右側のフレームに表示されてしまいます」と書きましたがなんて事はない、実に正常な動作をしているわけです。
そしてtarget属性を指定していない「押すとバグる」は自身が今表示されているページ（この場合name="left"）に表示しているのです。
4．noframesは要らないのでは
<noframes>
このページはフレーム対応のブラウザでご覧ください。
</noframes>
さて、<noframes>ですがこれはもう、見ての通りフレーム対応していないブラウザで使うものですが、
今時フレーム対応していないブラウザもないでしょう。
ただし今後フレーム対応しないブラウザが出てくる可能性もないことはありません。
というのもHTML5(HTML記述の最新バージョンと思ってください)において
ここまで説明してきた<frameset>自体が廃止されたためです。
5．<frameset>の注意点
さて、<frameset>タグについての説明は以上で終了です。
しかしこのタグを使う上で注意しておくことがあります。
それは原則他のHTMLタグ及びページの文章(bodyで記述するもの)と共存できないことです。
基本的にHTMLタグは記述のあるページに表示する為のものですが、<frameset>は他のページを呼び出す為のものです。
ですので<frameset>の後に色々書いてもその記述部分は表示されませんし、
一方で色々記述した後で<frameset>を記述しても今度はフレームは表示されません。
<body></body>があると<frameset></frameset>は機能せず、
<frameset></frameset>があると<body></body>は機能しません。
さて、今回はこんなところで。
次回は何も考えていませんのでHTML講座はひと段落でしょうかね。
