1.フレームの基本形(横に分割)   FRAMESET:フレーム全体  FRAME:個々のフレーム

HTMLの指定
画面のイメージ
<html>
<head>
    <title>フレームの練習(左右に分割)</title>
</head>
<frameset cols="25%,*" border=0>
  <frame src="frame-mokuji.html" name="hidari">
  <frame src="frame-top.html" name="migi">
</frameset>
</html>

    ◇bodyタグは、なし

    ◇ファイル名の付け方(例)
      ・このHTMLファイル frame-0.html
      ・左側のページ    frame-mokuji.html
      ・右側のページ    frame-top.html


◇左右に分割

目次 トップページ



 2.フレームの基本形(縦に分割)

HTMLの指定
画面のイメージ
<html>

<head>
    <title>フレームの練習(上下に分割)</title>
</head>

<frameset rows="100,*" border=0>
  <frame src="frame-mokuji.html" name="mokuji">
  <frame src="frame-top.html" name="main">
</frameset>

</html>


◇上下に分割

目次
トップページ



 3.フレームのサンプル

frame-mokuji.html の 内容
画面表示
<html>
<head><title>フレームの目次</title></head>

<body bgcolor="#ccffcc" link="blue" alink="blue" vlink="blue">
■INDEX <br><br>
<a href="frame-top.html"target="migi">トップページ</a>
<br><br>
<a href="hajime.html" target="migi">HTMLの基礎知識</a>
<br><br>
<a href="mojifont.html" target="migi">文字フォントのサンプル</a>
<br><br>
<HR>
<br>
<a href="http://www.yahoo.co.jp/" target="_top">ヤフー</a>
<br><br>
<a href="http://www.bunkyo.ac.jp/" target="_blank">文教大学</a>
<br><br>
</body></html>


■INDEX

トップページ

HTMLの基礎知識

文字フォントのサンプル



ヤフー

文教大学



frame-top.html の 内容
画面表示
<html>
<head>
<title>フレームのトップ</title>
</head>

<body><br><br>
<center>ここはフレームのトップページです
<br><br><br>
frame main page
</center>
</body></html>


ここはフレームのトップページです


frame main page




フレームのサンプル
サンプル表示