seamless属性

iframe要素のseamless属性は、iframe要素内のコンテンツを、親ドキュメントの一部であるかように埋め込むかどうかを指定する任意属性。

ブラウザ対応

構文

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

seamless属性は論理属性である。seamless属性が存在すると、親ドキュメントの一部であるかように、iframe要素内のコンテンツを埋め込む。

要点

  • iframe要素内のコンテンツを、親ドキュメントの一部であるかように表示する。
  • iframe要素の境界線（ボーダー）を表示しない。
  • 親ドキュメントのスタイルシートを継承する。

サンプルコード

<iframe src="sample.html" seamless></iframe>

サンプル

HTMLソースコード

<style scoped="scoped">
	p.sampleClass {
			background-color: #ffd800;
			padding: 1em;
			color: #0026ff;
	}
</style>
<p>seamlessなし： <iframe src="sample-iframe-seamless.html" style="vertical-align: middle;"></iframe></p>
<p>seamlessあり： <iframe src="sample-iframe-seamless.html" style="vertical-align: middle;" seamless></iframe></p>

sample-iframe-seamless.html

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>iframe要素のseamless属性のサンプル</title>
    </head>
    <body>
        <p class="sampleClass"><b>iframe要素のseamless属性のサンプル</b></p>
        <p class="sampleClass"><a href="iframe-seamless.html" target="_top">iframe要素のseamless属性</a></p>
    </body>
</html>

実際の表示

seamlessなし：

seamlessあり：