DHC-オンライン講座
文系の人にもわかる HTML入門

Lesson 10 フレーム

メモ

このLessonで紹介しているフレームの機能は最近は使わないようになってきています。 このLessonは省略して次のLesson 11に進んでいただいてもかまいません。

この章では「フレーム(frame)」について、その概要を紹介します。 フレームを使用したページはページ間の移動がしにくくなる場合が多いため最近はあまり使われなくなってきています。 このため、フレームが使われているページを修正したり、翻訳したりする場合に戸惑わないように、概要を紹介するにとどめます。

フレームの例

フレームは、ブラウザのウィンドウをいくつかの領域(フレーム)に区切って違う種類の内容を表示するために使うものです。 たとえば、下の図のようにひとつのフレームに目次をいれ、別のフレームに内容を表示するといったことができます。

図10-1 フレームの例。 左側の目次の項目をクリックすると右側に内容が表示される

最初にこのページを開いた時には、左側のフレームに目次、右側のフレームに最初のエッセイが表示されます。 その状態で、左側の目次のフレームにある別のエッセイへのリンク(たとえば「夜の十分間」)をクリックすると、対応する内容が右側のフレーム内に表示されます。 このHTML文書のソースはリスト10-1のようになっています。

リスト10-1 essay-frame.html フレームを使ったページ

  1  <!DOCTYPE html>
  2  <html lang="ja">
  3  <head> 
  4  <meta charset="utf-8">
  5  <title>エッセイ </t itle> 
  6  </head>
  7  <frameset cols="180,*" frameborder="yes">
  8  <frame name="index" src=""essay-frame-index.html">
  9  <frame name="contents" src="samgaetang.html">
 10  </frameset>
 11  <noframes>
 12  <body>
 13  このページにはフレーム対応のブラウザでご覧ください。  
 14  </body>
 15  </noframes>
 16  </html>

これを見ればわかるように、図10-1に表示された内容はこのファイルにはまったく書かれていません。 フレームの全体の構成を示すファイルとフレームの中に表示する内容とは別のファイルに書くのです。 ウェブページに画像を表示するときに、別のファイルにある画像のファイルを<img src="...">のように指定したのを思い出してください。 フレームの場合は、おおもとのHTMLファイルはじつは実体はほとんどなくて、表示される内容の書かれたファイルを指定するだけなのです。 つまりこのファイルではフレームの「構成」だけを示すだけというわけです。

DOCTYPE宣言

これまでHTMLファイルの先頭には次のような「<!DOCTYPE HTML PUBLIC ...」で始まる行をいつも書いてきましたがその理由はあまり詳しく説明しませんでした。

<!DOCTYPE html>

リスト10-1を見ると上の行の代わりに、次の行が書かれています。 フレームの時はこちらを指定しなければいけないのです。

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

じつは、HTMLにはHTML 1.0、HTML 2.0、HTML 3.0、HTML 3.2、HTML 4.01などのバージョンがあります。 また、HTML 4.01にはフレームを使うか使わないか、規格に厳密に従ったタグの書き方をするかしないかによって3つのバージョンが用意されています。 HTMLの文書には「DTD(Document Type Definition、文書型定義)」と呼ばれる、その文書の構造を定義するものを指定できるのですが、DTDを指定するのがこの「DOCTYPE宣言」というわけです。

HTML 3.1、HTML 4.01といったバージョンは、どれかがどれかを含むといった関係にはなく、まったく独立に決まっていますので、ブラウザはDOCTYPE宣言で指定された規格にないタグや記述があれば無視するか、エラーにするか、あるいは独自解釈するかを判断して処理しています。 DOCTYPE宣言を書かないとどの規格に則ったものか分からないので、「一般的な解釈」をしてページを表示することになります。 この講座で紹介してきたようなタグを使っている場合には問題は起こりませんが、特定のブラウザが独自に用意している機能(タグ)を使ったりした場合は、ブラウザによって処理が異なってしまったりすることがあります。

自分の使っているタグにあったDOCTYPE宣言を書いておけば、ブラウザはそのDOCTYPE宣言に合うようにタグを処理してくれるというわけです。 また、将来的には自分の書き方が基準にあっているかどうかを検査してくれるといった機能を使うこともできるようになるでしょう。

