HTML

HTMLでiframeを使う方法【初心者向け】

HTML初心者向けに、【iframe】の使い方を解説した記事です。iframeタグは、src属性で表示させるファイルを指定します。widthとheightで幅と逆さも指定可能です。YouTubeの動画の埋め込みを例に説明します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLでiframeタグを使う方法について解説します。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

iframeを使う方法について詳しく説明していくね！

お願いします！

<iframe>タグの使い方

・iframeタグ inline frame <iframe>〜</iframe>

特定のファイルをページの一部に表示させます。

・src属性

画像や文書など、表示させるファイルの出処を指定します。

・width属性：幅の指定

書いてある通りですが、iframeの幅を指定できます

・height属性：高さの指定

書いてある通りですが、iframeの高さを指定できます

例をみてみましょう。

「index.html」というファイルに<iframe>タグを書き足して、別に用意した「iframe.html」ファイルを組み込みましょう。今回は幅200px、高さ100pxのインラインフレームです。

<iframe src=”iframe.html” width=”200″ height=”100″></iframe>

iframe_tag

（※<iframe>タグ未対応のブラウザのために開始タグと終了タグのあいだに「このページはiframe対応ブラウザでご覧ください。」と注意書きを添えてあげましょう。万が一、インラインフレームが表示されなかった場合はこの文言が表示されます。）

iframeタグで、ページに別のページを表示することが出来るんですねー！

そうだよ。自分のサイトの更新情報とかをiframeタグ内で表示しているサイトもあるね。

自分のサイトだけじゃなくて、外部のサイトのページも取り込めないんですか？

できるよ。例として動画サイトのyoutubeの動画をサムネイル画像付きで表示してみよう！

動画の埋め込み

さてこの<iframe>タグですが、動画をページに貼り付ける際にもよく使われています。

例として、YouTubeの動画をiframeタグを使って表示させてみます。

iframe_ex

YouTubeの場合は、各動画ページの「埋め込みコード」にある <iframe>タグの始めから終わりまでをコピーしてHTMLのテキストに貼り付けます。

iframe_ex2

これをブラウザで確認してみると、動画が表示されましたね。

なお、widthとheightの値を変えれば、動画の大きさを自由にカスタマイズすることもできます。

今回はHTMLでiframeタグを使う方法についてご紹介しました。

HTMLについてさらに学びたい場合は、HTMLでimageタグを使って画像を表示する方法も合わせてご覧ください。

わあ！すごい！そのまま再生できますね。ページに動画も表示できるとコンテンツの幅が広がりそうですね。

そうだね。youtubeのようにiframeでコンテンツの配信を提供しているところはけっこう多いんだ。amazonとかの商品もページに張ることが出来るよ。

iframeタグは裾野が広いんですね～。

iframeは、埋め込みコンテンツとしての意味しかないけど、だからこそ汎用的に使われているのかもね。

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

この記事を気に入って頂けたら
いいね！・フォローをお願いします

HTMLでテキストの上に点を打つ（傍点）方法を現役エンジニアが解説【初心者向け】

HTMLでテキストの上に点を打つ（傍点）方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLをスマホ対応にする方法を現役デザイナーが解説【初心者向け】

HTMLをスマホ対応にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HT...

HTML

HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】

HTMLでCache-Controlを使用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLに埋め込んだ動画の音量をミュートに指定する方法を現役デザイナーが解説【初心者向け】

HTMLに埋め込んだ動画の音量をミュートに指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

HTMLのbr要素を現役デザイナーが解説【初心者向け】

HTMLのbr要素について解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方の記事を読むとさらに理解が深まります。 ...

HTML

今すぐ覚えられる！HTMLでJavaScriptを読み込む（呼び出す）方法を現役エンジニアが解説【初心者向け】

HTMLとCSSのみでは動きのあるWebページを作ることは難しいです。例えばプルダウンメニューやスライドインページなどはCSSのみで出来ない訳ではありませんが、...

HTML

あわせてよく読まれている記事

CSSでiframeタグの高さを自動調整する方法を現役エンジニアが解説【初心者向け】

CSSでiframeタグの高さを自動調整する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 iframeタグの高さを自動調整する方法について詳しく説明していくね！大石ゆかりお願いします！目次 iframeとは iframeをCSSで調整するには iframeの高さを自動調整する方法まとめ iframeとは iframeとはWebページの中に別のWebページを埋め込む要素です。 <iframe src="sub.html" width="100px" height="100px"></iframe> srcで埋め込むページのアドレスを、widthで幅、heightで高さを指定します。その他のオプションなど、詳しくは以下の記事も参考にしてください MDN – <iframe>:インラインフレーム要素 [PR] HTML/CSSで挫折しない学習方法を動画で公開中iframeをCSSで調整するには iframeで枠線を指定するframeborder、スクロールバーの表示有無を制御するscrollingは非推奨の属性になっています。枠線を制御するにはcssのborderプロパティを使用しましょう。以下は枠線を表示しない場合の例です。 iframe { border: none; } iframeの高さを自動調整する方法 iframe内のウィンドウはcontentWindowプロパティで取得できます。contentWindowからdocument.body.scrollHeightプロパティを取得することで、iframe内のドキュメントの高さを取得することができます。それをiframeの高さに指定することで、iframeの高さを自動調整することができます。試してみましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> #sub { border: none; } </style> </head> <body> <iframe id="sub" src="sub.html" onload="func1()"></iframe> <script>

