![閉じる [x]](http://dw1.s81c.com/i/c.gif){kind=small}
現在大量にアップロードされているWebページのHTMLソースをご覧ください。ものすごい数のテーブルが別のテーブルにネストされ、そのテーブルがまた別のテーブルにネストされて、さまざまなインライン・カラーとフォントが定義されていることが分かります。これでは、不必要な量のHTMLをWebページに追加しているだけでなく、ページが保守しにくくなる場合もあります。さらに、テーブルの場合は、Webの各ページにサイト・ナビゲーションなど、サイト情報の共通部分を格納しておかなければなりません。つまり、あるページ上でこれらの要素に変更を加えたい場合は、ずべてのページでその変更を行わなければなりません。
フレームを使用すれば、1つのフレームにサイトのナビゲーションを含むHTMLファイルを収め、別のフレームにコンテンツを収めるということができます。ナビゲーションを含むフレームは、ブラウザーに1度しかロードされず、ナビゲーションは、ユーザーがコンテンツをスクロールしている間、表示されたままとなります。
本稿では、フレームを使用してWebページを美しく、効率良くする方法を紹介します。フレームの使い方、フレームを使ってWebページをデサインする方法、共通フレーム・タグについて説明し、フレームの実践的な例を示します。
フレームは、Webページを表示するまったく新しい方法です。HTMLフレームを最初に導入したのはNetscapeでした。フレーム・タグはHTML 3.2仕様にはなりませんでしたが (フレーム・タグはHTML 4.0仕様には入っています)、Netscape Navigator 2以降のすべてのNetscapeバージョンと、Microsoft Internet Explorerバージョン3以降でサポートされました。つまり、これがフレーム使用の唯一の制限事項です。古いバージョンのブラウザーで表示することが多いWebコンテンツではフレームを使用しないでください。ただし、今日のほとんどのインターネット・ユーザーは、Netscape NavigatorやMicrosoft Internet Explorer 4.x 以上を使用しているが、またはそれにアクセスすることができること留意してください。一般的に、これらのブラウザーはオペレーティング・システムに付属しているか、インターネット・サービス・プロバイダーを通して提供されています。
フレームを説明する一番良い方法は、例を見ることです。 図1 に、4つのフレームを使用するWebページの例を示します。4つのフレームは以下のとおりです。
- 青と黒のバナーを含むヘッダー
- 色は黒で、一部の標準サイト情報を含むフッター
- 左側のナビゲーション領域 (青)
- サイトのウェルカム情報を含む右側のフレーム (白)
これらの4つのフレームは、それぞれ別のフレームのコンテンツに影響を与えずに更新できます。
たとえば、 図1 で、左側の青のナビゲーション領域にあるリンクをクリックすると、右側のフレーム内のコンテンツは、適切な情報を表示するように変更されます。ただし、フレームを使用するということは、他の3つのセクションを変更しないということ、つまり、セクションの再ロードにリソースを消費しない、ということです。また、これらのフレームは変更されないので、ユーザーが右の白いフレーム内のコンテンツをスクロールしているとき、残りの3つのフレーム内の情報は変更されず、いつでも使用することができます。
同じレイアウトのWebページは、テーブルを使用しても設計できますが、ヘッダー、フッター、ナビゲーション領域のコンテンツは、ユーザーがサイトの別の部分にアクセスするたびに繰り返しロードしなければなりません。また、すべて1ページ (つまり1つのフレーム) に収められているので、ナビゲーションとヘッダーは、画面の外にスクロールアウトされがちであり、また、ユーザーがスクロールしないと、フッターはまったく表示されません。
図1: フレームを使用しているWebページの例
あるフレーム内のリンクをクリックして別のフレームにコンテンツをロードするなど、前述の内容は現時点では少し不思議な感じがするかもしれません。これを説明するため、2つのフレームを使用する基本的なWebページを示し、フレームセットの作成を紹介しましょう。
Webサイトでフレームが表示されている場合は、必ず数多くのHTMLファイルが使用されています。フレームの全体のレイアウトを定義するHTMLファイルと、各フレームに対応する1つのHTMLファイルがあります。たとえば、 図2 は、framessample1.html (これは、残り2つのファイルのレイアウトを管理するフレーム・ファイル)、bannerfile.html、contentfile.htmlの3つのHTMLファイルから成り立っています。
図2: フレームを使用しているWebページの例
たった2つのフレームを作成する場合も、最小限の設計が必要です。各フレームのソースに対し2つのHTMLファイルが必要です。また、2つのフレームのサイズを選び、画面を横方向に分割するか、縦方向に分割するかも決めなければなりません。図2 に示すフレームの作成には、リスト1 のHTMLを使用しました。
リスト1: 2フレームHTMLファイルの例
<html> |
図2 に示す2フレームWebページの作成に使用するHTMLを理解する一番良い方法は、各タグを個別に見ることです。これらのタグは、フレームを作成する上で最小限必要なものです (フレーム属性の詳細については、後述の フレームのカスタマイズ の項を参照してください)。
1.
<html>...</html>
他のHTMLファイルと同じように
<html>
タグを使用します。
2.
<head>...</head>
他のHTMLファイルと同じように
<head>
タグを使用します。フォーマットが必要なコンテンツはないので、スタイルを追加したり、カスケード・スタイル・シートを参照したりする必要はありません。
3.
<title>...</title>
framesファイルに入力するタイトルは、ブラウザー・ウィンドウの最上部にあるキャプションに表示されるタイトルです。各フレームのHTMLファイル内のタイトルは表されていませんが、フレーム内に表示されます。
4.
<body>...</body>
およびその他のフォーマット用タグとリンク
HTMLファイルで
<frameset>
タグを使用した場合は、
<body>
タグと、ここで説明する以外のフォーマット用タグやリンクを組み込むことができません。
5.
<frameset>...</frameset>
定義した
rows
属性と
cols
属性に基づいてレイアウトするフレームのセットを作成します。
<frameset>
タグを定義する場合は、2つのサイズ設定属性の1つ (
rows
または
cols
) もタグの一部として組み込まなければなりません。
rows="percent、pixels
、または
*"
属性
rows属性は、ブラウザー・ウィンドウを横方向のフレームに分割します。これらのフレームの高さは、コンマを区切り文字とする行の高さの値で定義します。行の高さは、ピクセル単位、フレームセット全体の高さに対するパーセンテージ、または残りのスペースをできる限りすべて使うことを示すアスタリスク
(*) の 3つの方法のいずれかで定義することができます。
たとえば、
リスト1
で、
<frameset rows="18%, 82%">
では、最上部のフレームはブラウザー・ウィンドウの18%、2つ目のフレームは残りの82%を占有するように、フレームセットは横方向に分割されます。
cols="percent、pixels
、または
*"
属性
cols
属性は、ブラウザー・ウィンドウを縦方向のフレームに分割します。これらのフレームの幅は、コンマを区切り文字とする列の幅の値で定義します。列の幅は、ピクセル単位、フレームセット全体の幅に対するパーセンテージ、または残りのスペースをできる限りすべて使うことを示すアスタリスク
(*) の、3つの方法のいずれかで定義することができます。
たとえば、
リスト3
で、
<frameset cols="25%, 75%">
では、1つ目の列はブラウザー・ウィンドウの25%、2つ目の列は残りの75%を占有するように、フレームセットは縦方向に分割されます。
もう1つの
rows
と
cols
の例
単位を混合することも有効です (たとえば、
<frameset rows="50,50%,*">
)。これで、3つのフレームを持つウィンドウが作成されます。1つ目のフレームは50ピクセル、2つ目のフレームは画面の50%、3つ目は画面の残りのスペースを使用します。
6.
<frame>
各フレームに表示するWebページを定義する場合に使用します。
<frame>
タグを定義する場合は、
src
属性もタグの一部として組み込んでください。
src="source URL"
属性
この属性は、各フレームに表示するファイルを定義する場合に必要です。
使用例:
<frame src="filename.html">
7.
<noframes>...</noframes>
framesファイルがフレームをサポートしていないWebブラウザーにロードされた場合に表示するテキストを入力することができます。
基本的なフレーム・タグとレイアウトについて説明したので、次にもっと複雑なフレームのレイアウトに移ります。 図3 では、列だけ、または行だけではなく、列と行の両方向に分割されるフレームを使用します。このようなレイアウトを設計する場合は、フレームをどのようにレイアウトしたいかを、はっきりさせておくと良いでしょう。この場合は、各フレームのソースに必要な3つのHTMLファイルと、フレームを定義する1つのHTMLファイルが必要です。
図3: 3フレームWebページの例
このWebページを作成するには、まず 図2 に示したWebページと同じように、2つの横方向のフレーム、つまり行を含むフレームセットを1つ作成します。次に、下のフレームを縦方向に分割して2つの列を作成する必要があります。2つの縦方向のフレームを作成するには、2つ目のフレームセットの中にもう1つ別のフレームセットを作成しなければなりません。 リスト2 に、 図2 の2フレームWebページを作成する場合に使用したコードと、2つ目のフレームセットを追加する場合に必要な追加コードを示します。変更点は太字になっています。
リスト2: 3フレームHTMLファイルの例
<html>
|
図1 のナビゲーション・フレーム内のリンクをクリックすると、コンテンツ・フレーム内の情報だけが変更され、ヘッダー、ナビゲーション、フッターの各フレーム内の情報は変更されないということは、すでに説明しました。これは、各フレームに名前を割り当てることで可能になります。
name
属性は、フレームの属性指定です。フレームの名前をリンクのターゲットとして使用して、ブラウザーにページのどの部分を表示するかを指示します。
リスト3
に、各フレーム・タグにname属性を追加して、前述の3フレームWebページを作成する場合に使用したコードを示します。変更点は太字になっています。
リスト3: name属性を含む3フレームHTMLファイルの例
<html> |
次に、name属性とtarget属性について詳しく説明します。
1.
name="framename"
属性
各フレームには名前を割り当てることができますが、これは必須ではありません。name属性はフレームの識別子です。name属性を使用することで、ページをロードできる特定のフレームを定義することができます。
使用例:
<frame src="filename.html"
name="name">
2.
target="framename"
属性
ブラウザーのどこにページを表示するかを定義するには、リンク属性の "
target
" を使用します。フレームまたはウィンドウの名前を、
target
の値として使用します。
target
属性の一般的な使用法としては、1つのフレームにリンクのリストを入れ、リンクされているページを定義されているターゲットまたはウィンドウで開く方法があります。
たとえば、"nav" フレーム内のHTMLページには、"content"
フレームで開きたい別のページのリンクが入っています。"nav"
フレームでリンクをクリックすると、"content" フレーム・ファイルが変更されます。
使用例:
<a href="newpage.html"
target="content">New page</a>
同様に、ページをロードしたり、フレームセットを置き換えたりしたくない場合は、リンクのtargetを "
_blank"
; として定義します。これで、ブラウザーのインスタンスがもう1つ開き、そこにページがロードされます。
使用例:
<a href="http://www.ibm.com"
target="_blank">IBM</a>
他に、各フレームの外観と機能をカスタマイズする場合に使用できるフレーム属性やフレームセット属性があります。 図4 を 図3 と比較すると、フレームの境界線が除去され、バナーにスクロール・バーがなく、コンテンツ・フレーム内の文書で文書とフレームの端の間のマージンが増加していることが分かります。 リスト4 (追加属性は太字) に、 図4 に示すフレームを作成する場合に使用したコードを示します。
図4: 追加属性を使用している3フレームWebページの例
リスト4: 追加属性を使用している3フレームHTMLファイルの例
<html> |
属性を使用することで、フレームとフレームの間の余分な境界線を削除して、フレームセットの外観を制御することができます。個々のフレームごとにスクロールやサイズ変更を制御したり、各フレームのHTMLソースの周りのマージンを制御したりすることもできます。
1.
frameborder="yesまたはno"
属性
フレーム境界を表示するかどうかを定義します。一般に、ブラウザーのデフォルト設定はframeborders =
yesなので、フレーム境界が必要な場合、この属性を使用する必要はありません。
使用例:
<frameset rows="50%, 50%"
frameborder="no">
2.
scrolling="yes、no、またはauto"
属性
ユーザーがフレームをスクロールできるようにするかどうかを制御できます。一般に、ブラウザーのデフォルト設定はscrollingがyesまたはautoのいずれかです。
使用例:
<frame src="filename.html"
scrolling="auto">
3.
noresize
属性
デフォルトでは、定義したフレームセットの
rows
属性と
cols
属性にかかわらず、ユーザー側でフレームをサイズ変更することができます。サイズ変更できないようにしたい場合は、
<frame>
タグにnoresize属性を追加します。
使用例:
<frame src="filename.html" noresize>
4.
marginheight="pixels"
属性
フレーム内における文書の上および下のピクセル数。ブラウザーによって、マージンのデフォルト値は異なります。この属性で、ターゲット・ブラウザーでのフレームの外観を確認します。
使用例:
<frame src="filename.html"
marginheight="0">
5.
marginwidth="pixels"
属性
フレーム内における文書の左および右のピクセル数。ブラウザーによって、マージンのデフォルト値は異なります。この属性で、ターゲット・ブラウザーでのフレームの外観を確認します。
使用例:
<frame src="filename.html"
marginwidth="5">
フレームを設定し終えたら、各フレームの外観をカスタマイズすることができます。カスケード・スタイル・シートを使用すれば、フレームセットの外観全体を管理しやすくなります。カスケード・スタイル・シートにあまりなじみのない方は、 参考文献 で、参考になる記事をチェックしてください。
スタイル・シートを使用する場合、もっとも変更が多いフレームにデフォルトのスタイルを適用します。これで、すべてのタグでスタイル・シート・クラスを参照し続ける必要がなくなります
(
<body>
対
<body class="nav">
)。次に、一定にしておくか、またはほとんど変更しない各フレーム (たとえば、バナーやサイトのナビゲーションなど)
のクラス (
BODY.nav
、ここで
"nav"
はクラス)
を定義します。これで、カラーを変更したり、たった1つのファイルでバックグラウンド・イメージを追加したりして、フレームセットの外観全体を簡単に変更できるようになります。
リスト5 に、本稿のWebページ例で使用したスタイル・シートを示します。各フレームのHTMLファイルは、このスタイル・シートにリンクし、適切なクラスを参照します。
リスト5: フレームと一緒に使用するカスケード・スタイル・シートの例
/* Frames sample cascading style sheet */
|
これで、Webページ全体にフレームを表示する方法の説明は終わりです。フレームは維持が簡単で、使い勝手よく、何よりWebページの再ロードを減らすことができるので、本当に便利です。皆さんも、フレームの便利さを実感されることを期待します。
-
フレームの詳細については、
W3C HTML 4.0仕様
を参照してください。
-
ブラウザー仕様を含め、フレームの詳細については、
Web Developer's Virtual Library
を参照してください。
Jennifer Heinsは、IBMでパーベイシブ・コンピューティングとWebSphereの分野の仕事をしているインフォメーション・エンジニアです。Web開発、サンプルの作成、設計のほか、効率的なWebインフォメーション設計の構築や実装を楽しんでいます。1998年より、Jenniferはさまざまなコンピューティング・プラットフォーム上で実行するオンライン・インフォメーションおよびインフォメーション・インターフェースの設計を担当しています。今一番関心があるのは、モバイル・デバイス用のインフォメーションおよびサンプルの開発です。連絡先はheinsj@us.ibm.com です。
タグ
スライダーバーを使用することで、より多く（少なく）タグを表示します。
人気のタグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するトップのタグを表示します。
マイ・タグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するお客様ご自身のタグを表示します。
記事の人気タグ |
記事のマイ・タグタグ・リストへスキップ
記事の人気タグ |
記事のマイ・タグ