VIDEO LESSON

HTMLのiframeタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の六十三本目は、アイフレーム、タグです。
0:08アイフレームは、今見ているページの中に、別の文書を小さな窓のように埋め込んで表示するためのタグです。
0:15動画のプレイヤー、地図、ほかのウェブページなど、外部の内容をその場で見せたいときに使います。
0:22ただし、埋め込む内容は独立した別のページなので、安全性や読み込みに関する配慮が欠かせません。
0:28今回は基本の書き方から、安全に使うための制限の付け方まで順番に学びましょう。
0:33名前のアイフレームは、インラインフレーム、つまり行の中に置けるフレームという意味です。
0:39基本の書き方を確認します。
0:41アイフレームには開始タグと終了タグの両方が必要で、終了タグを書き忘れないようにしてください。
0:48画面の例では、ソース属性で読み込むページを指定し、タイトル属性で内容を説明しています。
0:53埋め込まれた側の文書は、外側のページとは独立して読み込まれ、独自のスクロールやリンクを持ちます。
1:00つまり、ページの中にもう一つ小さなブラウザーが入っているイメージです。
1:05置き場所は、見出しや段落と同じように、ボディの中の内容に合った位置にしましょう。
1:11リンクをクリックすると埋め込みの中だけが切り替わり、外側のページはそのまま残る点も特徴です。
1:17中心になる二つの属性を見ます。
1:19ソースは、埋め込みたい文書のユーアールエルです。
1:23ここに指定されたページが、そのまま窓の中に表示されます。
1:28もう一つのタイトルは、アイフレームにとって特に大切です。
1:32中身は別の文書なので、音声でページを読む人には、窓の中に何があるのかが分かりにくくなります。
1:39タイトルに、会場周辺の地図、のように具体的な説明を書くことで、中身を開かなくても目的が伝わります。
1:47地図、動画、といった一言だけで済ませず、何の地図か、何の動画かまで書きましょう。
1:53次に大きさと読み込みです。
1:55ウィドゥスとハイトで幅と高さを数値で指定すると、ブラウザーは読み込み前から表示領域の目安が分かり、
2:00ページのガタつきを抑えられます。
2:05画面上の柔軟な大きさは、シーエスエスで調整するのが基本です。
2:09また、ローディングにレイジーを付けると、画面に近づくまで読み込みを後回しにできます。
2:15ページの下の方にある埋め込みに有効ですが、冒頭で最初に見せたい内容に付けると表示が遅れるので注意してください。
2:23狭い画面ではみ出さないかも確認しましょう。
2:26ソースドックという書き方も紹介します。
2:29通常はソースで外部のファイルを読み込みますが、ソースドックでは、表示したいエイチティーエムエルそのものを属性の中に直接書きます。
2:38別ファイルを用意しなくても、小さな見本をその場で表示できるので、解説ページのデモなどに向いています。
2:45ただし、属性の中にタグを書くため、二重引用符や小なり記号などを、そのまま書けない場面があります。
2:52文字参照を使って正しくエスケープしないと、表示が崩れたり途中で切れたりします。
2:58短い内容にとどめ、複雑な文書はファイルに分ける方が安全です。
3:02安全面で最も重要なのが、サンドボックスです。
3:05サンドボックスを付けると、埋め込んだ文書の機能は、いったん強く制限されます。
3:11フォームの送信、スクリプトの実行、別ページへの移動などが止まるため、信頼しきれない内容でも被害を広げにくくなります。
3:19必要な機能は、アロースクリプツのように、許可を一つずつ値に追加して戻します。
3:25特に注意したいのは、アロースクリプツとアローセームオリジンの組み合わせです。
3:30条件によっては制限を自分で外せてしまい、サンドボックスの意味が薄れます。
3:35本当に必要な場合だけにしましょう。
3:38まずは値なしのサンドボックスで表示を確認し、足りない機能だけを一つずつ許可していく進め方がおすすめです。
3:45ほかの制限の仕組みも押さえます。
3:48アローは、埋め込んだ側でカメラやマイク、全画面表示などの機能を使ってよいかを細かく決めるポリシーです。
3:57動画の埋め込みでよく見かける、アローフルスクリーンは、全画面表示を許可する指定です。
4:04リファラーポリシーは、埋め込み先へ移動したり読み込んだりするときに、参照元の情報をどこまで送るかを決めます。
4:13例のノーリファラーは参照元を送らない指定です。
4:17どちらも、必要な機能と情報だけを渡す、という考え方で設定しましょう。
4:23実際の活用場面を整理します。
4:25代表的なのは、動画サービスや地図サービスが用意した公式の埋め込みコードを使うケースです。
4:33あのコードの正体は、まさにアイフレームです。
4:36また、自分のサイトの中で、案内ページや申し込みフォームを別文書として埋め込む使い方もあります。
4:44ここで知っておきたいのは、相手側の設定で埋め込みを拒否できることです。
4:50エックスフレームオプションズなどの仕組みで禁止されているページは、ソースに指定しても表示されません。
4:58表示されないときは、自分のコードだけでなく相手側の許可も疑いましょう。
5:04埋め込みが増えるほどページは重くなりやすいので、本当に必要な場所だけに使うことも大切です。
5:11記事の活用例を読み解きます。
5:13これは、隔離した小さな文書を埋め込む例です。
5:16タイトルには、エイチティーエムエルの表示見本、と内容が分かる説明が入っています。
5:21読み込むファイルの代わりにソースドックを使い、こんにちは、という短い段落を直接書き込んでいます。
5:28ソースドックの中では、小なり記号が文字参照に置き換えられている点にも注目してください。
5:34そしてサンドボックスが値なしで付いているため、スクリプトなどの機能はすべて制限された、
5:37最も安全な状態になっています。
5:41幅と高さで表示領域も示された、要点を押さえた例です。
5:45ブラウザー互換性を確認します。
5:47記事が参照するエムディーエヌの記録では、アイフレーム要素本体はクロームが一以降、
5:54エッジが十二以降、ファイアフォックスが一以降、サファリが四以前からと、ごく初期から対応しています。
6:02基本のソースや幅、高さも同様です。
6:05一方で、サンドボックスはクローム五以降、ソースドックはクローム二十以降、
6:12アローはクローム六十以降、ローディングはクローム七十七以降など、属性ごとに開始時期が大きく異なります。
6:19要素が表示されても新しい属性が効くとは限らないので、目的の属性は個別に確認してください。
6:26また三百二十ピクセル程度の狭い画面で、埋め込みの中身が欠けたり操作できなくなったりしないかも合わせて試しましょう。
6:36最後にまとめです。
6:37アイフレームタグのポイントは三つでした。
6:40一つ目、ソースで埋め込む文書を指定し、タイトルで中身が何かを必ず伝えること。
6:45二つ目、サンドボックスやアローを使って、埋め込んだ文書に渡す権限は必要最小限に絞ること。
6:51三つ目、幅と高さで領域を確保し、表示されない場合は相手側が埋め込みを拒否していないかも確認することです。
6:58練習として、自分の案内ページをタイトルとサンドボックス付きで埋め込み、保存後に正しく表示されるか確かめてみてください。
7:06お疲れさまでした。

この動画で学べること

iframeタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。別の文書を埋め込みます。title で内容を説明し、必要に応じ sandbox や allow を絞ります。

解説記事・サンプルコードを読む：HTMLのiframeタグとは？属性・使い方・ブラウザー互換性と活用例 →