TOP > Back > Place >  Next

 

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"」にしましょう。


◆ フォームの送信結果をフレームに表示する

フレームの特性を使いフォームの送信結果を出すことが出来ます。
もちろん、ページは3つ必要です。フレームを設定する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" />です。


◆ フレームの境界線(枠)の太さや色を変える

・フレームの境界線(枠)の太さを変える

IEとNNのみですが、フレーム枠の太さを指定できます。(数値はピクセルです。)
<FRAMESET>要素に「BORDER="数字"」の属性値を加えると太さが変えられます。

・フレームの境界線(枠)の色を変える

IEとNNのみですが、フレーム枠の色を指定できます。(数値はピクセルです。)
<FRAMESET>要素や<FRAME>要素に「BORDERCOLOR="色値"」の属性値を加えると色が変えられます。


◆ フレームの境界線(枠)を消す

フレームの境界線(枠)を消すことが出来ます。
<FRAME>要素の属性に「FRAMEBORDER="0"」と記述すれば、枠が無いように見えます。


◆ フレーム境界線(枠)
スクロールバーを非表示にする

フレーム境界線(枠)のスクロールバーを非表示にすることが出来ます。
<FRAME>要素の属性に「SCROLLING="値"」と記述すれば、スクロールバーの設定が出来ます。
値は、「NO」で表示しません。「AUTO」で必要な時に出現します。「YES」でいつも表示されます。


◆ フレーム枠とテキスト(文書)の余白を設定する。

フレーム枠と文字や画像等のテキストの間隔(余白)を設定出来ます。
<FRAME>要素に、上下余白の属性「MARGINHEIGHT="数値"」と左右余白の属性「MARGINWIDTH="数値"」記述すれば枠とテキストの間隔が出来ます。数値はピクセルです。


インラインフレーム、<IFRAME>要素

◆ フローティングフレーム

インラインフレームサンプル)の形状は、フォームの<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>

表示結果:
XREA.COM - JP.top
xrea広告


 【←BACKNEXT→
Copyright (c) Producer by System KS. 2001 All rights reserved.