フレーム ―― <frameset ...> <frame ...>... </frameset>

さて、フレームの指定を見ていきましょう。 リスト10-1にあるようにフレームに実際に表示される文書を指定するタグは<frameset>...</frameset>で、このタグは</head>の後に書きます。

<frameset cols="180,*" frameborder="yes">

<frameset>タグに指定する属性の代表的なものをあげておきましょう。

  • cols="..." ―― フレームを縦方向に区切る場合に使う。 この例では cols= " 180,* "となっており、左側のフレームに180ピクセルの幅を指定して、もうひとつのフレームに残りのすべてを指定しています。 cols="15%"のようにウィンドウ幅の割合で指定することもできます。 cols="15%,20%,*"のように3つ以上に区切ることも可能です。
  • rows= " ... " ―フレームを横方向に区切る場合に使う。 フレームの幅の指定はcolsと同じです。 colsとrowsを組み合わせると縦横に複雑な分割が行えることになります。
  • frameborder= " ... " ―― " ... "のところには " 1 "あるいは"0"を指定(多くのブラウザでは"yes"と"no"も指定可)。 " 1 "の場合フレームの境界線が描かれ、また境界線を移動してフレームの幅を変えることができます。 "0"の場合境界線が描かれないので、フレームの幅や高さは固定されてしまいます。

上記の属性のうち、cols="..."あるいはrows="..."の少なくとも一方がないとフレームにはなりません。

注意!

frameborder="0"を指定した場合、たとえば左側のフレームの文字がフレームの境界にかかって見えなくなるようなことは、避けなければならなりません。 これを回避するには文字を「画像」として表示するなどの方法があります(画像全体が表示されるようにcols="..."あるいは rows="..."に画像の大きさを指定しておけば大丈夫)。 frameborder="1"を指定しておけば、もし文字が見えなくても境界線を動かせばよいので、こちらの方が安全になります。 また、frameborder="0"を指定するとフレーム間の視覚的な区切りもなくなってしまうので、注意が必要です。 図10-1の例では目次側のフレームの背景に別の色を付けることによって、区別しました。

実際の中身を表すファイルの指定は<frame>タグを使って行われます。 src="..."でそのフレーム内に表示される内容の入ったHTMLファイルを指定し、属性name= " ... "でそのフレームに名前を付けます。 name= " ... "はいつも必要というわけではありませんが、ここでは別のファイルから参照するために使っています(後で使われます)。

<frameset cols="180,*" frameborder="1"> 
<frame name="index" src="essay-frame-index.html"> 
<frame name="contents" src="samgaetang.html"> 
</frameset> 

注意!

<frameset>...</frameset>は<body>...</body>に囲まれていないことに注意してください。

フレーム非対応のブラウザへの配慮 ―― <noframes>...</noframes>

<frameset>...</frameset>で各フレームに表示される内容の指定は終わりですが、リスト10-1には次の部分が書かれています。

<noframes> 
<body>
このページにはフレーム対応のブラウザでご覧ください。  
</body>
</noframes>

これは、フレームに対応していないブラウザ用に書かれたもので、<frameset>...</frameset>のタグが理解できないブラウザの場合、...の部分の内容は無視されて、<noframes>...</noframes>の中が表示されることになります。 もう少し厳密に言うと、<noframes>と</noframes>のタグは理解できないので、無視されることになり、結果的に<noframes>...</noframes>に囲まれた...の部分が表示されることになります。

たとえば、ほとんどの携帯電話用のブラウザはフレームに対応していませんから...の部分だけが表示されることになります

※ 携帯電話用のブラウザをフレームに対応させても、小さすぎて見にくいでしょうね。

この例では単に「このページにはフレーム対応のブラウザでご覧ください。 」と表示しているだけです。 本当は、たとえば次のように目次を表示しておけば、リンクをたどってエッセイの内容を見ることができますので、その方が親切でしょう。

