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>(アイフレーム)タグはHTMLの文書の中に、もうひとつ別のHTMLファイルを組み込みます(インラインフレームといいます)。HTML内に別のHTMLを入れ子にするタグと考えるといいでしょう。

 

・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.html」で記述した内容が表示されました。

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

動画の埋め込み

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

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

iframe_ex

 

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

iframe_ex2

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

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

 

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

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

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

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

開発実績: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デザイナーから教わること」を実感してみてください。

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