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

                毎週金曜日配信 What's New 2004年4月16日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第91号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
 的な Webページ作成に役立つことを目的に配信されております。

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

   今週のコンテンツ
       ■ Webデザイン 第33回 --- オーサリングソフト
    ■ HTML講座  第33回 --- 略語・用語の扱い (アクセシブルなテキス)
    ■ CSS講座 第12回 --- 絶対位置指定の妙技
     ■ 属性の解説(第16回) --- 

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆Webデザイン(第33回) オーサリングソフト

 いわゆる オーサリングソフト (Webページ作成ソフト、以下オーサソフト) と
 は、面倒なHTMLを記述しなくても立派なホームページが作れます。最近は高機
 能でアクセシブルなページを簡単に作成できるソフトが増えています。

  当メールマガジンの質問の中に、こうしたオーサソフトの使い方に関するも
 のが多く寄せられています。残念ながら当方はオーサソフトを持っていないた
 め、返答に困ることがあります。

 ■オーサリングソフトの振る舞い
  オーサソフトの一部には独特のクセを持つものがあり、吐き出すHTMLに意味
 不明なものが多く、いい加減に作られているような気がします。そのため、オ
 ーサソフトを使いながらHTMLを学ぶ方には、時折混乱することが多々あること
 でしょう。特にバージョンの古いソフトでは、滅茶苦茶なHTMLコードを吐き出
 し、閲覧環境によっては見るに耐えない仕様となっています。

  このコラムで何度もお伝えしているとおり Webページの生命線はコンテンツ
 です。HTMLとかスタイルシート、スクリプトなどは、コンテンツを表現するた
 めの手段でしか過ぎないのですから、オーサソフトを使うことにまったく異論
 はありません。
  むしろ、テキストエディタを使って誤った解釈の文法でHTMLを作成するより
 も、オーサソフトを使ったほうがいい場合もあります。

  知人から聞くところによると、オーサソフトのほとんどで文書型定義は過渡
 期仕様 (Transitional) を選択するようです。その構文を読めば「なるほど」
 とうなずけますが、それを手動で厳格仕様 (Strict) に変換するのは大変な作
 業が伴います。

  また、出力先ブラウザの銘柄を指定した場合、他のブラウザで閲覧するとか
 なりおかしなレンダリングになります。これも「クセ」なのでしょう。つまり
 独自仕様や独自規格を盛り込まれていることが多々あります。
  その意味では、ユニバーサルな Webページ作りをしようとするとき、ある程
 度の HTMLスキルを要求されることになります。

 ■バージョンで異なる仕様
 ソフトウェアの宿命 (?) というべきなのでしょうか、いずれバージョンアッ
 プが待っています。従来の機能を継承しながら高性能になるのがソフトウェア
 の常道でしょう。

  バージョンが上がることで、それまでの不具合や更なる機能の追加はありが
 たいことですが、ソフトの使い方をマスターするのは大変なことです。
  今までの機能がなくなってしまうことや、代替の機能の使い方に苦労すると
 いうことは、どのソフトウェアでも同じことですが、それらをいちいち覚える
 ことには、いささか戸惑いを感じるものです。

  本来ならば、HTMLの仕様が頻繁に変わることがないにもかかわらず、オーサ
 ソフト側での一方的な仕様変更には疑問を感じることもあります。しかしなが
 ら、ソフトウェアベンダーとは企業利益を優先するためには、仕方がないこと
 なのかもしれません。

 ■アクセシビリティとオーサソフト (ATAG)
 World Wide Webに関する標準仕様を策定している非営利団体 W3Cでは、オーサ
 ソフトに対して一定のアクセシビリティを求めています。
  オーサソフトによって仕上がった Webページが、どのような環境でも正しく
 情報が伝わるように ATAG (Authoring Tool Accessibility Guidelines) が策
 定されています。
  ATAGでは、以下の活動を行っています。

 1. Webの核となる技術が、アクセシビリティに考慮したものとなるようにす
    るための活動。
 2. Webページ作成やユーザエージェント、オーサリングツールに関するガイ
    ドラインの策定。
 3. Webページの評価や Webページのアクセシビリティ向上のためのツールの
    開発。
 4. Webのアクセシビリティに関する教育・啓蒙活動。
 5. 将来的にアクセシビリティに影響を与える可能性がある技術の研究及び
    開発状況についての情報収集。

  こうした ATAGの活動に賛同して、Webオーサを開発している主要なベンダー
 は以下のサイトでご覧になれます。

   現在、及び将来に渡って ATAGの実装を表明している主なベンダー
    http://www.w3.org/WAI/References/#mainstreamdev

  近年、アクセシビリティという考え方は主流になりつつあります。オーサソ
 フト側でも、こうした動向が顕著で、歓迎すべき事象でしょう。

  オーサソフトを使う場合、ソフトウェアに付属する取扱説明書やヘルプを参
 照してその使い方をしっかりとマスターしてください。たいていのことはそれ
 らに詳しく記載されています。また、オーサソフトのベンダーの Webページで
 は、さまざまな情報や質問について掲載されていますので、一度じっくりとお
 読みすることをお勧めします。

                   (第34回 トップページの役割につづく)

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML講座 (第33回) 略語・専門用語の扱い (アクセシブルなテキスト)

 今回はページの中で示される略語や専門用語の扱いについて解説します。
  数ある専門分野における Webページの中で、ともすれば初めて訪れる閲覧者
 には分かりにくい略語や専門用語が羅列してある場合、何となく敷居が高く見
 方によっては排他的になりかねません。

  インターネット利用者は不特定多数で様々な思想や考え方を持っており、ま
 たスキルの違いがあります。専門分野のページであっても誰でも親しめるペー
 ジ作りができるなら、作者と閲覧者の距離を縮めることができるでしょう。

 ■略語
 通常略語は、単語の頭文字をとって表現します。例えば、LAN といえば Local
 Area Network (ローカル・エリア・ネットワーク) を指します。ページの中で
 こうした略語を用いずにフルスペルで記述するのも大変なことですし、むしろ
 略語自体が通用する言葉もあることでしょう。

  略語は英文字だけに限ったことではありません。例えば「安保理」という言
 葉を、新聞やニュースなどでお目にかかったことがあると思いますが、この略
 語の正式名称を知る人が意外に少ないのには驚かされます。
  実に様々な略語が氾濫する中で、そうした情報に初めて接する閲覧者へ理解
 してもらうには少しばかり工夫が必要です。


 ■略語のアクセシビリティ
 略語や専門用語を並べると、何となく高尚で学術的なイメージが高いように見
 受けられます。しかし、そう見えるだけであって、決して高尚でも学術的でも
 ないと、私は考えます。
  むしろ、難解な用語を使いながらも、誰でも理解できるようやさしく述べて
 いる方がもっと洗練されており、高度でより高尚かつ学術的と思います。

  HTML4.01では、こうした略語に注釈を表示させる機能を持った要素が用意さ
 れています。

  □ abbr要素
   略語がそのまま発音できない場合に用います。視覚系ブラウザでは、ツー
   ルチップ (要素上にマウスを置くと現れるポップ画面) が表示されます。
    残念ながら普及率の高い MSIE (Microsoft Internet Explorer) ではそ
   の機能を持っていません。

   書式
   <abbr title="World Wide Web Consortium">W3C</abbr>

   abbr要素には title属性でそのフルスペルを記述します。

  □ acronym要素
   略語がそのまま発音できる「頭字語」として定義されているものを囲みま
   す。おそらく日本語の略語もこの範疇に入るのではないかと思います。
   ほとんどの視覚系ブラウザでツールチップが表示されます。

   書式
   <acronym title="Local Area Network">LAN</acronym>
   あるいは
   <acronym title="国連安全保障理事会">安保理</acronym>

   abbr要素と同様に、acronym要素も略語のフルスペルを title属性で明示
   します。


 ■専門用語のアクセシビリティ
 難解な専門用語を、どのようにして誰にでも理解できるように工夫したらよい
 のか、作者のセンスが試される課題です。
  例え abbr、acronym要素でフルスペルを表現したところで、その意味が理解
 できなければ、情報コンテンツの意味がつかめません。

  スクリプトを使ってポップアップを表示する方法もありますが、アクセシビ
 リティを考えた場合、スクリプトに対応していない環境ではそれを利用するこ
 とができません。

  JavaScriptによるポップアップ
  http://www.scollabo.com/banban/magazine/ms/sample_91-1.html

  そこで専門用語の説明にアクセスする方法を幾つか考えました。
  
 □ アンカーに説明を埋め込む
 最も簡単な方法で、書式は以下のとおりです。

  <a href="http://www.w3.org/" title="World Wide Web Consortium の略。
  Webの標準仕様を統括及び制定している世界的規模の非営利組織">W3C</a>

  このように title属性に説明を示すことで、ツールチップが表示され、同時
 に関連するサイトに誘導しています。

 □ 用語解説に導く
 ページの欄外に専門用語をまとめて設定し、アンカーを埋め込む方法が一般的
 に利用されています。
  以下はその簡単な例です。

 <body>
 <h1>次世代マークアップ言語</dt>
 <p><a href="#w3c" title="World Wide Web Consortium">W3C</a> の勧告と
 なった <a href="#xhtml" title="Exrensible Hyper Text Markup Language">
 XHTML</a> は、素朴な文書構造記述言語として発展してきた <a href="#html"
 title="Hyper Text Markup Language">HTML</a>に 
 <a href="#xml" title="Extensible Markup Language">XML</a> の持つ柔軟性
 拡張性を取り入れたものです。</p>

   〜 中略 〜

 <dl>
 <dt><a name="w3c">W3C</a></dt>
 <dd>Webで利用される技術の標準化をすすめる非営利団体。Web技術に関わりの
 深い企業、大学・研究所、個人などが集まって、 〜 以下省略</dd>

 <dt><a name="xhtml">XHTML</a></dt>
 <dd>W3Cより拡張可能なマークアップ言語として制定された Webページ作成のため
 の次世代言語です。 〜 以下省略</dd>
 </dl>

  サンプルの実行結果 (スタイルシートを使っています)
  http://www.scollabo.com/banban/magazine/ms/sample_91-2.html

  <a name="……"> これは該当する要素にアンカーを埋め込み、その場所に
  導く手法です。この場所に導く方法は href属性にハッシュマーク # を付記
  してリンクさせます。

  また、リンクを示すアンカーに title属性でそれぞれのフルスペルを設定し
  リンクに触れると、その内容を表示させるようにしています。

 □ 用語解説のページに導く
 もう1つの方法は、用語を集めたページに誘導するリンクを専門用語に設定し
 ます。用語の意味を知りたい閲覧者が、その用語をクリックすることで、用語
 の詳細場所に誘導するものです。

  あらかじめ「用語集」などのページを作成し、各用語のヘッダにアンカーを
 埋め込み、該当する項目にリンクさせます。アンカーの埋め込みは、上記の構
 文と同様 <a name="……">項目名</a> とします。

  例えば、glossary という名の用語集の中で示される 「W3C」という用語解説
 にリンクするためには、以下のように記述して誘導します。

   <a href="glossary.html#w3c">HTTP</a>

  ファイル名の後のアンカーで埋め込まれた項目の位置で表示させることがで
 きます。
  例えば、以下のリンクは用語解説のページのある特定の場所に誘導します。

  HTTP用語解説
  .html"http://www.scollabo.com/banban/tips/diction.html#http


 ■まとめ
 繰り返しますが、インターネット利用者は千差万別です。閲覧者は何らかの興
 味と動機があって各サイトを閲覧します。難解な略語や専門用語に対して、わ
 ずかなスキルの違いで理解できないとしたら、作者も閲覧者も不幸というもの
 です。

  せっかく訪れた閲覧者に敷居を高くする必要はありません。誰にでも親しめ
 るよう分かりやすく解説しておくことで、よりアクセスが高まります。重要で
 有用なコンテンツであるのなら、なおさら略語や用語に対しての扱いに、十分
 配慮できるように心がけましょう。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆CSS講座(第12回) 絶対位置指定の妙技

 見出しを定義する h1要素や、リストを定義する ul要素などのブロックレベル
 要素は基本的に改行されますので、横に並べることができません。
  多くの Web開発者はこうしたジレンマのため、レイアウトを構築するために
 テーブルを使っているのが現状です。しかし、テーブルは様々な制約と閲覧環
 境に影響するため、レイアウトに用いるのはアクセシビリティの観点から好ま
 しくないといわれています。

  テーブルの悪影響から回避するために、絶対位置を利用する手法を用いるこ
 とが最近のブログ (Weblog) などで多々見られます。今回は、レイアウトにも
 利用できる「絶対位置の妙技」について解説します。

 ■絶対位置とは
 通常コンテンツは、HTMLの記述順に上から下へと順次表示されます。当然、最
 後に記述した要素内容は下に表示されます。こうしたレンダリングを「相対的
 な位置」と呼ばれます。

 一方、、絶対位置は要素の出現順位に関係なく、常にあらかじめ指定した位置
 で要素内容を表示させるものです。位置は「上」からと「左右」のいずれかを
 指定します。
  絶対位置の指定はスタイルシートだけでしか実現することができません。

 ■絶対位置指定の属性
 スタイルシートによって絶対位置を指定する場合には、以下の属性と属性値を
 使います。

  属性       属性値      意味
  --------------------------------------------------------------------
  position     absolute    絶対位置として指定する
  top        数値+単位   上からの位置を指定する
  left       数値+単位   左からの位置を指定する
  right       数値+単位   右からの位置を指定する

  単位はスタイルシートで利用できる単位 (本誌第84号にて解説) を用います。
 具体的な書式は以下のとおりです。

  div { 
     position:  absolute;
     top:       100px;
     left:       50px }

  このスタイルシートは、汎用ブロックレベル div要素を絶対位置として定義
 し、画面の上から 100ピクセル、左から 50ピクセルの位置で表示させます。
  絶対位置といえども、スクロール時には他の要素と一緒にスクロールします。

  これを応用して、要素の幅をあらかじめ定義し、ブロックレベル要素を横に
 並べるように指定します。以下はその書式です。

   div#first {
    position:  absolute;
    top:       100px;
    left:       10%;
    width:      40% }

   div#second {
    position:  absolute;
    top:       100px;
    left:      52%;
    width:    40% }

  このスタイルシートは、2つの汎用ブロックレベル要素を絶対位置指定して
 います。それぞれに識別子を設定し、HTMLでは id属性を利用します。
  2つとも画面の上から 100ピクセルの位置に指定しその横幅を画面の相対値
 であるパーセントで設定し、40%の幅にしています。

  最初の識別子 fierst では、左側から20%の位置でレンダリングし、2番目
 の second は左から52%ととして、1番目の要素に重複しないように配慮して
 います。結果として2つのブロックレベル要素が横に並んで表現されます。

  このスタイルシートを利用する HTML構文は以下のとおりです。

  <body>
  <h1><span id="headline">■</span> 絶対位置の妙技</h1>
    <div id="first">
    ブロックレベル要素その1
    </div>

    <div id="second">
  ブロックレベル要素その2
  </div>
  </body>

  サンプルの実行結果 (分かりやすくするために背景色を設定しました)
  http://www.scollabo.com/banban/magazine/ms/sample_91-3.html

  このようにブロックレベルを横に並べることで、レイアウトの構築に利用す
 ることが可能で、テーブルよりもレンダリングが早くできることができます。
  汎用的に使える div要素というブッロクレベルでは、ほとんどの要素を配置
 することが可能なので、この中に見出しやリスト、段落、あるいはテーブルな
 ども配置できますので、レイアウトを表現するのに都合がいいでしょう。


 ■重複する絶対位置指定
 絶対位置として指定した場合、それぞれの要素は1つのレイヤーとして扱うこ
 とができます。
  レイヤーとは、例えば透明な紙に文字や画像などを描き、その上に別の透明
 な紙を重ねて文字や画像などを描きます。見た目には1枚の紙の上にそれぞれ
 が描かれているように見えます。これが「レイヤー」の主体で、こうした手法
 を「レイヤーを重ねる」と呼びます。

  絶対位置の要素に番号を設定し、どの要素が一番上に見せるのかを指定しま
 す。そうした順位を示す場合に z-index属性を用います。

  z-index属性の値は 0 を基準とした数値を指定します。数値の値が大きいほ
 ど レイヤーの優先順位が高くなり、小さいほど一番下でレンダリングされます。
  また、数値は負数も指定することができます。

  具体的な書式は以下のとおりです。

  div#image_1 {
    position: absolute; 
    top: 7em; 
    left: 4em; 
    z-index: 0 }   一枚目の画像を表示する絶対位置

  div#image_2 {
	   position: absolute; 
    top: 14em; 
    left: 6em; 
    z-index: 1 }   二枚目の画像を表示する絶対位置

  p#text_1 {
	   position: absolute; 
    top: 9em; 
    left: 5em; 
    font-size: 1.2em;
    z-index: 2 }   一枚目の画像にテキストを重ねる絶対位置

  p#text_2 {
    position: absolute; 
    top: 15em; 
    left: 7em; 
    font-size: 1.2em;
    z-index: 3 }   二枚目の画像にテキストを重ねる絶対位置

  このスタイルシートは、画像を2枚重ねて、それぞれにテキストを重ねてい
 ます。これを利用する HTML構文は以下のとおりです。

 <body>
  <p id="text_1">冬のナイアガラ</p>
  <p id="text_2">夏のナイアガラ</p>

  <div id="image_1">
  <img src="niagara_2.jpg" width="250" height="180" alt="冬のナイアガラ">
  </div>
  <div id="image_2">
  <img src="niagara_1.jpg" width="250" height="180" alt="夏のナイアガラ">
  </div>

  <h1>絶対位置を重ねる</h1>
  <p>画像に画像とテキストを重ねるために、絶対位置をレイヤーとして用いて
  います。</p>
  </body>

    サンプルの実行結果 (画像内の文字に色をつけています)
  http://www.scollabo.com/banban/magazine/ms/sample_91-4.html

 レイヤーを利用することで、意外な効果を持つレイアウトに利用することがで
 きるでしょう。いろいろと配置を変えてお試しください。

 ■絶対位置指定の落とし穴
 スタイルシートで絶対位置を指定した場合、絶対位置を指定していない要素と
 重なる危険があります。
  通常、各要素は出現順に相対的にレンダリングしますが、絶対位置はそうし
 た順序とは関係なく位置指定できるため、相対位置でレンダリングした他の要
 素内容と重複して出力します。そのため、要素の重なりでコンテンツが見にく
 くなる可能性があります。

  絶対位置を指定した場合、他の要素との位置関係を十分に配慮した設計が必
 要となりますので、その点に留意してください。

  次回は、要素の表現形式について解説します。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆HTML、XHTML属性の解説 --- style属性

 要素にこの属性を使って、直接スタイルシートを指定します。

 ■style属性 スタイルシートを設定する
 DTD:   XHTML1.1以外で利用可能
 属性値: スタイルシート
 記述法: <p style="color:#f00">
 関連要素: ヘッダで利用する要素を除いたすべての要素で利用可能

 XHTMLの制限: XHTML1.1では廃止されており利用することができません。

  スタイルシートは通常、HTML文書のヘッダで記述するか、あるいは外部参照
 として置きます。しかしながら、コンテンツの内容によっては、その部分に臨
 時的なスタイルを指定しなければならない場合、この属性を利用します。

  その属性を利用したスタイルシートは、他のスタイルシートよりも最も優先
 されます。仮にヘッダで指定したスタイルであっても style属性が優先され、
 他のスタイルを無視します。

  ただし style属性で指定しないスタイルは、先に定義したスタイルが適用さ
 れます。例えば以下の場合、

  ヘッダでのスタイルシート指定
   p { color: #000;  font-size: 2em }

  styele属性での指定
   <p style="color:#f00> 〜 </p>

  この場合、ヘッダで段落要素の文字色を黒、文字サイズを通常の2割り増し
 としたとき、実際の段落では文字色が赤色になります。しかし、文字サイズは
 変更されず、最初に定義したヘッダでもスタイルが適用されます。

  場面によっては非常に便利な属性です。セミコロンで区切れば複数のスタイ
 ルが指定できます。なお、XHTML1.1では style属性は廃止されており、基本的
 に、外部スタイルシートで設定することになっています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで。

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

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

 次回は、4月23日に配信を予定しています。(あくまでも予定です)

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
 ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
 と思います。
  ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
 てくれると思います。

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

  誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

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

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

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

<えでぃた〜ず・る〜む>

 先週、先々週と2週間メールマガジンをお休みしました。実は、この2週間は
 私にとって大変重要な時期で、会社の登記が完了し、事務所を契約しました。
 銀行に何度か行って、資本金の払い込みや口座の開設、使用するコンピュータ
 の製作、ドメインの取得やデータベース設定、そして Webサーバの構築などの
 細かい作業などに終われました。
  また、得意先への挨拶回りや事務所開設の案内を出したり、厄払いを受けた
 り、税務署に事業開始届けを出したり、社会保険事務所に行ったりと休まるこ
 とがありません。
  このメールマガジンの原稿は配信間際まで作業に追われ、なんとか間に合う
 ことができました。

  何事もそうですが、始まりというのは大変なエネルギーを費やします。飛行
 機でさえ離陸するときの膨大なエネルギー消費と、墜落するかもしれない危険
 に満ちています。
  無事会社を興したとはいえ、むしろこれからが大変なのだと武者震いします。
 決して体力に自信があるわけではありませんが、なにせ生活がかかっています
 ので、全力投球の毎日が続きます。

  それ故、これから先、今まで以上にメールマガジンの予告なしの休刊がある
 ことをご了承ください。来週は・・、分かりません。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


This page is Valid HTML 4.01! 最新公開日 2004年4月26日
Copyright(C) 2002-2004 banban@scollabo.com