<body> 
 <ul>
  <li><a href="samgaetang.html">蔘鶏湯(さむげたん)</a></li> 
  <li><a href="night.html">夜の十分間</a></li> 
  <li><a href="onsen.html">温泉</a></li> 
 </ul> 
</body>

目次のフレーム

フレームの構成方法を指定するessay-frame.htmlの方はこれでわかりました。 今度はフレーム内に表示される中身の方を見てみましょう。 2つのフレームがあるので、2つのファイルが必要になります。 まず、最初は左側の目次の役目をするフレームのファイル(essay-frameindex.html)です。

リスト10-2 essay-frame-index.html フレームの目次部分

  1    <!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Frameset//EN  ">  
  2  <html>
  3  <!-- essay-frame-index.html -->
  4  <head> 
  5    <meta http-equiv=  "Content-Type  " content=  "text/html; charset=Shift_JIS  ">  
  6  <title>エッセイ</title> 
  7    <style type=  "text/css  ">  
  8  body {
  9  color: #114477; /* 藍色 */
 10  background: #DDEEEE; /* 薄青緑*/
 11  }
 12  p { 
 13    margin: 3px 0px 0px 5px; /* 上、右、左、下 のマージン*/ "
 14  }
 15  a { /* リンクテキストの表示 */
 16  text-decoration: none;
 17  }
 18  a:hover { /* マウスポインタが上に来たときの色 */ 
 19  font-weight: bold; /* 太字にする */
 20  text-decoration: underline; /* 下線を引く */
 21  color: #0000FF; /* 少し濃い色にする */
 22  }
 23  a:active { /* マウスでリンクをクリックされたときの色 */
 24  font-weight: bold;
 25  text-decoration: underline;
 26  color: #00FFFF; /* 水色 */
 27  }
 28  a:visited {
 29  color: #669999; /* そのほかのリンクより薄い色にする */
 30  } 
 31  
 32  </style>
 33  </head>
 34  <body>
 35  <h1>エッセイ</h1>
 36    <p><a href=  "samgaetang.html  " target=  "contents  ">蔘鶏湯</a></p>  
 37    <p><a href=  "night.html  " target=  "contents  ">夜の十分間</a></p>  
 38    <p><a href=  "onsen.html  " target=  "contents  ">温泉</a></p>"
 39  </body>
 40  </html>

<head>...</head>の中に<style>...</style>を使ってスタイルを指定しています。 ここでは<body>...</body>、<p>...</p>、<a>...</a>の各タグで囲まれた部分についてスタイルを指定しています。 図10-1と比較しながらソースコードを見てください。

スタイルシートのbody {...}では、<body>...</body>の部分(つまり本体部分)について、その文字色と背景色を指定しています。

同じように<p>...</p>については、その「マージン(margin)」を指定しています。 この指定により、図10-1の左側の目次のエッセイのタイトル(「蔘鶏湯」「夜の十分間」「温泉」)は、縦方向に3ピクセルずつ離れて、またウィンドウの左端から5ピクセル離れて書かれることになります。

この下はすべて、<a>タグ(リンク)に関する設定です。 最初のa {...}の定義は、<a>...</a>に囲まれてすべてのテキストに適用されますが、a:hoverのように「クラス」を指定すると場合ごとにスタイルを分けて指定できます。 具体的な指定方法はコメントを参照してください。

なお、<a>タグのhover、active、visitiedなどは、あらかじめ定義されているクラスです。 任意のタグについて、クラスを定義することができます。

表示先の指定 ―― target="..."

<head>...</head>の内容は終わったので、今度は<body>...</body>の中を見てみましょう。 この中では<a>タグのtarget属性が初登場です。

この目次のフレームにはリンクが並んでいますが、単純な<a>タグを使ったリンクならば、そのリンクをクリックすると同じウィンドウ(あるいはフレーム)内にリンク先のページが表示されてしまいます。 しかし、ここではリンクをクリックしたときに別のフレーム(右側のフレーム)に内容を表示したいのです。 そのような場合は、リンクを表す<a>タグにtarget属性を書いて表示先を指定します。

フレームを構成するファイルを指定した大本(おおもと)のファイルessay-frame.htmlに次のような指定がありました。