CSS

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について紹介していきます。サイトのトップに動画を入れているサイトも増えてきているので、トレンドを抑えるためにも役立つ知識になるでしょう。 HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。目次動画の埋め込み方法実際に書いてみよう動画の埋め込み方法動画を埋め込むにはいろいろな方法がありますが、最も簡単に埋め込むだけであれば、<ifarme>タグを用いるのが一般的です。 <iframe>を使うと、動画の大きさから、URLまで設定でき、HPにアップロードしている動画だけでなく、「YouTube」にアップされている動画を埋め込むことができます。また、HTML5から<video>タグが実装されました。これは、今までの<iframe>タグにはなかった「loop」や「autoplay」といった機能が実装できます。上記2つのやり方を見ていきましょう。大石ゆかり videoタグって何でしょうか？田島悠介 HTML5から追加された、動画のためのタグなんだ。大石ゆかり youtubeの動画を自分のサイトで使う時は、iframeタグで書いてたんですけど。田島悠介そうだね。ただ、動画専用のタグだと色々な用途に使うことが出来るんだ。とりあえず、簡単に書いてみよう！ [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう実際にソースコードを書いてみて、Webブラウザーで確認をしましょう。動画を準備して、同じ階層においてください。下記の「sample.mp4」の部分を自分のビデオファイルと同じ名前にしましょう。 HTML -iframe- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <iframe width="560" height="315" src="sample.mp4" frameborder="0" allowfullscreen></iframe> </body> </html> HTML -video- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <video controls autoplay loop><source src="sample.mp4"></video>

HTML

JavaScriptでiframeを操作する方法を現役エンジニアが解説【初心者向け】

JavaScriptでiframeを操作する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでiframeを操作する方法について詳しく説明していくね！大石ゆかりお願いします！ iframeとはインラインフレームの略で、ページ内に別のHTMLページを埋め込むことが出来る便利なものです。 src属性で指定した別ページをiframe内で表示させます。 CSSと組み合わせることで、表示させる枠を調整したり、内部コンテンツの調整したりも可能です。ただ、クロスドメインでの利用には注意が必要になるので気をつけて下さい。クロスドメインの場合はiframe内のDOMへのアクセスが制限されます。 JavaScriptでiframeを操作する方法 iframeにアクセスするには、普通にdocument.getElementById( );で要素を取得して利用します。内部のDOMへのアクセスでは、取得したオブジェクトに対してcontentWindow.documentで要素を取得します。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう index.html <!DOCTYPE html> <meta http-equiv="content-type" charset="utf-8"> <html> <head> <title>JavaScriptでiframeを操作する</title> </head> <body> <p><button onclick="iframe_test()">iframe内の操作を行います。</button></p> <iframe src="color_iframe.html" id="id_ifrem"></iframe> <P><button onclick="iframe_test2()">クロスドメインは変更できません。</button></p> <iframe src="https://maps.google.co.jp/maps?output=embed&q=東京タワー" id="id_ifrem2"></iframe> <script type="text/javascript"> function iframe_test(){ var o_iframe = document.getElementById('id_ifrem'); var color = o_iframe.contentWindow.document.getElementById('id_color'); color.innerHTML = "赤色に変えました。"; color.style.background = "red"; }; function iframe_test2(){ var o_iframe2 = document.getElementById('id_ifrem2'); alert("ここのアラートは出ます。次は出ません。"); var o_google = o_iframe2.contentWindow.document; alert("contentWindowが利用できず、このアラートはでません。"); }; </script> </body> </html> color_iframe.html： <!DOCTYPE html> <meta http-equiv="content-type" charset="utf-8"> <html> <head> <title>JavaScriptでiframeを操作する</title> <style> #id_color {background: blue;} </style> </head> <body id="id_color">iframe内に記載されています.</body> </html> ※index.htmlとcolor_iframe.htmlは同じフォルダーに配置して下さい。 contentWindowは、WEBサーバ上でないと機能しません。ローカルで確認する場合でも、WEBサーバを通して動作確認して下さい。筆者プロフィール小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

iframe内の要素がCSSで効かない原因と対処法を現役エンジニアが解説【初心者向け】

iframe内の要素がCSSで効かない原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましまょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 iframe内の要素がCSSで効かない原因と対処法について詳しく説明していくね！大石ゆかりお願いします！目次 iframeの使い方とは iframeの問題点 iframeが効かない原因と対処法まとめ iframeの使い方とは iframeを使うとWebページ内に別のWebページを埋め込めます。例えば、GoogleMapを共有する際「地図を埋め込む」を選択するとiframeを使用したHTMLが表示可能です。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中iframeの問題点 iframeの中のWebページは、同じWebサーバー内のものか否かにより、その扱いが大きく異なります。別のWebサーバーのページをiframeで表示する場合は「クロスドメイン」というセキュリティ上の制約があり、外部からiframe内のWebページにアクセスすることができません。 iframeが効かない原因と対処法表示しようとしているWebページがクロスドメインに該当しないか、確認しましょう。クロスドメインであっても枠線やiframe自体の大きさは設定可能です。これらが正しく設定できない場合は記述ミスの可能性があります。以下はGoogleMapをiframeで埋め込み表示した例であり、CSSで枠線と幅と高さを指定したものです。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> iframe { border: none; width: 600px; height: 450px; } </style> </head> <body> <iframe

CSS

CSSでiframe内の要素を上書きする方法を現役エンジニアが解説【初心者向け】

CSSでiframe内の要素を上書きする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 iframe内の要素を上書きする方法について詳しく説明していくね！大石ゆかりお願いします！目次 iframeとは親要素からiframe内の要素を上書きする方法 iframe内にスタイルシートを追加して上書きする方法 iframe内の要素を上書きしてみようまとめ iframeとは iframeとはWebページの中に別のWebページを埋め込む要素です。 iframeの記述方法は以下となります。 <iframe id="sub" src="sub.html"></iframe> 以前は枠線をframeborder、スクロールバーの有無をscrolling属性で指定しています。 HTML5からいずれも非推奨属性であるため、スタイルに関してはCSSで適用すると良いでしょう。 iframe { border: none; width: 410px; height: 410px; } [PR] HTML/CSSで挫折しない学習方法を動画で公開中親要素からiframe内の要素を上書きする方法 JavaScriptを使用することで親要素、すなわち外側のWebページからiframe内の要素にアクセス可能です。しかし、この操作はiframeに表示しているWebページが外側のWebページと同じWebサーバーにある場合に限ります。他のWebサーバーにある場合には「クロスドメイン」というセキュリティ上の制約のため、iframe内の要素は操作できません。 iframe内にスタイルシートを追加して上書きする方法要素に対してスタイルシートを追加/解除するにはclassListプロパティを使用します。要素.classList.add(追加するクラス名); 要素.classList.remove(解除するクラス名); また、iframe内のドキュメントにはcontentWindow.documentでアクセス可能です。 iframe要素.contentWindow.document 応用するとiframe内の要素に対してもスタイルの追加/削除が行えるようになるでしょう。 iframe内の要素を上書きしてみよう今回のサンプルプログラムでは、iframe内の要素のCSSを変更する方法について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> #sub { border: none; width: 410px; height:

CSS

HTMLでiframe要素のpaddingを指定する方法を現役エンジニアが解説【初心者向け】

HTMLでiframe要素のpaddingを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 iframe要素のpaddingを指定する方法について詳しく説明していくね！大石ゆかりお願いします！目次 paddingの指定についてブロック要素・インライン要素の違い iframe要素にpaddingを指定してみよう paddingの指定についてブロックレベル要素やインライン要素などの内側に、余白を設けるためのCSS（カスケーディングスタイルシート）のプロパティです。paddingとして定めた値は、その要素の幅として加算されることになります。視認性の良い表示領域を確保するためにも活用されています。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中ブロック要素・インライン要素の違い要素には、主に2種類の性質があります。文章や画像などのメディア系のコンテンツをまとめるためのブロックレベル要素それを小分けにて定義するためのインライン要素です。HTML5では、この概念は一応廃止されたことになっており、HTML4.01の文法にともなう制約（厳格ではインライン要素の内側にブロックレベル要素を含められない等）が、取り除かれました。ブロックレベル要素とインライン要素を構成するための技術としては、近年のブラウザにもあります。 iframe要素にpaddingを指定してみよう iframe要素のsrc属性の値として指定できるURLは、httpおよびhttpsプロトコルの制約上では、同一ドメインのページのみに制限されることになっています。src属性の値としてコードペンのトップページのURLを指定してから、表示領域の周囲にpaddingプロパティを用いて余白を設けれます。以下に、例としてのサンプルコードも掲載しています。 HTML <iframe src="https://codepen.io/" class="addTagManager" id="in_a_sense"></iframe> CSS .addTagManager { padding: 50px 50px 50px 50px; } #in_a_sense { border: 1px solid #333333; border-radius: 10px; background-color: #000000; width: 62%; display: block; margin: 0 auto; box-shadow: 0 10px 25px 0 rgba(1, 3, 3, 0.2); } 表示結果 See the Pen 2020-07-22-sample01 by YOHEI INAI (@yohei_inai) on CodePen. ※セキュリティポリシー等の都合上、表示できない可能性があります。監修してくれたメンター井内洋平 TechAcademyの現役メンター。元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでiframeを使う方法【初心者向け】

<iframe>タグの使い方