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

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

      2018/02/22

iframe要素とは

iframe要素(Inline Frame)は、外部のドキュメント(htmlファイル)をフレーム内に読み込ませて表示させる要素です。
表示領域は、width属性とheight属性で指定した範囲となり、収まらない場合は、スクロールバーが表示されます。
幅と高さはCSSでも設定できます。
外部ファイルは、src属性に相対パスまたは絶対パスで指定します。
主な利用方法としては、後述する「Googleマップ」や「YouTube」などの外部サービスの表示に利用します。

下記は、当サイトをiframeで読み込んだ場合の記述です。
(注:すべてのサイトが読み込めるわけではありません。)

iframeの特徴

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

  • width, heightの指定が可能(属性またはプロパティ)
  • marginの指定が可能
  • 親要素から幅を継承しない
  • iframeはインライン要素(display: inline;)と同じで、要素が横に並ぶ

iframeの注意点

  • iframeは空要素(タグ内に要素やテキストがない状態)です。
    そのため、HTML属性またはCSSプロパティで幅と高さを指定しないと表示領域が確保できません。
  • iframe内のコンテンツは、CSSで操作できません。
  • 検索サイトは、iframe内のコンテンツをサイトのコンテンツとは評価しません。つまり、iframeで他のサイトの記事をいくら載せてもカウントされないということです。

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

Googleマップは、iframeを利用して、地図を読み込ませることができます。
Googleマップに店舗情報を載せたい場合は、Googleマイビジネスに登録する必要があります。
登録できるのは地図の店舗のオーナーのみです。
登録の際は、googleがオーナー本人かどうかの確認するための手続き(電話確認など)が必要になります。

  1. Googleマップにアクセスしたら住所または店舗名で検索します。
    今回は、「国会議事堂」で検索してみます。
    Googleマップの手順1
  2. 検索後、「共有」ボタンをクリックします。
    Googleマップの手順2
  3. 次に「地図を埋め込む」をクリックします。
    サイズが問題なければ、iframeから始まるコードをコピーしてhtmlファイルに貼り付けます。
    Googleマップの手順3
  4. サイズを変更したい場合は、「中」をクリックし、「カスタムサイズ」を選択します。
    Googleマップの手順4
  5. サイズは、幅、高さで指定します。サイズを入力後、コードをコピーしてhtmlファイルに貼り付けます。
    Googleマップの手順5

YouTubeの動画を読み込む

YouTubeで公開した動画をiframeを利用して、読み込ませることができます。
YouTubeの動画は、サイズの変更ができますが、縦横の比率が決まっています。
Youtubeの動画の比率は、16:9です。
表示領域と動画の比率が違う場合は、黒い帯が表示され、動画の比率が変わる事はありません。

  1. YouTubeにアクセスしたら、埋め込む動画のページを開きます。
    動画タイトル下にある、「共有ボタン」をクリックします。
    YouTubeの手順1
  2. 次に「埋め込みコード」をクリックします。
    コードの下にある「もっと見る」をクリックします。
    YouTubeの手順2
  3. 表示サイズは、「動画のサイズ」の「カスタムサイズ」で変更できます。
    サイズは幅または高さを指定すると自動的に16:9の比率になるようにサイズ調整をしてくれます。
    YouTubeの手順3

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

  • 動画が終わったら関連動画を表示する
    動画が終了した時点で関連動画の一覧が表示されます。チェックを外した場合は、動画終了後に動画の最初に戻ります。
  • プレーヤーのコントロールを表示する
    チェックを外すとコントロールバーが表示されなくなります。
    基本はオンにしておきます。
  • 動画のタイトルとプレーヤーの操作を表示する
    チェックを外すと動画のタイトルとユーザーが共有するためのボタンが表示されなくなります。
  • プライバシー強化モードを有効にする
    チェックをいれると動画を再生しない限り訪問者の情報がYouTubeに保存されません。

まとめ

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

 - HTML・CSS