| 2009-11-12更新 2002-10-23作成 |
■もう少しいろいろなHTML（続き）
◇フレーム
フレームというのは言わばブラウザの画面に枠を作って複数の画面があるように見せることです。今見ているこのページもそうなんですが、左側に目次用の枠があり、右側にこの本文があります（直接この本文の方をアドレス指定している人、つまり左側に目次が表示されていない人はここをクリックして、目次から「フレーム」を選びなおしてください）。
フレームを利用した画面を作る場合、最低限必要な .htmファイルの数は フレームの数 ＋ １個になります。このページのようにフレームが２つなら
・フレームを定義した .htmファイル
・フレーム１に表示する内容の .htmファイル
・フレーム２に表示する内容の .htmファイル
の３つ、ということです。
・フレーム定義の .htmファイル
まずは親画面にあたるフレーム自体を定義した .htmファイルから説明していきましょう。この .htmファイルの全体構成は、一番最初の◇全体構成で説明したものと若干、変わります。
それは「実際にブラウザに表示される部分」の定義である <body> タグが出てこないことです。では左右に２つのフレームが並ぶ場合を例に説明していきます。
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="各フレームの幅を、フレームの数分定義する">
<frame> name="左フレームの名前" src="左フレームに表示する .htmファイル" />
<frame> name="右フレームの名前" src="右フレームに表示する .htmファイル" />
</frameset>
</html>
まず <!doctype> タグの宣言はフレームを使う場合の doctype 宣言にします。
この .htmファイルはフレーム定義だけで表示内容の定義は含めません。従って <body> タグは書きません。代わりにフレーム定義の宣言である <frameset> タグを書きます。ここに出てくる cols= パラメータは、フレームが横方向に並ぶという意味になります。縦方向なら rows= パラメータを使います。
フレームの大きさはテーブルで説明したのと同様、絶対値か描画領域に対する相対値（割合）で指定します。ただし絶対値で指定したときでも、必ずしも固定の大きさになるわけではないようです。横に並べるなら一番右、縦に並べるなら一番下のフレームについては、指定した絶対値を最小値として描画領域の残り全部、となるようです。
ちなみにこのページの定義は cols="200,*" となってます。左の目次用フレームは固定値で200ピクセル、右側用の * は残り全て、という意味です。
割合で指定する場合は例えば cols="30%,*" という感じです。
絶対値指定のものと相対値指定のもを自分で作ってみて、表示しているブラウザの横幅を変えてみてください。二つの指定方法の違いが分かると思います。
<frameset> タグと </frameset> タグの間にある、 <frame> タグが個別のフレームの定義です。
name= パラメータはそのフレームに対する名前の定義です。これは必須ではないんですが、例えばこのページのように左の目次から項目を選ぶと右に対応する本文が表示される、というようにフレームをまたぐ制御をするときには必須になるので必ず付けるようにしましょう。
src= パラメータでそのフレームに実際に表示する .htmファイルを指定します。
これでフレームを定義した .htmファイル定義が出来ます。あとは個々のフレーム内に表示する .htmファイルを用意すればフレームを利用した画面を表示できます。
ちなみに frameset の定義は入れ子が可能です。つまり <frameset> タグと </frameset> タグの間に、さらに別の <frameset> タグと </frameset> タグを定義できます。
・フレーム定義のその他のパラメータ
最初に <frameset> タグに対するパラメータから説明します。
まずフレーム間の枠線は frameborder パラメータで変更できます。ちなみに frameborder="0" とすると、枠線無しでフレーム同士が隣接する形になります。 frameborder="1" が枠線有りになります。
例えばフレームの幅を絶対値で指定したとしても、表示されている画面上でフレーム間の枠の位置にマウスカーソルを合わせてドラッグするとフレームの大きさを変えられます。これを防ぎたいときは noresize というキーワードを指定するとフレームの大きさは変更できなくなります。
◇リンクについて追記
・画像の貼り付け
まず画像を貼り付ける場合について説明します。
画像リンクの指定には <img> タグを使います。書き方は
<img src="表示させる画像ファイルのURL" alt="代替文字列"/> です。
srcパラメータで表示させる画像ファイルを指定します。画像ファイルが .htmファイルと同じ階層のディレクトリにあるのなら、そのままファイル名を記述しますし、違うディレクトリにあるのなら相対パス指定で指定してください（もちろん絶対パスでも問題はありませんが、このサイト内では相対パスで説明します）。
画像ファイルが一つ上の階層にあるなら ../表示させる画像ファイル名、一つ上の階層で別のディレクトリにあるなら ../ディレクトリ名/表示させる画像ファイル名 （例えば TechNote/html/HTML_3rd.htmの中で、TechNote/javaディレクトリにある画像を表示させる場合の指定は ../java/表示させる画像ファイル名 です）、一つ下にあるなら ディレクトリ名/表示させる画像ファイル名 （例えば.htmファイルはTechNote/html/に置いてあるが、その中で使う画像ファイルはTechNote/html/images/にまとめてある場合は images/表示させる画像ファイル名 です）、となります。
altパラメータでは指定してある画像の説明を記述してください。何らかの理由でブラウザに画像が表示出来ない場合（例えばプラグインを使わないと表示できない画像形式など）、ここで指定した文字列が表示されます。
・フレーム間の制御など
リンクが張られている部分をクリックすると、飛び先の .htmファイルの内容にブラウザの表示が書き換わりますが、そうではなく新しいウィンドウを開いて、そちらに飛び先の .htmファイルの内容を表示させたい場合は <a> タグに target= パラメータを指定します。
target="_blank" と指定すると、新しいウィンドウを開いてそこに指定した .htmの内容が表示されます。
・新しいウィンドウに表示する
ソース 実際の表示
<a href="HTML_MnFrm.htm" target="_blank">ＨＴＭＬ超入門編</a>
ＨＴＭＬ超入門編
ここのページのようにフレーム構成を採っていて、例えば左側の目次を選んでクリックすると右側にその内容が表示される、といったフレーム間の制御にも target= パラメータを使います。
フレームの定義で説明したように name= パラメータでフレームに対して名前を付けておきます。リンクの <a> タグの target= パラメータで、表示対象のフレーム名を指定します。
ちなみにこのページの画面構成で、左の目次でこのリンクについて追記の部分を抜き出すと
・別のフレームに表示する
ソース
<a href="HTML_3rd.htm#link2" target="FrmR">リンクについて追記</a>
となってます。
フレーム構成を採っている中のあるフレームから、親フレームに対して表示させたい場合は、 target="_parent" と指定します。次の二つの例をそれぞれクリックしてみて、動作を確認してみてください。
この target="_parent" はあくまでも自分のフレームを含む一階層上のフレームを意味します。従って <framset> が入れ子になって複数フレームを作っている場合、全画面が対象になるわけではありません。そうした場合は target="_top" を使います。
ちなみにフレームの無い単一の画面でどちらかを指定した場合、どちらの場合も通常の自分自身が書き換わる動作をします。従って常に target="_top" と指定しておけばいいかもしれません。
・親フレームに表示する
ソース 実際の表示
<a href="HTML_MnFrm.htm" target="_parent">ＨＴＭＬ超入門編</a>
ＨＴＭＬ超入門編
<a href="HTML_MnFrm.htm">ＨＴＭＬ超入門編</a>
ＨＴＭＬ超入門編
・リンク付きの画像
ここではページ内に表示されている画像をクリックすることにより、
(1) 別のページに遷移する
(2) サーバーにリクエストを送る（これについては「入力画面用のHTML」も参照してください）
(3) 別ウィンドウ（あるいは別タブ）に、大きなサイズの画像を表示する
といった方法について説明します。
サンプルとして３つ目の、ページ内にある画像をクリックすると、別ウィンドウで元の大きな画像が表示されるものを使います。
やり方ですが、画像貼り付けの <img> タグと、リンクの <a> タグの合わせ技で行います。リンクの <a> タグは <a href="飛び先のURL">表示文字</a> と書きました。この表示文字の部分に画像貼り付けの <img> タグを埋め込みます。
上の(1)や(2)の場合なら <a href="飛び先のURL"><img src="表示させる画像ファイルのURL" /></a> とします。
サンプルに使うのが(3)の例なので、 <a> タグに target="_blank" パラーメータを追加します。そしてhrefに指定する飛び先のURLに、表示させる別画像ファイルのURLを指定します。結果、次のような指定になります。
<a href="表示させる別画像ファイルのURL" target="_blank"><img src="表示させる画像ファイルのURL" /></a>
以下に実際のサンプルを例示します。
サンプル表示している画像はNASAの画像ギャラリーから持ってきたものです。JPLにも似た画像ギャラリーがあり、こちらは天体写真だけです（NASAのほうはNASAの活動全般に渡る画像ギャラリーです）。
別ウィンドウに元サイズの画像を表示 ソース
<a href="201781main_PIA10102.jpg" target="_blank">
<img src="201781main_PIA10102_small.jpg" alt="木製と衛星イオ"/>
</a>
実際の表示
リンク付き画像の縁部分をよく見ると枠が付いているのが分かります。これは通常の文字列リンクで、リンクが設定されている文字列部分に下線が引かれる（標準の場合）のと同じ状態です。
<img> タグに border="0" パラーメータを追加すると、この枠線は表示されなくなります。
別ウィンドウに元サイズの画像を表示（画像枠無し） ソース
<a href="201781main_PIA10102.jpg" target="_blank">
<img src="201781main_PIA10102_small.jpg" alt="木製と衛星イオ" border="0"/>
</a>
実際の表示
ただしこの <img> タグに対する border パラーメータは、非推奨項目です。将来のHTML仕様からは無くなります（後方互換性の面から、各ブラウザ側では対応していますが）。
なるべく正式仕様に沿うという点から、枠線を消したいときはCSSのインラインスタイル設定を使って style="border-style: none;" を追加してください。CSSについては「スタイルシート（ＣＳＳ）」で説明しています。枠線に関するスタイル要素については「ページ内レイアウト設定」の中で説明しています。
別ウィンドウに元サイズの画像を表示（画像枠無し ） ソース
<a href="201781main_PIA10102.jpg" target="_blank">
<img src="201781main_PIA10102_small.jpg" alt="木製と衛星イオ" style="border-style: none;"/>
</a>
実際の表示
フレームというのは言わばブラウザの画面に枠を作って複数の画面があるように見せることです。今見ているこのページもそうなんですが、左側に目次用の枠があり、右側にこの本文があります（直接この本文の方をアドレス指定している人、つまり左側に目次が表示されていない人はここをクリックして、目次から「フレーム」を選びなおしてください）。
フレームを利用した画面を作る場合、最低限必要な .htmファイルの数は フレームの数 ＋ １個になります。このページのようにフレームが２つなら
・フレームを定義した .htmファイル
・フレーム１に表示する内容の .htmファイル
・フレーム２に表示する内容の .htmファイル
の３つ、ということです。
まずは親画面にあたるフレーム自体を定義した .htmファイルから説明していきましょう。この .htmファイルの全体構成は、一番最初の◇全体構成で説明したものと若干、変わります。
それは「実際にブラウザに表示される部分」の定義である <body> タグが出てこないことです。では左右に２つのフレームが並ぶ場合を例に説明していきます。
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="各フレームの幅を、フレームの数分定義する">
<frame> name="左フレームの名前" src="左フレームに表示する .htmファイル" />
<frame> name="右フレームの名前" src="右フレームに表示する .htmファイル" />
</frameset>
</html>
まず <!doctype> タグの宣言はフレームを使う場合の doctype 宣言にします。
この .htmファイルはフレーム定義だけで表示内容の定義は含めません。従って <body> タグは書きません。代わりにフレーム定義の宣言である <frameset> タグを書きます。ここに出てくる cols= パラメータは、フレームが横方向に並ぶという意味になります。縦方向なら rows= パラメータを使います。
フレームの大きさはテーブルで説明したのと同様、絶対値か描画領域に対する相対値（割合）で指定します。ただし絶対値で指定したときでも、必ずしも固定の大きさになるわけではないようです。横に並べるなら一番右、縦に並べるなら一番下のフレームについては、指定した絶対値を最小値として描画領域の残り全部、となるようです。
ちなみにこのページの定義は cols="200,*" となってます。左の目次用フレームは固定値で200ピクセル、右側用の * は残り全て、という意味です。
割合で指定する場合は例えば cols="30%,*" という感じです。
絶対値指定のものと相対値指定のもを自分で作ってみて、表示しているブラウザの横幅を変えてみてください。二つの指定方法の違いが分かると思います。
<frameset> タグと </frameset> タグの間にある、 <frame> タグが個別のフレームの定義です。
name= パラメータはそのフレームに対する名前の定義です。これは必須ではないんですが、例えばこのページのように左の目次から項目を選ぶと右に対応する本文が表示される、というようにフレームをまたぐ制御をするときには必須になるので必ず付けるようにしましょう。
src= パラメータでそのフレームに実際に表示する .htmファイルを指定します。
これでフレームを定義した .htmファイル定義が出来ます。あとは個々のフレーム内に表示する .htmファイルを用意すればフレームを利用した画面を表示できます。
ちなみに frameset の定義は入れ子が可能です。つまり <frameset> タグと </frameset> タグの間に、さらに別の <frameset> タグと </frameset> タグを定義できます。
最初に <frameset> タグに対するパラメータから説明します。
まずフレーム間の枠線は frameborder パラメータで変更できます。ちなみに frameborder="0" とすると、枠線無しでフレーム同士が隣接する形になります。 frameborder="1" が枠線有りになります。
例えばフレームの幅を絶対値で指定したとしても、表示されている画面上でフレーム間の枠の位置にマウスカーソルを合わせてドラッグするとフレームの大きさを変えられます。これを防ぎたいときは noresize というキーワードを指定するとフレームの大きさは変更できなくなります。
まず画像を貼り付ける場合について説明します。
画像リンクの指定には <img> タグを使います。書き方は
<img src="表示させる画像ファイルのURL" alt="代替文字列"/> です。
srcパラメータで表示させる画像ファイルを指定します。画像ファイルが .htmファイルと同じ階層のディレクトリにあるのなら、そのままファイル名を記述しますし、違うディレクトリにあるのなら相対パス指定で指定してください（もちろん絶対パスでも問題はありませんが、このサイト内では相対パスで説明します）。
画像ファイルが一つ上の階層にあるなら ../表示させる画像ファイル名、一つ上の階層で別のディレクトリにあるなら ../ディレクトリ名/表示させる画像ファイル名 （例えば TechNote/html/HTML_3rd.htmの中で、TechNote/javaディレクトリにある画像を表示させる場合の指定は ../java/表示させる画像ファイル名 です）、一つ下にあるなら ディレクトリ名/表示させる画像ファイル名 （例えば.htmファイルはTechNote/html/に置いてあるが、その中で使う画像ファイルはTechNote/html/images/にまとめてある場合は images/表示させる画像ファイル名 です）、となります。
altパラメータでは指定してある画像の説明を記述してください。何らかの理由でブラウザに画像が表示出来ない場合（例えばプラグインを使わないと表示できない画像形式など）、ここで指定した文字列が表示されます。
リンクが張られている部分をクリックすると、飛び先の .htmファイルの内容にブラウザの表示が書き換わりますが、そうではなく新しいウィンドウを開いて、そちらに飛び先の .htmファイルの内容を表示させたい場合は <a> タグに target= パラメータを指定します。
target="_blank" と指定すると、新しいウィンドウを開いてそこに指定した .htmの内容が表示されます。
・新しいウィンドウに表示する
| ソース | 実際の表示 | |
|---|---|---|
<a href="HTML_MnFrm.htm" target="_blank">ＨＴＭＬ超入門編</a> |
ＨＴＭＬ超入門編 |
ここのページのようにフレーム構成を採っていて、例えば左側の目次を選んでクリックすると右側にその内容が表示される、といったフレーム間の制御にも target= パラメータを使います。
フレームの定義で説明したように name= パラメータでフレームに対して名前を付けておきます。リンクの <a> タグの target= パラメータで、表示対象のフレーム名を指定します。
ちなみにこのページの画面構成で、左の目次でこのリンクについて追記の部分を抜き出すと
・別のフレームに表示する
| ソース |
|---|
<a href="HTML_3rd.htm#link2" target="FrmR">リンクについて追記</a> |
となってます。
フレーム構成を採っている中のあるフレームから、親フレームに対して表示させたい場合は、 target="_parent" と指定します。次の二つの例をそれぞれクリックしてみて、動作を確認してみてください。
この target="_parent" はあくまでも自分のフレームを含む一階層上のフレームを意味します。従って <framset> が入れ子になって複数フレームを作っている場合、全画面が対象になるわけではありません。そうした場合は target="_top" を使います。
ちなみにフレームの無い単一の画面でどちらかを指定した場合、どちらの場合も通常の自分自身が書き換わる動作をします。従って常に target="_top" と指定しておけばいいかもしれません。
・親フレームに表示する
| ソース | 実際の表示 | |
|---|---|---|
<a href="HTML_MnFrm.htm" target="_parent">ＨＴＭＬ超入門編</a> |
ＨＴＭＬ超入門編 | |
<a href="HTML_MnFrm.htm">ＨＴＭＬ超入門編</a> |
ＨＴＭＬ超入門編 |
ここではページ内に表示されている画像をクリックすることにより、
(1) 別のページに遷移する
(2) サーバーにリクエストを送る（これについては「入力画面用のHTML」も参照してください）
(3) 別ウィンドウ（あるいは別タブ）に、大きなサイズの画像を表示する
といった方法について説明します。
サンプルとして３つ目の、ページ内にある画像をクリックすると、別ウィンドウで元の大きな画像が表示されるものを使います。
やり方ですが、画像貼り付けの <img> タグと、リンクの <a> タグの合わせ技で行います。リンクの <a> タグは <a href="飛び先のURL">表示文字</a> と書きました。この表示文字の部分に画像貼り付けの <img> タグを埋め込みます。
上の(1)や(2)の場合なら <a href="飛び先のURL"><img src="表示させる画像ファイルのURL" /></a> とします。
サンプルに使うのが(3)の例なので、 <a> タグに target="_blank" パラーメータを追加します。そしてhrefに指定する飛び先のURLに、表示させる別画像ファイルのURLを指定します。結果、次のような指定になります。
<a href="表示させる別画像ファイルのURL" target="_blank"><img src="表示させる画像ファイルのURL" /></a>
以下に実際のサンプルを例示します。
サンプル表示している画像はNASAの画像ギャラリーから持ってきたものです。JPLにも似た画像ギャラリーがあり、こちらは天体写真だけです（NASAのほうはNASAの活動全般に渡る画像ギャラリーです）。
| ソース |
|---|
| <a href="201781main_PIA10102.jpg" target="_blank"> <img src="201781main_PIA10102_small.jpg" alt="木製と衛星イオ"/> </a> |
| 実際の表示 |
 |
リンク付き画像の縁部分をよく見ると枠が付いているのが分かります。これは通常の文字列リンクで、リンクが設定されている文字列部分に下線が引かれる（標準の場合）のと同じ状態です。
<img> タグに border="0" パラーメータを追加すると、この枠線は表示されなくなります。
| ソース |
|---|
| <a href="201781main_PIA10102.jpg" target="_blank"> <img src="201781main_PIA10102_small.jpg" alt="木製と衛星イオ" border="0"/> </a> |
| 実際の表示 |
|
|
ただしこの <img> タグに対する border パラーメータは、非推奨項目です。将来のHTML仕様からは無くなります（後方互換性の面から、各ブラウザ側では対応していますが）。
なるべく正式仕様に沿うという点から、枠線を消したいときはCSSのインラインスタイル設定を使って style="border-style: none;" を追加してください。CSSについては「スタイルシート（ＣＳＳ）」で説明しています。枠線に関するスタイル要素については「ページ内レイアウト設定」の中で説明しています。
| ソース |
|---|
| <a href="201781main_PIA10102.jpg" target="_blank"> <img src="201781main_PIA10102_small.jpg" alt="木製と衛星イオ" style="border-style: none;"/> </a> |
| 実際の表示 |
|
|