iframe要素の属性が多すぎて覚えられない。
まとまった情報がほしいな。
こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにiframe要素属性の一覧をまとめました。
HTML5で非推奨が解除されたiframe要素について理解して、HTMLで使えるようになりましょう！
- iframe要素の属性の全体像を知りたい
- iframe要素の属性で非推奨になったものを覚えておきたい
- iframe要素の属性でよく使われるものを理解しておきたい
スポンサーリンク
iframe要素とは
iframe要素は、HTML文書内に外部のHTMLページを埋め込むための要素です。
主に以下のような用途に使用されます。
- Youtubeの埋め込み
- Google Mapの埋め込み
- 外部のWebアプリケーションの表示
iframe要素の属性一覧
ここではiframe要素の属性一覧を紹介いたします。
必須属性
| 属性 | 機能 |
|---|---|
| src | 表示する外部コンテンツのURLを指定する。 |
上記の属性は、iframe要素を使用する際に必ず使用される属性です。
推奨属性
| 属性 | 機能 |
|---|---|
| allow | 埋め込まれたコンテンツの機能を制御する。 |
| csp | 埋め込まれたコンテンツがどのようなリソースにアクセスできるかを制御する。 |
| height | 埋め込まれたコンテンツの高さを指定する。 |
| loading | ブラウザのページの読み込み対応を制御する。 |
| title | 埋め込まれたコンテンツの説明を提供する |
| width | 埋め込まれたコンテンツの幅を指定する。 |
上記の属性は、iframe要素を使用する際に推奨されている属性です。
必須ではありませんが、追加することでiframe要素を効果的に使用することができます。
非推奨属性
| 属性 | 機能 |
|---|---|
| frameborder | フレームの境界線を表示する。 |
| scrolling | フレームのスクロールバーの表示方法を指定する。 |
| name | フレームの名前を指定する。 |
| longdesc | フレーム内のコンテンツの詳細な説明を提供する。 |
上記の属性は、現在では使用されるべきではないとされています。
iframe要素に関する標準や推奨事項が変化したことにより、これらの属性は非推奨となりました。
一般的にはCSSを使用することが推奨されます。
セキュリティに関する問題があるname属性も非推奨とされました。代わりにid属性を使用することが推奨されます。
src属性
<iframe src="https://example.com"></iframe>埋め込むコンテンツのURLを指定するための属性です。
上記の例では、src属性に指定したURLのコンテンツを埋め込んでいます。
YoutubeやGoogle Mapなどを埋め込むことができるため、ユーザーに優しいWebページを作ることができます。
また、src属性にはHTTPまたはHTTPSで始まるURLを指定する必要があります。セキュリティ上の理由から、src属性で指定されたコンテンツは、同じドメインからのものである必要があります。
このため、iframe要素を使用して外部のWebページを埋め込む場合は、外部Webページが許可している場合にのものだけ可能です。
外部Webページが許可している場合でも、iframeの使用には十分に検討する時間が必要になります。
allow属性
埋め込まれたコンテンツの機能を制御する属性です。
allow属性は下記のような値をとります。
- fullscreen
- autoplay
- camera
- encrypted-media
- geolocation
- microphone
- midi
- payment
- picture-in-picture
fullscreen
<iframe src="https://example.com" allow="fullscreen"></iframe>他のウェブページとのフルスクリーン表示を許可する
autoplay
自動再生を許可する
camaera
ユーザーのカメラへのアクセスを許可する
encrypted-media
暗号化されたメディアの再生を許可する
geolocation
ユーザーの位置情報へのアクセスを許可する
microphone
<iframe src="https://example.com" allow="microphone"></iframe>ユーザーのマイクへのアクセスを許可する
midi
MIDIデバイスへのアクセスを許可する
payment
オンライン支払い関連の機能を使用するための許可
picture-in-picture
ピクチャーインピクチャーの再生を許可する
allow属性は外部コンテンツのセキュリティに関わるため指定には注意が必要です。
csp属性
埋め込まれたコンテンツがどのようなリソースにアクセスできるかを制御します。
allow属性は下記のような値をとります。
- default-src
- script-src
- style-src
- img-src
- connect-src:
- font-src
- object-src
- media-src
- frame-src
- child-src
- form-action
- sandbox
default-src
<iframe src="https://example.com" csp="default-src 'self'"></iframe>リソースにデフォルトでアクセスできるソースを指定します
上記の例ではウェブサイト自身から提供されるリソースにデフォルトでアクセスできます。
script-src
JavaScriptファイルにアクセスできるソースを指定します。
style-src
スタイルシートファイルにアクセスできるソースを指定します。
img-src
<iframe src="https://example.com" csp="img-src https://example.com"></iframe>画像ファイルにアクセスできるソースを指定します。
上記の例では画像リソースには「https://example.com」からしかアクセスできないように指定されています。
connect-src
XMLHttpRequestなどのコネクションを開くことができるソースを指定します。
font-src
フォントファイルにアクセスできるソースを指定します。
object-src
object, embed, appletなどのオブジェクトにアクセスできるソースを指定します。
media-src
メディアリソースにアクセスできるソースを指定します。
frame-src
frame要素およびiframe要素にアクセスできるソースを指定します。
child-src
frame-src の後継で、子要素のフレームにアクセスできるソースを指定します。
form-action
フォームの送信先を指定します。
sandbox
サンドボックス内でコンテンツを実行します。
スポンサーリンク
height属性
<iframe src="https://example.com" height="300"></iframe>height属性は、埋め込まれたコンテンツの高さを指定します。
ピクセル（px）単位で高さを表現することができます。
上記の例では、埋め込まれたコンテンツの高さが300pxに設定されます。
コンテンツの高さがこの値よりも大きい場合は、スクロールバーが表示されることになります。
また、高さが指定した値よりも小さい場合は、埋め込まれたコンテンツの高さに合わせて自動的に要素が縮小されます。
height属性を指定しなかった場合は、埋め込まれたコンテンツの高さに合わせてiframe要素が自動的にサイズを変更します。しかし、埋め込まれたコンテンツが読み込まれる前にiframe要素が表示される場合があり、表示が崩れる可能性があります。 heigt属性を指定したほうが無難に改善できるでしょう。
loading属性
ブラウザがページの読み込みにどのように対応するかを制御します。
loading属性は下記のような値をとります。
- eager
- lazy
- auto
eager
ページの読み込み中に、iframe要素内のコンテンツを優先的にダウンロードします。
lazy
<iframe src="https://example.com" loading="lazy"></iframe>iframe要素内のコンテンツを遅延ダウンロードします。
ページ全体が読み込まれた後に、ブラウザがiframe要素内のコンテンツをダウンロードするため、ページの読み込み時間を短縮することができます。
auto
ブラウザが自動的に最適な方法を選択します。
loading属性を指定しなかった場合は、ブラウザは自動的に最適な方法を選択します。
しかし、すべてのブラウザがloading属性をサポートしているわけではないため、ブラウザのサポート状況に注意する必要があります。
title属性
<iframe src="https://www.example.com" title="example"></iframe>title属性は、埋め込まれたコンテンツの説明を提供する属性です。
マウスカーソルを要素の上に移動したときに表示されるツールチップに表示されるテキストを指定することができます。
ユーザーがコンテンツを視覚的に把握することができるため、内容を理解するのに役立ちます。
上記の例では、iframe要素が「https://www.example.com」からのコンテンツを埋め込むことを示しています。
title属性には、「example」というテキストが指定されているため、ユーザーがマウスカーソルを要素の上に移動すると、「example」というテキストがブラウザに表示されます。
title属性はiframe要素だけのものではなく、ほとんどのHTML要素で幅広く使用できますが、SEO上の理由で重要なキーワードを含むことが推奨されていません。
width属性
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="400"></iframe>width属性は、埋め込まれたコンテンツの幅を指定するための属性です。
ピクセル（px）単位で幅を表現することができます。
上記の例では、埋め込まれたコンテンツの幅が560pxに設定されています。
width属性は、ピクセル単位で値を指定する必要があります。
幅が指定した値よりも小さい場合は、埋め込まれたコンテンツの幅に合わせて自動的に要素が縮小されます。
width属性を指定しなかった場合は、埋め込まれたコンテンツの幅に合わせてiframe要素が自動的にサイズを変更します。
しかし、埋め込まれたコンテンツが読み込まれる前にiframe要素が表示される場合があり、表示が崩れる可能性があります。 width属性を指定したほうが無難に改善できるでしょう。
まとめ
今回はiframe要素属性の一覧をまとめました。
iframe要素の属性をしていすることで柔軟に埋め込みコンテンツの機能を使用することができます。
必要に応じて属性を設定していきましょう。
スポンサーリンク
