HTML iframe 要素

HTML iframe は、現在のHTMLドキュメント内に別のウェブページを表示するために使用されます。

1. HTML iframe の基本構文

HTMLの <iframe> タグは、インラインフレーム（Inline Frame）を定義します。

基本的な書き方は以下の通りです。

<iframe src="url" title="説明文"></iframe>

src 属性には、埋め込みたいページのURLを指定します。

1.1 title 属性の重要性

<iframe> には常に title 属性を含めることが推奨されます。これは、スクリーンリーダーなどの補助技術が、iframeの中身がどのようなコンテンツであるかをユーザーに伝えるために使用されます。

<iframe src="demo_iframe.htm" title="VolardevのHTMLチュートリアル"></iframe>

2. iframe のサイズ設定 (Set Height and Width)

height（高さ）属性と width（幅）属性を使用して、iframeのサイズを指定できます。

デフォルトでは、これらの値はピクセル単位で指定されます。

<iframe src="demo_iframe.htm" height="200" width="300" title="説明文"></iframe>

または、CSSを使用してサイズを指定することも可能です。CSSを使用する方が、レスポンシブな設計に対応しやすいため一般的です。

<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="説明文"></iframe>

3. iframe の境界線の削除 (Remove the Border)

デフォルトでは、iframeの周囲には境界線（ボーダー）が表示されます。これを取り除くには、CSSの border プロパティを使用します。

<iframe src="demo_iframe.htm" style="border:none;" title="説明文"></iframe>

また、CSSを使用して、境界線のサイズ、スタイル、色を自由にカスタマイズすることもできます。

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="説明文"></iframe>

4. リンクのターゲットとしての iframe (Target for a Link)

iframeは、リンクの遷移先（ターゲット）として使用することもできます。

これを行うには、まず <iframe> 要素に name 属性を指定します。次に、リンク（<a> タグ）の target 属性に、その name 属性と同じ値を指定します。

<iframe src="demo_iframe.htm" name="iframe_a" title="説明文"></iframe>

<p><a href="https://www.google.com" target="iframe_a">Google.comを表示</a></p>

このリンクをクリックすると、リンク先のページがブラウザの新しいタブやウィンドウではなく、指定したiframe内に表示されます。

5. まとめ

HTML iframeに関連する主要なタグと属性のまとめです。

[!CAUTION]
セキュリティ上の注意：
外部のコンテンツをiframeで読み込む際は、セキュリティリスク（クリックジャッキングなど）に注意してください。モダンなWeb開発では、sandbox 属性を併用してiframe内の挙動（スクリプトの実行やフォーム送信など）を制限することが一般的です。