Home ＜ 第17号 ＞ 第19号

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

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

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第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では、フレーム方式をいずれ廃止することを決定しています。

２ペインのフレームの表示
フレームを左右、あるいは上下に切り分ける方法は以下の通りです。最低、３つの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>２ペインのフレーム</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文書のほかに、２つのHTMLが必要です。

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

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

A、B、C ＝高さ（ピクセル、％単位）    X、Y、Z ＝幅（ピクセル、％単位）

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

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

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

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

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

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

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