HTMLでiframeを使う方法【初心者向け】
HTML初心者向けに、【iframe】の使い方を解説した記事です。iframeタグは、src属性で表示させるファイルを指定します。widthとheightで幅と逆さも指定可能です。YouTubeの動画の埋め込みを例に説明します。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLでiframeタグを使う方法について解説します。
そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。
本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
<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>タグで囲まれた小さな窓に「iframe.html」で記述した内容が表示されました。
（※<iframe>タグ未対応のブラウザのために開始タグと終了タグのあいだに「このページはiframe対応ブラウザでご覧ください。」と注意書きを添えてあげましょう。万が一、インラインフレームが表示されなかった場合はこの文言が表示されます。）
iframeタグで、ページに別のページを表示することが出来るんですねー！
そうだよ。自分のサイトの更新情報とかをiframeタグ内で表示しているサイトもあるね。
自分のサイトだけじゃなくて、外部のサイトのページも取り込めないんですか？
できるよ。例として動画サイトのyoutubeの動画をサムネイル画像付きで表示してみよう！
動画の埋め込み
さてこの<iframe>タグですが、動画をページに貼り付ける際にもよく使われています。
例として、YouTubeの動画をiframeタグを使って表示させてみます。
YouTubeの場合は、各動画ページの「埋め込みコード」にある <iframe>タグの始めから終わりまでをコピーしてHTMLのテキストに貼り付けます。
これをブラウザで確認してみると、動画が表示されましたね。
なお、widthとheightの値を変えれば、動画の大きさを自由にカスタマイズすることもできます。
今回はHTMLでiframeタグを使う方法についてご紹介しました。
HTMLについてさらに学びたい場合は、HTMLでimageタグを使って画像を表示する方法も合わせてご覧ください。
わあ！すごい！そのまま再生できますね。ページに動画も表示できるとコンテンツの幅が広がりそうですね。
そうだね。youtubeのようにiframeでコンテンツの配信を提供しているところはけっこう多いんだ。amazonとかの商品もページに張ることが出来るよ。
iframeタグは裾野が広いんですね～。
iframeは、埋め込みコンテンツとしての意味しかないけど、だからこそ汎用的に使われているのかもね。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。
