今日の人気記事

まだデータがありません。

iframe要素 - インライン・フレーム

当ページのリンクには広告が含まれています。

スポンサーリンク

ここでは HTML5 の iframe要素についてみていきます。

iframe要素の概要

iframe要素は、インライン・フレームを表します。

カテゴリー フロー・コンテンツ
フレージング・コンテンツ
エンベディッド・コンテンツ
インタラクティブ・コンテンツ
コンテンツモデル テキスト
利用場所エンベディッド・コンテンツが置ける場所

インライン・フレームとは、ページ内に他のページのコンテンツを表示させるフレームのことです。

ページの一部として他のページの一部を埋め込む場合に使います。

コンテンツ属性

属性概要
nameフレーム内に表示するコンテンツ名を指定
srcフレームに埋め込むページのURLを指定
srcdoc埋め込むコンテンツをソースで指定
sandboxフレーム内のコンテンツを機能制限
seamlessフレームをシームレスに表示
widthフレームの横幅を指定(ピクセル)
heightフレーム縦幅を指定(ピクセル)

以下では次のページをインライン・フレームとして埋め込む使用例をみていきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>img要素</title>
</head>
<body>
<h2>iframeのコンテンツ</h2>
  <ul>
    <li>リスト</li>
    <li>リスト</li>
  </ul>
</body>
</html>

使用例①

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframe要素</title>
</head>
<body>
<h1>iframe要素</h1> 
<section>
  <h2>iframe要素の概要</h2>
  <p>iframe要素を使って、他のページのコンテンツを埋め込んでみましょう。</p>
  <p><iframe src="iframe-contents.html"></iframe></p>
  <p>このように他のページのコンテンツが埋め込まれます。</p>
</section>
</body>
</html>

表示

iframe-element-01

使用例② - width/height属性を指定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iframe要素</title>
</head>
<body>
<h1>iframe要素</h1> 
<section>
  <h3>seemless属性を指定</h3>
  <p><iframe src="iframe-contents.html" width="620" height="300" seamless></iframe></p>
  <p>指定した横幅/縦幅で、他のページのコンテンツが埋め込まれます。</p>
</section>
</body>
</html>

表示

iframe-element-02