今日のお勉強・ＨＴＭＬ編 ☆ インラインフレームの設置方法

管理人が特に覚えたくて勉強したタグです　よかったら参考にしてね♪　★ ホームページを作ってみよう Ⅲ★

お知らせ ・・・ 08/06/26　ＪａｖａＳｃｒｉｐｔでインラインフレームの中に表示するファイルを変更する方法をお勉強しました。（一番下だよ）

08/03/20　インラインフレームの横幅と縦幅（高さ）の設定だけど、今までピクセルでの指定しか記載してませんでしたが

％（パーセント・幅に対しての比率）で指定する事もできます。それから、インラインフレームのスクロールバーの色を変える方法も追加♪

テーマ
（ＩＦＲＡＭＥ）

タ　グ　の　記　述 （要素　属性＝ ” 属性値 ” ）

　インラインフレーム

＜ＩＦＲＡＭＥ　ＳＲＣ＝ ”フレーム内に表示するファイルのＵＲＬ ”＞
インラインフレーム非対応のブラウザで表示させるテキスト＜／ＩＦＲＡＭＥ＞

　 ※　参考書    　
　インラインフレームとは
Ｗｅｂページの中にウィンドウを
　　　　設置する事
　中に別のページの内容を表示

★　要　素　・・・　インラインフレーム（ＩＦＲＡＭＥ）
★　属　性　・・・　フレーム内に表示するページ（ＳＲＣ）
★　属性値　・・・　フレーム内に表示するページのＵＲＬ

　≪ インラインフレーム ≫
　 記述方法としては
＜ＩＦＲＡＭＥ　
　　それぞれの属性と属性値＞
＜／ＩＦＲＡＭＥ＞
　 という形になります
　 ※　左記の属性と属性値を、続けて記述していきます

　★ 記述の基本 ★

◎ 「要素」と「属性＋属性値」の間には、半角スペースを入れます
要素　属性＝ ” 属性値 ”

◎ 　属性＝ ”属性値 ”
     属性の次に「イコール」
次に、属性値を「ダブルクォーテーション」ではさみます


　この方法は、「ホームページを作ってみよう Ⅲ 」（メインＴＯＰ）、「ＨＴＭＬを覚えたい」や
　　「スタイルシート（ＣＳＳ）を覚えたい」のＴＯＰページで、実際に使っています

　上記の他に、オプションとして指定する「属性」、「属性値」
　★　 フレームの名前　　＜ＮＡＭＥ＞
　★　 フレームの境界線の有無　＜ ＦＲＡＭＥＢＯＲＤＥＲ ＞
　　　　　　 有：ＹＥＳまたは１　　無：ＮＯまたは 0 (セ゛ロ)
　★　フレーム境界線の色　＜ ＢＯＲＤＥＲＣＯＬＯＲ ＞
　　　　　　　 Ｗｅｂカラー数値またはカラーネーム
　
　★　スクロールの有無　　＜ＳＣＲＯＬＬＩＮＧ＞
　　　　　 有：ＹＥＳまたは１　　無：ＮＯまたは 0 (セ゛ロ)
　　　　　 フレームの大きさと表示する内容に応じて自動的に表示：ＡＵＴＯ
　★　フレーム内の左右の余白（マージン）＜ＭＡＲＧＩＮＷＩＤＴＨ＞　ピクセルで指定
　★　フレーム内の上下の余白（マージン）＜ＭＡＲＧＩＮＨＥＩＧＨＴ＞ピクセルで指定
　★　インラインフレームの幅（ヨコの寸法）　 ＜ＷＩＤＴＨ＞　 ピクセル、％（パーセント）で指定
　★　インラインフレームの高さ（タテの寸法） ＜ＨＥＩＧＨＴ＞　 ピクセル、％（パーセント）で指定
　★　フレームに回り込むテキストなどの配置　 ＜ＡＬＩＧＮ＞
　　　◎　ＴＯＰ：上揃え　◎　ＭＩＤＤＬＥ：上下中央揃え　◎　ＢＯＴＴＯＭ：下揃え
　　　　　 ※　上記の３つの属性は、フレームに回り込むテキストが1行の場合です
　　　◎　ＬＥＦＴ：フレームが左で、テキストが右側に回り込む
　　　◎　ＲＩＧＨＴ：フレームが右で、テキストが左側に回り込む
　　　　　 ※　ＬＥＦＴやＲＩＧＨＴを指定する方法は、フレームに回り込むテキストが複数行の場合です
　★　フレーム非対応のブラウザ用代替テキスト　＜ＡＬＴ＞

◆　実際に試してみました

横幅と高さをピクセルで指定

かき氷

◆　最小限のタグを使う形で、実際に試してみました

