HTML-フレーム

HTMLフレームを使用して、ブラウザウィンドウを複数のセクションに分割し、各セクションで個別のHTMLドキュメントをロードできます。ブラウザウィンドウ内のフレームのコレクションは、フレームセットと呼ばれます。ウィンドウは、表の構成と同様の方法で、行と列にフレームに分割されます。

フレームの欠点

フレームの使用には欠点がほとんどないため、Webページでフレームを使用することはお勧めしません-

一部の小型デバイスは、画面を分割するのに十分な大きさがないため、フレームに頻繁に対応できません。
画面の解像度が異なるため、ページがコンピューターごとに異なって表示される場合があります。
ブラウザーの[戻る]ボタンは、ユーザーの期待どおりに機能しない場合があります。
フレーム技術をサポートしていないブラウザはまだほとんどありません。

フレームを作成する

ページでフレームを使用するには、<body>タグの代わりに<frameset>タグを使用します。 <frameset>タグは、ウィンドウをフレームに分割する方法を定義します。 <frameset>タグの rows 属性は水平フレームを定義し、 cols 属性は垂直フレームを定義します。各フレームは<frame>タグで示され、フレームで開くHTMLドキュメントを定義します。

'_注-HTML5で非推奨となった<frame>タグ。この要素は使用しないでください。_

例

以下は、3つの水平フレームを作成する例です-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>

   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame"/>
      <frame name = "main" src = "/html/main_frame"/>
      <frame name = "bottom" src = "/html/bottom_frame"/>

      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>

   </frameset>

</html>

これは、次の結果を生成します-

例

上記の例を次のようにしましょう。ここでは、rows属性をcolsに置き換え、幅を変更しました。これにより、3つのフレームすべてが垂直に作成されます-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>

   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame"/>
      <frame name = "center" src = "/html/main_frame"/>
      <frame name = "right" src = "/html/bottom_frame"/>

      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>

</html>

これは、次の結果を生成します-

<frameset>タグの属性

以下は、<frameset>タグの重要な属性です-

Sr.No	Attribute & Description
1	cols フレームセットに含まれる列の数と各列のサイズを指定します。あなたは、4つの方法のいずれかで各列の幅を指定することができます- ピクセル単位の絶対値。たとえば、3つの垂直フレームを作成するには、_cols = "100、500、100" _を使用します。ブラウザウィンドウの割合。たとえば、3つの垂直フレームを作成するには、_cols = "10％、80％、10％" _を使用します。ワイルドカード記号を使用します。たとえば、3つの垂直フレームを作成するには、_cols = "10％、、10％" _を使用します。この場合、ワイルドカードはウィンドウの残りを使用します。ブラウザウィンドウの相対的な幅として。たとえば、3つの垂直フレームを作成するには、_cols = "3 、2 、1 " _を使用します。これはパーセンテージの代替です。ブラウザウィンドウの相対的な幅を使用できます。ここで、ウィンドウは6つに分割されます。最初の列はウィンドウの半分を占め、2番目は3分の1、3番目は6分の1を占めます。
2	rows この属性はcols属性と同じように機能し、同じ値を取りますが、フレームセット内の行を指定するために使用されます。たとえば、2つの水平フレームを作成するには、_rows = "10％、90％" _を使用します。上記の列の説明と同じ方法で、各行の高さを指定できます。
3	border この属性は、各フレームの境界線の幅をピクセル単位で指定します。たとえば、border = "5"。値ゼロは、境界線がないことを意味します。
4	frameborder この属性は、フレーム間に3次元の境界線を表示するかどうかを指定します。この属性は、1（yes）または0（no）のいずれかの値を取ります。たとえば、frameborder = "0"は境界線を指定しません。
5	framespacing この属性は、フレームセット内のフレーム間のスペースの量を指定します。これには任意の整数値を使用できます。たとえば、framespacing = "10"は、各フレーム間に10ピクセルの間隔が必要であることを意味します。

<frame>タグの属性

以下は、<frame>タグの重要な属性です-

