Webサイトを作成していく上で欠かせないのがHTML。

その中でも他サイトをページの一部として埋め込めるiframeタグは必要不可欠な要素です。

プログラミングを学習する際に基本となるのがHTMLやCSS。

多くのプログラミング教室でも最初に教えるため、今更聞けないという方も多いかと思います。

そこで今回はHTMLを踏まえたiframeタグの使い方を徹底解説していきます。

これからWebサイトを作りたいという方は、まずHTMLの基本知識から徹底的に習得していきましょう。

HTMLの基礎知識

iframeとはHTMLタグの1つで、HTMLの要素や属性の知識を要します。

まずはHTMLの基本知識をおさらいしていきましょう。


HTMLとは

HTMLとは簡単に言うと、タイトルや見出しなどの役割を明確に表示させるものです。

HTMLは「Hyper Text Makeup Language」の略で、Webサイトの骨組みの役割を果たしています。

例えばタイトルや見出しをそのままテキストで記載してもコンピューターは読み取ってくれません。

そこで使用するのがHTMLタグです。

HTMLタグでタイトルの場所を明確にすることで、コンピューターは情報を認識。

実は自分たちが普段ブラウザ上で見るほとんどのWebサイトは、HTMLで構築されています。


さまざまな種類のHTML

HTMLは3種類存在し、その使用方法や対応している要素は異なります。

2020年3月現在存在しているHTMLは以上の3種類です。

  • HTML4.01
  • XHTML1.0
  • HTML5

特にHTML5はHTMLの最新バージョンなので、書き方がよりシンプルになり使えるタグも豊富です。

HTML5については、以下の記事で詳しくご紹介しています。HTML5についてより知りたい方は、こちらの記事も併せてご参照ください。

関連記事：HTML5タグの基本要素を紹介！タグの使い方や省略可能なタグとは？エンジニアがおさえておくべき入れ子のルールもチェック


なお、今回特集するiframeにおいては、一部対応しなくなってしまった属性もあるため注意しましょう。


HTMLの要素と属性

HTMLについて調べていくと、よく登場する「要素」と「属性」という言葉。

iframeタグを正しく使用していくためには、要素と属性について理解しておく必要があります。


要素とは

まずHTMLの要素とは、開始タグから終了タグまでの全体の構成を指します。

例えば見出しのHTMLタグを利用する際、以下のようなタグで記載します。

  1. <h1>テキスト</h1>

その際この<h1>から</h1>までの全体をHTML要素と呼びます。


属性の効果

一方属性とは、使用した要素にさらに性質や役割を付加するもののこと。

設定したタグのリンク先や表示場所などの細かい設定は属性が行います。

HTMLの要素によって使用できる属性は異なります。

  1. <a href=”index.html”>テキスト</a>

という要素の場合、「href」というリンク先を指定する属性の後ろに「＝」を付け、ファイルやURLなどのリンク先を記載します。

このときリンク先を「”」で囲むことを忘れないようにしましょう。

この要素を使用することで、ブラウザ上で「テキスト」の部分をクリックすると「index.html」というファイルに移動できます。


iframeとは

では本題のiframeとはどのような役割を果たすものなのでしょうか。

iframeとは、HTMLタグの中にさらに別のファイルを埋め込むことができる要素のことです。

ファイルのリンク先を表示するsrc属性や、幅や高さを決める属性と組み合わせてサイト上の一部として別ファイルを表示できます。

つまりiframeタグとは埋め込み用のタグと覚えておくといいでしょう。


iframeとframeの違い

iframeとよく間違えられるのがframe要素。

これらの違いをあまり理解できていない人も多いのではないでしょうか。

上記でも触れましたが、iframeは一言でいうと埋め込みするためのものです。

一方frameは、複数のページを分割して1つのページを形成しています。

つまりframeはページ全体を分割するものと覚えておきましょう。


iframeタグを使った埋め込み方法

iframeタグについて、まずは埋め込む方法を習得しましょう。

TwitterやYouTubeなどを自分のサイト上に表示させる際もiframeタグを使用します。

今回はSNSをサイト上に埋め込む方法を紹介していきます。


YouTubeの埋め込み

  • 「共有」クリック
  • 埋め込みを選択しコードをコピー
  • 表示させたいサイトのテキストエディタに貼付

まず埋め込みたいYouTubeを開き右下の「共有」をクリックします。

「<>」という埋め込みボタンが表示されるため、そちらを選択しましょう。

すると以下のような埋め込みコードが表示されます。

  1. <iframe width=”560″ height=”315″ src=”https://www.youtube.com/＊＊＊></iframe>

これをそのままコピーしテキストエディタに貼り付けることで、埋め込みが完了します。

埋め込みコードを見ると、iframeタグが使用されていることがわかります。


Google Mapsの埋め込み

Google MapsもYouTubeと同じ手順で埋め込みをすることができます。

表示したい所在地のパネル右下の「共有」をクリック。

「地図を埋め込む」というタブの「HTMLをコピー」を選択すると、HTMLタグが表示されます。

  1. <iframe src=”URL” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>

このようなタグをコピーして自分のサイトのテキストエディタに貼付で埋め込み完了です。


iframeタグの使い方

では実際にiframeタグの使い方について解説していきたいとおもいます。

iframeタグは属性と組み合わせることで、リンク先や表示枠を設定できます。

  1. <iframe src=”iframe.html” width=”650″ height=”450″>iframeテキスト</iframe>

