htmlタグ｜iframe・frame・frameset・noframes [ホームページ制作の基本タグ]

<iframe></iframe>

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

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

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

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

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

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

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

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

src

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

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

src=””

URL

name

フレーム名を指定

name=””

align

インラインフレームとその周りに配置されるテキストの並びを指定

align=””

top middle bottom left right

align=”top”

フレームとテキストが上揃え

align=”middle”

フレームとテキストが上下センター揃え

align=”bottom”

フレームとテキストが下揃え

align=”left”

フレームが左端、その右にテキストが回り込みます

align=”right”

フレームが右端、その左にテキストが回りみます

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=””

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

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

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

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

<iframe></iframe>

この<iframe>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ制作・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

html5で廃止。

<frame></frame>

この<frame>タグはhtml5で廃止されたため、html5で制作されたホームページ（ウェブサイト）や、html5ベースのWordPressテーマなど、html5で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。

ホームページ制作・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

html5で廃止。

<frameset></frameset>

この<frameset>タグはhtml5で廃止されたため、html5で制作されたホームページ（ウェブサイト）や、html5ベースのWordPressテーマなど、html5で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。

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

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

noframes ノーフレーム

<noframes></noframes>

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

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

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

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

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

ノーフレーム。

html5で廃止。

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

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

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

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

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

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

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

<noframes></noframes>

この<noframes>タグはhtml5で廃止されたため、html5で制作されたホームページ（ウェブサイト）や、html5ベースのWordPressテーマなど、html5で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。

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

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

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

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

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

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

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