HTML4.01で非推奨であったインラインフレームを解説を現役デザイナーが解説【初心者向け】

HTML4.01で非推奨であったインラインフレームについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

インラインフレームとは

インラインフレーム（iframe要素）ではsrc属性を使うことにより指定したページのURLを別のページにおいて直接読み込ませることができる便利なコードです。よくgooglemapやYoutubeをサイト内で読み込みたいときに使用されます。

コードの書き方としては、下記のようなものになります。

<iframe src="hoge.html" width="100%" height="auto">
お使いのブラウザはiframeに対応しておりません。
</iframe>

（<iframe>タグ未対応のブラウザのために、インラインフレームが表示されなかった場合に注意書きとして表示される文言を付けておいてあげると親切です。）

 

なぜ非推奨なのか

HTML4,0時代、インラインフレームタグには以下の3種類の宣言タイプが必要とされていました。

• Strict(厳格なHTML)
• Transitional(過渡的なHTML)
• Frameset(フレームを使用できるHTML)

このうちStrictは厳格すぎてHTMLに対する正しい知識が無いとなかなかサイトを構築することができないし、Transitionlに関しては「本来使ってほしくないけどまあ仕方ないね」程度の推奨レベル、Framesetに至ってはは完全に非推奨となっていたため、インラインフレームタグ＝非推奨という認識がされている、というのが原因のようです。

 

[PR] Webデザインで副業する学習方法を動画で公開中

最新のHTML5でのインラインフレームの扱い

HTML4.01で非推奨とされていたiframeタグではありますが、最近のサイトではYouTube埋め込みやAmazonの商品リンク等、多くのサイトで利用されており、利便性も高いことからHTML5では非推奨が解除となっています。

ただし、YouTubeなどで出力されたHTMLをそのままコピペするというのは、いささか良くないようです。というのはiframeに指定されたframeborder=0がHTML5では非推奨となっているため、frameborder要素は削除してコーディングしないといけないからです。frameborderに関する記述は、cssで以下のように設定するといいでしょう。

<style>
iframe {border:0;}
</style>

 

置き換えテクニックを学ぼう

とはいえインラインフレームタグは非推奨になったり、非推奨が解除されたりなど不安定な要素であることは違いありません。

iframeを使いたくないな、と思う方はobjectタグというものを用いるといいでしょう。

objectタグとは、埋め込まれた外部リソースを読み込むために使用するためのタグです。

汎用性が高いので、HTML文書だけでなく画像、動画、Flashなどのプラグインが必要な様々な外部ソースでも簡単に呼び出せることと、非対応ブラウザの場合に代替コンテンツを配置出来たりなど、初心者にとっては簡単に扱うことができるので便利です。

 

<object src="hoge.html" width="100%" height="auto">
  <p>お使いのブラウザはobjectタグに対応しておりません。</p> 
  <!--objectタグ未対応のブラウザの場合はここの文字が表示される-->
</object>

 

監修してくれたメンター

メンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。 趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。