HTML iframeの属性一覧（src・sandbox・loading）を初心者向けにやさしく解説
生徒
「iframeタグは使えるようになってきたんですが、属性って何があるんですか？」
先生
「iframeには、表示するページを指定したり、安全性や読み込み方法を決める属性があります。」
生徒
「属性を知らないと、正しく使えないんですか？」
先生
「基本は動きますが、属性を理解すると安全で使いやすいページになります。順番に見ていきましょう。」
1. iframeタグと属性の関係
iframeタグは、外部ページを自分のWebページに表示するためのHTML埋め込み要素です。属性とは、iframeの動きや設定を決める追加情報のことです。家電のリモコンにある細かい設定のようなもので、属性を指定することで表示内容や安全性、読み込み方法をコントロールできます。
2. src属性の役割と使い方
src属性は、iframeで表示するページの場所を指定するための最も重要な属性です。ここにURLやファイルのパスを書くことで、そのページが埋め込まれます。住所を書かないと荷物が届かないのと同じで、srcがないとiframeは何も表示できません。
<iframe src="https://example.com"></iframe>
3. src属性で画像やファイルを表示する例
src属性にはWebページだけでなく、画像やPDFファイルのパスも指定できます。これにより、画像ビューアのような使い方もできます。HTML初心者の方は、まずローカル画像を表示して仕組みを理解するのがおすすめです。
<iframe src="/img/sample150-100.jpg" width="150" height="100"></iframe>
4. sandbox属性で安全性を高める
sandbox属性は、iframe内のページに制限をかけるための属性です。外部ページには、スクリプトやフォーム送信など危険な動作が含まれる可能性があります。sandboxを指定すると、それらの動きを制限でき、セキュリティ対策として非常に重要です。
<iframe src="https://example.com" sandbox></iframe>
5. sandbox属性の考え方を理解しよう
sandbox属性は、外部ページを檻の中に入れるようなイメージです。何も指定しないと自由に動けますが、sandboxを付けると安全な範囲でしか動けなくなります。細かい許可設定もありますが、初心者のうちは付けるだけでも安全性が高まります。
6. loading属性とは何か
loading属性は、iframeをいつ読み込むかを指定する属性です。ページを開いた瞬間に読み込むのか、画面に表示される直前に読み込むのかを選べます。これにより、ページ表示速度を改善できます。
<iframe src="https://example.com" loading="lazy"></iframe>
7. loading属性と表示速度の関係
loadingにlazyを指定すると、iframeは必要になるまで読み込まれません。たくさんのiframeがあるページでは、最初の表示が速くなります。HTML iframeとSEOの観点でも、ページ表示速度は重要な要素なので、覚えておくと役立ちます。
8. 初心者が覚えるべきiframe属性のまとめ的整理
iframeの属性は、srcで表示内容を決め、sandboxで安全性を高め、loadingで読み込みタイミングを調整します。この三つを理解するだけで、iframeの基本操作は十分です。HTML埋め込み要素として、安心して使える知識になります。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
