<<PREV | TOP | NEXT>>

FRAMESET 要素

last modified 23rd/Oct. 2000

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

Frameset DTD に則った文書( FRAMESET 文書)の HTML 要素は、内容モデルに HEAD 要素と FRAMESET 要素が定義されています。 FRAMESET 要素は、ブラウザ・ウィンドウをフレームで矩形に分割する方法を指定する要素です。

フレームセット文書の基本的な枠組み;

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

FRAMESET 文書は Transitional 文書の修正として定義されており、 head 要素の定義などは Transitional のままです。まずは、 Transitional における body 要素が frameset 要素に置き換わったと云う点から注目しましょう。

frameset 要素を定義する DTD の抜粋;

<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
<!ATTLIST FRAMESET
  %coreattrs;                          -- id, class, style, title --
  rows        %MultiLengths; #IMPLIED  -- list of lengths,
                                          default: 100% (1 row) --
  cols        %MultiLengths; #IMPLIED  -- list of lengths,
                                          default: 100% (1 col) --
  onload      %Script;       #IMPLIED  -- all the frames have been loaded  --
  onunload    %Script;       #IMPLIED  -- all the frames have been removed --
  >

属性定義

rows = multi-length-list [CN]
cols = multi-length-list [CN]

フレーム分割

次はブラウザウィンドウを左右に二分割し、左側をブラウザウィンドウの 20% 幅に、右側を 80% 幅に指定しています。

 __________________________
|     |                    |
|     |                    |
| 20% |        80%         |
|     |                    |
|     |                    |
|_____|____________________|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
 <head>
   <title>フレーム文書</title>
 </head>
 <frameset rows="20%,80%">
 ...the rest of the definition...
 </frameset>
</html>

ここのフレームは FRAME 要素で記述します。

次の例は、ウィンドウを上下に三分割し、中段の高さを 250 ピクセルに指定します。ウィンドウの残りの高さを四等分して、上段・下段に1対3で割り振ります。

 _____________________
|        25%          |
|_____________________|
|                     |
|        250          |
|_____________________|
|                     |
|        75%          |
|                     |
|_____________________|
 <frameset rows="1*,250,3*">
 ...the rest of the definition...
 </frameset>

次の例では縦横 2 × 3 に分割します。

 _____________________
|      |              |
|______|______________|
|      |              |
|______|______________|
|      |              |
|______|______________|
 <frameset rows="30%,70%" cols="1*,1*,1*">
 ...the rest of the definition...
 </frameset>

FRAMESET 要素の入れ子

FRAMESET 要素は子供要素に FRAMESET 要素を持ち得ます。この入れ子によって、柔軟なフレーム分割が可能になります。

<frameset cols="20%, 50%, 30%">
     ...contents of first frame...
     <frameset rows="2*, 4*">
        ...contents of second frame, first row...
        ...contents of second frame, second row...
     </frameset>
     ...contents of third frame...
</frameset>

この例では、外側の FRAMESET 要素が水平方向に三分割し、左側のフレームから 20%, 50%, 30% 幅を指定しています。

更に、真ん中のフレームは FRAMESET 要素で分割されています。ここでは上下に二分割されており、上段のフレームは 40%、下段のフレームは 50% に指定されています。

 ______________________
|    |          |      |
|    |__________|      |
|    |          |      |
|    |          |      |
|    |          |      |
|____|__________|______|
  20%     50%      30%

<<PREV | TOP | NEXT>>

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