18人がいいねしました

更新日

iframeタグを使ってwebページにコンテンツを埋め込もう

web兄さん

iframeを使って外部のwebページを埋め込む方法を紹介します。

sandbox属性によるセキュリティの話やscrolling属性でのスクロールの設定方法などの基本はもちろんのこと、iframeの分割表示の方法や代替案となるobjectタグの使い方も解説しています。


そのほかにもwebサイト制作でよく使用する

  • GoogleMap
  • Youtubeの動画の埋め込み方法
  • Facebook、Twitter、Instagramといった三大SNSのタイムラインの埋め込み方法

それぞれステップ形式で丁寧に解説しているので、iframeをマスターできること間違いなしの記事です!

iframeって何ができるの?

iframeは外部サイトのwebページを自身のサイトにそのまま埋め込むことができます。

GoogleMapを埋め込んだり

Youtubeで動画を埋め込んだり

このように外部サイトのコンテンツをとても簡単に自分のサイトに表示することができます。

iframeは用途がとっても多い

実は、iframeはSNSが盛んになった昨今使いどころが多いタグなんだ。というのも

  • twitterのタイムライン
  • facebookのタイムライン
  • instagramのタイムライン
  • youtubeの動画
  • GoogleMap

などは全てiframeタグを使って埋め込まれているから。これらの埋め込み方法は後ほど紹介するからまずは基本的な書き方を一緒に理解していこう!

iframeの書き方

それでは早速iframeの書き方について学習していきましょう。

<iframe id="inline-frame"
  width="表示する幅(px)"
  height="表示する高さ(px)"
  src="埋め込むページのURL">
</iframe>
  1. src属性に読み込みたいページのURLを記入
  2. widht属性に埋め込むページの幅をpxで記入
  3. height属性に埋め込むページの高さをpxで記

サンプルでは「当サイトのトップページ」を埋め込んで表示しています。実際にwebページが埋め込まれているのでもちろんリンクをクリックしてページ移動もすることができます。

sandbox属性でセキュリティを高める

sandboxとは?

埋め込まれたサイトのソースコードにはどんなコードが書いてあるかわかりません。もし悪意のあるコードがあった場合は埋め込んだサイトが影響を受けてしまいますよね。そういったことがないようにセキュリティの制限範囲を指定できるのがsandboxです。

例えばsandboxを指定するとscriptの実行やformの送信などを無効にすることができます。

<iframe id="inline-frame"
  src="https://webliker.info/"
  sandbox>
</iframe>

アイコンが表示されず、メニューをクリックしても何も反応しませんよね。これはjavascriptが禁止されているからです。

その他に設定できる属性の値(解除キー)はこちらです。

属性の値効果
allow-same-origin親のドキュメントと同じオリジンのドキュメントとして扱う
allow-formsフォーム送信を許可
allow-popupsポップアップの表示を許可
allow-scriptsJavaScript(ポップアップを除く)の実行を許可
allow-top-navigation最上位ウィンドウへのナビゲーションを許可

scrolling属性でスクロールバーの設定

<iframe id="inline-frame"
  scrolling="no"
  src="https://webliker.info/">
</iframe>

scrolling属性を設定することでスクロールの設定をすることができます。

属性効果
scrolling=”auto”初期値、ホバーでスクロールバー表示
scrolling=”yes”常にスクロールバーを表示
scrolling=”no”スクロールを禁止

iframeの幅をコンテンツ幅によって可変させる

iframeのwidth属性ではpxの指定しかできないのでcssを使ってコンテンツ幅によって可変するようにしましょう。

iframe {
  width: 100%;
}

iframeにwidth:100%を指定するだけでOKです。

iframeが使えない時の代替案「objectタグ」

ページを埋め込む方法はiframeタグだけではありません。object要素は「動画、画像、音声、HTML」など様々な形式のファイルを読み込み表示することができます。

<object data="https://webliker.info/yomikata-wakarukun/">
このサイトは現在表示できません。<!-- 埋め込みできない場合の代替データ -->
</object>

objectではsrc属性ではなく、data属性に埋め込みたいページのURLを記述します。width属性やheight属性を使って幅と高さを指定することも可能です。

iframeとことなるのは<object>〜</object>の中にデータを書くことで埋め込みたいデータが表示できない場合のタグやテキストを設定することができます。

注意点

とはいえobjectタグはあくまでiframeが使えない場合の代替案にすぎません。webページや動画を埋め込む場合はiframeを優先して使用するようにしましょう。

iframeは分割できる?

frameタグ

HMTL4では画面全体を分割して、それぞれwebページを埋め込む<strong>frame</strong>というタグが使用できました。

名前が似ているのでiframeと混同してしまう人もいるようですが

  • frame:画面を分割してそれぞれ別のページを埋め込む
  • iframe:指定した箇所にページを埋め込む

