ワンコワールド内 Contents Page 最下部に 各ページへ 戻る リンク があります。

☆ インラインフレームの作り方 ☆

このPageでは、インラインフレームの作り方を説明していきます。色々なものが出来ますよ。

タグは <iframe> です。 </iframe> 初めのタグと終りのタグで1セットです。
このタグを使かうと、簡単にブラウザの画面の一部に、小窓 ( インラインフレーム ) をつけることが出来ます。
また、そして好きな場所に貼り付けられます。
さらに、別のページを表示することも出来ます。 この場合、ページの中に他の***.htmlファイルを埋め込むことになります。
<iframe> タグは<body> 内で使用し、インラインフレームに表示する内容は、src 属性で指定します。

例・・・

<iframe src="" "">〜</iframe>
は html ファイルの名前です。
は指定したい属性 ( 位置や大きさなど )を書き込みします。

使える属性の種類・説明・・・

src ...ファイルのURL
name ...フレーム名( 任意の名前を付けることで、表示している内容の概略が分かります。)
width ...フレームの横幅( ピクセル、Page に対する % )
height ...フレームの高さ( ピクセル、Page に対する % )
marginwidth ...フレーム内の左右のマージン( ピクセル単位 )
marginheight... フレーム内の上下のマージン( ピクセル単位 )
frameborder 0,1...フレームの枠の表示・非表示
align left,center,right...テキストの回りこみ
SCROLLING="" yes … ( 常にスクロールバーを表示します ) no … ( スクロールバーを表示しません )
          auto … ( 必要に応じてスクロールバーを表示します )

属性をつけた例

 <iframe src="○○○.html" name="□□□" width="300px" height="150px">

こうしておけば、別に用意したファイルを更新するだけで更新できます。
しかしながら、インラインフレームに対応していないブラウザが存在していることも確かです。
したがって、<iframe>〜</iframe>の間には、インラインフレームに非対応のブラウザを使っている方の為に
「 IE4以上でご覧下さい。又はインラインフレーム対応のブラウザでご覧下さい。 」
又は、「 ここにはインラインフレームで○○○の内容を表示しています 」 のようにメッセージを記述しておきます。
このメッセージはフレームに対応しているブラウザでは表示されないので親切ですよ。

さて、前置きが長くなってしまったので、タグの見本に移ります。

<iframe src="betsu.html" width="250px" height="150px" scrolling="auto" >IE4以上でご覧下さい。
</iframe>
実際に上の命令をソースで書くと下の様になります。 右側は、高さ ( height ) を80pxにしたものです。

      

但し betsu.html というファイルを別に用意して up しておかないとエラーになります。
気をつけてくださいね・・・

他にも例を何種類か示しておきます。
1.
<iframe src="betsu.html" name="sample1" width="250px" height="150px" scrolling="auto" frameborder="0" >
IE4以上でご覧下さい。</iframe>

2.
<iframe src="betsu.html" name="sample2" width="350px" height="150px" scrolling="auto" frameborder="0"
style="border:3px green double;">IE4以上でご覧下さい。</iframe>

3.
<iframe src="betsu.html" name="sample4" width="450px" height="150px" scrolling="auto" frameborder="0"
style="border:10px #0000ff ridge;">IE4以上でご覧下さい。</iframe>

1.


2.


3.


どうでしょう?色々出来そうですね。(^◇^)
また、別Pageに写真とかを貼り付けておいてアルバム見たくも出来ますよ。
また、背景等うまく使えば、ちょっとしたアクセントにも出来ます。
ボーダーも好みで色々変えられます。挑戦して見てくださいね。

参考 別Pageのアドレス   http://silufeed.sub.jp/betsu.html

インラインフレームの横に文字を表示させる場合
<iframe SRC="betsu.html" width="300px" height="100px" ALIGN="left"></iframe>

赤字の部分を追加すると、インラインフレームの右側に 文字を表示することが出来ます。
このタグを書いた後、表示させる文字を書きましょう。

こんな風に表示されます。
複数行でも表示できますよ。
その場合は、改行タグを使いましょう。
フレーム横を過ぎたら回り込みます。





・・・Frame で閲覧している方へ・・・
URLを知りたい時、印刷や一時的にお気に入りに入れる場合などの為に単一 Page 表示に出来ます。
こちら をクリックしてください。 戻るときは、開いたページを閉じてください。


[ index-Page へ戻る ]    [ Top-Page へ戻る ]    [ Frame Main-Page へ戻る ]