ホームページの画面を分割表示しよう


  1. フレーム分割


    フレーム分割はブラウザの中のマルティ（多重）ウインドウです。ブラウザの画面を分割し、そこに別々の　htm　を表示することができます。リンクするときは、表示するフレームを指定することができます。

    1. フレーム分割（左右）


      　<frameset>タグで画面をフレームに分割することを指定します。cols　は列方向の分割で、分割する比率を指定します。
      　<frame>では、分割したフレームに表示する　htmファイルを指定します。また、name　で分割したフレームに名前を付与することができます。<body>タグは不要です。
      左右のフレームを20%と80%で縦方向に分割します。左のフレームの名前はinedex、右のフレームはcontとし、left.htmとchap1.htmを表示します。

      <head>
<title> frame sample</title>
</head>
<frameset cols= "20%,80%">
　 <frame src = "left.htm" name = "index">
　 <frame src = "chap1.htm" name = "cont">
</frameset>表示例

    2. 目次フレーム

      　左の「目次」フレームでクリックすると、右のフレームの内容が変化するページを作成します。左のフレームで二つのリンクを指示しています。TARGET　で表示するフレームの名前を指定しています。「１章」をクリックすると、contフレームにchap1.htmを表示することを指定しています。

      1. left.htm
        「1章」がクリックされたらcontフレームにchap1.htmを表示します。同様に、「2章」がクリックされたらcontフレームにchap2.htmを表示します。

        <head>
  <title>index</title>
</head>
<body>
  目次<br>
  <A HREF = "chap1.htm" TARGET = "cont"> 1章</A> <BR>
  <A HREF = "chap2.htm" TARGET = "cont">　2章 </A> <BR>
</body>

      2. 内容（章）のフレーム
        左の「目次」フレームをクリックすると、表示される各ページを作成します。

        1. chap1.htm
          <body>
第1章
 <ul>
　<LI>1.1
　<LI>1.2
 </ul>
</body>
        2. chap2.htm
          <body>
第２章
<ul>
　<LI>2.1
　<LI>2.2
</ul>
</body>

    3. 上下のフレーム分割（framec.htm)

      フレームを上下に分割するには、Cclosをrowsに変更するだけです。また、ここでは、フレームの枠の表示を消すため、FRAMEBORDER="no" を追加します。

      <head>
<title> frame sample</title>
</head>
<frameset rows= "10%,90%" FRAMEBORDER="no">
　 <frame src = "top.htm" name = "index">
　 <frame src = "chap1.htm" name = "cont">
</frameset>

      top.htm
      上のフレームの表示は、改行を止めて、一行で表示します。
      <head>
  <title>index</title>
</head>
<body>
  目次 : 
  <A HREF = "chap1.htm" TARGET = "cont"> 1章 </A> 
  <A HREF = "chap2.htm" TARGET = "cont">　2章 </A> 
</body>

      これで、左右のフレーム画面とは違うシンプルな画面になります。上のフレームは、下のフレームをスクロールしても残ります。

  2. 多重分割


    1. 多レベルの分割

      分割を多段階で行うことができます。以下は、最初に行方向に2分割し、下部のフレームを列方向に2分割した例です。

      1. framem.htm
        分割を定めます。bookが左下のフレーム、txtは右下のフレームです。
        <head>
<title>multi frame</title>
</head>
<frameset ROWS="30%,70%">
<FRAME NAME = "title" SRC="topm.htm">
<FRAMESET COLS="30%,70%">
<FRAME NAME = "book" SRC="left.htm">
<FRAME NAME = "txt" SRC="list.htm">
</FRAMESET>
</FRAMESET>

      2. topm.htm（上段）
        上のフレームから1，2章を選択します。
        <head>
  <title>index</title>
</head>
<body>
  目次 : 
  <A HREF = "chap1m.htm" TARGET = "book"> 1章 </A> 
  <A HREF = "chap2.htm" TARGET = "book"> 　　2章 </A> 
</body>
      3. chap1m.htm
        右下のページの内容を定めます。

        <HTML>
<HEAD>
  <TITLE>left</TITLE>
</HEAD>
<BODY>
  第1章
  <ul>
    <LI><A HREF = "tableSpan.htm" TARGET = "txt"> 1.1 </A>
    <LI><A HREF = "ccad.gif" TARGET = "txt">1.2
  </ul>
</BODY>
</HTML>
    2. 表示例

  3. ダウンロード


    フレームの例をダウンロードできます。次の行をクリックして、frame.exeファイルを適当なフォルダに保存します。
    　 ダウンロード開始

    このファイルは自己解凍型の圧縮ファイルです。このファイルを実行すると指定したフォルダに必要なファイルが生成されます。
トップに戻る