htmlタグ｜iframe（インラインフレーム）・frame・frameset・noframes

現在のホームページ（ウェブサイト）制作において、YouTubeの動画やGoogleマップをページ内に埋め込んで表示する場面は頻繁に発生します。このように、閲覧しているページの一部を切り取り、そこに別のHTMLドキュメント（外部ページなど）を読み込んで表示するために使用されるのが「iframe（アイフレーム：インラインフレーム）」タグです。他のコンテンツを手軽に自社のホームページ（ウェブサイト）へ組み込むことができるため、現在でも非常に多くの場面で活用されています。

一方で、この「iframe」と似た名前を持つHTMLタグとして「frame」「frameset」「noframes」というタグが存在しました。これらはインターネットの黎明期から2000年代にかけて、ホームページ（ウェブサイト）の画面を上下や左右に分割し、それぞれに別々のHTMLファイルを読み込ませる「フレーム分割」という手法で多用されていました。メニュー部分とコンテンツ部分を分けて表示するなど、当時の技術としては画期的でした。しかし、これらのタグは現在のHTMLの規格では完全に廃止されています。

フレーム分割の手法はSEO（検索エンジン最適化）において致命的な欠陥を抱えていました。検索エンジンのクローラーは、分割された個別のページを別々のものとして認識してしまうため、サイト全体の構造やコンテンツの価値を正しく評価できませんでした。また、ユーザーが特定のページをブックマーク（お気に入り登録）しようとしても、枠組みのページしか登録されず、使い勝手が非常に悪いという問題もありました。さらに、スマートフォンなどの小さな画面でフレーム分割を表示することは物理的に困難であり、モバイル対応が必須となった現在の事業環境には全く適していません。

そのため、現在では画面のレイアウト（分割）はすべてCSSを用いて行い、外部コンテンツの一部埋め込みにのみ「iframe」タグを使用するというのが標準的なルールとなっています。本ページでは、現在も重要な役割を担う「iframe」タグの正しい記述方法や、スマートフォン表示に対応させるためのレスポンシブ化の手法、そして廃止されたフレームタグの歴史について詳しく解説します。

iframe（インラインフレーム）

<iframe></iframe>

ホームページ制作（ウェブサイト制作）の際に使用する<iframe>タグについてのご説明です。

ホームページ制作において<iframe>（インラインフレーム）タグは、ホームページ（ウェブサイト）のページ中に挿入するインラインフレームを設置する際に使用します。

現在ではホームページ中に外部の地図データなどを埋め込む際によく使用されています。

<iframe> インラインフレームの定義

Inline Frame（インラインフレーム）。ホームページ制作において<iframe>タグはインラインフレームの定義に使用します。外部サイトなどに表示されているページデータを呼び出して表示する際に使用します。

ウィンドウの中に独立して表示される形式のインラインのフレームを設置する場合に<iframe>タグを用います。

なお、<frameset>はウィンドウを水平・垂直に分割します。

一般的に<iframe>タグは、マップサイトからの地図の呼び出しなどに使用されます。

現在も有効な主要属性と現代の仕様に合わせた追加属性

リンク先の指定やフレームの識別など、機能の中核を担う属性は現在もそのまま引き継がれています。より専門的には、SEOやセキュリティ、表示速度の改善に役立つ新しい属性も積極的に活用することが重要です。

src（ソース）属性

フレーム内に表示する文書のURLを指定します。src=”” の中に遷移先のURLを記述します。画像ファイルを直接指定するのではなく、画像や動画を含んだHTML文書（ページ）のURLを指定することが基本です。

name（ネーム）属性

フレームに任意の名前を指定します。aタグ（リンク）やformタグ（フォーム送信）のtarget属性から、このname属性の値を指定することで、インラインフレーム内に別のページを開くといった連携が可能になります。

title（タイトル）属性（現代の推奨）

フレーム内のコンテンツが何であるかを説明するタイトルを指定します。音声読み上げ機能などを利用するユーザーへのアクセシビリティを向上させるため、現代の仕様では指定することが強く推奨されています。

loading（ローディング）属性（現代の推奨）

loading=”lazy” と指定することで、画面外にあるインラインフレームの読み込みを遅延させることができます。ページ全体の表示速度を大幅に改善し、検索エンジンからの評価を最適化するために非常に効果的です。

現代のHTML仕様で廃止・非推奨となった属性

かつてはインラインフレームの見た目やスクロールの挙動をHTMLタグに直接記述していましたが、現在のホームページ（ウェブサイト）制作においては、これらの属性はHTML5で廃止されています。レイアウトや装飾はすべてCSS（カスケーディングスタイルシート）で制御します。

align（アライン）属性

インラインフレームとその周りに配置されるテキストの並び（top、middle、bottom、left、rightなど）を指定する属性でしたが、現在は廃止されています。テキストの回り込みや配置の調整は、CSSのfloatやflexbox、vertical-alignなどを使用して設定します。

marginwidthとmarginheight属性

フレーム内の左右マージン（marginwidth）や上下マージン（marginheight）を指定する属性でしたが、廃止されています。余白の調整はすべてCSSのpaddingやmarginプロパティで行います。

