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>タグで囲まれた小さな窓に「iframe.html」で記述した内容が表示されました。
（※<iframe>タグ未対応のブラウザのために開始タグと終了タグのあいだに「このページはiframe対応ブラウザでご覧ください。」と注意書きを添えてあげましょう。万が一、インラインフレームが表示されなかった場合はこの文言が表示されます。）
iframeタグで、ページに別のページを表示することが出来るんですねー！
そうだよ。自分のサイトの更新情報とかをiframeタグ内で表示しているサイトもあるね。
自分のサイトだけじゃなくて、外部のサイトのページも取り込めないんですか？
できるよ。例として動画サイトのyoutubeの動画をサムネイル画像付きで表示してみよう！
動画の埋め込み
さてこの<iframe>タグですが、動画をページに貼り付ける際にもよく使われています。
例として、YouTubeの動画をiframeタグを使って表示させてみます。
YouTubeの場合は、各動画ページの「埋め込みコード」にある <iframe>タグの始めから終わりまでをコピーしてHTMLのテキストに貼り付けます。
これをブラウザで確認してみると、動画が表示されましたね。
なお、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週間限定）
