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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

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

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