ホームページ作成・CSSの基本や、ロゴ作成、アフィリエイトなどについて説明しています。
TOP

基礎編

デザイン編
運営編
その他

フレーム

この項では、フレームに関するタグについて説明します。

  1. フレームとは
  2. フレームのデメリット
  3. フレーム設定ファイルを作成する
  4. フレーム未対応ブラウザへの配慮
  5. インラインフレーム

1.フレームとは

フレームとは、ブラウザをいくつかに分け、それぞれに別のHTMLファイルを表示させる仕組みです。

フレームを使ったページは、

  1. フレーム設定ファイル
  2. フレームの中身
の2つで成り立っています。

[ページTOPへ]

2.フレームのデメリット

まず第１の問題として、フレームに対応していないブラウザがある、ということが挙げられます。
未対応ブラウザでフレームのあるページを読み込もうとすると、レイアウトが崩れてしまったり、開かなかったりしてしまいます。

第2の問題として、表示速度が遅くなるということが挙げられます。
例えば2分割したフレームを読み込む場合、1つのページを表示させるのに、3つのファイルを読み込まなくてはなりません。

[ページTOPへ]

3.フレーム設定ファイルを作成する

まず、フレーム設定ファイルの文書定義型をフレーム用のものにします。
以下がフレーム用の文書定義型です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

次に、フレームに関する設定をしましょう。
ここでは、フレームの分割方法や、フレームに読み込むファイルの設定などをします。

分割方法

まず、分割方法の説明をしたいと思います。

<frameset cols="@,A,…">〜</frameset>
<frameset rows="@,A,…">〜</frameset>
＊@には、各フレームの大きさを入れる

colsで縦に、rowsで横に分割します。

例えば以下のように記述すると、

<frameset cols="150,*">
</frameset>

左のフレームが150、右のフレームがその残り、という形に分割されます。

読み込むファイルの指定

フレームを分割したら次は、フレームに読み込むファイルを指定します。

<frame src="@" name="A">

@には読み込むファイル名のURLを、Aにはフレーム指定用の名前を入れます。
フレーム指定用の名前とは、リンクでフレーム内に他のファイルを表示させるときに、どこのフレームにファイルを表示させるか指定するときに用います。

リンク先を表示させる場所の指定

<a href="@" target="A">〜</a>

@にはリンク先のURL、
Aには

  • nameを使って指定した特定のフレーム名
  • _blank　新しいウィンドウに表示する
  • _self　リンク元のあるページにリンク先の情報を表示
  • _parent　親フレームにリンク先の情報を表示
  • _top　フレームをなくし、そのページ全てを使ってリンク先の情報を表示
が入ります。
[ページTOPへ]

4.フレーム未対応ブラウザへの配慮

大抵のブラウザではフレームに対応していますが、中にはフレームに対応していないブラウザもあります。
その場合に備え、フレームに対応していないブラウザで表示したときの内容を指定しておきましょう。

<noframes>〜</noframes>
〜の部分には、一般のホームページと同じように記述することが出来ます。

[ページTOPへ]

5.インラインフレーム

インラインフレームとは、ページの中にフレームを埋め込む形式です。

<iframe src="@">〜</iframe>

*@インラインフレームの中身のファイルのURL

〜には、インラインフレーム非対応ブラウザ用の説明をいれます。

サイズを指定

<iframe src="@" width="A" height="B">〜</iframe>

@にはインラインフレームの中身のファイルのURL
Aにはインラインフレームの横幅を入れる
Bにはインラインフレームの縦幅を入れる

枠線を消す

<iframe src="@" frameborder="A">〜</iframe>

@にはインラインフレームの中身のファイルのURL
Aには

  • 0　（枠線なし）
  • 1　（枠線あり・デフォルト）
が入ります。

スクロールの設定

<iframe src="@" scrolling="A">〜</iframe>

@にはインラインフレームの中身のファイルのURL
Aには

  • auto （自動・デフォルト）
  • yes　（常に表示）
  • no　（表示しない）
が入ります。

名前を付ける

ここで名前を付けておくと、リンクタグでリンク先を表示する場所としてインラインフレームを指定（targetで指定）することができます。

<iframe src="@" name="A">〜</iframe>

@にはインラインフレームの中身のファイルのURL
Aには名前が入ります。

[ページTOPへ]

Copyright © 2008 ホームページ作成初心者講座 All Rights Reserved.
また、バナー以外の直リンクは禁止となっております。ご了承下さい。