HTML Tag Reference

seamless 属性

シームレスに埋め込む

seamless 属性は、HTML Standard 仕様において削除されています。

seamless 属性を指定された iframe 要素は、境界線などがなく、あたかも親となる文書の一部のように （シームレスに） 埋め込まれます。また、親となる文書から埋め込まれた文書に対してスタイルを適用したりできます。seamless 属性は論理属性です。

下記に挙げる条件がすべて満たされるとき、埋め込まれた iframe 要素はシームレス・モードで動作します。

  • iframe 要素に seamless 属性が指定され、かつ sandbox 属性が指定されていない
  • 埋め込まれる iframe 要素が親文書と同一オリジンを持つか、埋め込まれる文書が iframe srcdoc 文書

シームレス・モードで動作する iframe 要素は下記のように扱われます。

iframe 内に読み込まれたリンクを開く場合、親文書上のリンクとして開く

通常は iframe 要素で読み込んだコンテンツ内のリンクに target 属性がなければ、リンクは iframe 内で展開されますが、シームレスモードでは、常に親ドキュメントをターゲットにリンクを開くようになります。もし iframe 要素内でリンクを開きたい場合は、リンクに target="_self" を指定する必要があります。

親文書で指定したスタイルは iframe 内の要素にも継承する

通常、iframe 要素で埋め込んだ内容に対して親文書からスタイルを適用することはできませんが、シームレスモードでは、iframe 要素で埋め込んだ内容に対しても、親文書上にあるものと同様に、スタイルを適用することが可能です。

seamless 属性の仕様

この属性を使用できる要素

seamless 属性のサンプルソース

<!-- iframe で読み込む HTML （navi.html） の例 -->
<ul id="mainNav">
 <li><a href="./">Home</a></li>
 <li><a href="./">Navi02</a></li>
 <li><a href="./">Navi03</a></li>
 <li><a href="./">Navi04</a></li>
 <li><a href="./">Navi05</a></li>
</ul>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>seamless 属性</title>
  <style>
   /* ここに iframe 要素で埋め込む HTML 文書を対象に CSS を記述 */
   nav {
    background: #0099cc;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 0 1em;
    padding: 1em;
   }
   #mainNav {
    margin: 0;
    padding: 0;
   }
   #mainNav li {
    display: inline-block;
    list-style: none;
    margin-right: 10px;
   }
   /* …省略… */
  </style>
 </head>
 <body>
 
  <nav>
   <iframe src="nav.html" seamless="seamless"></iframe>
  </nav>
 
 </body>
</html>

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。