HTML

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

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タグを使う方法についてご紹介しました。

[PR] Webデザインで副業する学習方法を動画で公開中

この記事を監修してくれた方

中本賢吾（なかもとけんご）
アジマッチ有限会社　代表取締役社長

開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。

小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

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

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

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

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

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

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

HTMLでFile APIを使ってローカルファイルを読み込む方法を現役エンジニアが解説【初心者向け】

HTMLでFile APIを使ってローカルファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...

HTML

HTMLでinput要素の入力位置がずれる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでinput要素の入力位置がずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

Canvasを覚える！HTMLでアニメーションを作成する方法【初心者向け】現役エンジニアが解説

HTMLのCanvasについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもHTMLの記...

HTML

HTMLでemでフォントサイズを指定する方法を現役エンジニアが解説【初心者向け】

HTMLでemでフォントサイズを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

HTML

HTMLで一定時間後に別のページにジャンプする方法を現役デザイナーが解説【初心者向け】

HTMLで一定時間後に別のページにジャンプする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

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

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] Webデザインで副業する学習方法を動画で公開中親要素からiframe内の要素を上書きする方法 JavaScriptを使用することで親要素、すなわち外側のWebページからiframe内の要素にアクセス可能です。しかし、この操作はiframeに表示しているWebページが外側のWebページと同じWebサーバーにある場合に限ります。他のWebサーバーにある場合には「クロスドメイン」というセキュリティ上の制約のため、iframe内の要素は操作できません。 iframe内にスタイルシートを追加して上書きする方法要素に対してスタイルシートを追加/解除するにはclassListプロパティを使用します。要素.classList.add(追加するクラス名); 要素.classList.remove(解除するクラス名); また、iframe内のドキュメントにはcontentWindow.documentでアクセス可能です。 iframe要素.contentWindow.document 応用するとiframe内の要素に対してもスタイルの追加/削除が行えるようになるでしょう。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

CSS

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] Webデザインで副業する学習方法を動画で公開中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

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

iframe内の要素がCSSで効かない原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましまょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 iframe内の要素がCSSで効かない原因と対処法について詳しく説明していくね！大石ゆかりお願いします！目次 iframeの使い方とは iframeの問題点 iframeが効かない原因と対処法まとめ iframeの使い方とは iframeを使うとWebページ内に別のWebページを埋め込めます。例えば、GoogleMapを共有する際「地図を埋め込む」を選択するとiframeを使用したHTMLが表示可能です。 [PR] Webデザインで副業する学習方法を動画で公開中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

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] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう 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では、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない

JavaScript

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

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。サイトのトップに動画を入れているサイトも増えてきているので、トレンドを抑えるためにも役立つ知識になるでしょう。目次<iframe>タグの使い方動画の埋め込みこの記事を監修してくれた方HTMLを学習中の方へそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。動画の埋め込み方法動画を埋め込むためのHTMLのタグには、下記の2つがあります。 ifarmeタグ videoタグ各々のメリットや使い分けの方法を解説します。 iframeタグ最も簡単に埋め込むだけであれば、<ifarme>タグを用いるのが一般的です。 <iframe>タグは作成しているページに別のURLにあるコンテンツを埋め込んで表示する際に、汎用的に利用できるタグです。ですので、動画だけではなく、別サイトのコンテンツ全体を読み込むこともできます。動画の場合は、<iframe>を使うと大きさからURLまで設定でき、ホームページにアップロードしている動画だけでなく、「YouTube」にアップされている動画を埋め込むことができます。 videoタグ HTML5から実装されたのが<video>タグです。これは、今までの<iframe>タグにはなかった「loop」や「autoplay」といった機能が実装できます。「loop」指定で動画を継続的に再生したり、「autoplay」を指定すると表示と同時に自動的に再生が開始します。さっそく上記2つのやり方を見ていきましょう。大石ゆかり videoタグって何でしょうか？田島悠介 HTML5から追加された、動画のためのタグなんだ。大石ゆかり YouTubeの動画を自分のサイトで使う時は、iframeタグで書いてたんですけど。田島悠介そうだね。ただ、動画専用のタグだと、いろいろな用途に使うことができるんだ。とりあえず、簡単に書いてみよう！実際に書いてみよう実際にソースコードを書いてみて、Webブラウザで確認をしましょう。動画を準備して、同じ階層においてください。試す場合には、下記の「sample.mp4」の部分を自分のビデオファイルと同じ名前にしましょう。 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> 上記の例では、frameborderで動画の外枠の幅を指定したり、allowfullscreenを指定すると全画面モードにすることを許可します。 videoタグ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <video controls autoplay loop><source src="sample.mp4"></video> </body> </html> 上記の例では操作コントローラーを表示し、自動再生してループ再生する指定になります。今日のHTMLコーディングでは、インラインフレームが使用できないようなページが増えているので、<video>タグを使うのが良いでしょう。インラインフレームはクラッカーと呼ばれる悪い人たちによって、ホームページに悪意ある改ざんがされやすい要素だからです。 <iframe>はいわば別のページを表示する仕組みですので、別ページを表示できるHTMLの構造自体を廃止してしまうという動きがあります。今から組む方は<video>タグで挑戦してみましょう。またホームページの中には<iframe>が使用できないところもあるので、気を付けておきましょう。大石ゆかりブラウザで見たところ、どちらも変わりないですね。田島悠介確かにそうだね。大石ゆかり videoタグ特有のことってないんですか？田島悠介動画をページの背景につかったり、オリジナルの再生ボタンを作れたり、コマ送り表示とかプログラミングと親和性が高いんだ。大石ゆかり難しそうだけど、面白そうですね！ [PR]

