HTMLフレームの応用とスタイル
◆ リンクの方法
フレーム対応の場合、一つのフレームをリンク集のように扱われています。
一般的に、「親フレームと子フレーム」とか「メインフレームとサブ（メニュー）フレーム」と言う表現をし、通常、リンク集は小さい方のフレームを用います。
リンクの作り方は、通常のリンクは<A HREF="URL">〜〜〜</A>を記述しますが、そのままでは、同じフレームに表示されてしまうので属性の「TARGET=""」に配慮します。そこで、正しくリンクさせるために、前回の「NAME="任意の名前"」が生かされます。
例えば、「リンク集のabc.html」にname="link"と記述し、「切り替わり表示するページの123.html」にname="main"と決めておきます。
下記のソースでは、abc.htmlを左側に指定しNAME="link"になっています、右に表示する123.htmlがNAME="main"になっています。
<frameset cols="20%,*">
<frame name="link" src="abc.html" >
<frame name="main" src="123.html" >
リンク集のabc.htmlに<A HREF="URL" TARGET="main">プロフィール</A>と指定すると<frame name="main" src="123.html">側のフレームにリンク先のページ（プロフィール）が交替し表示さる仕組みです。
逆に、abc.htmlを別のページに変更するには、<A HREF="URL" TARGET="link">と記述します。
◆ フレームを解除
自分のサイト以外のページ（他のサイト）を表示したり、全面表示させたい場合には、同じTARGET=""でもTARGET="_TOP"を使用します。
別に、TARGET="_BLANK"でも良いのですが、Webブラウザが余分にできるだけで、「_BLANK」あまりお勧めはできません。やはり、「TARGET="_TOP"」にしましょう。
◆ フォームの送信結果をフレームに表示する
フレームの特性を使いフォームの送信結果を出すことが出来ます。
もちろん、ページは３つ必要です。フレームを設定するHTML文書、記入してもらうフォームのHTML文書、送信結果を表示するHTML文書です。
記入してもらうフォームのHTML文書のタグに「TARGET="送信結果のNAME"」と「value="送信結果のURL"」を記述すれば出来ます。CGIプログラムは必要にまります。
例：<form method="送信方法" action="送信先" target="送信結果を表示するNAME">
<input type=hidden name="コントロール名" value="送信結果を表示するURL" >
その手の配布されているCGIを見つけるほうが早いでしょう。
◆ フレームの間隔サイズを固定
フレームの境界線は、通常マウスで自由にドラックできるのが可能ですが、レイアウトが崩れないように固定することが出来ます。<FRAME>要素の属性に「NORESIZE」と記述すれば、固定されます。
<frame noresize>、XHTMLでは、<frame noresize="noresize"
/>です。
◆ フレームの境界線（枠）の太さや色を変える
・フレームの境界線（枠）の太さを変える
ＩＥとＮＮのみですが、フレーム枠の太さを指定できます。（数値はピクセルです。）
<FRAMESET>要素に「BORDER="数字"」の属性値を加えると太さが変えられます。
・フレームの境界線（枠）の色を変える
ＩＥとＮＮのみですが、フレーム枠の色を指定できます。（数値はピクセルです。）
<FRAMESET>要素や<FRAME>要素に「BORDERCOLOR="色値"」の属性値を加えると色が変えられます。
◆ フレームの境界線（枠）を消す
フレームの境界線（枠）を消すことが出来ます。
<FRAME>要素の属性に「FRAMEBORDER="0"」と記述すれば、枠が無いように見えます。
◆ フレーム境界線（枠）
スクロールバーを非表示にする
フレーム境界線（枠）のスクロールバーを非表示にすることが出来ます。
<FRAME>要素の属性に「SCROLLING="値"」と記述すれば、スクロールバーの設定が出来ます。
値は、「NO」で表示しません。「AUTO」で必要な時に出現します。「YES」でいつも表示されます。
◆ フレーム枠とテキスト（文書）の余白を設定する。
フレーム枠と文字や画像等のテキストの間隔（余白）を設定出来ます。
<FRAME>要素に、上下余白の属性「MARGINHEIGHT="数値"」と左右余白の属性「MARGINWIDTH="数値"」記述すれば枠とテキストの間隔が出来ます。数値はピクセルです。
◆ フローティングフレーム
インラインフレーム（サンプル）の形状は、フォームの<TEXTAREA>メーセージ欄の窓のような形状です。<TEXTAREA>は、文字だけを表示しますが、インラインフレームは、HTML文書ページや画像なども表示することが可能な優れものです。ただし、インラインフレーム非対応ブラウザには使えませんが・・・
<iframe src="ファイルのURL" height="縦幅単位" width="横幅単位">
インラインフレームです<a href="代替ファイルのURL">サンプル</a>をご覧下さい。
</iframe>
インラインフレームの特徴として通常のフレームとは違い、「フレーム設定のHTML文書」はありせん。
通常の<BODY>〜〜〜</BODY>の中にインライン要素として直接記述します。
・フレーム非対応ブラウザのコメント
<IFRAME>〜〜〜</IFRAME>の囲まれた〜〜〜の中にインラインフレーム非対応ブラウザのコメントを記述します。
例えば：<IFRAME>表示されない場合<A HREF="表示用URL">表示</A>をクリックして下さい。</IFRAME>
というように記述します。インラインフレーム非対応ブラウザには<IFRAME>と</IFRAME>のタグが無視され挟まれたコメントが表示されます。
・<IFRAME>要素の属性で表示の設定
<IFRAME>要素の属性の種類は、ALIGN｜FRAMEBORBER｜HEIGHT｜MARGINHEIGHT｜MARGINWIDTH｜NAME｜SCROLLING｜SRC｜WIDTH が使えます。これを見てもらうと解るようにフレームの属性も含まれます。
- ・ALIGN
- フレームの左右位置を指定します。
- ・FRAMEBORBER
- フレーム境界線の有無指定
- ・HEIGHT
- フレームの縦幅を指定
- ・MARGINHEIGHT
- フレーム内の上下余白を指定
- ・MARGINWIDTH
- フレーム内の左右余白を指定
- ・NAME
- フレーム名を指定
- ★NAME属性を使い、フレーム非対応ブラウザ用にリンクを指定すると<IFRAME>の領域が表示領域になります。
- ・SCROLLING
- スクロールバーの有無指定
- ・SRC
- フレーム内に表示するURLを指定
- ・WIDTH
- フレームの横幅を指定
HTML 4.01 Strict.やXHTMLでは、インラインフレームの要素は非推奨やサポートされていません。
その為に、<OBJECT>〜</OBJECT>要素を使用します。
<OBJECT data="表示する.htmlのファイル名">
表示できません<A HREF="???.html">代替リンク先</a>にリンクしてください。
</OBJECT>
表示結果：