　テキストの回り込む位置とフレームとテキストの間の余白は、初めから設定しておいた方が良いと思います
　　※　余白を設定しないと、フレームとテキストがくっ付いた感じになってしまうっすよ　（^_^;）

　 インラインフレームとテキストの間に余白を設定しました

　　　★　余白の設定方法　　 ※　属性値は、ピクセルで指定します

　　　　　　　 ＶＳＰＡＣＥ 　・・・　上下 の余白
　　　　　　　 ＨＳＰＡＣＥ 　・・・　左右 の余白

　★　下記のＨＴＭＬソースは、このフレームのものです

　<iframe src="http://www.geocities.jp/cocoa_py/gazou/F0201806.gif" align="left" width="200" 　　height="200" vspace="30" hspace="30">かき氷</iframe>

◆　実際に試してみました

横幅と高さを％で指定

　◆　横幅は９０％、高さ（縦幅）は７０％に指定してみます
　　　 ※　テキストを配置しないので、余白は無しにして、分かりやすいように左寄せに設置してみます
　そして、インラインフレームのスクロールバーの色を変えてみます。。。といっても
　その方法はすごーく簡単で、 表示するページのスクロールバーの色を変えておけばＯＫ！
　詳しくは、下のインラインフレームに表示されてるページを見てね♪
今日のお勉強・ＣＳＳ編 ☆ スクロールバーの色を変える方法

　※　TABLEの中にインラインフレームを設置した場合は、そのTABLEの全体の幅に対しての比率で表示されます

　★　以下が、下のインラインフレームのソースです
　<iframe src="http://www.geocities.jp/cocoa_py/html-study1/today-study4_css.html" align="left" width="90%" height="70%">スクロールバーの色を変える方法</iframe>

★　ここのセルの高さを
５００ピクセルに指定してます

インラインフレーム
横幅：９０％
縦幅：７０％

スクロールバーの色を変える方法

◆　表示する内容を変更

　◆　インラインフレームに表示する内容を変更する方法

　この方法は、ＡｌｌＡｂｏｕｔ様のカテゴリ『ＪａｖａＳｃｒｉｐｔ』に外部リンクとしてあった、『パズルネット智慧（ソフィア）』様のページで勉強させていただきました。

　ソースはそのまま利用させていただきながら、いろいろ試してみました。

　　※　注意！

　　　『パズルネット智慧』様のページにも書いてありましたが、インラインフレームの中に表示するファイルは

　　　自分のものだけにしてください。他人が作成したファイルや画像はダメだよ（＾－＾）b

　

★　HTMLファイルのヘッダーに記入するソース

<script type="text/javascript">



</script>

★　＜ｂｏｄｙ＞と＜／ｂｏｄｙ＞の中のインラインフレームの設置場所に記入するソース

<a href="JavaScript:ifr('表示（変更）する内容ファイルのＵＲＬ')">

表示（変更）する内容ファイルのＵＲＬのリンクテキスト

</a>

<iframe src="アクセスした時に最初に表示されるファイルのＵＲＬ" name="設置するインラインフレームの任意の名前" width="インラインフレームの横幅（ピクセルor％）" height="インラインフレームの縦幅（ピクセルor％）">

</iframe>

★　記述例

　例えば、ＣｏｃｏａのＨＰやブログを利用して、次のように設定する場合

　　◎　インラインフレームを設置するファイル

　　　　　　小技＆リンク集　←　このページにサンプルとして設置してみました♪

　　◎　アクセスした時に最初にインラインフレームに表示されるファイル

　　　　　　「Ｃｏｃｏａのホームページ作成ブログ」

　　◎　インラインフレームに表示する別（変更）のファイル

　　　　　　実践ページの「リンクの設定の方法」と「段落と水平線」の２つ

　　◎　設置するインラインフレームに付ける任意の名前

　　　　　　cocoa

　　◎　インラインフレームのサイズ

　　　　　　横幅：画面の幅の８０％　　　縦幅（高さ）：４００ピクセル

　　

　　　

　『小技＆リンク集』のファイルに記述するソースは、以下のようになります

　

　≪ ヘッダー部分 ≫

<script type="text/javascript">



</script>

　≪ ｂｏｄｙの中のインラインフレーム設置部分 ≫

<a href="JavaScript:ifr('http://www.geocities.jp/cocoa_py/html-study1/jissen-link.html')">

実践ページ☆リンクの設定

</a>

<a href="JavaScript:ifr('http://www.geocities.jp/cocoa_py/html-study1/jissen-paragraph')">

実践ページ☆段落・水平線

</a>

<iframe src="http://blogs.yahoo.co.jp/cocoa_blog07" name="cocoa" width="80％" height="400">

</iframe>

　★  小技＆リンク集　←　このページにサンプルとして設置してみました♪　見てね～ (*^_^*)