田村仁研究室　日本工業大学創造システム工学科

メニュー

Webページの画面を，上下あるいは左右に分割して，各分割画面にそれぞれ別のページを表示する機能のことをフレーム分割と呼ぶ．例えば，一方をメニュー画面，もう一方を内容表示画面とすれば，メニューを常に表示したまま内容だけを切替えて表示させることができて便利である．さまざまな画面のレイアウト構成(配置)を工夫するためにもよく利用される．

実際にページを分割するための代表的な方法が，<frame>タグを用いた方法だったが，最近ではSEO対策のため，あるいは機能上の問題点のためほとんど利用されなくなってしまった．現在では大手商用サイトで<frame>機能を用いている例は皆無といってよい．その代わり，後述するCSSを用いた方法やSSIを用いた方法によるページが主として利用されるようになっている．

インラインフレーム(文章中に組み込むフレーム)

また，ページを分割するのではなく，ページ中に窓を開くように組み込むタイプのフレームをインラインフレームと呼ぶ．インラインフレームは，フレームを埋め込みたいページに直接記述する．このインラインフレームは，現在でも見かけることがあるが適正な利用目的はかなりせまい対象といってよい．

例えばこのページ(frame.html)には次のようにインラインフレームが記述されている．

<iframe src="埋め込みたいページのURL" width=200 height=100>
  ここに何か書けるが表示はされない
</iframe>

HTML解説のページを埋め込んだ例)

フレームで指定するページは，他人のページも指定できてしまうが，無断でフレームに指定することは望ましくない．他人のページでもフレームに組み込まれると，自分が用意したページであるかのような印象を与えるためである．適正な利用目的としては，自分で用意した，その場で表示内容を切り替えるCGIページや定期的に(自動)更新するページ，などを埋め込むことが考えられる．

フレーム/インラインフレームのオプション指定には次のものが存在する．

scrolling="no"       スクロールバーを表示させない
frameborder="11"     フレームの境界線の太さを指定する，0なら表示しない

リンクの表示先指定(どのフレームに表示するのかの指定)

リンクをクリックして新しいページを開くとき，どのフレーム(ウィンドウ)に表示するのか指定することができる．通常は，リンクのある画面を切り替えるだけだが，例えばリンク先を別ウィンドウを開いて表示したり，インラインフレームや特定の通常フレームに表示させることができる．

まず各フレームの名前を次のように定義する

<iframe name="フレーム名(例えば画面1)" src="最初に「画面1」に表示したいページ名">
<iframe name="別のフレーム名(例えば画面2)" src="最初に「画面2」に表示したいページ名">

さらに，リンクを記述する部分で

<a href="目的のページのURLまたはファイル名" target="画面1(または画面2)" > リンク文字列 </a>

これで，このリンクをクリックすると指定されたフレーム内に表示される．

フレーム名は必ず一つ一つ別な名前を定義すること．同じ名前のものが存在すると動作しない．また，リンクのtarget指定で定義していない名前を指定しても意図したとおりには動作しない．

targetの指定の所に，_topと書くと，フレーム分割を破棄してウィンドウ全体にリンク先のページが表示される．また，_blankと書くと新しいウィンドウを表示して，そこへリンク先のページを表示する．

ページの分割方法

frameタグによる分割方法は，利用者から見た場合に問題が多いが，Webページ作成者の観点からは簡単で便利なものである．ここでは，一応簡単にその使い方を説明しておくことにしよう．

基本的な考え方として，<body>タグの代わりに，<frameset>タグを用いることで，ページ画面を分割する．通常，自分のトップページをフレーム分割するため，index.htmlの内容は次のようにしておく．原則として<body>を書かないことに注意．

<html>
  <head>
  <title></title>などヘッダ部分
  </head>
  <frameset>
     ※フレーム分割を設定する部分※
  </frameset>
</html>

このように，index.htmlの中には，文書などコンテンツは一切記述せず，ただフレーム分割の設定を記述するだけに変更する．通常の中身のあるページは，別の名前のページとして用意しフレーム内に指定する．

<frameset>※フレーム分割を設定する部分※</frameset>と書かれた部分に，具体的なフレーム分割の指定を記入する．具体例は次のようなものがある．それぞれで例えば表示したいページが"menu.html"であった場合には，<frame src="menu.html">などと読み替えること．こうしたmenu.htmlなどのページに，実際に表示する中身を記述しておく．

上下に分割

<frameset rows="25%,75%">
  <frame src="上側に表示したいページ名">
  <frame src="下側に表示したいページ名">
</frameset>

左右に分割

<frameset cols="25%,75%">
  <frame src="左側に表示したいページ名">
  <frame src="右側に表示したいページ名">
</frameset>

両者の複合型

<frameset rows="25%,75%">
   <frame src="上側に表示したいページ名">
   <frameset cols="25%,75%">
     <frame src="左側に表示したいページ名">
     <frame src="右側に表示したいページ名">
   </frameset>
</frameset>

フレーム未対応ブラウザへの対処

フレームに対応していないブラウザ(携帯電話など)から閲覧すると，<noframe>と</noframe>の間に書いた部分が表示される．これを利用して，フレームを使用しないページも別に用意した方が望ましい．最低限の礼儀としては次のようにトップページへのリンクを張ればよい．

<frameset>

        ※フレーム分割を設定する部分※(上記のもの)

     <noframe>
          <body>
            このページはフレーム分割を行っているため，フレーム対応ブラウザで閲覧ください．<br>
            とりあえず中身を閲覧になりたい場合は，こちらからどうぞ
            <a href="フレームなしページのURL">フレームなし</a>
          </body>
     </noframe>
</frameset>

フレーム機能の問題点

フレーム機能は大変便利な機能であるが，問題があったため，現在では推奨されない機能である，問題とは，印刷やブックマークあるいは検索エンジンがそのページの情報を取得するなどページ全体に対する操作が必要なときに，その時のフォーカスの位置などにより特定の一部フレームだけが操作対象となってしまうことがあることである．

似たように画面を分割する方法としては，CSSを用いる方法などがある．

インターネット利用技術演習

2009年度