HTML

HTML4.01で非推奨であったインラインフレームを解説を現役デザイナーが解説【初心者向け】

HTML4.01で非推奨であったインラインフレームについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTML4.01で非推奨であったインラインフレームについて詳しく説明していくね！大石ゆかりお願いします！インラインフレームとはインラインフレーム（iframe要素）ではsrc属性を使うことにより指定したページのURLを別のページにおいて直接読み込ませることができる便利なコードです。よくgooglemapやYoutubeをサイト内で読み込みたいときに使用されます。コードの書き方としては、下記のようなものになります。 <iframe src="hoge.html" width="100%" height="auto"> お使いのブラウザはiframeに対応しておりません。 </iframe> （<iframe>タグ未対応のブラウザのために、インラインフレームが表示されなかった場合に注意書きとして表示される文言を付けておいてあげると親切です。）なぜ非推奨なのか HTML4,0時代、インラインフレームタグには以下の3種類の宣言タイプが必要とされていました。 Strict(厳格なHTML) Transitional(過渡的なHTML) Frameset(フレームを使用できるHTML) このうちStrictは厳格すぎてHTMLに対する正しい知識が無いとなかなかサイトを構築することができないし、Transitionlに関しては「本来使ってほしくないけどまあ仕方ないね」程度の推奨レベル、Framesetに至ってはは完全に非推奨となっていたため、インラインフレームタグ＝非推奨という認識がされている、というのが原因のようです。 [PR] Webデザインで副業する学習方法を動画で公開中最新のHTML5でのインラインフレームの扱い HTML4.01で非推奨とされていたiframeタグではありますが、最近のサイトではYouTube埋め込みやAmazonの商品リンク等、多くのサイトで利用されており、利便性も高いことからHTML5では非推奨が解除となっています。ただし、YouTubeなどで出力されたHTMLをそのままコピペするというのは、いささか良くないようです。というのはiframeに指定されたframeborder=0がHTML5では非推奨となっているため、frameborder要素は削除してコーディングしないといけないからです。frameborderに関する記述は、cssで以下のように設定するといいでしょう。 <style> iframe {border:0;} </style> 置き換えテクニックを学ぼうとはいえインラインフレームタグは非推奨になったり、非推奨が解除されたりなど不安定な要素であることは違いありません。 iframeを使いたくないな、と思う方はobjectタグというものを用いるといいでしょう。 objectタグとは、埋め込まれた外部リソースを読み込むために使用するためのタグです。汎用性が高いので、HTML文書だけでなく画像、動画、Flashなどのプラグインが必要な様々な外部ソースでも簡単に呼び出せることと、非対応ブラウザの場合に代替コンテンツを配置出来たりなど、初心者にとっては簡単に扱うことができるので便利です。 <object src="hoge.html" width="100%" height="auto"> <p>お使いのブラウザはobjectタグに対応しておりません。</p>  </object> コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

<iframe>タグの使い方