scrolling（スクローリング）属性

スクロールバーの表示（yes）や非表示（no）を指定する属性でしたが、現代の仕様では非推奨です。スクロールバーの制御は、CSSのoverflowプロパティ（overflow: hidden; など）を使用して行います。

frameborder（フレームボーダー）属性とbordercolor属性

フレーム境界に枠を表示するかどうか（frameborder）や、境界線の色（bordercolor）を指定する属性でしたが、これらも廃止されています。境界線を消す場合はCSSで border: none; を指定し、枠線をつける場合もCSSのborderプロパティで色や太さ、スタイルを設定します。

noresize（ノーリサイズ）属性について

フレームサイズを変更できないように指定する属性（noresize=”noresize”）は、かつてのframe要素（画面を完全に分割する古い仕様）で使用されていましたが、現在これらの要素自体が廃止されています。iframe要素のサイズ固定やスマートフォンに合わせた可変対応も、CSSのwidthやheight、aspect-ratioなどを用いて適切に構築します。

ホームページ制作ではマップ情報や動画の埋め込みに

インラインフレームは主に外部サイトの情報などをページに埋め込む際に使用されるタグです。

現在、ホームページ制作において<iframe>タグはページ中にGoogleMapやYouTube動画を埋め込む際によく使用されます。

GoogleMapやYouTubeにて埋め込みタグの発行をしてくれますが、表示サイズ等ページでの表示にカスタマイズを加える場合には、<iframe>タグの属性指定を行います。

<iframe></iframe>

ホームページ制作・SEOの1ポイント

フレームとインラインフレームのように、何がどう違うのかわかりにくいhtmlタグがありますが、こうしたタグの違いを理解するには、ブロック要素とインライン要素の違いをまず理解する必要があります。ホームページ制作において、会社概要ページなど、ページの中に住所が記載されているようなページを作成する際にインラインフレームを利用してGoogleMapなどの地図データを呼び出す事があります。ユーザーの利便性を考えれば、こうした地図の埋め込みはページクオリティを測る上でプラスになることから、SEOにおいてもプラスに働くかもしれません。

frame フレーム

<frame></frame>

ホームページ制作（ウェブサイト制作）の際に使用する<frame>タグについてのご説明です。

ホームページ制作において<frame>（フレーム）タグは、ホームページ制作において個別フレームの定義、フレームに表示するファイルを指定するときに使用します。

<frame> 個別フレームの定義 フレームに表示するファイルを指定

<frame>タグはホームページ（ウェブサイト）のレイアウトに関する個別フレームの定義します。ホームページ制作において<frameset>で分割された各フレームに表示するファイルと表示方法を指定します。

src

フレームに表示文書のURLを指定

画像ファイルを直接指定せず、 画像ファイルを含んだ文書を指定します。

src=””

URL

name

フレーム名を指定

name=””

marginwidth

フレーム内の左右マージンを指定

marginwidth=””

px

marginheight

フレーム内の上下マージンを指定

marginheight=””

px

noresize

フレームサイズを変更できないように指定

各フレームサイズの初期値はユーザー側での変更が可能ですが、
noresize属性でフレームサイズ変更ができないように指定します。

XHTML1.0の場合、省略不可。以下のように記述

noresize=”noresize”

scrolling

スクロールバーの表示・非表示を指定

初期値（無指定）はauto

scrolling=””

常にスクロールバーを表示させます　yes
常にスクロールバーを表示させない　no

frameborder

フレーム境界に枠を表示
初期値は1で、枠が表示されます。
境界線を表示させたくない場合は0を指定で非表示。

frameborder=””

数値　もしくは　yes no

bordercolor

フレーム境界線の色を指定

bordercolor=””

longdesc

各フレームに関して詳しい文書のURLを指定

longdesc=””

URL

廃止。

<frame></frame>

ホームページ制作・SEOの1ポイント

フレームの利用は、ホームページ制作においていかに共通部分制作の手間を省くかという点から考案された方法です。しかしながらphpとDBを利用する方法が主流となり、現在ではフレーム系のタグの利用はインラインフレームのみとなっています。

frameset フレームセット

<frameset></frameset>

ホームページ制作（ウェブサイト制作）の際に使用する<frameset>タグについてのご説明です。

ホームページ制作において<frameset>（フレームセット）タグは、ホームページ（ウェブサイト）のフレームの定義してウィンドウをフレームに分割する際に使用します。

<frameset> フレームの定義 ウィンドウをフレームに分割

<frameset>タグは、ホームページ（ウェブサイト）の「フレーム」を定義します。ホームページ制作においてウィンドウをいくつかのフレームに分割する場合に使用します。フレームセット。

ウィンドウ分割パターン指定し、 分割した各フレームへのファイルの割り当ては<frame>で指定します。

分割要素 cols rows

%、またはpxで指定。ウインドウサイズを  , で区切りながら指定

cols

縦に分割

cols=”30%,70%”　で縦に30％、70％の分割

cols=””