という違いがあります。

しかしframeはHTML5では使用することができません。そのためiframeを分割させたいならcssを用いて分割する必要があります。

<div class="flex">
  <div class="flex-item">
    <iframe src="https://webliker.info/46840/"></iframe>
  </div>
  <div class="flex-item">
    <iframe src="https://webliker.info/yomikata-wakarukun/"></iframe>
  </div>
</div>
.flex{
    display:flex;
  }
  .flex-item{
    flex-basis:50%;
  }

ブラウザの中でしっかりと半分ずつに読み込んだwebページが分割されていますよね。iframeを使って分割したい場合はCSSと覚えておきましょう。

ここからは各種サービスの埋め込み方法を学ぼう

さて、iframeの使い方はここまでにして、次はwebサイトによく使用されるGoogleMapやYoutube、SNSサービスの埋め込み方法を解説していくよ!とはいってもiframeタグを特にいじる必要はなくてどのサービスもコードをコピペするだけで対応できるくらい簡単なんだ。それでは早速見ていこう!

GoogleMapを埋め込む

ステップ1

googlemapに名称または住所を入力して検索

GoogleMapに「名称または住所」を入力して検索します。

結果が表示されたらパネルの「共有」をクリック。

ステップ2

地図を埋め込むを選択してHTMLをコピーをクリック

新しくパネルが開くので「地図を埋め込む」のタブを選択して「HTMLをコピー」をクリック

ステップ3

コピーしたコードをコピペすればマップが表示されます。

Youtubeの動画を埋め込む

ステップ1

動画右下の共有をクリック

動画の右したにある「共有」をクリック

ステップ2

埋め込むをクリック

表示されたパネルの「埋め込む」を選択

ステップ3

コードをコピーする

コードが表示されるのでコピーする。

この時埋め込む動画の「開始位置」を変更すると開始位置を指定した埋め込みコードが生成されます。

ステップ4

あとはコードを貼り付けるだけでOK。

Twitterのタイムラインを埋め込む

ステップ1

Twitterpublishにアクセスしてタイムラインを表示したいアカウントのプロフィールページのURLを入力

https://publish.twitter.com/」を開きます。

タイムラインを表示したアカウントのプロフィールページのURLを入力して「→」をクリックします。

ステップ2

Embedded Timelineを選択

「Embedded Timeline」を選択します。

ステップ3

生成されたコードをコピー

埋め込み用のコードが生成されるのでコピーします。

ステップ4

あとはコードを貼り付けるだけでOK。

facebookのタイムラインを埋め込む

ステップ1

ページプラグインを開いてFacebookページのURLを入力

ページプラグイン」を開いてスクロールし「FacebookのページURL」に表示したいページのURLを入力します。

ステップ2

IFRAMEのコードをコピー

さらに下にいき「コードを取得」をクリックして表示されたパネルの「IFRAME」タブのコードをコピーします。

ステップ3

コードを貼り付けたらOKです。

Instagramの投稿一覧を埋め込む

ステップ1

InstaWidgetを開いて「早速始める」をクリック

InstaWidget」を開いて「早速作ってみる」をクリック

ステップ2

ユーザー名に表示させたいアカウントを入力

「ユーザー名」に表示したアカウントのユーザー名を入力し、その他調整したい項目を埋める。

ステップ3

プレビューを押したら更新できるのでOKであれば埋め込みコードを取得を選択

プレビューを押すと右側のプレビュー内容が更新されるので問題なければ「埋め込みコードを取得」をクリック

ステップ4

生成されたコードをコピーする

生成されたコードをコピーする。

ステップ5

コードを貼り付けたらOK。

iframeの要点まとめ

最後にiframeの要点をまとめておさらいしましょう。

  • iframeは外部のページを読み込むためのタグ
  • src属性に読み込みたいページのURLを記入
  • 信用が低いサイトはsandboxで制限をかける
  • 幅や高さはCSSで設定できる
  • 複数のインラインフレームを分割して表示するならCSSでカラムを分け
  • GoogleMapやYoutube、Twitter、Facebook、Instagramといったサービスは簡単に埋め込み可能

“WEB制作の勉強で失敗したくないあなたへ”

サイト制作をホントに0から学習できる教材を無料配布中!

\モダンなポートフォリオサイトが作れるように!/
  • 他のスクールなら確実に「有料級」のWEB制作の教材が今なら無料で閲覧可能!
  • ディレクター、デザイナー、エンジニアすべて一貫できる現役プロが1人で作成したから体系的に学習できる
  • 4つの課題にチャレンジしながら着実に基礎を固めていくから挫折がない

無料配布の講座では、このようにモダンなポートフォリオサイトが作れちゃいます!

特設ページで詳しくチェックする

スクール越えの圧倒的なコスパ1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ

記事では見れない豆知識

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