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

                  毎週金曜日配信 What's New 2002/9/13
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第18号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。

 今週の課題 ■ フレームの作成

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ ご注意!
本講座で示されるHTML文書は読みやすくするために、かなりの空白や改行を設け
ています。また、マガジンの1行の文字数に制限がありますので、仕方なく改行
する場合も多々発生しています。

 問題は、空白の中には全角で記述した空白が存在します。そのため、HTML文を
コピーして使用する際には、余分な空白を削ってください。ブラウザによっては
全角の空白はテキストと解釈しますので、文法ミスになってしまうことやレイア
ウトが崩れる危険性があります。
 今後はなるべく半角スペースで記述するようにしますが、忘れてしまう場合も
あります。できればお手数ですが、ご自分でタイプされることを望みます。

 また、テキストの途中で改行された文章は、ブラウザによっては半角のスペー
スを表示する場合があります。これは明らかにブラウザのバグです。 W3Cでは、
改行は無視するようにソフトメーカーに呼びかけていますが、まだ直っていない
ブラウザも見かけます。
 連続されているテキストは、なるべく改行せず、1行で記述してください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆フレームについての薀蓄(うんちく)
フレームを用いて、ブラウザ上でページを区切る手法は多くのサイトで見かけま
す。特に、メニューがずっと表示されているのは、ある意味ユーザには便利かも
しれません。
 しかし、フレームにも欠点があります。最大の欠点はコンテンツを表示する領
域が狭いということでしょう。その他に、区切られたページにそれぞれのHTML文
書を読み込ませるので重くなる、ブックマークの位置が正確ではない、音声ブラ
ウザや点字ブラウザ、一部のテキストブラウザでは対応できず読めなくなって、
お互いに不幸な結果を生じてしまうなど、多々あります。

 W3Cでは、フレーム方式をいずれ廃止することを決定しています。現在は過
渡期で視覚系ブラウザは表示してくれます。
 それらの点を考慮して、今回あえてフレームについて詳しく説明します。

(Tips)
 ■ 視覚系ブラウザ  MSIE、Netscape、Opera、Mozillaなどのビジュアルな
            環境を提供するインターネット閲覧ソフト。
 ■ 非視覚系ブラウザ 点字ブラウザ、音声ブラウザ、テキストブラウザなど
                       強いて言えば「障害者」の方が利用するブラウザ。

 当講座でたびたび登場する言葉なので、覚えておいてください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆フレームに使う要素と属性の解説
 まず最初にHTML4.01Framesetにおける、3つの要素の働きと、それぞれの使え
る属性を説明しておきます。

■ frameset要素 終了タグは必須です。
 フレームであることを示します。この要素を使用する場合、文書型宣言は必ず
 Framesetを使用しなければなりません。基本的に、body要素の代わりに使いま
 す。言い換えれば、body要素は使えません。ただし、noframes要素内ではbody
 要素が使えます。

 ●使用可能な属性
 cols フレームを左右に切り分ける属性で、%、ピクセル単位で設定します。
 rows フレームを上下に切り分ける属性で、%、ピクセル単位で設定します。
 title フレーム対応型非視覚系ブラウザなどへの配慮として記述します。

■ frame要素 終了タグはありません。(エンプティ要素)
 frameset要素によって分割された各フレームの内容と表示方法を設定する要素
 です。基本的には、src属性で他のHTML文書を指定します。

 ●使用可能な属性
 src  フレームの内容として表示させる文書のURLを指定します。
  name  フレームに名前をつけます。呼び出す文書がどのフレームに表示させ
     るかを区別するために設定します。

 frameborder  フレームの枠線の表示/非表示を設定します。指定できる値は、
        0  枠線を表示しない
        1 枠線を表示する(デフォルト値)

 marginwidth フレーム内の左右のマージンをピクセル単位で設定します。
 marginheight フレーム内の上下のマージンをピクセル単位で設定します。
 noresize    フレームのサイズを変更できないようにしたい場合に記述する
        属性です。値はありません。

 scrolling   フレーム内のスクロールに関する設定を行います。値は、
        yes   常にスクロールバーを表示する
        no    常にスクロールバーを表示しない
        auto  必要に応じてスクロールバーを表示する(デフォルト)

 title   フレームに対応している非視覚系ブラウザなどへの配慮として、この
     属性がリンクの代わりにもなっています。
      

■ noframes要素
 フレームに対応していないブラウザや、設定でフレームを表示させていないユ
 ーザに対して、フレームで表示する代わりの内容を表示させます。
  アクセシビリティを考えるなら、必ず代替のテキストか代替のHTML文書にリ
 ンクさせるように配慮することが望まれています。
   この要素内に、body要素を配して、フレーム未対応のブラウザに表示させま
 す。この内容は、フレームに対応しているブラウザでは表示されません。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆2ペインのフレームの作成