rows

横に分割

rows=”120,*”　で横に120px、*は残り全部　で分割

rows=””

frameborder

フレーム境界に枠を表示
初期値は1で、枠が表示されます。
境界線を表示させたくない場合は0を指定で非表示。

frameborder=””

数値　もしくは　yes no

border

フレームの境界線の太さを指定

frameborderと異なり、frameset要素に対してのみ指定

border=””

px

bordercolor

フレーム境界線の色を指定

bordercolor=””

framespacing

分割したフレーム同士の距離を指定

framespacing=””

px

廃止。

<frameset></frameset>

ホームページ制作・SEOの1ポイント

ホームページには、サイドバーやフッター部分などの共通部分がよく設置されています。旧来からこうした共通部分をいかに手順を少なくして設置するかということが課題になっていました。なぜなら、サイドバーに記載した項目に変更があった場合、静的HTMLの場合ならば、全てコピーアンドペーストで修正していく必要があったからです。現代では、こうしたフレームの利用はなくなりましたが、方法論の方向性のきっかけはフレームの利用だった言えるでしょう。

noframes ノーフレーム

<noframes></noframes>

ホームページ制作（ウェブサイト制作）の際に使用する<noframes>タグについてのご説明です。

ホームページ制作において<noframes>（ノーフレーム）タグは、フレームが表示できない環境用の表示内容の指定します。フレーム利用における代替表示指定です。

<noframes> フレームが表示できない環境用の表示内容の指定

<noframes>タグは、フレーム(<frameset>)が表示できない環境用の表示内容の指定します。ホームページ制作においてフレームの仕組みを利用してページレイアウトを設計する場合に、フレーム表示できない環境用の代替表示指定として表示内容を指定します。

フレーム非対応ブラウザ、フレーム非表示設定の場合の代替内容を指定します。

ノーフレーム。

廃止。

noframesタグが担った役割の歴史とフレーム構造からの完全な脱却

ホームページ（ウェブサイト）制作の黎明期において、<noframes>タグは画面を複数の領域に分割して異なるHTMLファイルを同時に表示させる<frameset>や<frame>タグとセットで使用されていた要素です。より専門的には、フレーム機能に対応していない古いブラウザや、テキストベースの環境に対して代替のコンテンツを表示させるための「フォールバック」の役割を担っていました。しかし、このフレーム構造はユーザビリティやSEOにおいて多くの重大な問題を抱えていたため、HTML5の策定に伴い、関連するタグとともに完全に廃止（非推奨）となりました。

かつてのフレーム仕様では、URLがトップページのまま固定されてしまい、ユーザーが特定の個別ページに直接リンクを貼ったり、ブラウザの「戻る」ボタンが意図通りに動作しなかったりするという大きなデメリットがありました。また、検索エンジンのクローラーにとっても、分割された個々のHTMLファイルの親子関係や、ホームページ（ウェブサイト）全体の論理構造を正確に巡回・把握することが極めて困難であり、検索順位において大きなマイナス要因となっていました。現代のモダンなWeb制作においては、これらのレガシーなフレーム構造は完全に過去のものとなっています。

共通パーツのシステム化とセマンティックなHTMLによる代替

かつてフレーム構造が多用された最大の理由は、ヘッダーやサイドメニューといった「全ページ共通のパーツ」を一箇所のHTMLファイルでまとめて管理し、運用時の修正の手間を省くという、制作側の管理効率の向上にありました。現代の事業ホームページ（ウェブサイト）制作においては、このような共通部分の共通化は、HTMLタグの機能に頼るのではなく、サーバー側のシステムやCMS（コンテンツマネジメントシステム）を用いて解決することが世界的な標準となっています。

具体的には、WordPressなどのCMSを導入することで、header.php や sidebar.php といった形で共通のテンプレートパーツをシステム的に一元管理し、ページ生成時に動的に結合して出力する仕組みが広く用いられています。これにより、制作・運用の効率性を高く維持しながら、書き出されるHTML自体はページごとに固有のURLを持つ、クリーンで独立した文書構造を実現できます。

さらに、HTML5で追加された <header>、 <nav>、 <main>、 <footer> などのレイアウトセマンティクスタグを適切に使用してマークアップを行うことで、検索エンジンに対してホームページ（ウェブサイト）の論理構造を正確に伝えることができるようになります。特定の閲覧環境に依存する古いタグを完全に排除し、モダンなオープン標準に則った設計へと最適化していくことが、サイト全体のクローラビリティを劇的に向上させ内部SEO対策につながります。

<noframes></noframes>

ホームページ制作・SEOの1ポイント

ホームページ制作において、phpとMySQLなどのデータベースを利用してページを動的生成する方法が主流になるまでは、各部分をフレーム分割して、制作することが一般的でした。現在こうしたフレーム分割を使用することはめったに無く、同時にフレーム非対応、フレーム非表示設定に対する指定もほとんどないでしょう。ただし、ユーザーの環境によって表示できないときの代替表示指定をするという方針は現在のSEOの中のSEO内部対策の原則に通じているところがあります。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法