MAJIDEKA.COM－フレーム

● ４時限目 ●



[フォーム] or [★ HTML講座 ★] or [ウィンドウ]

[フレーム]

　フレーム未対応ブラウザへの配慮とは

　フレームに分割するには

　フレームのタイトルをタイトルバーに表示するには

　インナーフレームを置くには

フレーム未対応ブラウザへの配慮とは

・<noframes>タグを使用してフレーム未対応ブラウザへのメッセージを記述する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<noframes>～</noframes>)

　フレーム未対応ブラウザへの配慮として、<noframes>タグを使用してフレーム未対応ブラウザへのメッセージを記述します。
　これはマナーなので、忘れないようにしましょう。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>フレーム未対応ブラウザへの配慮</title> </head> <frameset cols="50%, 50%"> <frame src="majideka.html" name="F1"> <frame src="majideyo.html" name="F2"> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　ブラウザにはこのように対応していればフレームページが、未対応ならメッセージが表示されます。

フレームに分割するには

・<frameset>タグにcols属性を指定してフレームを縦に分割する方法

　フレームを縦に分割するには、<frameset>タグにcols属性を指定します。
　F1、F2は各フレームにname属性でつけた名前のことです。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>フレームを縦に分割</title> </head> <frameset cols="50%, 50%"> <frame src="majideka.html" name="F1"> <frame src="majideyo.html" name="F2"> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　ブラウザにはこのように表示されます。

・<frameset>タグにrows属性を指定してフレームを横に分割する方法

　フレームを横に分割するには、<frameset>タグにrows属性を指定します。
　F1、F2は各フレームにname属性でつけた名前のことです。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>フレームを横に分割</title> </head> <frameset rows="50%, 50%"> <frame src="majideka.html" name="F1"> <frame src="majideyo.html" name="F2"> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

フレームの境界線をなくすには

・<frameset>タグにframeborder="0"とborder="0"属性を指定してフレームの境界線をなくす方法

　フレームの境界線をなくすには、<frameset>タグにframeborder="0"とborder="0"属性を指定します。
　F1、F2は各フレームにname属性でつけた名前のことです。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>フレーム境界線をなくす</title> </head> <frameset cols="25%, 75%" frameborder="0" border="0"> <frame src="majideka.html" name="F1"> <frame src="majideyo.html" name="F2"> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　ブラウザにはこのように表示されます。

フレームの境界線を固定するには

・<frame>タグにnoresize属性を使用してフレームの境界線を固定する方法

　フレームの境界線を固定するには、<frame>タグにnoresize属性を使用します。
　F1、F2は各フレームにname属性でつけた名前のことです。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<html> <head> <title>フレーム境界線の固定</title> </head> <frameset cols="25%, 75%"> <frame src="majideka.html" name="F1" noresize> <frame src="majideyo.html" name="F2" noresize> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

別フレームの内容を書き換えるには

・<a>タグにtarget属性を使用して別フレームの内容を書き換える方法

　別フレームの内容を書き換えるには、<a>タグにtarget属性を使用します。
　F1、F2は各フレームにname属性でつけた名前のことです。
　F1にあたるフレームページ内左側を目次とし、F2にあたる右側を書き換えます。
　F2にはまずトップページとなるページを設定し、目次の<a>タグにより書き換えて内容を書き換えていきます。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　・フレームページのテキストエディタ
　　<html> <head> <title>別フレーム書き換え</title> </head> <frameset cols="25%, 75%"> <frame src="mokuji.html" name="F1"> <frame src="majideka.html" name="F2"> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　・フレームページ内の左側のテキストディタ
　　<html> <head> <title>フレーム内左側</title> </head> <body> <a href="majinosuke.html" target="F2">別フレーム書き換え</a> </body> </html>
　・フレームページ内の右側のテキストディタ１
　　<html> <head> <title>フレーム内右側</title> </head> <body> majideka.html </body> </html>
　・フレームページ内の右側のテキストディタ２
　　<html> <head> <title>フレーム内右側</title> </head> <body> majinosuke.html </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

複数のフレームを同時に書き換えるには

・JavaScriptを使用して複数のフレームを同時に書き換える方法

複数のフレームを同時に書き換えるには、JavaScriptを使用します。
　F1、F2は各フレームにname属性でつけた名前のことです。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　・フレームページのテキストエディタ
　　<html> <head> <title>複数フレーム同時書き換え</title> </head> <frameset cols="50%, 50%"> <frame src="majisuka.html" name="F1"> <frame src="majisuyo.html" name="F2"> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　・フレームページ内の左側のテキストディタ
　　<html> <head> <title>フレーム内左側</title> </head> <body> <script type="text/javascript">  </script> <a href="#" onclick="return func()">同時書き換え</a> </body> </html>
　・フレームページ内の右側のテキストディタ
　　<html> <head> <title>フレーム内右側</title> </head> <body> <script type="text/javascript">  </script> <a href="#" onclick="return func()">同時書き換え</a> </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

フレームを解除するには

・<a>タグにtarget属性に_topを指定する方法(<a href="xxx.html" target="_top">～</a>)

　フレームを解除するには、<a>タグにtarget属性に_topを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　・フレームページのテキストエディタ
　　<html> <head> <title>フレーム解除</title> </head> <frameset cols="50%, 50%"> <frame src="majide.html""> <frame src="majideyo.html""> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　・フレームページ内の左側のテキストディタ
　　<html> <head> <title>フレーム内左側</title> </head> <body> <a href="index.html" target="_top">フレーム解除</a> </body> </html>
　・フレームページ内の右側のテキストディタ
　　<html> <head> <title>フレーム内右側</title> </head> <body> majideyo.html </body> </html>
　ブラウザにはこのように表示されます。

▲ページトップへ

フレームのタイトルをタイトルバーに表示するには

・JavaScriptを使用してフレームのタイトルをタイトルバーに表示する方法

フレームのタイトルをタイトルバーに表示するには、JavaScriptを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　・フレームページのテキストエディタ
　　<html> <head> <title>フレームタイトル</title> </head> <frameset cols="50%, 50%"> <frame src="majinosuke.html"> <frame src="majideyo.html"> <noframes> <body> フレームを使用しているため、フレーム対応ブラウザでご覧ください。 </body> </noframes> </frameset> </html>
　・フレームページ内の左側のテキストディタ
　　<html> <head> <title>フレーム内左側</title> <script type="text/javascript">  </script> </head> <body> majinosuke.html </body> </html>
　・フレームページ内の右側のテキストディタ
　　<html> <head> <title>フレーム内右側</title> </head> <body> majideyo.html </body> </html>
　ブラウザにはこのように表示されます。

インナーフレームを置くには

・<iframe>タグを使用してインナーフレームを置く方法(<iframe>～</iframe>)

　インナーフレームを置くには、<iframe>タグを使用します。
　<iframe>～</iframe>の～には未対応ブラウザへのメッセージを記述しましょう。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<iframe src="inner_frame.html" width="200" height="100"> インナーフレームを使用しているため、インナーフレーム対応ブラウザでご覧ください。 </iframe>
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.