Sr.No	Attribute & Description
1	src この属性は、フレームにロードするファイル名を指定するために使用されます。値には任意のURLを使用できます。たとえば、src = "/html/top_frame"は、htmlディレクトリにあるHTMLファイルをロードします。
2	name この属性を使用すると、フレームに名前を付けることができます。ドキュメントをロードするフレームを示すために使用されます。これは、ページを別のフレームにロードするリンクを1つのフレームに作成する場合に特に重要です。この場合、2番目のフレームには、リンクのターゲットとして自身を識別する名前が必要です。
3	frameborder この属性は、そのフレームの境界線を表示するかどうかを指定します。 <frameset>タグのframeborder属性で指定された値が指定されている場合、それをオーバーライドし、1（yes）または0（no）のいずれかの値を取ることができます。
4	marginwidth この属性を使用すると、フレームの境界線の左右とフレームのコンテンツの間のスペースの幅を指定できます。値はピクセル単位で指定されます。たとえば、marginwidth = "10"。
5	marginheight この属性を使用すると、フレームの境界線の上部と下部とそのコンテンツの間のスペースの高さを指定できます。値はピクセル単位で指定されます。たとえば、marginheight = "10"。
6	noresize デフォルトでは、フレームの境界線をクリックしてドラッグすることで、フレームのサイズを変更できます。 noresize属性は、ユーザーがフレームのサイズを変更できないようにします。たとえば、noresize = "noresize"。
7	scrolling この属性は、フレームに表示されるスクロールバーの外観を制御します。これは、「yes」、「no」、または「auto」のいずれかの値を取ります。たとえば、scrolling = "no"は、スクロールバーがないことを意味します。
8	longdesc この属性を使用すると、フレームのコンテンツの長い説明を含む別のページへのリンクを提供できます。たとえば、longdesc = "framedescription"

フレームのブラウザサポート

ユーザーがフレームをサポートしない古いブラウザーまたはブラウザーを使用している場合、<noframes>要素をユーザーに表示する必要があります。

そのため、<frameset>要素は<body>要素を置き換えることになっているため、<noframes>要素内に<body>要素を配置する必要がありますが、ブラウザが<frameset>要素を理解していない場合は、その内部の内容を理解する必要があります<noframes>要素に含まれる<body>要素。

古いブラウザを使用しているユーザーに対して、素敵なメッセージを送ることができます。たとえば、_Sorry !! 上記の例に示すように、ブラウザはframes._をサポートしていません。

フレームの名前とターゲット属性

フレームの最も一般的な使用法の1つは、ナビゲーションバーを1つのフレームに配置し、メインページを別のフレームに読み込むことです。

テストファイルに次のコードがある次の例を見てみましょう-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>

   <frameset cols = "200, *">
      <frame src = "/html/menu" name = "menu_page"/>
      <frame src = "/html/main" name = "main_page"/>

      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>

</html>

ここでは、2つのフレームを埋めるために2つの列を作成しました。最初のフレームの幅は200ピクセルで、 menu ファイルによって実装されるナビゲーションメニューバーが含まれます。 2番目の列は残りのスペースを埋め、ページのメイン部分が含まれ、 main ファイルによって実装されます。メニューバーで使用可能な3つのリンクすべてについて、ターゲットフレームを main_page と記載しているため、メニューバーでリンクのいずれかをクリックすると、使用可能なリンクがメインページで開きます。

以下はメニューファイルの内容です

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br/>
      <br/>

      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br/>
      <br/>

      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>

</html>

以下はメインファイルの内容です-

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>

</html>

テスト*ファイルをロードすると、次の結果が生成されます-

これで、左側のパネルにあるリンクをクリックして結果を確認できます。 _targetattribute_はまた、次の値のいずれかを取ることができます-

Sr.No	Option & Description
1	_self 現在のフレームにページをロードします。
2	_blank ページを新しいブラウザウィンドウにロードします。新しいウィンドウを開きます。
3	_parent ページを親ウィンドウにロードします。親ウィンドウは、単一のフレームセットの場合はメインブラウザーウィンドウです。
4	_top ページをブラウザウィンドウに読み込み、現在のフレームを置き換えます。
5	targetframe 指定されたターゲットフレームにページをロードします。

Html-frames

目次