esprits top Esprit's Style

    -    エンジニアの足つぼ    -

フレーム

〆 いろいろなフレームを作成します

※ 注意
フレームを用いるといくつかの弊害が発生します。
ブックマークがうまく張れない、検索エンジンでヒットしにくいなどの問題です。
個人的なサイトであれば使っても構いませんが、あまりお勧めできません。
利用する場合は、その特性を十分理解して利用してください。
企業のサイトでは、ほとんど使われていません。

・ 縦に分割します

<frameset cols="??%, ??%">, <frame src="~.html">
※ フレームを設定するhtmlファイルには、<body>~</body>がありません。
※ 分割をするときは必ずリンクの設定を行ってください。

<html>
  <head>
    <title> フレームサンプル1 </title>
  </head>
  <frameset cols="20%, 80%">
    <frame src="./menu01.html">
    <frame src="./main01.html">
  </frameset>
  <noframes>
    <h1>これが表示される場合は、
    フレームが表示できないブラウザです</h1>
  </noframes>
</html>
 フレーム分割 縦
 File  Edit  Tool  Help

Menu1

Menu2

Menu3



メインページ



表示サンプル1

・ 横に分割します

<frameset rows="??%, ??%">, <frame src="~.html">

<html>
  <head>
    <title> フレームサンプル2 </title>
  </head>
  <frameset rows="30%, 70%">
    <frame src="./menu02.html">
    <frame src="./main02.html">
  </frameset>
</html>
 フレーム分割 横
 File  Edit  Tool  Help

 Menu1 Menu2 Menu3



メインページ



表示サンプル2

・ 3つに分割します

<html>
  <head>
    <title> フレームサンプル3 </title>
  </head>
  <frameset rows="30%, 70%">
    <frame src="./A.html">
    <frameset cols="20%, 80%">
      <frame src="./B.html">
      <frame src="./C.html">
    </frameset>
  </frameset>
</html>
 フレーム3分割
 File  Edit  Tool  Help

 A 


 B 




 C 



・ 4つに分割します

<html>
  <head>
    <title> フレームサンプル4 </title>
  </head>
  <frameset rows="30%, 70%" cols="20%", "80%">
    <frame src="./A.html">
    <frame src="./B.html">
    <frame src="./C.html">
    <frame src="./D.html">
  </frameset>
</html>
 フレーム4分割
 File  Edit  Tool  Help

 A 


 B 


 C 




 D 



・ 別フレーム間のリンクを設定します

<frame name="???">,
<a href="??.html" target="???">

せっかくフレームで分割してもリンクが設定されていないと意味がありません。
フレーム分割するファイルで領域ごとに名前を付けます。(例1)
この名前を用いて、右側のメニューフレームから左側のメインフレームへ
リンクを設定します。(例2)

(例1)分割したフレームへの名前の付け方
<html>
  <head>
    <title> フレームサンプル5 </title>
  </head>
  <frameset rows="20%, 80%">
    <frame src="./menu05.html" name="f_menu05">
    <frame src="./main05.html" name="f_main05">
  </frameset>
</html>
(例2)左側のメニューフレームの設定
<html>
  <head>
    <title> メニューサンプル </title>
  </head>
  <a href="main05-1.html" target="f_main03">
      右側の表示を変える</a>
  <a href="main05-3.html" target="_blank">
      新しいウィンドウで表示</a>
  <a href="main05-2.html" target="_top">
      フレームを解除して表示</a>
  <a href="main05-2.html" target="_parent">
      フレームの親として表示</a>
</html>
表示サンプル5

・ スクロールバーの設定をします

<frameset scrolling="yes, no, auto">
scrolling="yes" : スクロールバーを表示
scrolling="no" : スクロールバーを非表示
scrolling="auto" : 必要に応じて、非表示、表示を切り替える

<html>
  <head>
    <title> フレームサンプル6 </title>
  </head>
  <frameset cols="20%, 80%">
    <frame src="./menu01.html"
      scrolling="yes">
    <frame src="./main01.html">
  </frameset>
  <body>
    ~
  </body>
</html>
表示サンプル6

・ フレームの境界線の表示、非表示を設定します

<frameset frameborder="0, 1">
frameborder="0" : 境界線を非表示
frameborder="1" : 境界線を表示(デフォルト)

※frameborder="0"と設定して、境界線を非表示としても
フレーム間の境界に白いラインが残ります。
次のborder="0" 設定することでこれを消すことができます。

<html>
  <head>
    <title> フレームサンプル7 </title>
  </head>
  <frameset cols="20%, 80%"  frameborder="0">
    <frame src="./menu01.html">
    <frame src="./main01.html">
  </frameset>
  <body>
    ~
  </body>
</html>
表示サンプル7

・ フレームの境界線の幅を設定します

<frameset border="境界線の幅">
border="0" : 境界線を非表示

<html>
  <head>
    <title> フレームサンプル8 </title>
  </head>
  <frameset cols="20%, 80%"  border="10">
    <frame src="./menu01.html">
    <frame src="./main01.html">
  </frameset>
  <body>
    ~
  </body>
</html>
表示サンプル8

・ フレームの境界線を固定します

<frame noresize >

<html>
  <head>
    <title> フレームサンプル9 </title>
  </head>
  <frameset cols="20%, 80%">
    <frame src="./menu01.html"  noresize>
    <frame src="./main01.html">
  </frameset>
  <body>
    ~
  </body>
</html>
表示サンプル9

・ フレームの外枠との間隔を設定します

<frame marginwidth="??" marginheight="??">

こちらを 参考のこと。インラインフレームと同じように使います。

The link to this site is free.   /   Last Updated : 28.May.2012   
Copyright © ESPRITS STYLE. 2003-2007   /   ご意見、感想、苦情は、 こちらへ...
counter