初心者のためのホームページ作り 第18号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  目次

プレーンテキスト版バックナンバー

今週<第18号>マガジンのおさらい

                   毎週金曜日配信 What's New 2002/9/13
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■ フレームの作成

フレームを作成する上で、必ず次のように文書型宣言を行う必要があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
 この宣言は、あくまで廃止予定の過渡期のものであることを念頭に置いてくだ
さい。

フレームとは、ページを複数に切り分けてそれぞれにHTML文書を読み込ませる手法です。メニューとなるアンカーが常に表示され、訪れるユーザが迷子にならないなどの長所があり有名企業でも採用しているくらい人気のあるものですが、一方で大きな欠点もあります。

最大の欠点はコンテンツを表示する領域が狭いということでしょう。その他に、区切られたページにそれぞれのHTML文書を読み込ませるので重くなる、ブックマークの位置が正確ではない、音声ブラウザや点字ブラウザ、一部のテキストブラウザでは対応できず読めなくなって、お互いに不幸な結果を生じてしまうなど、多々あります。

W3Cでは、フレーム方式をいずれ廃止することを決定しています。

2ペインのフレームの表示
フレームを左右、あるいは上下に切り分ける方法は以下の通りです。最低、3つのHTML文書が必要になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>2ペインのフレーム</title>
</head>

<frameset cols="20%,*" title="フレームを左右に切り分けます">
 <frame src="left.html" name="left" scrolling="no" title="左ページです">
 <frame src="right.html" name="right" title="右ページです">

<noframes>
<body>
<p>
残念ながらこのページはフレーム対応になっています。申し訳ありません。
こちらを参照してください。<a href="another.html">未対応ページ</a>
</p>
</body>
</noframes>
</frameset>

</html>

  このHTML文書のほかに、2つのHTMLが必要です。

サンプル実行結果    詳しいHTML文は今週号を参照してください。

3ペインのフレームの表示
フレームを3ペインに設定する方法は下記の通りです。必然的にHTML文書は4つになります。
左側にHTML文、右に見た目のページを表わしています。
<frameset rows="A,B,C">
  <frame src="HTML文書1">
  <frame src="HTML文書2">
  <frame src="HTML文書3">
</frameset>
3ペインフレームの図
<frameset cols="X,Y,Z">
  <frame src="HTML文書1">
  <frame src="HTML文書2">
  <frame src="HTML文書3">
</frameset>
3ペインフレームの図
<frameset rows="A,B">
  <frame src="HTML文書1">
    <frameset cols="X,Y">
      <frame src="HTML文書2">
      <frame src="HTML文書3">
  </frameset>
</frameset>
	
3ペインフレームの図

A、B、C =高さ(ピクセル、%単位)    X、Y、Z =幅(ピクセル、%単位)

3ペインフレームのサンプル

frameset要素を入れ子にすることによって、3ペインフレームあるいは4ペインフレームが設計できます。ただし、あまり多く入れ子にしてたくさんのフレームを設定すると非常に重いページになってしまう可能性があります。

インラインフレーム
フレームをページ全体で構成する方法のほかに、1つのページの中にフレームを設定する方法があります。これをインラインフレームと呼び、iframe要素を使用します。

同様に文書型宣言は、Transitionalを使わなくてはなりません。つまり、iframe要素も廃止予定の過渡期のものです。

サンプル実行結果    詳しいHTML文は今週号を参照してください。

インラインフレームの中には、HTML文書だけでなく、テキストファイル、画像や動画などのオブジェクト、スクリプトの実行、PDF文書など実に様々なメディアを埋め込むことが可能です。

フレーム作成の注意点
フレームを用いたWebサイトは実にたくさん存在しています。それぞれ工夫を凝らして見栄えのよいページになっていますので、参考にされた方も多いと思います。しかしながら、フレームには多くの欠点があることも忘れないで下さい。 これらの欠点を知った上で、設計時には十分な配慮をするようにしてください。決してフレームを作るなとは言いません。ですが、フレームは将来廃止されることも覚えておいてください。


Copyright(C) 2002-2003 banban@scollabo.com