Webページの基礎、HTMLのフレーム要素についてです。
目次
はじめに
HTMLのフレームは、一つのウィンドウ内に画面を分割して複数のページを表示します、それぞれに別々のHTMLを表示する機能のことです。分割方法を指定する土台となるHTMLと、分割した部分に表示するHTMLが必要です。
HTML4までは、<frameset>タグと<frame>タグを組み合わせて、分割ページを実現していましたが、HTML5で<iframe>タグ以外は廃止となっています。しかし、既存コードで利用されていることもまだ多いたので、従来の実装方法も含めてしっかりと理解しておきたいと思います。
HTLM５のフレーム
HTML5では、フレームページの作成には<iframe>タグが推奨されています。というより、<iframe>タグ以外のフレーム用のタグは廃止されており、画面分割はCSSで記述するようになっています。
<iframe>タグは、インラインフレームと呼ばれています。現在のHTMLページの中に、Youtube やGoogle Mapなど、他のHTMLページを埋め込んで表示させるタグです。従来の画面分割のためのタグではありませんが、CSSと組み合わせることで複数HTMLで構成されたフレームページの作成を可能にします。
インラインフレーム要素<iframe>タグの属性
「iframe」は inline frame の略です。インラインフレームを作成する<iframe>タグについて見ていきましょう。
<iframe>タグの属性一覧
<iframe>タグの属性一覧表を以下に示します。非推奨の属性については省略しています。
| 属性名 | 値 | 内容 | 使用例 |
|---|
src | URL | 【必須属性】コンテンツ
のアドレスを指定します。 | src="https://www.kurumico.com/" |
allow | geolocation
fullscreen
など | 埋め込むコンテンツが利用
可能な機能を制御します。 | allow="geolocation; microphone" |
csp | default-src
media-src
など | 埋め込まれたコンテンツに
適用されるアクセス許可
ポリシーを指定します。 | csp="default-src 'self'" |
height | px単位 | コンテンツの高さを指定
します。既定値は150px | height="300" |
loading | eager
lazy
auto | コンテンツを読み込みむ
タイミングを指定します。 | loading="lazy"
loading="eager" |
referrerpolicy | no-referrer
など | 別のページに移動する時に
送信するリファラーを指定
します。 | referrerpolicy=
“no-referrer-when-downgrade” |
title | 文字列 | コンテンツの説明を提供
します。 | title="kurumico.com" |
width | px単位 | コンテンツの幅を指定
します。既定値は300px | width="500" |
すべての HTML要素で共通に使用できる「グローバル属性」については別途解説したいと思います。
src属性
埋め込むコンテンツの URL を指定する属性です。同一オリジンポリシーに従う空白ページを埋め込む場合は、about:blank の値を使用します。また、プログラムから <iframe> 内の src属性を削除すると、Firefox (バージョン 65 以降)、Chromium ベースのブラウザー、Safari/iOS では about:blank が読み込まれます。
次の HTML は Google Map を埋め込むコードです。コード表示の下側の段落に埋め込んでみました。
<iframe src="https://www.google.com/maps/embed?"></iframe>
