【HTML】iframeを使ってページ内に他のページを表示する!

ページ内に他のページを表示させるにはHTMLのiframeを使用します。

iframeとは、HTMLの文章内に別の文章を表示させる要素であり、src属性に表示させたい文書のパスを指定し、widthプロパティで幅を、heightプロパティで高さを指定することにより他のページを表示することができます。

また、iframeを使用することで、ホームページの最後にGoogle Mapを表示させることができたり、Youtube動画を表示させることもできるのでユーザーにとってとても見やすいWebサイトを作ることができます。

今回は、HTMLのiframeを使ってページ内に他のページを表示する方法について以下の内容で解説していきます。

⚫︎ iframeでページ内に別のHTMLファイルを表示させる場合
⚫︎ iframeでページ内に別のWebページを表示させる場合

⚫︎ ページ内にGoogle Mapを表示させる場合
⚫︎ ページ内にYoutube動画を表示させる場合

iframeとは

iframeとは、HTMLの文章内に別の文章を表示させる要素となります。

iframeの書き方

iframeの書き方は下記となります。

表示させたい文書のパスをsrc属性に指定し、幅はwidthプロパティ、高さはheightプロパティを指定することで他のページを表示することができます。
iframeとはインラインフレームという意味になります。

またiframe要素には要素内容を入れることもできます。
要素内容を入れた場合、その内容はiframe要素に未対応の環境や、インラインフレームを表示させない設定になっている環境のみで表示されるようになります。

iframeでページ内に他のページを表示するサンプルコード

iframeでページ内に他のページを表示するサンプルコードを紹介します。

iframeでページ内に別のHTMLファイルを表示させる場合

iframeでページ内に別のHTMLの文章を表示させる場合はsrc属性に相対パスを指定します。

sample.html

sample2.html

style.css

出力結果

iframeのsrc属性に相対パスを指定することで、ページ内に別のHTMLファイルを表示させています。

iframeでページ内に別のWebページを表示させる場合

iframeで別のWebページを表示させる場合はsrc属性に絶対パスを指定します。

sample.html

style.css

出力結果

iframeのsrc属性に絶対パスを指定することで、ページ内に別のWebページを表示させています。

ページ内にGoogle Mapを表示させる場合

ページ内にGoogle Mapを表示させる場合もiframe要素を使用します。

sample.html

style.css

出力結果

ページ内にGoogle Mapを表示させる場合もiframeを使用しています。

Google Mapをページ内に表示させる方法はこちらをご参考ください。

ページ内にYoutube動画を表示させる場合

ページ内にYoutube動画を表示させる場合もiframeを使用します。

sample.html

style.css

出力結果

ページ内にYoutubeの動画を表示させる場合もiframeを使用しています。

Youtubeの動画をページ内に表示させる方法はこちらをご参考ください。

今回のポイント

iframeでページ内に他のページを表示

⚫︎ ページ内に他のページを表示させるにはHTMLのspan style=”color: red;”>iframeを使用する

⚫︎ iframeとはHTMLの文章内に別の文章を表示させる要素である

⚫︎ iframeでページ内に別のHTMLの文章を表示させる場合はsrc属性に相対パスを指定する

⚫︎ iframeでページ内に別のWebページを表示させる場合はsrc属性に絶対パスを指定する

⚫︎ ページ内にGoogle MapやYoutube動画を表示させる場合もiframeを使用している

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し