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 | geolocationfullscreenなど | 埋め込むコンテンツが利用 可能な機能を制御します。 | allow="geolocation; microphone" |
csp | default-srcmedia-srcなど | 埋め込まれたコンテンツに 適用されるアクセス許可 ポリシーを指定します。 | csp="default-src 'self'" |
height | px単位 | コンテンツの高さを指定 します。既定値は150px | height="300" |
loading | eagerlazyauto | コンテンツを読み込みむ タイミングを指定します。 | 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>外部Webページを埋め込む場合は、外部Webページが利用を許可している場合に限ります。
allow属性
allow属性を使用することで、埋め込まれたコンテンツが利用できるデバイスやブラウザの機能を制御することができます。
allow属性で指定できる値の一覧（全てではありません）です。
| 値 | 説明 |
|---|---|
accelerometer | デバイスの加速度センサーへのアクセスを許可します。 |
ambient-light-sensor | デバイスの光量に関する情報へのアクセスを許可します。 |
autoplay | 埋め込まれたメディアが自動的に再生されるようにします。 |
battery | デバイスのバッテリーに関する情報へのアクセスを許可します。 |
camera | デバイスのカメラへのアクセスを許可します。 |
display-capture | 画面のキャプチャを許可します。 |
encrypted-media | 暗号化されたメディアの使用を許可します。 Encrypted Media Extensions API（EME） |
fullscreen | 全画面モードで表示します。 |
geolocation | Geolocation API の使用を許可し、 ユーザーの位置情報を使用可能にします。 |
gyroscope | デバイスのジャイロスコープへのアクセスを許可します。 |
magnetometer | デバイスの磁力計へのアクセスを許可します。 |
microphone | デバイスのマイクへのアクセスを許可します。 |
midi | MIDI インターフェースへのアクセスを許可します。 |
payment | Payment Request API の使用を許可し、 ユーザーに決済サービス機能の使用を可能にします。 |
picture-in-picture | Picture-in-Picture モードでビデオを再生可能にします。 |
次のコード例は、allow属性に geolocation と microphone を指定しています。
<iframe src="https://ex.com" allow="geolocation; microphone"></iframe>これで、埋め込まれたコンテンツがユーザーのデバイスの位置情報とマイクにアクセスできるようになります。
csp属性
埋め込まれたコンテンツがどのようなリソースにアクセスできるかを指定する属性です。
csp属性で指定できる主な値の一覧です。
| 値 | 説明 |
|---|---|
default-src | リソースにデフォルトでアクセスできるソースを指定します。 |
script-src | JavaScriptのソースを指定します。 |
style-src | スタイルシートのソースを指定します。 |
img-src | 画像のソースを指定します。 |
media-src | メディアファイルのソースを指定します。 |
font-src | フォントファイルのソースを指定します。 |
connect-src | XMLHttpRequestやWeb Socketsなど、 HTTP接続に使用されるリソースのソースを指定します。 |
object-src | object要素 や embed要素など、プラグインに使用されるリソースのソースを指定します。 |
child-src | iframe要素など、子要素に使用されるリソースのソースを指定します。 |
default-src の例
次のコードは、自サイトのリソースにデフォルトでアクセスできるようにする例です。
<iframe src="https://ex.com" csp="default-src 'self'"></iframe>'self'は自サイトを指定する書き方です。
script-src の例
JavaScriptファイルにアクセスできるソースを指定する例です
<iframe src="https://ex.com" csp="script-src https://ex.com/libs/xxx.js">
</iframe>height属性、width属性
height属性は、埋め込むコンテンツの高さをピクセル(px)単位で指定します。width属性は、埋め込むコンテンツの幅をピクセル(px)単位で指定します。
※ 単位の(px)は省略できます。
<iframe src="https://ex.com" height="300" width="500"></iframe>上のコードでは、高さを300px、幅を500pxに設定しています。
読み込むコンテンツが設定よりも大きい場合には縮小して表示します。
loading属性
ブラウザーが <iframe>～</iframe> をどのように読み込むかを指定します。
| 値 | 説明 |
|---|---|
eager | 【既定値】ビューポートを無視して<iframe>を直ちに読み込みます。 |
lazy | ビューポートに達するまで<iframe>の読み込みを延期します。 |
auto | ブラウザが自動的に最適な読み込み方法を選択します。 |
遅延読み込みさせる設定のコード例です。
<iframe src="https://ex.com" loading="lazy"></iframe>ビューポートに達してからコンテンツを読み込むように設定しています。
referrerpolicy属性
referrerpolicy属性は、あるWebページを参照した後、リンクをクリックして別のページに移動する際に、PCからサーバーにリファラーという情報を送信します。このリファラーは、移動前のWebページの情報を含んでいます。
インラインフレームのリソースにアクセスする際に、プロトコルのセキュリティ水準によって、どのようにリファラーを送信するかを次の値を使って設定します。
| 値 | 説明 |
|---|---|
no-referrer | リファラー Referer を送信しません。 |
no-referrer-when-downgrade | HTTPSからHTTPへの移動はリファラーを送信しません。 それ以外ではすべて送信します。これが既定の動作です。 |
origin | オリジンのみ送信します。 オリジンとは（スキーム, ホスト名, ポート番号）です。 |
origin-when-cross-origin | 同一オリジンの場合はすべて送信します。 オリジンが違う場合はオリジンだけ送信します。 |
same-origin | 同一オリジンの場合はすべて送信します。 オリジンが違う場合は何も送信しません。 |
strict-origin | HTTPSからHTTPへの移動はリファラーを送信しません。 それ以外ではオリジンのみ送信します。 |
strict-origin-when-cross-origin | 同一オリジンの場合はすべて送信します。 異なるオリジンの場合は次のとおりです。 ・HTTPS → HTTPS はオリジンだけを送信します。 ・HTTPS → HTTP ならリファラーは送信しません。 |
| unsafe-url | オリジンに関係なくすべて送信します。 |
HTTPS ＝ 暗号化された通信、HTTP ＝ 暗号化されていない通信
<iframe src="https://ex.com" referrerpolicy="no-referrer-when-downgrade">
</iframe>上のコードは値に origin-when-cross-origin を設定した例です。
title属性
title属性で、埋め込まれるコンテンツにタイトルや簡単な説明を付加することができます。
次のコードでは「インラインフレームのサンプル」という title を付けています。
<iframe src="https://ex.com" title="インラインフレームのサンプル"></iframe>インラインフレーム要素の内容がわかるように記述しておけば、読み上げソフトなどがを title の内容を読み上げてくれるなどで、要素の特定がしやすくなります。
<iframe>タグの使用例
Google Map を埋め込んでみます
まず、Google Map で「五稜郭」を検索して表示しさせました。
Google Map の共有「地図を共有または埋め込む」の「地図を埋め込む」タブで「HTML をコピー」から取得した HTMLコードが次のとおりです。
<iframe
src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d2974.456545507466!2d140.7542088795008!3d41.796924463283936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9ef46bcb8d5525%3A0xa9e4bd2d96c4d502!2z5LqU56ic6YOt6Leh!5e0!3m2!1sja!2sjp!4v1695646166299!5m2!1sja!2sjp"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>この下に、カスタムHTMLを配置してコードを貼り付けてみました。
どうです。ちゃんと表示させることができました。
コード内で使われている属性
ここで使われている属性は、src属性、width属性、height属性、style属性、loading属性、allowfullscreen属性、referrerpolicy属性です。
記事内で解説していない属性があるので補足しておきます。
style属性
style属性は「グローバル属性」です。要素にすばやくCSSスタイル宣言を適用する必要があるときに使います。「style="border:0;"」でボーダーを表示しないように設定しています。
allowfullscreen属性
allowfullscreen属性は、古い属性です。現行では「allow="fullscreen"」で定義します。
全画面モードにすることができる場合は true に設定しますが、ここでは “” と値が設定されていないので false です。
現行では、全画面モードで表示させる場合 allow属性「allow="fullscreen"」で定義します。
おわりに
当サイトの記事で使用したVBAなどのサンプルをDLできます
この記事のサンプルはありません！
ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！
今回は、Webページ「HTML」の
<iframe>インラインフレーム要素について勉強しました。iframe要素
<iframe>を使うと、フレーム内にコンテンツを埋め込むことができます。今回は、Google Map を埋め込む例を使いました。
「YouTube」や「Ｘ」など様々なコンテンツを埋め込むケースは結構あると思います。
そんな時に使うのが
<iframe>です。実際に、いろいろ試して覚えておくようにしたいと思います。
この記事が、少しでも誰かのお役に立てれば幸いです。