4-21-1a インラインフレーム関連
iframe（インラインフレーム）とは フレーム と違って画面を分割したりは致しませんが、 その代わりブラウザに表示されたページの好きな所に別のHTML文章を表示する事が出来ます。 （ちなみに iframe は 『inline frame』 の略語です）
但しiframeはNNは6以上からしか対応しておりません。 （NNではilayerという機能がそれに該当致します）。文章型宣言でも html 4.01 と XHTML 1.0 の Transitional//EN 、Frameset//EN でのみ使用出来ます。 排除勧告は出ていないようですが、余り アクセシビリティとユーザービリティ が高いとは云い難いので、使用しない方が良いタグの一つかも知れません（＾＾；
4-21-1b インラインフレームの仕組
iframe（インラインフレーム）は基本的に
<iframe>
インラインフレームに対応していないブラウザ向けの案内（呼び出したいHTMLのアドレスを記載）
</iframe>
という形で使用致します。
詳しい指定は <iframe src="呼び出したいHTMLのアドレス" name="update" title="更新履歴です"> 等といった形で記載致します。
4-21-1c インラインフレームの属性
<iframe> を作成する際に利用する属性の一覧です。
- src
- <iframe>内で使用したい外部ファイルのURL先を指定致します。
- name
- 作成したインラインフレームに名前を付ける事が出来ます。 （これをしていないとリンクを張った時に表示したい場所に作品等を表示する事が出来ません） 必ず半角英数字で指定して下さい。
- title
- 作成したインラインフレームにタイトルを付ける事が出来ます。（使用しているブラウザがIEならば、 名前を付けたインラインフレームの上にカーソルを持って行くと、設定した内容がポップアップ形式に表示されます）
- frameborder
- frameborder="0" にするとインラインフレームの境界線を消す事が出来ます。（規定値は frameborder="1" です）
- border
- border="0" にするとフレームの境界線を消す事が出来ます。（境界線の幅を決める項目なので、0以外の数値も指定出来ます）。 この項目はCSSで指定出来るので、実際に<iframe>タグ内で記載する事はありません。
- bordercolor
- 境界線の色を決める事が出来ます。この項目はCSSで指定出来るので、実際は「border」として記載致します。 （上記の単語は直接HTML文章内に書き込む際に利用していた属性です）。
- scrolling
- 作成したフレームのスクロールバーの有無を設定出来ます。
- yes （常にバーを表示致します）
- no （バーを表示致しません）
- auto （必要に応じてバーを表示致します）
これが規定値です。
スクロールバーは常に表示するか、auto（自動設定）にしておくのが望ましいです（バーの表示を拒否していた場合、訪問者の解像度次第では全てを見る事が出来ないケースも出て来る為です）。
- marginwidth、marginheight
- インラインフレームの境界線から中身までのマージン（余白）を設定出来ます。
- marginwidth （左右のマージンを設定出来ます）
- marginheight （上下のマージンを設定出来ます）
この項目はCSSで指定出来るので、実際は「padding」として記載致します。 （上記の単語は直接HTML文章内に書き込む際に利用していた属性です）。外側の余白は「margin」で指定出来ます。
4-21-1d 具体的な見本
<iframe> の見本をclass属性 を利用して表示してみました。
CSS
<head> ～ </head> 内に記述して下さい。<!--
.sample-1L {
width: 350px; /* 横幅 */
height: 150px; /* 高さ */
float: right; /* 右寄せ */
border: 1px solid #0000cc; /* インラインフレームの周りの線（実線で赤） */
margin: 20px; /* インラインフレームの外の余白（上下左右一括） */
padding: 5px 20px 20px 5px; /* インラインフレーム内の余白（上5px、下20px、左5px、右20px） */
}
.clear { clear: both; } /* 両端の回り込みを解除する */
--></style>
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
HTML
<body> ～ </body> 内に記述して下さい。
<p>
下記のインラインフレームの中身は <a href="../bm/mt-f.html">素材ページのノーフレーム版</a> が表示されております。
</p>
<iframe src="../bm/mt-f.html" class="sample-1L" name="contents" title="インラインフレームの見本です。（素材ページのノーフレーム版を表示）" frameborder="0">
インラインフレームを表示しております。中身が見れない方は <a href="../bm/mt-f.html">こちら（素材ページのノーフレーム版）</a> をご覧下さいませ。
</iframe>
<p class="clear">
実際にクリックすると該当の素材が見れますが、窓が小さいとコンテンツの中身を見る際に非常に苦労するという、悪い例（見本）だと思っていて下さい（＾＾；
</p>
表示結果
下記のインラインフレームの中身は 素材ページのノーフレーム版 が表示されております。
実際にクリックすると該当の素材が見れますが、窓が小さいとコンテンツの中身を見る際に非常に苦労するという、悪い例（見本）だと思っていて下さい（＾＾；
上記の<iframe>を IEとNN、OPERA、firefoxで表示してそれぞれを画像 にしてみました（約16.0KB）。
- スクロールバーの色合いは
読み込んでいる別ファイルで指定した物なので、<iframe> タグ内では指定出来ません。 （但しバーの色合いはIEでのみ表示されます。OPERAではユーザーがバーの色合いを表示する設定にしていなければ見れません［この項目はダウンロードしたばかりの状態ではオフになっております］） - 上記のインラインフレームのborder を1pxから
5pxにして frameborder="0" の設定を外した際の 各ブラウザの違いはこちらの画像をご覧下さい（約18.4KB）。 IEのみ変な段差がインラインフレーム部分に付いております（＾＾； - 上記のインラインフレームのborder 設定自体を無くし、
しかも frameborder="0" の設定しなかった場合の 各ブラウザの違いはこちらの画像をご覧下さい（約17.3KB）。 全てのブラウザでIEに出現していたような段差っぽい枠が表示されております。 - IE以外（NN、OPERA、firefox）では
CSSで「border: 0px;」にしていると、frameborder="0" を書いていなくても段差は表示されないようです。
4-21-1e インラインフレームのページからリンクを張る場合
<iframe> の中で設定したname属性の名前を利用して下さい。
- <iframe> で表示したページの中から同じ枠内にリンクを張る場合
上記の見本でいうと 「利用規約はこちら」のリンクは <a href="../bm/mt-annai.html">利用規約はこちら</a> と、普通のページにリンクを張るように書いてOKです。（特にtarget属性を利用したりする必要はありません）
- <iframe> の枠外から枠内にリンクを張る場合
枠内（iframe）に「main」という名前を付けていた場合、 <a href="日記までのアドレス" target="main">Diary</a> と書けばOKです。
- 他のサイトにリンクを張る場合は下記のURL先をご覧下さいませ。
[ 関連事項 ： HP-TIPS > HPの作り方 > リンクの張り方 > target属性 ]
4-21-1f インラインフレームの非表示
<iframe> タグは企業の広告等の表示で利用される事が多く、各ブラウザでインラインフレームを非表示にする事が出来るケースが多いです。 また、小窓の大きさを自由に決められる事から悪意のある業者等のページでも同タグが利用され、該当のページを見た途端ウイルスに感染させられたり、パスワードを盗まれたりするケースがあります。
【 参考URL 】
- livedoor ニュース
「Iframe」が2007年最後のWebウイルストップに～ソフォスが2007年12月のウィルス傾向レポートを発表
こちらはiframeを利用した悪意に関するニュース記事です。
4-21-1f 各ブラウザの設定
各ブラウザごとに<iframe> を非表示にする方法です。
Internet Explorer
メニューバーにあります、『 ツール（T） > インターネットオプション（O） > セキュリティ > レベルのカスタマイズ（C） > セュリティの設定 』 の中にある、「その他 > IFRAMEのプログラムとファイルの起動」を無効にしてOKボタンを押して下さい。
※ IE6.0での設定方法です。
Netscape Navigator
ネットエスケープナビゲーター 7.1 では、特に<iframe> タグを非表示にする設定は無いようです。（NNでは6以上のヴァージョンでないと同タグは表示されません）
OPERA
メニューバーにあります、『 ツール（T） > 設定（R） > 詳細設定』 の中にある「コンテンツ」を選択し、「スタイルオプション」をクリックして下さい。
『 スタイルオプション > 表示設定 』 の中にある、「インラインフレームを表示」のチェックボタンを外してOKボタンを押して下さい。
設定前と後を画像にしてみました。 ＯＰＥＲＡではこんな感じになります（約7.51KB）
もしここで <iframe> に対応していないブラウザ向けの文章が書いていなければ、（それか表示されないHTML文章へのリンクが張っていなければ）、訪問者は謎のスペースを見て（－－； ？状態に陥ります（汗）
※ OPERA9.2での設定方法です。
Firefox
Firefox 2.0 ではデフォルト（ダウンロードしたばかりの初期値の状態）で<iframe>部分を非表示には出来ない（？）ようです。 その代わり、表示された各サイトの画像をマウスで右クリックして一括で非表示に出来たり、 アドオン（Firefox の機能や外観を追加、変更する為のソフトウェア［ウェブブラウザにおけるプラグインと同意］）で JavaScript や Iframe 等をブロックする「No Script」や、広告や同タグを非表示にして下さる「Adblock Plus」があります。
4-21-1g 擬似インラインフレームの作り方
<iframe> タグを利用しないでそれっぽく見せる方法です。<div> タグを利用し、はみ出した部分をoverflowするという物です。 但しIE4、NN6、OPERA6、Firefox1以上でないと表示出来ません。
CSS
<head> ～ </head> 内に記述して下さい。<!--
.sample-1m {
width: 350px; /* 横幅 */
height: 50px; /* 高さ */
padding: 5px; /* 枠内の余白 */
border: 1px solid #0000cc; /* 線は実線で赤 */
overflow: auto; /* はみ出した部分は自動的にスクロールバーを表示 */
/* スクロールバーの色指定（赤） */
scrollbar-face-color:#660000;
scrollbar-track-color:#660000;
scrollbar-arrow-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-3dlight-color:#660000;
scrollbar-darkshadow-color:#660000;
}
</style>
[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]
HTML
<body> ～ </body> 内に記述して下さい。<p>
このボックスにオーバーフローを設定しております。はみ出した文章は自動的に枠内に収まり、スクロールバーが表示されます。
</p>
<p>
段落を使用しても同じ事になります。
</p>
</div>
表示結果
このボックスにオーバーフローを設定しております。はみ出した文章は自動的に枠内に収まり、スクロールバーが表示されます。
段落を使用しても同じ事になります。
上記の見本の 各ブラウザの違いはこちらの画像をご覧下さい（約8.97KB）。