フレームで左右分割の2ペインのページを作ります。そのために最低3つのHTML
文書を作成しなくてはいけません。

 フレームを使用する場合、文書型宣言には、Framesetを使用します。この文書
型宣言が廃止方向に向かっていることをご留意してください。

 なお、ここではアンカーを利用しますので、4つのページを作ります。面倒で
すが気合で作りましょう。
 テキストエディタ(SimpleTextやメモ帳など)を起動して、下記のようにタイ
プしてください。

<!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>

入力が終わりましたら保存します。半角小文字で main.html としてください。
必ず拡張子「.html」を忘れないようにしてください。

引き続き、2つ目のHTMLを、同様にテキストエディタで新規の作成します。下記
のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>左のフレームページ</title>
<style type="text/css">
<!--
body { background-color: #cff }
div  { margin-top: 100px;
       font-size: large }
-->
</style>
</head>

<body>
<div>LeftPage</div>
<p><a href="next.html" target="right">Next</a></p>

</body>
</html>


 入力が終わりましたら、left.html という名前で保存してください。このペー
ジがフレームの左側のHTML文書になります。

 次に、3つ目のHTMLを、同様にテキストエディタで新規の作成します。下記の
ようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>右のフレームページ</title>
<style type="text/css">
<!--
body { background-color: #ffc }
h1   { text-align:center }
-->
</style>
</head>

<body>
<h1>RightPage</h1>

</body>
</html>


 入力が終わりましたら、right.html という名前で保存してください。

	最後に、4つ目のHTMLを、同様にテキストエディタで新規の作成します。下記
のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>次のページ</title>
<style type="text/css">
<!--
body { background-color: #cfc }
h1,p { text-align:center }

-->
</style>
</head>

<body>
<h1>NextPage</h1>
<p><a href="right.html" target="right">戻る</a></p>

</body>
</html>


 入力が終わりましたら、next.htmlという名前で保存してください。これですべ
てのHTML文書の作成が終わりました。

 一番最初に作った main.htmlをダブルクリックしてブラウザで確認してくださ
い。左と右に分かれたページが表示されているはずです。それぞれのページには
異なった背景色を使っているので分かりやすいと思います。
 左のフレームに記述されているリンクをクリックしてみてください。右側のフ
レームのページが切り替わるはずです。

  上記HTML実行結果URL
 http://www.scollabo.com/banban/magazine/sample/mmsample_028.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説----最初の解説と重複する箇所があります。

 ■ main.htmlから
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
 フレームを使用するための文書型宣言です。フレームを利用する場合には必ず
これを指定します。(廃止予定の過渡期の文書型宣言)

<frameset cols="20%,*" title="フレームを左右に切り分けます">
 フレームを表示させるための要素で、body要素の代わりに記述します。基本的
 にフレームを表示させるHTMLでは、body要素は使いません。
  なお、noframes要素内の、body要素はフレーム未対応ブラウザのための要素
 ですのでお間違えのないように。

cols="20%,*"
 フレームを左右に分割する属性が colsです。上下分割する場合は rows属性を
  を使用します。値の20%は、最初に分割された左側のページの横幅をブラウザ
 画面全体の20%とし、アスタリスク「*」は、残りの分を相対的に指定するも
 のです。ここでは残りの分は自動的に80%となります。
  横幅(高さ)を設定する単位はこの他にピクセル単位があります。

title="フレームを左右に切り分けます"
 フレーム対応型の非視覚系ブラウザへの配慮です。視覚系ブラウザの中では、
 ツールチップが表示される場合があります。
  この属性はなくてもフレームとして成立しますが、WAI のアクセシビリティ
 ガイドラインでは、この属性を使用してフレームのタイトルをつけることが推
 奨されています。つまり、音声ブラウザや点字ブラウザの中には、この属性を
 リンクとして利用しているものがあるためです。なるべく記述するように心が
 けましょう。

<frame src="left.html" name="left" scrolling="no" title="左ページです">
<frame src="right.html" name="right" title="右ページです">
src="left.html"
 区切られたフレームの内容として表示させる文書の URLを指定します。

name="left" (フレーム名)
  区切られたフレームに名前を付けます。任意の名前を必ず付けておきます。
 このフレームでは、left、right という名前を付けました。

scrolling="no"
 区切られたページにスクロールの許可/禁止を指定します。ここでは禁止して
 いますが、許可する場合は "yes" と記述します。何も記述がない場合は自動
 的にデフォルト値の "auto" が適用され必要によってスクロールします。

<noframes> 〜 </noframes>
 フレーム未対応に対する記述です。この中に、body要素を記述してフレーム未
 対応のブラウザに表示させます。できるかぎり代替ページを用意しておくこと
 を強くお奨めします。くれぐれも「帰れ!」などと書いてはいけません。フレ
 ームを使用するための必須要素と言っていいでしょう。
  この要素内のコンテンツは、フレームに対応しているブラウザでは表示され
 ません。

 ■ left.htmlから
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 フレームの中で表示するHTML文書は、Framesetでなくてもかまいません。ここ
 は非推奨属性「target」を使うために過渡期(廃止予定)の、Transitional を
 使います。その後の next.htmlも同様としました。

body { background-color: #cff }
 ページの背景色を薄い水色に設定しました。

div { margin-top: 100px; font-size: large }
 上から100ピクセル分の余白と、フォントの大きさを大きくしました。

<p><a href="next.html" target="right">Next</a></p>
 別の文書を「right」という名前のフレームに呼び出すための記述です。
 ここでは main.html で名前をつけた「right」というフレームに HTML文書
 「next.html」を呼び出すものです。

 ■ right.htmlから
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 このページは、厳格な文法が要求される「Strict」を使用しました。

body { background-color: #ffc }
 ページの背景色を薄いクリーム色としました。

h1 { text-align:center }
 見出し要素の配置をセンタリングさせました。

 ■ next.htmlから
body { background-color: #cfc }
  ページの背景色を薄い緑色としました。

h1,p { text-align:center }
 同時に複数の要素を定義するときには、カンマで区切ってセレクタ部に設定し
 ます。ここでは見出し要素と段落要素をセンタリングさせました。


 ユーザの利用する画面の大きさは千差万別です。小さな画面を利用している環
境では、フレームは大変少ない領域にそれぞれのコンテンツが表示されて見にく
くなってしまいます。フレームを利用する際には設計段階で、その点を十分考慮
する必要があります。

 フレームページ内で他のサイトにリンクする場合、必ず下記のように記述して
ください。さもないと、いつまでもフレームから抜けられなくなってしまいます。

  <a href="http://www.yahoo.co.jp/" target="_top">Yahoo!</a>

 フレーム利用では忘れてしまう場合が多々あります。時折、そのような記述の
ない「マナー違反」のサイトに遭遇することがあります。

 target属性にはこの他に、_blank という値があります。これは新たにブラウザ
 ウィンドウを開いて表示させます。target属性は、HTML4.01では非推奨扱いと
 されており、いずれ廃止されることが決定しています。便利な属性ですが・・

 表示されたフレームの枠にマウスを移動すると枠がリサイズできるツールチッ
 プが表示されます。これをドラッグすると枠のサイズが変更できます。ですが
 フレーム枠が非表示の場合には、この機能が使えなくなる場合があります。そ
 のため、コンテンツの大きさや配置には十分な配慮が必要です。

 フレームに枠線が表示されていてもかまわないと思います。また、フレームを
 固定してしまう noresize 属性がありますが、これを設定するとユーザ側でフ
 レームの枠のサイズを変更できず、フレームに隠れてしまうコンテンツが見え
 なくなってしまう悲劇が多々発生してしまいます。

(Tips:フレームの枠線の非表示)
 frame要素の frameborder属性を利用すると、フレームの境界線を非表示に設定
することはできますが、実際にはそこにグレーの線が残ってしまいます。
 その線を完全に消すためには、空くし工夫が必要です。フレームの枠線の非表
示を指定するスタイルシートはありません。
 MSIEだけに通用する独自の属性、 frameset要素の framespacing属性を記述し
ます。ですがこれだけではNetscapeに対応していないので、Netscapeだけに通用
するborder属性をあわせて記述することにより、少なくとも2つのブラウザ上で
枠線を非表示にできます。

 <frameset cols="20%,*" frameborder="0" framespacing="0" border="0"> 

 この方法は、HTML4/4.01の仕様に定義されていない規格外の属性です。あくま
でユーザが多い2つのブラウザでのみ有効な方法です。フレームの枠を完全に消
してしまうことで、ユーザがフレームのサイズを変更できなくなる場合の弊害も
あることを覚えておいてください。

  3ペインの設定方法は「今週のおさらい」に掲載しましたので、参考までにご
覧ください。

 今週のおさらい
  http://www.scollabo.com/banban/magazine/backnm_018.html#frame3

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

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

 さっそく簡単なインラインフレームを表示するページを作りましょう。テキス
トエディタを起動させて、下記のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>インラインフレーム</title>
<style type="text/css">
<!--
div  {margin: 10px 20% 10px }
h1   { text-align:center }

-->
</style>
</head>

<body>
<div>
<h1>インラインフレーム</h1>

<iframe src="right.html" width="500" height="400" name="right" 
title="インラインフレームを表示します">    <!-- 1行で記述します -->
インラインフレームで表示したHTMLページです。
</iframe>
<p>
<a href="next.html" target="banban">NextPage</a>
</p>
</div>

</body>
</html>

入力が終わりましたらHTML文書として保存します。そのためには必ず拡張子をつ
けて保存します。ここでは、test_24.html としておきます。「.html」を忘れず
に保存してください。なお、保存の際の文書名は任意の名前をつけていただいて
も差し支えありません。
 保存できたら、ブラウザで確認してください。

上記HTML実行結果URL
 http://www.scollabo.com/banban/magazine/sample/mmsample_030.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
div {margin: 10px 20% 10px }
 ボックスの余白の設定です。上から10ピクセル、左右は20%、下から10ピクセ
 ルのマージン(コンテンツの外側の余白)を設定しました。

h1 { text-align:center }
 見出し要素の配置をセンタリングさせました。

<iframe src="left.html" width="500" height="400" name="right" 
title="インラインフレームを表示します">     <!-- 1行で記述します -->
(先ほど作ったページをインラインフレームで表示します。)

iframe要素
 インラインフレームを表示させる要素です。横幅を500ピクセル、高さを400ピ
 クセルに設定しましたが、皆さんで好きに設定してみてください。
  width    横幅の設定。ピクセル、%単位で設定します。
 height   高さの設定。ピクセル、%単位で設定します。
  src      インラインフレームに表示させる文書のURLを指定します。

 name属性は、インラインフレームに名前を付けて、インラインフレーム外でア
 ンカーを記述し、このインラインフレーム内で表示させるときに利用します。

 title属性は、インラインフレーム対応の音声ブラウザに対する配慮です。

<a href="next.html" target="right">NextPage</a>
 ここではインラインフレームに表示させるHTML文書を、target属性でインライ
 ンフレームを指定します。インラインフレームに表示させる場合は、target属
 性を必ず記述するようにしてください。その場合は、インラインフレームに、
 name属性で名前が付いていなければなりません。
  この場合は、「right」と名づけられたインラインフレームに表示します。


 インラインフレームにはフレーム同様他のサイトの URLを記述することが可能
です。
  src="http://www.yahoo.co.jp" というように絶対パスを記述します。すると
オンライン状態であればヤフーのページがインラインフレーム内で表示されます。

  ただし Yahooではフレーム内で表示するリンクはパートナー企業の著作権の問
題があるようなので遠慮して欲しいとのことです。念のため。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆フレームについての薀蓄(うんちく)その2
今回のフレーム作成でお分かりの通り、フレームページ内のコンテンツ領域が狭
いのはフレームの宿命なのでしょう。また、いくつもHTML文書を揃えるのも労苦
が少なくありません。その労苦に対する見返りが少ないのもフレームの宿命と言
えるでしょう。
 私もフレームを利用したことがあります。本誌サイトも7月初旬まではバック
ナンバーのページにフレームを用いたことがありました。

 フレームを使ってはいけないなどとは決して申しません。使い方、文書構造を
設計段階で十分に整理し、ユーザ環境に配慮したフレームを構築するよう提言し
ます。フレームに対応していないブラウザのための代替ページを用意することは
作成者の必須の義務でもあります。
 作る側と訪れるユーザ側で不幸な結果にならないようなページの構成を設計し
てください。ただし将来、フレームおよびインラインフレームが使えなくなると
いうことを忘れないでください。

 フレーム作成関連ページ/基礎講座
 http://www.scollabo.com/banban/lectur/ht13.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
WebページはHTML分の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/backnm_018.html

次回は、フォームの作成について詳しく解説します。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
のすべての記述に誤りがある場合、叱咤と罵声と共に私まで突きつけていただく
と幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
アーカイブ    http://www.scollabo.com/banban/daf/archive.html
講座教材     http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
昨日、当講座のサイトへのアクセスが異常な勢いで急激に上がりました。「どう
したんだろう?」と不思議に思ってアクセスログを調べてみると、何と「ヤフー」
からのアクセスでした。
 よくよく調べると「ヤフー」の新着情報の「今日のオススメ」の欄に当講座の
サイトが紹介されてたのです。
 実は、当サイトの検索エンジンへの登録や推薦は一切行っていなかったのです
が、きっとどなたかが厚意を持って、私の代わりに登録していただいたのだと思
います。
 ただしサイトの名前が違っていました。「Web for bignner 作成支援」になっ
ており、講座の「初心者のためのホームページ作り」ではありませんでした。ス
ペルの間違いもありますが、このへんはご愛嬌ということにしておきましょう。

 それにしても「ヤフー」の威力はすさまじいと実感しました。読者も一気に増
えたことはありがたいことです。一方で、プレッシャーも増えてきたような気が
します。多くの方の目にふれるメールマガジンや Webサイトに重大な誤りがない
か心配になってきます。
 もちろん無責任な気持ちで作成しているわけではないのですが、より真剣にな
らざるを得ません。気合を入れ直してこれからもがんばります。どうぞ気長にお
付き合いください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
 なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



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