HTML Iframes

❮ 前章へ 次章へ ❯

iframeは、Webページ内にWebページを表示するため使用します。



Iframe 構文

HTML iframe は、<iframe> タグで定義します:

<iframe src="URL"></iframe>

src 属性は、iframe ページの URL (web アドレス) を指定します。


Iframe - 高さと幅の設定

サイズの設定には、heightwidth 属性を使用します。

属性値は、デフォルトではピクセルで指定しますが、("80%"のように) パーセントでも指定できます。

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Try it Yourself ❯

Iframe - ボーダーの削除

デフォルトでは、iframe の周りに黒色のボーダーが表示されます。

ボーダーを削除するには、style 属性を追加して CSS border プロパティを使用します:

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
Try it Yourself ❯

CSS により、iframe ボーダーのサイズ、スタイルおよび色を変更することもできます:

<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
Try it Yourself ❯

Iframe - リンクのターゲット

iframe は、リンクのターゲットフレームとして使用することができます。

リンクの target 属性は、iframe の name 属性を参照しなければなりません:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Try it Yourself ❯

HTML iframe タグ

タグ 説明
<iframe> インラインフレームを定義する

練習問題を自分でテストしてください!

Exercise 1 ❯   Exercise 2 ❯   Exercise 3 ❯   Exercise 4 ❯


❮ 前章へ 次章へ ❯