<frame name="index" src="essay-frame-index.html"> 
<frame name="contents" src="samgaetang.html">

これによって、左側のフレームにindex、右側のフレームにcontentsという名前が付けられていたのです。 この準備をしておいた上で、次のように<a>タグにtarget= "contents"と指定するとcontentsと名前を付けられたフレームにリンク先の内容が表示されるのです。

<p><ahref="samgaetang.html"target="contents">蔘鶏湯</a></p> 
<p><a href="night.html" target="contents">夜の十分間</a></p> 
<p><a href="onsen.html" target="contents">温泉</a></p> 

メモ

このtarget属性はフレームを使うときだけでなく、一般のリンクについても指定することができ、その場合target="..."で指定された名前のウィンドウにリンク先のページが表示されます。 もし、その名前のウィンドウがなければ新たに作られます。 たとえば、次のようにターゲットを変えたとすると、最初にどれかをクリックしたときにneww inという名前のウィンドウが新たに作られ、以降いずれかのリンクをクリックしたときには、newwinの内容が書き変わって表示されることになります。

<p><a href="samgaetang.html"
  target="newwin">蔘鶏湯</a></p> 
<p><a href="night.html"
  target="newwin">夜の十分間</a></p> 
<p><a href="onsen.html"
  target="newwin">温泉</a></p>

右側のフレームの内容

左側の目次の内容を見ましたので、今度の右側のフレーム、つまり実際の内容を示すフレームの内容を見ていきましょう。 一番最初にessay-frame.htmlを読み込んだとき(ロードしたとき)には右側のフレームに表示される内容はリスト10-1の9行目の行で指定されたとおり、samgaetang.htmlになります。

<frame name="contents" src="samgaetang.html">

samgaetang.htmlのファイルの内容はリスト10-3のとおりです。 こちらの内容は既に見たもので特に目新しいものはありません。 6行目で指定されているスタイルシートファイルessay-frame.cssの内容は後ほど紹介します。

samgaetang.htmlのファイル自体ではフレームを使っていませんので、先頭のDOCTYPEでframesetを指定する必要はありません。 実際、このsamgatang.htmlだけをブラウザに読み込んでみると図10-2のように表示されます。 左側のマージンは(後で見るように)スタイルシートで0に指定していますので、左側に目次のフレームがないとちょっと読みにくくなってしまいます。

図10-2 右側のフレームのファイルを単独で表示

リスト10-3 samgaetang.html 右側のフレーム


  1  <!DOCTYPE html>
  2  <html lang="ja">
  3  <head> 
  4  <meta charset="utf-8">
  5  <title>エッセイ-蔘鶏湯(さむげたん) </title> 
  6  <link rel="stylesheet" href="essay-frame.css" type="text/css">   
  7  </head> 
  8  
  9  <body>
 10    <h2><a name="samgetan"></a>蔘鶏湯(サムゲタン) </h2>   
 11  <p>
 12  去年半年ほど韓国で暮らしました。 韓国の食べ物はほとんど辛くて
     私の口には合わないものが多くて困ったのですが、なかにはとても好き  
 13  になったものもあります。 中でも、蔘鶏湯(サムゲタン)とスジェビ
     はうちの家族全員が大好きに。 スジェビの方は、「韓国式すいとん」な  
 14  どと紹介されているように、家でも比較的簡単に作れるようです。 
     うちでも、「今日はスジェビにしよう」と月に1ペンぐらいは言いま  
 15  す。  
 16  </p>
 17  <p>
 18  問題は蔘鶏湯の方です。 読んで字のごとく、鶏肉がはいります。 健康な
     若鶏を丸ごと入れるのだそうです。 そして、朝鮮人参、干しナツメな
 19  ども。 これらの材料はそう簡単には手に入りません。 それに、おいしい
     蔘鶏湯を作るには結構煮込まなくてはいけません。 手間がかかりま
 20 す。  
 21  </p>
 22  <p>
 23  というわけで、できるだけ近所においしい蔘鶏湯のお店はないかと探し
     てみました。 2駅以内のところに3軒、蔘鶏湯を出してくれるお店
 24  を見つけて行ってみました。 しかし、どこの蔘鶏湯も圧力釜で調理して
     ありました。 圧力釜で調理すると、骨がポロポロになります。 蔘鶏
 25  湯の何がおいしいと言って、硬い骨の周りについた、たっぷり煮込んだ
     柔らかい鶏肉をかじるのがおいしいのです。 だから、圧力釜で作っ
 26  たものは「蔘鶏湯」とは言えないと私は思うのです。  
 27  </p>
 28  <p>
 29  韓国では、思い出せるだけでも5軒の蔘鶏湯屋さんに入りましたが、
     圧力釜で作った蔘鶏湯なんて、ひとつもありませんでした。 しかも、
 30  値段は日本の1/4くらい。 韓国の私の職場のそばの蔘鶏湯のお店の蔘
     鶏湯の値段の安いのなんの。 たったの5000ウォン(約500円)なので
 31  す。 日本では、安いところで2000円もするー。 おいしければ、許せま
     すが。 骨がポロポロ。 ひどい。  
 32  </p>
 33  <p>
 34 おいしい蔘鶏湯が食べたい。 できれば、すぐに行けるようなところで。  
 35  </p>
 36  <hr /> 
 37  <p class="copyright"> 
 38  Copyright 2004-2005, Inner Web. All right reserved. 
 39  </p>
 40  </body>
 41  </html>

