name 属性
前回の授業では、リンクの張り方を説明しました。
HTMLファイルで、<a href="file">〜</a> に囲まれた部分がリンクの始点で、ファイル file がリンクの終点でした。
リンクの終点がHTMLファイルの場合、始点となるアンカーをクリックすると、ブラウザはそのファイルを先頭から表示します。
リンクの終点はファイルではなく、むしろファイルの先頭であると考えたほうがよいでしょう。
特に大規模なHTMLファイルに対しては、リンクの終点をファイルの先頭だけではなく、始点と同様、ファイルの中の範囲にしたいときがあります。
これは、その範囲を <a name="name">〜</a> を囲むことによって可能になります。
ここで、name はアンカー同士を区別するためにつける名前（アンカー名）です。
アンカー名は、アルファベット（A〜Z, a〜z）、数字（0〜9）、ハイフン（-）、アンダースコア（_）、コロン（:）、およびピリオド（.）からなる文字列です。
ただし、先頭はアルファベットに限ります。
アンカー名は、ひとつのHTMLファイルの中で重複しないようにしてください。
一方、リンクの始点の方は、href 属性の値を file#name とします。
つまり、<a href="file#name">〜</a> で囲まれた部分をクリックしますと、HTMLファイル file の中のアンカー name の部分から表示されます。
リンクの始点と終点が同じファイルの中ならば、href 属性の値は #name で十分です。
name 属性によるアンカーの指定は、目次から見出しへリンクを張ったり、索引からその用語の説明へリンクを張ったりするときに便利です。
目次のようなホームページを作り、その各項目から対応するホームページにリンクを張るようなリンク構造は、しばしば用いられます。 このようなホームページでは、目次の各項目を順に訪れようとしますと、
という操作を繰り返すことになります。
フレームを利用しますと、この操作がより簡単になります。 ブラウザは、ウィンドウをいくつかの成分に分割し、それぞれの成分に別々のホームページを表示することができます。 これらの成分がフレームです。 あるフレームに表示されているアンカーをクリックして、別のフレームに次のホームページをロードする（流し込む）こともできます。
ウィンドウを2つに分割し、一方のフレームに目次を常に表示させ、もう一方のフレームにその項目に対応するホームページをロードすれば、「戻る」ボタンを押す手間が省けるわけです。
フレームを利用するためには、ウィンドウをどのように分割するかをブラウザに指示しなくてはいけません。 このようなフレームの配置は、HTMLファイルの中で指定されます。 このファイルでは、フレームの配置の指定のみが行われます。 フレームの中に表示する内容は、別のHTMLファイルに書きます。
はじめに、ウィンドウを左右に分割してみます。
2つのフレームの幅が分かればよいのですが、これには相対指定による方法と絶対指定による方法があります。
相対指定では、幅の割合をパーセントで表しコンマで区切って表します。
例えば、1対3の幅で分割することは、文字列 25%, 75% で表されます。
HTMLファイルでは、はじめにフレームの個数だけタグ <frame> を書きます。
このタグに終了タグはありません。
そして、この <frame> タグの並びを <frameset>〜</frameset> で囲みます。
左右に分割するためには、<frameset> タグで cols 属性を指定します。
先ほどの 25%, 75% などの相対指定を表す文字列が、この属性の値となります。
<frameset cols="25%, 75%"> <frame> <frame> </frameset>
ウィンドウは2分割だけでなく、3分割以上もできます。 3分割する場合は、
<frameset cols="30%, 40%, 30%"> <frame> <frame> <frame> </frameset>
などと書きます。
一方、絶対指定では、ピクセル（画素）数をコンマで区切って表します。
ただし、ウィンドウの幅が何ピクセルかをあらかじめ知ることはできませんので、ひとつのフレームを残りの幅だと指定しなくてはいけません。
この残りの幅は、記号 * で表されます。
次の例は、ウィンドウを左、中、右の3つに分割し、左は50ピクセル、中は100ピクセル、右は残りと指定しています。
<frameset cols="50, 100, *"> <frame> <frame> <frame> </frameset>
ウィンドウを上下に分割する場合は、cols 属性の代わりに rows 属性を用います。
この属性の値は、左右の分割の場合と同様に、割合やピクセル数をコンマで区切って並べたものです。
<frameset rows="200, *"> <frame> <frame> </frameset>
<frameset> タグは入れ子にできます。
<frame> タグの代わりに、再び <frameset>〜</frameset> タグを書くと、そのフレームがさらに分割されます。
いったんウィンドウを左右に分割し、そのひとつのフレームをさらに上下に分割するといったことができます。
<frameset cols="100, *">
<frame>
<frameset rows="50%, 50%">
<frame>
<frame>
</frameset>
</frameset>
注意：
フレームの配置を示すHTMLファイルに、<title>〜</title> などのHTML構造を示すタグも書く場合は、次のようにします。
<html>
<head>
<title> ... </title>
</head>
<frameset>
...
</frameset>
</html>
つまり、タグ <body>, </body> の代わりに、それぞれタグ <frameset>, </frameset> を書きます。
注意：
携帯情報端末などでは、ブラウザがフレームに対応していない場合があります。
<noframes> タグを用いると、このようなブラウザで代替のメッセージが表示できます。
<html>
<head>
<title> ... </title>
</head>
<frameset>
...
<noframes>
このページはフレームを使います。
<a href="nf-index.html">
フレームを使わないページ</a>はこちらです。
</noframes>
</frameset>
</html>
フレームに対応しているブラウザは、<noframes>〜</noframes> に囲まれている範囲を無視しますので、メッセージは表示されません。
一方、フレームに対応していないブラウザは、<frameset>, <frame>, <noframes> タグを理解しませんので、これらのタグは無視され、残りのメッセージが表示されるわけです。
フレームの配置ができましたら、次に各フレームに対して、名前（ターゲット名）と、そのフレームに最初に表示するホームページを指定します。
フレームのターゲット名は、フレーム同士を区別するために付ける名前です。 ターゲット名は、リンクのアンカー名と同様に、アルファベット（A〜Z, a〜z）、数字（0〜9）、ハイフン（-）、アンダースコア（_）、コロン（:）、およびピリオド（.）からなる文字列です。 ただし、先頭はアルファベットに限ります。 ターゲット名は、ひとつのHTMLファイルの中で重複しないようにしてください。
HTMLファイルでは、<frame> タグの name 属性で、そのフレームのターゲット名を指定します。
また、フレームに最初に表示するホームページは、<frame> タグの src 属性で指定します。
以下の例では、ウィンドウを左右に分割し、左側のフレームに items とターゲット名を付け、ホームページ itemlist.html を表示し、右側のフレームに detail とターゲット名を付け、ホームページ about-us.html を表示しています。
<frameset cols="50%, 50%"> <frame name="items" src="itemlist.html"> <frame name="detail" src="about-us.html"> </frameset>
itemlist.html
・活動内容・入会手続き・今後の予定
about-us.html<ul> <li><a href="about-us.html">活動内容</a></li> <li><a href="to-join.html">入会手続き</a></li> <li><a href="schedule.html">今後の予定</a></li> </ul>
<p> このサークルは、 テニスサークルと名前がついていますが、 あまりテニスはやりません。 </p>
上の例で、例えば「入会手続き」をクリックしますと、そのフレームにホームページ to-join.html が表示されてしまいます。
frames.htmlto-join.html
<p> 食堂の奥が私たちのたまり場です。 誰かに一声かけてください。 入会金は無料です。 </p>
今までのリンクの張り方では、クリックしたフレームがウィンドウ全体だと見なされます。 したがって、そのフレームに次のホームページが表示されるのです。
この例でやりたいことは、左側のフレームでクリックすると、右側のフレームにホームページがロードされることです。 これは、始点となるアンカーの指定を書き換えるとできます。
HTMLファイルで、始点のアンカーは <a href="file">〜</a> の範囲でした。
このタグに、target 属性を追加し、その値をフレームのターゲット名 name としますと、そのアンカーをクリックしたときに、フレーム name にホームページ file がロードされます。
右側のフレームのターゲット名は detail ですので、itemlist.html を次のように書き換えます。
<ul>
<li><a href="about-us.html" target="detail">
活動内容</a></li>
<li><a href="to-join.html" target="detail">
入会手続き</a></li>
<li><a href="schedule.html" target="detail">
今後の予定</a></li>
</ul>
そして、もう一度 frames.html を表示します。
・活動内容・入会手続き・今後の予定
「入会手続き」をクリックしますと、今度は右側のフレームに to-join.html がロードされ、左側のフレームはそのままとなります。
・活動内容・入会手続き・今後の予定
「今後の予定」をクリックしますと、右側のフレームに schedule.html がロードされ、左側のフレームはそのままです。
schedule.html
・活動内容・入会手続き・今後の予定
<p> 毎月一回はコンパがあります。 夏合宿と冬合宿を予定しています。 </p>
フレームは便利な機能なのですが、このままウィンドウが分割されっぱなしなのは困ります。
ウィンドウの分割を解除し、もとのウィンドウいっぱいにホームページをロードすることもできます。
これには、特別なターゲット名 _top を用います。
始点となるアンカーを <a href="file" target="_top">〜</a> で指定し、そのアンカーをクリックしますと、ウインドウの分割が解除され、ホームページ file がウィンドウ全体にロードされます。
上の例で、itemlist.html にアンカーを追加します。
<ul>
<li><a href="about-us.html" target="detail">
活動内容</a></li>
<li><a href="to-join.html" target="detail">
入会手続き</a></li>
<li><a href="schedule.html" target="detail">
今後の予定</a></li>
</ul>
<a href="index.html" target="_top">トップページへ</a>
そして、frames.html を表示します。
・活動内容・入会手続き・今後の予定
トップページへ
「トップページへ」をクリックしますと、ウィンドウの分割が解除され、もとのウィンドウいっぱいにホームページ index.html がロードされます。
index.html
詳細はこちらへ
<h1>のんびりテニスサークル</h1> <a href="frames.html">詳細はこちらへ</a>
注意： もし始点のアンカーで指定されたターゲット名が、どのフレームのものとも一致しない場合、そのアンカーをクリックすると、新しいウィンドウが開き、そのウィンドウにホームページがロードされ、以後、そのウィンドウがそのターゲット名のフレームのように振る舞います。
以下の例を参考にして、「私の用語集」（またはこれと同様なホームページ）を作成してください。 用語集には少なくとも2つの用語（この例では"DOM"と"XML"）を登録します。 用語が2つだと、作成するHTMLファイルは5つになります。
<frameset>, <frame> タグを用います。）
target 属性を用います。）
操作イメージは次の通りです。
はじめに表紙（cover.html）を表示します。
用語集を開く
「用語集を開く」をクリックすると、フレームの配置（frames.html）に従ってウィンドウが左右に分割され、左側に用語リスト（termlist.html）、右側に用語XMLの解説文（xml-is.html）が表示されます。
・DOM・XML
表紙に戻る
eXtensible Markup Languageの略
用語リストの「DOM」をクリックすると、左側はそのままで、右側には用語DOMの解説文（dom-is.html）がロードされます。
・DOM・XML
表紙に戻る
Document Object Modelの略
用語リストの「XML」をクリックすると、やはり左側はそのままで、右側には再び用語XMLの解説文がロードされます。
・DOM・XML
表紙に戻る
eXtensible Markup Languageの略
用語リストの「表紙に戻る」をクリックすると、フレームが解除され、ウィンドウいっぱいに最初の表紙がロードされます。
用語集を開く
今日の演習8にしたがってHTMLファイルを作成し、konishi@twcu.ac.jpあてにメールでそのURL/URIを報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。