ホームページできるかな/超初心者さん向きHP作成
Web dekirukana.net
サイトメニュー >> ホームページのデザインテンプレートをダウンロードできるサイト
トップページ
HPのはてな?
HPはどこにある?
HPのなかみ
HTMLって?
相対・絶対パス
つくってみよう!
用意するもの
作成手順
HP用素材
基本の小技集
HPを公開!
もっと知ろう!
タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム
メール
メールフォーム BBS
掲示板

リンク
リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献
【クリック募金】


【ウィルス対策】
Click Here!

【HTMLタグ】
みんなのタグ辞書
TAG <index>

【PCトラブル】
Windows.FAQ

【ランキング】
206 Web Ranking
ホームページの情報屋さん

【P R】


Click Here!

Click Here!



ページ設定

> タグの簡易テスト(別窓)
| フレーム | フレームDL | フレームに枠線 | インラインフレーム | インラインフレームDL |
| 背景に色(背景色) |

インラインフレーム

| インラインフレームの基礎 | リンクターゲット |

■インラインフレーム<iframe>の基礎
インラインフレーム(頭文字を取ってアイフレームと呼ばれることもあるようです)はフレームのように窓枠を作るのではなく、<iframe>タグを使って、言ってみればページ内に直接四角く穴をあけて他のHTMLを覗かせる方法です。
更新履歴などによく使われている↓こんなかんじのものです。

インラインフレーム例
↑上図の例では、「sample.html」に<iframe>タグでスペースを作り、その中に「iframe.html」を表示させています。

iframe.html
「iframe.html」は普通に作ってください。表示されるスペースが狭く変わるだけで、特別なことは何もありませんよ。

sample.html
「sample.html」は、「iframe.html」を表示させたい部分に、以下のような記述を挿入します。
記述
<iframe src="iframe.html" name="miniFrame" width="300" height="200" frameborder="no">
</iframe>
<html>
<head>
<title> </title>
</head>

<body>
☆表示させたい部分に記述します☆
</body>

</html>

<iframe>解説
src="表示させたいページ" width="" height="高さ" はお好きなように変更してくださいね。
frameborder="no" で枠線を消しています。

枠線などをつけたい場合は frameborder="yes" 等、<iframe>タグ内に記述するやり方もあるのですが、テーブルに入れる方が簡単で綺麗だと思います。その際<iframe>の width="" height="高さ" と<table>(または<td>)の width="" height="高さ" は同じ数値に揃えてくださいね。


■リンクターゲット
記述
<iframe src="iframe.html" name="miniFrame" width="300" height="200" frameborder="no">
</iframe>
→ miniFrame
インラインフレームに「miniFrame」と名前を付けています。フレームの場合と同じように、リンクターゲットして使います。リンクは以下のような記述になります。
<a href="リンク先.html" target="miniFrame">文字や画像</a>

リンクの表示例
 Yahoo!Japan  Google  Excite


■インラインフレーム ダウンロード

>>こちらにあります


このページのトップへ
BACK HOME
ホームページできるかな
相対パス・絶対パス HTMLって? ホームページのなかみ ホームページはどこにある? 作成手順 作成サンプル 用意するもの ホームページ用素材 HPを公開!FFFTP 基本の小技集 コラム 特殊文字 記号のよみかた いろいろな色 タグの簡易プレビュー
Copyright(C) 2003-2005 laz All rights reserved.
当サイト内の無断使用及び無断転載を固く禁じます。