ホーム>レベルアップ情報一覧>フレームの説明
フレームについて少し学びましょう!
フレームってなに?
HTMLでは複数のHTMLファイルを1つのウィンドウに分割して表示し、それぞれの枠内に別々のページを表示することができます。この枠のことを「フレーム」と呼びます。フレームを使うとウィンドウの左側にメニューを表示しながら、右側にメインとなる内容のページを表示することができます。また、横に分割、縦と横にも分割できます。「フレームによるレイアウト」の詳しくは次項で説明します。
もう少し踏み込んだ説明
では具体的にはどのようにウィンドウを分割しているのでしょうか?まずは右図をご覧ください。
右図の上のフレームの設定について説明します。左右2つにウィンドウを分割するには2つのHTMLファイル(右図ではa.htmlとb.html)を用意します。そしてその2つのHTMLファイルを分割して表示するためのHTMLファイル(c.html)を別に作ります。そのファイルに frameset 要素の cols 属性でページをどのように分割するか設定し、frame 要素で別の2つのHTMLファイルを読み込みます。
では、右図の真ん中のフレーム設定について説明します。上下2つにウィンドウを分割するには2つのHTMLファイル(右図ではd.htmlとe.html)を用意します。そしてその2つのHTMLファイルを分割して表示するためのHTMLファイル(f.html)を別に作ります。そのファイルに frameset 要素の rows 属性でページをどのように分割するか設定し、 frame 要素で別の2つのHTMLファイルを読み込みます。
そして、右図の下のフレーム設定について説明します。3つにウィンドウを分割するには3つのHTMLファイル(右図ではg.html、h.html、i.html)を用意します。そしてその3つのHTMLファイルを分割して表示するためのHTMLファイル(j.html)を別に作ります。そのファイルに frameset 要素の cols 属性で左右に分割し、frameset 要素の rows 属性で先ほど左右に分割した左側のフレームを上下に分割するように設定します。そして frame 要素で別の3つのHTMLファイルを読み込みます。
他人のWebページをフレーム内に表示しないようにしよう!
フレームを使用した場合、他人のWebページへのリンクを指定し、そのWebページがフレーム内での表示されると、自分のWebサイトの一部に見えてしまいます。サイトの管理者の許可なしにそのWebサイトのページをフレームに入れてしまうと、著作権の侵害になるおそれがあるので、注意しましょう。
文書型の宣言はフレーム型で!(Frameset DTD)
文書型宣言(DOCTYPE宣言)をする場合はフレーム型を使いましょう。文書型宣言なしでそのままHTML文書を記述した場合でも、フレームの使用は可能です。
フレームによるレイアウトのデメリットも知っておくべきでしょう
フレームによるレイアウトのデメリット
- 検索サイトから訪れたユーザーのブラウザにメインのページだけが表示され、メニューのページが表示されなかった場合に手間を取らせてしまうことがあります。フレームによるレイアウトを考えている方はフレームの中のページに、別ウィンドウでトップページにジャンプするリンクをつけておく事で対処できます。
- 視覚障害者が使用している「音声プラウザ」にはほとんどの情報が提供されない。
- 検索エンジンのクローラ(この項目の後半で説明)が全文読めなくなるので、検索エンジンの上位になりにくいです。
- フレームをサポートしてないブラウザがある。フレームをサポートしてないブラウザに対処するためにはnoframes要素を使用してフレームに対応していないブラウザに表示する内容を記述します。(この場合はフレームを使わずにWebページを作るので、結局は最初からフレームを使わずにWebページを作るのとほとんど変わらなくなります)
フレームは使い安そうに見えて実はデメリットに対応した作り方をする場合には難しくなります。もちろんメリットもありますがフレームの利用を考えている方はこれらのデメリットを踏まえた上でフレームを利用しましょう。
(※ここでたくさんのデメリットをあげていますが、ここに訪れてくれた方が後悔しないホームページの作りをしてもらうために、あえてここの項目をつくりました。フレームでレイアウトした後よりも、その前に知っておいてもらいたかったからです。)
※クローラとは、ウェブ上の文書や画像などを周期的に回収し、自動的に検索データベースを作成するプログラムです。「スパイダー」や「ロボット」、「サーチボット」などとも呼ばれています。