HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用57. iframe要素-外部コンテンツの表示

      2018/10/19   hatano

iframe要素とは

iframe要素(Inline Frame)は、外部のドキュメント(htmlファイル)や外部サービスをフレーム内に読み込ませて表示させる要素です。

表示領域は、width属性とheight属性で指定した範囲になります。おさまらない場合は、スクロールバーが表示されます。幅と高さはCSSでも設定できます。

外部ファイルのアドレスは、src属性に相対パスまたは絶対パスで指定します。

主な利用例として、後述する「Googleマップ」や「YouTube」などの外部サービスの表示です。

下記は、当サイトをiframeで読み込んだ場合の記述です。

(注:すべてのサイトが読み込めるわけではありません。)


<iframe src="https://web-manabu.com/" width="500" height="400"></iframe>

iframeの特徴

iframeは、display: block;(ブロックレベル)とdisplay: inline;(インライン)の両方の特徴があります。この特徴は、img要素も同じです。

iframeの注意点

  • iframeは空要素(タグ内に要素やテキストがない状態)です。

    そのため、属性またはCSSプロパティで幅と高さを指定しないと表示領域が確保できません。
  • iframe内の外部コンテンツは、直接CSSで操作できません。
  • 検索サイトは、iframe内のコンテンツを自サイトのコンテンツとは評価しません。

Googleマップの地図を読み込む

Googleマップは、iframeを利用して、地図を表示するサービスです。

  1. Googleマップにアクセスし、住所または店舗名で検索します。

    今回は、「国会議事堂」で検索してみます。

    Googleマップの手順1


  2. 検索後、「共有」ボタンをクリックします。

    Googleマップの手順2


  3. 次に「地図を埋め込む」をクリックします。

    サイズが問題なければ、コードをコピーし、表示したいhtmlファイルに貼り付けます。

    Googleマップの手順3


  4. サイズを変更場は、「中」をクリックし、「カスタムサイズ」を選択します。

    Googleマップの手順4


  5. サイズは、幅、高さで指定します。サイズを入力後、コードをコピーして、htmlファイルに貼り付けます。

    Googleマップの手順5

Googleマイビジネス

httpss://www.google.co.jp/intl/ja/business/

Googleマップに、店舗情報を掲載する場合は、Googleマイビジネスに登録する必要があります。Googleマイビジネスに登録できるのは地図の店舗のオーナーのみです。登録の際、Googleがオーナー本人かどうかの確認をする手続き(電話確認など)があります。

YouTubeの動画を読み込む

YouTubeで公開した動画はiframeを利用して自サイトに表示できます。

YouTubeの動画は、サイズ変更は可能ですが、縦横の比率が変更できません。

Youtubeの動画の比率は、16:9です。

表示領域と動画の比率が異なる場合は、足りない部分が黒で表示され、動画の比率は変わりません。

YouTubeの解像度とサイズは下記で紹介されています。

YouTubeヘルプ -推奨される解像度とアスペクト比-

  1. YouTubeにアクセスしたら、埋め込む動画のページを開きます。次に動画タイトル下にある、「共有ボタン」をクリックします。

    YouTubeの手順1


  2. 次に「埋め込みコード」をクリックします。

    コードの下にある「もっと見る」をクリックします。

    YouTubeの手順2


  3. 表示サイズは、「動画のサイズ」の「カスタムサイズ」で変更できます。

    サイズは幅または高さを指定すると自動的に16:9の比率になるようにサイズ調整をしてくれます。

    YouTubeの手順3

オプションとして下記の設定があります。

  • 動画が終わったら関連動画を表示する

    動画が終了した時点で関連動画の一覧が表示されます。チェックを外した場合は、動画終了後に動画の最初に戻ります。
  • プレーヤーのコントロールを表示する

    チェックを外すとコントロールバーが表示されなくなります。

    基本はオンにしておきます。
  • 動画のタイトルとプレーヤーの操作を表示する

    チェックを外すと動画のタイトルとユーザーが共有するためのボタンが表示されなくなります。
  • プライバシー強化モードを有効にする>

    チェックをいれると動画を再生しない限り訪問者の情報がYouTubeに保存されません。

まとめ

  • iframeは、外部コンテンツをフレーム内に読み込ませて表示させる要素
  • iframe内の要素は、CSSで操作できない
  • 検索サイトは、iframeの内容を評価しない
  • Googleマップ、YouTubeの動画はiframeで表示できる