このような構成が基本的な使い方となります。

今回はこの基本的な構成を使って使い方を説明していきます。


src属性と組み合わせてみる

iframeタグは基本的にsrc属性と組み合わせて使用すると覚えておいて良いでしょう。

ここで使用されているsrc属性とは、imgタグの参照先にリンクさせるものです。

src属性の値は移動させたいURLかファイルを設定しましょう。

例えば「iframe.html」というファイルに移動させたいのであれば、「＝」の後ろに記述します。

つまり開始タグはこのように構成します。

  1. <iframe src=”iframe.html”>

また以下の点にも十分注意が必要です。

  • 英数字、スペースが半角になっているか
  • リンク先の前後に「”」がついているか

こちらが抜けているとうまく表示されません。


インラインフレームの高さを調整

iframeタグにsrc属性のみを組み合わせても、iframeタグの枠の調節が全くできていません。

そこでheight属性を使用して、枠の高さを調整します。

height属性の値には数値を記述し、高さを指定してください。

  1. <iframe src=”iframe.html” height=”450″>

例えばiframeの高さを450pxに設定したいのであれば以上のような開始タグとなります。


インラインフレームの横幅を調整

高さを調整したら次は横幅を調整していきます。

幅を指定するためにはwidth属性を使用しましょう。

width属性もheight属性同様、値を数値にすることで具体的な幅を決めます。

例えば横幅を600pxに設定する場合、このような開始タグで始めてください。

  1. <iframe src=”iframe.html” width=”600″ height=”450″>

後はiframeタグで囲みたいテキストを終始タグと囲めば以下のようなiframeタグが完成します。

  1. <iframe src=”iframe.html” width=”600″ height=”450″>iframeのテキスト</iframe>

iframeタグと組み合わせられる属性を覚えれば、簡単に埋め込みを行うことが可能です。


iframeと組み合わせられる属性の使用方法や効果

HTMLの要素は組み合わせられる属性が決まっています。

それはiframeタグも同じであり、上記で説明した属性以外にもいくつか存在します。

では、代表的な属性の使用方法や得られる効果を説明していきましょう。


sandbox属性

iframe要素を使用してサイトを埋め込む際に注意したいのは、コンテンツの質です。

悪質なコンテンツだった場合、埋め込んだサイト自体にも悪影響を及ぼす恐れがあります。

そこでsandbox属性を使用することで、悪意のあるコンテンツの埋め込みを未然に防いでくれるということです。

sandbox属性は値を付けずに使用するとscriptやformの実行すべてに制限がかかってしまいます。

そこで制限の解除キーを属性値にしてみましょう。

  • allow-same-origin:親文書と同じドメインとみなす
  • allow-forms:ドキュメントのフォームの有効化
  • allow-scripts:ドキュメントのスクリプトを有効化

このような解除キーを組み合わせることで、セキュリティ管理もより効果的に行うことができます。


allow属性

YouTubeなどのSNSの埋め込みコードにも使用されているのがallow属性です。

自動再生やフルスクリーンなど、ブラウザ上での機能を有効化します。


name属性

iframe要素にname属性を追加することで、フレームに名前を設定することができます。

target属性を指定する場合や、formの属性値として使われるのが一般的です。


iframeタグを実際に試して習得する方法


iframeタグを実際に作って習得していきましょう。

iframe要素はHTMLタグの1つなので、練習方法はHTMLと同じです。

Windowsのアクセサリである「メモ帳」を使用して、実際にブラウザ上で反映されるか確認します。

Macを使っている人は「テキストエディット」を活用してください。

iframe要素が含まれるHTMLタグを記入したら「.html」という拡張子で終わる名前で保存します。

保存したファイルをブラウザ上で確認します。

Google Chromeなどのブラウザを開いたら、先ほどのファイルをブラウザ上で開きます。

テキストがHTMLタグの指定通りに表示できていたら成功です。

わざわざ専用のアプリを使用しなくても簡単にiframe要素を練習することができます。


iframeを使用する際の注意点

iframeは使用する際にいくつかの注意点があります。

最期にその注意点についてまとめていきましょう。


SEO効果が期待できない

サイト検索の順位アップを目指すうえで大事になるのがSEO対策。

しかし残念ながらiframeはSEO効果が期待できないというデメリットがあります。

それはiframeで埋め込んだコンテンツは、SEO上では評価されないからです。

もしSEOとしての効果を最重要するのであれば、iframe要素は多用しないことをオススメします。


HTML5では廃止された属性もある

最新バージョンであるHTML5ではiframe要素の属性もいくつか廃止されています。

  • frameborder属性:境界線を表示させる
  • scrolling属性:スクロールバーを表示させる

このようなこれまでメインの属性として使用されたものも廃止されているのです。

一方でsandbox属性などは、HTML5から出た新しいものを活用することができます。


まとめ

今回はHTMLタグの1つであるiframe要素について特集しました。

HTMLの基本を踏まえれば、iframeの使用も簡単に感じる人も多いのではないでしょうか。

iframeは見やすくわかりやすいサイトを作るには、必要不可欠な要素です。

HTMLのバージョンや使用できる属性に注意すれば、誰でも活用することができます。

また本格的なプログラミングを学習する前に覚えたいのがHTML要素。

メモ帳などを利用したテキストエディタで練習を積めば、自然とWebページの構造を理解するようになります。

今回はiframeについて特集しましたが、さまざまな要素を習得してみてくださいね。


toiroフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。