<<PREV | TOP | NEXT>>

FRAME 要素

last modified 9th/Nov. 2000

  1. Frameset 文書とは何だろうか
  2. Frameset DTD
  3. FRAMESET 要素
  4. FRAME 要素
  5. NOFRAMES 要素
  6. リンク先の表示フレーム枠指定
  7. 複数フレーム枠の同時更新

Frameset DTD に則った文書( FRAMESET 文書)は、複数の HTML 文書を組み合わせ、ブラウザのウィンドウを分割して表示します。ブラウザのフレーム分割は FRAMESET 要素で定義しますが、各フレームの定義は FRAME 要素で行います。 FRAME 要素は FRAMESET 要素の子供要素として表われます。

<!-- reserved frame names start with "_" otherwise starts with letter -->
<!ELEMENT FRAME - O EMPTY              -- subwindow -->
<!ATTLIST FRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements title) --
  name        CDATA          #IMPLIED  -- name of frame for targetting --
  src         %URI;          #IMPLIED  -- source of frame content --
  frameborder (1|0)          1         -- request frame borders? --
  marginwidth %Pixels;       #IMPLIED  -- margin widths in pixels --
  marginheight %Pixels;      #IMPLIED  -- margin height in pixels --
  noresize    (noresize)     #IMPLIED  -- allow users to resize frames? --
  scrolling   (yes|no|auto)  auto      -- scrollbar or none --
  >

FRAME 要素は開始タグのみで終了タグが存在しない空要素です。 XHTML 1.0 に配慮すれば、 <frame /> のように書く必要が有ります。

属性定義

name = cdata [CI]
longdesc = uri [CT]
src = uri [CT]
最初にフレームに読み込まれる内容の URL を指定します。
noresize [CI]
この boolean 型属性が指定されたフレームの大きさを変えられなくします。
scrolling = auto|yes|no [CI]
フレームウィンドウに関するスクロールの有無を指定します。
frameborder = 1|0 [CN]
フレームのボーダーの有無を指定します。
marginwidth = pixels [CN]
フレーム内容の左右マージンを指定します。値はゼロより大きい必要があり、初期値はブラウザに依存します。
marginheight = pixels [CN]
フレーム内容の上下マージンを指定します。値はゼロより大きい必要があり、初期値はブラウザに依存します。

FRAME 要素によるフレームの定義

FRAME 要素はフレームの定義と最初に表示される内容を指定します。 src 属性と name 属性は必ず必要になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>a frameset document</title>
</head>
<frameset cols="20%,80%">
  <frame src="./frame1.html" name="nyoronyoro">
  <frame src="./frame2.html" name="hogehoge">
</frameset>
</html>

この例では、ウィンドウは左右に二分割され、左側のフレームは 20% 幅、右側のフレームは 80% 幅に指定されています。

 _______________________________
|      |                        |
|frame1|  frame2                |
|      |                        |
|      |                        |
|      |                        |
|______|________________________|

このフレームに属性を追加してみましょう;

<frameset cols="20%,80%">
  <frame src="./frame1.html"
     name="menu" noresize scrolling="no" frameborder="0">
  <frame src="./frame2.html"
     name="content" frameborder="0" marginwidth="30">
</frameset>
frame1frame2
src初期内容./frame1.html src初期内容./frame2.html
name名前menu name名前content
noresizeフレーム枠の大きさ固定
scrollingスクロールバー0非表示
frameborderボーダー0非表示 frameborderボーダー0非表示
marginwidth左右マージン20 (Pixel)

XHTML 1.0 での修正

ここで挙げた例は、 HTML 4 としては十分正しいのですが、 XHTML 1.0 では誤りです。次に XHTML 1.0 を意識して修正した例を挙げます。

XHTML 1.0 での例;

<frameset cols="20%,80%">
  <frame src="./frame1.html"
     name="menu" id="menu" noresize="noresize" scrolling="no" frameborder="0" />
  <frame src="./frame2.html"
     name="content" id="content" frameborder="0" marginwidth="30" />
</frameset>

name 属性は廃止予定なので、 id 属性も併記します。 boolean 属性も省略は許されず、 noresize="noresize" と書かなければなりません。まt、また、空要素は、 /> で閉じる必要が有ります。

この修正は、 HTML 4 としても解釈できるように W3C が推奨するものです。将来 XHTML 1.0 への移行を考えている場合は、今のうちにこのように書いておく事をお勧めします。

FRAMESET 要素の入れ子

FRAMESET 要素を入れ子にする事で、より複雑なフレーム分割が実現します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>a frameset document</title>
</head>
<frameset cols="20%,40%,40%">
  <frameset rows="*,200">
      <frame src="./frame1.html" name="menu">
      <frame src="./frame2.gif" name="banner">
  </frameset>
  <frame src="./frame3.html" name="left">
  <frame src="./frame4.html" name="right">
</frameset>
</html>

この例では、最初の FRAMESET 要素によって、ウィンドウが左右に三分割され、左フレームの幅はは 20%、中央フレームは 40%、右フレームは 40% になります。

中央フレームに表示される初期内容は frame3.html 、右フレームは ./frame4.html が指定されています。

左フレームは更に FRAMESET 要素で上下に分割されており、下段の高さは 200 ピクセル、その残りの高さが上段に指定されています。

上段に表示される初期内容は ./frame1.html で、下段は ./frame4.html が指定されています。

 __________________________________________
|        |                |                |
|frame1  | frame3         | frame4         |
|(menu)  | (left)         | (right)        |
|        |                |                |
|________|                |                |
|frame2  |                |                |
|(banner)|                |                |
|________|________________|________________|

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO