HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでインラインフレーム（iframe）を含める方法

インラインフレーム（iframe）とは

HTMLにおけるインラインサブウィンドウは「iframe（インラインフレーム）」と呼ばれる要素で、<iframe>タグを使用することで、現在のページの中に別のWebページやドキュメントを埋め込むことができます。地図の表示や外部動画の埋め込みなど、さまざまな場面で活用されています。

<iframe>タグの主な属性一覧

<iframe>タグでは、以下のような属性を指定できます。

属性値説明
alignleft
right
top
middle
bottom		周囲のテキストに対してiframeをどのように配置するかを指定します。
frameborder1
0		フレームの周囲に枠線を表示するかどうかを指定します。
heightpixelsインラインフレームの高さを指定します。
longdescURLフレームの内容に関する詳細な説明が書かれたページのURLを指定します。
marginheightpixelsフレームの内容と上下の境界との間の余白をピクセル単位で指定します。
marginwidthpixelsフレームの内容と左右の境界との間の余白をピクセル単位で指定します。
nametextフレームの名前を指定します。
sandbox""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation		iframe内のコンテンツに対して、追加のセキュリティ制限を適用します。
scrollingyes
no
auto		スクロールバーの表示・動作を制御します。
seamlessseamlessiframeがあたかも親ドキュメントの一部であるかのように表示されることを指定します。
srcURLフレームに表示するコンテンツファイルの場所（URL）を指定します。
srcdocHTML_codeiframe内に表示するページのHTMLコードを直接指定します。
widthpixelsインラインフレームの幅を指定します。

HTML5での注意点

align、frameborder、marginheight、marginwidth、scrollingなどの属性はHTML5では非推奨（deprecated）となっており、同様の表現はCSS（例：border、margin、overflowプロパティ）で行うことが推奨されています。また、seamless属性は現行の仕様から削除されています。モダンブラウザへの対応を考慮する場合は、これらの属性に頼らずCSSによるスタイリングを心がけましょう。

使用例

次のコードを実行すると、インラインフレームを作成できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML iframe Tag</title>
   </head>
   <body>
      <iframe src = "https://www.tutorialspoint.com/index.htm" width = "100%"></iframe>
   </body>
</html>

この例では、外部サイトのトップページを幅100%のiframeとして読み込んで表示しています。src属性に埋め込みたいページのURLを指定し、必要に応じてwidthやheightでサイズを調整してください。

  1. HTML Window lengthプロパティの使い方を徹底解説！iframeの数を取得する方法

    HTMLのWindow lengthプロパティは、現在のHTMLドキュメント内に存在する<iframe>要素の数を返すプロパティです。ページに埋め込まれたインラインフレームの個数を簡単に取得できるため、動的なコンテンツ制御やデバッグ時に便利です。この記事では、window.lengthプロパティの基本構文から、実際に動作するサンプルコード、実行結果の確認方法まで、初心者の方にもわかりやすく解説します。 Window lengthプロパティの基本構文 window.lengthプロパティの構文は非常にシンプルで、以下のように記述します。 window.length 引数は不要で、呼び

  2. 【Selenium入門】iframeの操作方法 – switchTo().frame()でフレームを切り替える

    Selenium WebDriverでは、iframe（インラインフレーム）を自由に操作することができます。HTMLのコード上では、<iframe>、<frameset>、<frame>タグによってフレームが定義されます。フレームとは、あるHTMLドキュメントの中に別のHTMLドキュメントを埋め込むための仕組みです。 デフォルトの状態では、Seleniumは親ブラウザ（メインウィンドウ）のドライバーにアクセスしています。そのため、フレーム内の要素を操作するには、ドライバーのフォーカスをメインブラウザウィンドウから対象のフレームへ移動させる必要があります。