気の向くままに辿るIT/ICT/IoT

HTML/XHTMLタグ・要素・属性・属性値

FRAMEタグ / ページ分割

ページを分割したい！『frameタグ編』

frameタグでページ分割

frameとは

　一つのブラウザでメニュー画面とコンテンツ(情報)画面が別になっているページを見かけたことがあるでしょう。

　見た目にはわからないような技とも言える分割をしているページもあったりします。

　一体これはどのような設定をしているのでしょうか？

　今回は画面の分割を実現するframeタグを使ってみましょう。

【追記】

HTML4/XHTML1にはframeset/frame要素・タグとiframe要素・タグがありますが、frameset/frameタグはW3C非推奨です。

frameタグはframesetタグと併用しウィンドウ自体を複数に分割する為のものでiframeタグはinline frame(インラインフレーム)の略で、それ単独でウィンドウ内に別窓を埋め込むタイプのフレーム要素です。

まだ勧告には至っていないもののHTML5ではiframeは新たに再定義され、frameset/frameタグは定義されていません。

　frameタグは以下のように記述します。

◆例題

　frame以外のHTMLファイル(ホームページ)では

のようにhead部とbody部からなっているのですが、frameを使用する場合はbody部はなく、以下のようにhead部とframeset部から構成されます。

　また1行目におまじないの一文(DOCTYPE宣言)があるのを覚えていますか？

　frameタグを使用する時にはframeタグが使えるおまじないが必要です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/TR/html4/frameset.dtd">

　これでframeタグが使用できるようになります。(というかframeタグをW3Cの仕様で記述することを宣言します)

　それでは先ほどの◆例題の内容は以下の通りです。

<frameset COLS="20%,80%">

・『COLS』は『縦(列)方向』
・右辺でカンマで２つの値を設定している→『２分割』
・"20%,80%"は相対値(ブラウザのサイズに依存)で設定しており
  →１つめの値：左側画面のサイズ
  →２つめの値：右側(左から2番目)画面のサイズ

つまり、
『縦(列)方向に20%と80%の比率で２分割』することを意味する

<frameset rows="100,150">
  <frame src="abc.html">
  <frame src="def.html">
</frameset>

・『ROWS』は『横(行)方向』
・右辺でカンマで２つの値を設定している→『２分割』
・"100,150"は絶対値(ブラウザのサイズに非依存)で設定しており
  →単位はピクセル
  →１つめの値：上部画面のサイズ
  →２つめの値：下部(上から2番目)画面のサイズ

つまり、
『横(行)方向に100ピクセルと150ピクセルで２分割』
  →『上部に"abc.html"を表示』
  →『下部(上から2番目)に"def.html"を表示』
することを意味する

　途中ですが、ここで入れ子という考え方について少しだけお話します。

　今回の場合

<frameset cols="">～</frameset>の内側に<frameset rows="">～</frameset>があります。

　プログラムの世界ではこのようにタグの間に別のタグが入って2重以上になることを『入れ子／ネスト』と呼んでいます。

　詳細説明は割愛させて頂きますが、◆例題では『COLS』が設定された後『ROWS』が入れ子となって設定されていますので『ROWS』は外側にある『COLS』の影響を受けます。

　影響を受けるという言葉は誤解を招きそうなので、逆に言いますと「影響するように入れ子にしています」

　どういう事かというと

◆例題で『横(行)方向に分割』されるのは
『縦(列)方向に分割』された内の『上部の画面』である

つまり、ブラウザ上の画面が
→左側に縦２分割された画面
→右側に１画面
の３画面に分割されます。

　ここで先ほどの説明に戻りますと

<frame src="ghi.html">
</frameset>

一番外側にあたる<frame src="ghi.html">は『COLS』で設定した画面右側(左から2番目)に『"ghi.html"』が表示されることになります。

　ここまでで『"abc.html"』等３つのhtmlファイルをあなたのつくったものに置き換えてこのファイルを開くと３つに分割された画面が表示されましたよね。

　その画面をよく見てください。

　分割された画面間に『境界線』がありますよね？

　この境界線は有無や太さ、色を指定する事ができるんですよ。

　それでは早速。

境界線の

・有無設定
  なし：<frameset frameborder="0">
  あり：<frameset frameborder="1">

  または

  なし：<frame frameborder="0">
  あり：<frame frameborder="1">

    ※何も設定しなければ"1"です。


・巾設定
  <frameset border="">
    ※""に数字を入れます。


・色設定
  <frameset bordercolor="">

  または

  <frame bordercolor="">

    ※16進数6桁または色名
    ※#ffff0e、blueなど


・サイズ変更禁止設定
  <frame src="" noresize>

のようにします。

進数・進法

　またスクロールバーの表示を設定したい場合は

<frame src="" scrolling="">
※""内にはauto(自動)/yes(表示)/no(非表示)いずれかをセット

のようにします。

　分割されたどの画面でも文章だけならこれで充分なのですがリンクを設定したい場合は、通常リンク元とリンク先は同じ画面に表示されます。

　他の分割された画面に表示させたい場合もでてくるでしょう。

この場合は以下のようにします。

A）<frame>タグのNAME属性を使用して表示させたいframeに指定
→ <frame src="" name="なまえ">
B）<A>タグのHREF属性を使ったリンクにTARGET属性を指定
→ <a href="" target="なまえ">

  ※"なまえ"内にはこの他に_blank/_self/_parent/_topの
    いずれかがセットできます
  ※_blank：新しい名前のないフレーム
  ※_self：リンク元と同じフレーム(何も指定しない場合と同様)
  ※_parent：<frameset>で各フレームを設定している親フレーム
    存在しない場合"_self"と同様
  ※_top：既にあるフレームを全て解除してウィンドウ全体
    親フレームが存在しない場合"_self"と同様

　いかがですか？これでframeが使えるようになりましたね。

　いろいろ設定を変えて試してみてくださいね。

　但し、フレーム自体に対応していないブラウザを使用していたり、フレームを表示させない設定をしている方がいる場合、frameが表示できないのでエラーとなったり表示しなかったりします。

　フレーム対応している場合としていない場合どちらにも対応できるように<noframes>～</noframes>タグが用意されており、<frameset>～</frameset>タグの内側に記述する事でどちらにも対応できるようにする事ができます。

◆例題

  <frameset cols="20%,80%">
      <frame src="abc.html">
      <frame src="def.html">
    <noframes>
    このページではフレームを使用しています。
    <br>フレーム未対応のブラウザをご使用の方は
    <a href="">こちら</a>へどうぞ
    </noframes>
  </frameset>

　<a href="">こちら</a>のHREF=""にはフレームを使用していないhtmlファイルを作成して指定します。

　因みにインラインフレームというものもあり便利なのですが、InternetExplorerしか対応していないのでここでは割愛します(【追記】参照)。

HTML4勧告後しばらくはiframeに対応したブラウザはありませんでしたが、昨今使われているブラウザシェアにおいては大半が対応していると思われます。

まだ勧告には至っていませんがHTML5ではiframeは新たに再定義、frameタグは採用されていません。

【HTML4/XHTML1】iframe要素・タグの属性

longdesc/frameborder/marginwidth/marginheight/scrolling

width/height/src/name

class/id/style/title

非推奨属性：align

【HTML5】iframe要素・タグの属性

srcdoc/sandbox/seamless

width/height/src/name