samgaetang.htmlと同様に、残り2つのエッセイのファイルnight.html、onsen.htmlにも同じスタイルシートが使われています。 それぞれの内容は特に目新しいものはありません。

スタイルの指定

3つのエッセイのファイルにはリスト10-4のようなessay-frame.cssという共通のスタイルシートが使われています。 この内容を見てみましょう。

リスト10-4 essay-frame.css 右側のフレームのスタイル

  1  body { 
  2    margin-left: 0; /*左のマージン(目次のフレームとの間隔)をゼロに */ 
  3    width: 90%;/*幅を 90 % */ 
  4    color: #114477; /*文字色。 藍色を指定。 左のフレームのタイトルと合わせてある */
  5    background: #EEFFEE; /*背景色。 左側のフレームよりも少し薄い色にして区別する */ 
  6  }
  7  h2 {
  8    font-size: large; /*文字を大きく */ 
  9    font-weight: bold; /*太字 */ 
 10    margin: 20px 0 10px 0; /*マージン。 上、右、下、左 */ 
 11    border-width: 0 0 1px 20px; /*枠線(ボーダー)の太さ */ 
 12    border-style: solid;/*枠線(ボーダー)を実線で描く */ 
 13    border-color: #114477; /*枠線(ボーダー)の色。 タイトルの文字色と合わせる */ 
 14    padding: 0 0 3px 10px; /*枠線(ボーダー)から文字までの間。 上、右、下、左 */ 
 15    color: #114477; /*文字色タイトルよりは少し薄い紺色 */ 
 16  }
 17  p { 
 18    margin: 0 0 0 0; /*各段落の間の上下左右の空きはなし */ 
 19    text-indent: 1em; /*先頭行を1文字分字下げ */ 
 20  }
 21  p.copyright { /* Copyright部分 */ 
 22    text-align: right; /*右寄せ */ 
 23    font-size: smaller; /*文字を小さめに */ 
 24  }

各行の右側にコメントをつけておきましたので、参照してください。 ご自分で同じような構成のファイルを作り、少しずつ値を変えてみたりすると実際の動作がよくわかるようになります。 是非試してみてください。

まとめ

ブラウザのウィンドウを複数の部分に分けて表示できるフレームについて説明しました。 以前ほど使われなくなってはいるものの、依然としてまだたくさんのページがフレームで構成されています。 フレームに関する基本は抑えておきましょう。

HTMLのタグなど

  • <frameset ...> <frame name= " ... " ...> <frame name= " ... "...> ... </frameset> ―― フレームを構成するファイルの指定
  • <a href="リンク先" target="表示先">...</a> ―― 表示先のフレーム(ウィンドウ)を指定

DHC-オンライン講座
文系の人にもわかる HTML入門
Lesson 10