TECH I.S.

HTML iframe

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

HTML iframe構文

HTML<iframe>タグはインラインフレームを指定します。

インラインフレームは、現在のHTMLドキュメント内に別のドキュメントを埋め込むために使用されます。

構文

<iframe src="<i>url</i>" title="<em>説明</em>"></iframe>
ヒント：<iframe>のtitle属性を常に含めることをおすすめします。これは、iframeの内容を読み上げるためにスクリーンリーダーによって使用されます。

Iframe - 高さと幅の設定

heightとwidthの属性を使用して、iframeのサイズを指定します。

高さと幅はデフォルトでピクセル単位で指定されます。

例

<iframe src="demo_iframe.htm" height="200" width="300" title="iframeの例"></iframe>

または、style属性を追加して、CSSのheightとwidthのプロパティを使用することもできます。

例

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="iframeの例"></iframe>

Iframe - 境界線を削除

デフォルトでは、iframeの周囲に境界線があります。

境界線を削除するには、style属性を追加し、CSSのborderプロパティを使用します。

例

<iframe src="demo_iframe.htm" style="border:none;" title="iframeの例"></iframe>

CSSを使用すると、iframeの境界線のサイズ、スタイル、および色を変更することもできます。

例

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframeの例"></iframe>

iframe - リンクのターゲット

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

リンクのtarget属性は、iframeのname属性を参照する必要があります。

例

<iframe src="demo_iframe.htm" name="iframe_a" title="iframeの例"></iframe> <p><a href="https://techis.jp" target="iframe_a">techis.jp</a></p>

この章のまとめ

・HTML<iframe>タグはインラインフレームを指定します
・src属性は、埋め込むページのURLを定義します
・常にtitle属性を含めます(スクリーンリーダーの場合)
・heightとwidthの属性は、iframeのサイズを指定します
・iframeの境界線はborder:none;で取り除きます

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

利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。



チュートリアル