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

                  毎週金曜日配信 What's New 2003/10/24
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

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

                banban@scollabo.com

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

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

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

  今週のコンテンツ
      ■ Webデザイン 第17回 --- アイデンティティ
   ■ HTML講座  第17回 --- フレームの作成
   ■ XML初級講座 第9回 --- 属性(データ種別の定義)
    ■ HTML属性の解説(第2回) --- name属性

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

◆Webデザイン(第19回) アイデンティティ

 通常 Webサイトとは、複数のページで成り立っているものです。たった1ペー
ジのサイトもないではありませんが。

 トップページから導かれた各ページのデザインには、いろいろ苦心することが
あります。しかし、ここで大切なことは、サイトの「共通性」です。

 ■レイアウトの共通性
 各ページで表現するコンテンツの配置について設計する場合、ナビゲーション
 や、見出し、段落などに共通性を持たせるように心がけましょう。
  そうした共通性は、閲覧者側から見ると、すぐに理解することができます。
 前のページに戻る、ホームに戻るなどのナビゲーションのデザインや位置など
 を、瞬間的に把握することができます。

  色、ことに配色の共通性は、閲覧者を安心させます。ページごとにまったく
 違うデザインや色は、閲覧者を迷わせ混乱させるだけです。

  例えば企業の場合、そのロゴを常にページの一番上に表示させることがあり
 ます。そのとき、ロゴをクリックすれば常にトップページに戻るような仕掛け
 を施しておくことで、閲覧者は安心して深い階層まで進むことができます。
 (多くの企業サイトでは、ほとんどその手法を取り入れています。)

  つまり、制作者側から見た場合、常に同じテンプレートの上でコンテンツが
 配置されていることに気がつくはずです。
  同じテンプレートであれば、制作効率は飛躍的に向上します。そのテンプレ
 ートの設計上で、サイト全体のアイデンティティを盛り込むことが大切です。

  アイデンティティとは、自分自身を証明することです。サイト自身の存在を
 主張すること、誰が見ても「このサイト」であることを Webページに埋め込む
 ことが、アイデンティティを確立するものです。

  位置、色、大きさなどを吟味し、閲覧者の立場を考え、サイト全体の共通性
 を、さりげなく表現することができれば、「クール」で「知的」なホームペー
 ジを完成させることができることでしょう。

  インターネットはお互いの顔が見えません。しかし、サイトの「顔」を見せ
 ることは難しいことではないでしょう。閲覧者から見た「優しい顔」を見せる
 のは Webデザインの使命でもあります。

              (第20回 自分のページを好きになるにつづく)

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

◆HTML講座(第19回) フレームの作成

 今回は実際にフレームを使ったページを作成します。
前回述べたとおり、フレームの欠点を考慮しながら、また、フレームに対応して
いない Webブラウザへの配慮を含めて、訪問者に優しいフレームを作成します。

 2つのウィンドウを持ったフレームを作成しますが、この場合最低3つのHTML
文書が必要になります。少し面倒くさくなりますが、フレームを理解していただ
くためにも、気合を入れてタイプしてください。全部で6つの文書を作成します。

 ■フレームセットの要素と属性
 フレームを利用したページは、最初にフレームをセットしなければなりません。
  フレームセットとは、フレームを定義することです。幾つかのウィンドウに
 区切った「フレームの定義」を示した文書が必要です。

  ○frameset要素
  フレームを定義します。フレームの中で表示するウィンドウは、この要素中
  で行います。

  ○frame要素
  フレームで表示されるウィンドウを定義します。基本的にこの要素の中で用
  いられる属性を使って、そのウィンドウに表示するページを指定します。

  ○noframes要素
  フレーム未対応の Webブラウザに対して表示するための内容を、この要素中
  に記述します。フレーム対応のブラウザでは無視されます。

 上記要素を基に、フレームを定義したHTML文書を作成します。以下の通りにタ
イプしてください。

<!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>フレームのサンプル</title>
</head>

<frameset cols="220,*" title="体によい食べもの">
	<frame src="sample_1-1.html" marginwidth="0" marginheight="10" 
   name="menu"><!-- 改行せずに1行で記述 -->
	<frame src="sample_1-2.html" marginwidth="0" name="main">

    <noframes>
     <body>
      <p>残念ながらこのページはフレーム対応になっています。
         フレーム未対応のブラウザは、こちらにお進みください。
         <a href="sample_1-2">メインコンテンツ</a></p>
     </body>
    </noframes>
</frameset>

</html>

 入力が終わりましたら、名前をつけて保存します。保存する際の拡張子は
「.html」ですので、忘れないように。
 ここでは、文書名を「sample_1.html」とします。

◆解説
 ここで定義したフレームは、以下の略図の通り2つのウィンドウで構成されて
 います。

 ┏━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━┓
 ┃      ┃                       ┃
 ┃←─220px →┃←────── 相対的な長さ ───────→┃
 ┃      ┃                       ┃
 ┃      ┃                       ┃
 ┃      ┃                       ┃
 ┃ menu   ┃          main             ┃
 ┃      ┃                       ┃
 ┃      ┃                       ┃
 ┃(sample_1-1)┃      (sample_1-2)           ┃
 ┃      ┃                       ┃
 ┗━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━┛

 この図を踏まえて解説します。

■<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
 フレーム要素を定義した DTDの宣言です。フレームを利用する場合には、必ず
 この文書型定義を宣言しなければなりません。

■<frameset cols="220,*" title="体によい食べ物">
 ページ内で区切るフレームを定義します。(フレームセットと呼ぶ)
  このウィンドウの区切りは左右に2つに分け、最初の(左側の)のウィンド
 ウの横幅を 220ピクセルに設定するものです。区切り単位はこのほか、%など
 を利用することができます。

  ウィンドウの区切りは、このほかに上下に仕切る「rows」属性によって設定
 することもできます。
	(例: <fremset rows="220,*" title="任意のテキスト">

  右側に区切られたウィンドウの横幅は、ページ全体の 220ピクセルの残りを
 相対的に割り当てるものです。例えば、ページ全体が 800ピクセルあったとし
 て仮定した場合、ここでは、800-220=580ピクセルとなります。

  ウィンドウを3つに区切る場合には、cols属性の値に3つの幅を設定するこ
 とで簡単に3つのウィンドウに区切ることができます。

  title属性は任意です。基本的にはページのタイトルと同等なものが記述さ
 れますが、ここではサンプルとして記述しています。

■<frame src="sample_1-1.html" marginwidth="0" name="menu">
 最初(左側)に区切られたウィンドウの初期値を設定しています。このウィン
 ドウには「menu」と名前を付けられ、初期値として sample_1-1.html という
 HTML文書が読み込まれて表示されます。

  marginwidth属性は、ウィンドウで表示される横幅(左右)の余白をピクセ
 ル単位で設定します。このほか、marginheight属性もあり、これはウィンドウ
 で表示される高さ(上下)の余白を設定します。

■<frame src="sample_1-2.html" marginwidth="0" name="main">
 次のウィンドウに区切られた(右側)には、「main」と名付けられ、やはり同
 じように sample_1-2.html というHTML文書が読み込まれ表示されます。

■<noframes> 〜 </noframes>
 フレームに対応していないブラウザに対して、代替のコンテンツ、または代替
 の文書を指定するリンクをこの要素内で記述します。
  フレームに対応しているブラウザでは、この要素は無視されます。

  この要素内に記述した body要素は、あくまで未対応ブラウザへの記述です。
 フレーム未対応のブラウザは、frameset、frame、noframes要素などはすべて
 無視します。しかしながら、body要素には対応しているため、この範囲の内容
 のみをレンダリングし、代替コンテンツ、あるいは代替HTML文書に導くリンク
 などを表示します。


 さて、次にフレームで区切られた各ウィンドウで表示する簡単なHTML文書を作
成します。
 一部に非推奨属性を使うものは、文書型定義を過渡期仕様(Transitional)に
そうでないものは厳格仕様(Strict)を採用します。

 各ウィンドウで表示するの5つのHTML文書を以下の通りに作成します。スタイ
ルシートを利用しますので、コロン「:」及び、セミコロン「;」の記述に注意
してください。
 また、保存の際には、それぞれの文書名を必ず指定してください。


■sample_1-1.html(menuウィンドウで表示される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">
<title>メニュー</title>
<style type="text/css">
<!--
body { background: #ffc; 
       color: #000 }

h1   { font-size: lem; 
       color: #900; 
       text-align: center }

ul   { list-style-type: none }

li   { margin-bottom: 2px }
-->
</style>
</head>

<body>
<h1>MENU</h1>
<ul>
	<li><a href="sample_1-3.html" target="main">にら</a></li>
	<li><a href="sample_1-4.html" target="main">豆腐</a></li>
	<li><a href="sample_1-5.html" target="main">ごま</a></li>
	<li><a href="sample_1-2.html" target="_top">フレーム解除</a></li>
</ul>

</body>
</html>

 ※保存の際には「sample_1-1.html」と指定して、先ほどのフレームを定義し
  た HTML文書と同じディレクトリ(フォルダ)に保存します。


■sample_1-2.html(mainウィンドウで表示される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">
<title>体によい食べ物</title>
<style type="text/css">
<!--
body { margin: 1em 5%; 
       background: #9cf; 
       color: #000 }

h1   { font-size: l.2em; 
       color: #c30; 
       text-align: center }

dt   { font-weight: bold  }

dd   { margin: 0; 
       padding: 0; 
       letter-spacing: 1px; 
       line-height: 1.3em }

p    { margin: 0; 
       padding-bottom: 0.3em }

.right { float: right }
-->
</style>
</head>

<body>
<h1>体に良い食べ物</h1>
<dl>
<dt>医食同源</dt>
<dd>医食同源の言葉どおり、食べ物の多くは人間にとってクスリと同じ役目を
持っています。このページは、食品の効用を科学的な側面からアプローチします。
</dd>
</dl>
<hr>
<div class="right">
<p><a href="sample_1-3.html">Next</a></p>
<p><a href="sample_1-2.html" target="_top">フレーム解除</a></p>
<p><a href="sample_1.html" target="_top">フレーム表示</a></p>
</div>

</body>
</html>

 ※保存の際には「sample_1-2.html」と指定します。


■sample_1-3.html(mainウィンドウで表示される追加の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">
<title>にら</title>
<style type="text/css">
<!--
body { margin: 1em 5%; 
       background: #6f0; 
       color: #000 }

h1   { font-size: l.2em; 
       color: #006; 
       text-align: center }

dt   { font-weight: bold  }

dd   { margin: 0; 
       padding: 0; 
       letter-spacing: 1px; 
       line-height: 1.3em; 
       text-indent: 1em }

p    { margin: 0 }

.right { float: right }
-->
</style>
</head>

<body>
<h1>にら</h1>
<dl>
<dt>においの成分硫化アリルがビタミンB1の吸収をよくする</dt>
<dd>にらは、ねぎやたまねぎと同じねぎの仲間で、植物学的な分類からすると、
ユリ科に属します。疲労回復にはビタミンB1が有効に働きますが、
にらをはじめとするねぎ類には、ビタミンB1がたっぷりと含まれています。
</dd>
<dd>ビタミンB1はたくさん摂っても、余分なものは体内に貯蔵されず
排出されてしまう為に、貯金ができないビタミンといえます。ところが、
にらのにおいのもとである硫化アリルという成分が、ビタミンB1誘導体を
作るように働き、疲労
回復のビタミンB1を体内に留めて長時間働くようにするのです。</dd>
</dl>
<hr>
<div class="right">
<p><a href="sample_1-2.html">Back</a> &gt; 
<a href="sample_1-4.html">Next</a></p>
</div>

</body>
</html>

 ※保存の際には、文書名を「sample_1-3.html」と指定します。


■sample_1-4.html(mainウィンドウで表示される追加の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">
<title>豆腐</title>
<style type="text/css">
<!--
body { margin: 1em 5%; 
       background: #fff; 
       color: #000 }

h1   { font-size: l.2em; 
       color: #090; 
       text-align: center }

dt   { font-weight: bold  }

dd   { margin: 0; 
       padding: 0; 
       letter-spacing: 1px; 
       line-height: 1.3em; 
       text-indent: 1em }

p    { margin: 0 }

.right { float: right }
-->
</style>
</head>

<body>
<h1>豆腐</h1>
<dl>
<dt>疲れた脳細胞をレシチンで活性化させる</dt>
<dd>町の豆腐屋さんで作られた手作りの豆腐には、大豆のもつビタミンや
レシチンが残っています。レシチンは、人間の体に必要不可欠な物質で、
脳細胞を活性化したり、女性の命とも言える肌を美しくしてくれたりします。
</dd>
<dd>また、血液の循環をスムーズにし、老化を最小限に食い止めてくれる
ビタミンEの吸収を助ける働きがあるのです。消化吸収がいいという特徴が
ありますから胃腸の弱った方には、大豆で摂るよりも豆腐をお勧めします。
</dd>
</dl>
<hr>
<div class="right">
<p><a href="sample_1-3.html">Back</a> &gt; 
<a href="sample_1-5.html">Next</a></p>
</div>

</body>
</html>

 ※保存の際には、文書名を「sample_1-4.html」と指定します。


■sample_1-5.html(mainウィンドウで表示される追加の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">
<title>ごま</title>
<style type="text/css">
<!--
body { margin: 1em 5%; 
       background: #630; 
       color: #fff }

h1   { font-size: l.2em; 
       color: #ff0; 
       text-align: center }

dt   { font-weight: bold  }

dd   { margin: 0; 
       padding: 0; 
       letter-spacing: 1px; 
       line-height: 1.3em; 
       text-indent: 1em }

p    { margin: 0 }

a:link    { color: #fff }

a:visited { color: #ff0 }

.right    { float: right }
-->
</style>
</head>

<body>
<h1>ごま</h1>
<dl>
<dt>リノール酸とビタミンEが血管の病気を撃退</dt>
<dd>お赤飯にごまは欠かせませんが、彩りがきれいなだけにごまは単なる飾りと
思われがちです。しかし、実はごまは小さな1粒に、脂肪、タンパク質、
カルシウム、ビタミンB1、B2、E、鉄分、リンなどの栄養素がたっぷり含ま
れている優れた健康食品なのです。</dd>
<dd>ごまに含まれる植物性脂肪はリノール酸、リノレン酸といった、体内で作る
ことの出来ない不飽和脂肪酸で、これらは血液中のコレステロールを低下させる
効用をもつ脂肪です。大豆、べにばな、とうもろこしなどの油や、魚類の油にも
リノール酸が含まれています。</dd>
</dl>
<hr>
<div class="right">
<p><a href="sample_1-4.html">Back</a> &gt; 
<a href="sample_1-2.html">Top</a></p>
</div>

</body>
</html>

 ※保存の際には、文書名を「sample_1-5.html」と指定します。

 フレームサンプル実行結果
  http://www.scollabo.com/banban/magazine/mm/sample_71-1.html
  (実際のサンプルでは、コンテンツを少し増やしています。)

 あなたが作成したフレームのページを閲覧する場合、最初に作成した文書、つ
まりフレームを定義した「sample_1.html」から閲覧するようにしてください。


◆target属性について

 冒頭で説明したとおり、フレームの各ウィンドウには固有の名前が付けられて
います。上記の構文で示されるウィンドウは2つで、「menu」と「main」という
名前が付けられており、「menu」ウィンドウから「main」ウィンドウにリンクす
る場合、target属性を利用して指定します。

 target属性で示される値は次の通りです。
  ・target="ウィンドウ名"  指定したウィンドウで表示する
  ・target="_top"          フレームを解除して表示する

 特に、他のサイトにリンクする場合には、現在のフレームを解除してから移動
できるように設定してください。target属性の設定がない場合、現在のウィンド
ウ内で表示されてしまい、「著作権」に抵触する可能性があります。

 target属性を使わないでリンクした場合には、そのウィンドウ内で移動して表
示します。リンクの設定には、どのウィンドウで表示したいのかを考えて、適切
なナビゲーションを設計する必要があります。
 なお、target属性は「非推奨属性」ですので、利用の際には、文書型定義の設
定に注意してください。(Transitional、Frameset 以外では利用不可です。)

◆ナビゲーション

 サンプルで示された通り、「main」ウィンドウで表示されるナビゲーションは
フレームを解除しても、閲覧者が操作できるように設定しています。

 前回説明したとおり、サーチ型検索サイトでは、ロボット(実体は特殊なソフ
トウェア)を派遣して、世界中の Webサイトから情報を集めデータベースに登録
します。
 当然、フレームで設定した各ウィンドウのページも登録されます。もし、閲覧
者がそうした検索サイトからやってきた場合、メニューが表示されない危険があ
ります。
 その場合、閲覧者は行き止まりとなって、それ以上の情報を閲覧することがで
きなくなります。そうしたことを想定して、各ページに適切なナビゲーションを
表示するようにすることで、誰もが快適に操作することができます。

 フレームを作る際の基本は、それぞれのページが単独で表示されても、閲覧者
の操作や、ページのレンダリングが問題ないようにすることです。
 またフレーム未対応のブラウザへも、noframes要素を利用して、代替のページ
に誘導して情報を提供するようにします。

 このような考え方に従ったフレームを作成すれば、それほど嫌われることはな
いと思います。どうしてもフレームでなければならないようなページを作成する
場合、このことを中心にして設計してください。

◆背景色と文字色・リンク文字色

 「sample_1-5.html」では、やや濃い茶色を背景色に使っています。このため、
リンクの文字色は、未訪問のリンクに白色、訪問済みを黄色に設定しています。
 何も設定していない場合は、ユーザのブラウザの初期値に依存するため、場合
によっては非常に見づらくなってしまいます。
 また、背景色に合わせた文字色の設定も重要になってきます。暗い背景色には
明るい文字色を、明るい背景色には、暗い文字色を設定するようにしましょう。

 当マガジンの Webサイト「今週のおさらい」のページでは、フレームに関する
各要素、属性について説明していますので、参考までにお読みください。
 フレームに関して、疑問点などがありましたらご質問ください。

 ※次回「第73号」では、インラインフレームに関して解説します。

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

◆Tips アスタリスク記号の使い方

 ■長さの設定で利用するアスタリスク記号「 * 」

 長さ(横幅や高さ)を指定する単位は、ピクセルとパーセントがあります。そ
 して、相対的な長さを割り当てる記号としてアスタリスクがあります。

  例えば、ウィンドウの横幅が100ピクセルとしたとき、"40,*,2*,3*" と指定
 することができます。最初の数値はピクセルで、40ピクセルが割り当てられて
 います。
  残りの60ピクセルに対して、"*,2*,3*" とした場合、60ピクセルの比率を、
 「1:2:3」という具合に相対的に割り当てられます。
  この場合は、10ピクセル、20ピクセル、30ピクセルという長さで区切られる
 ことが理解できると思います。

  こうしたアスタリスクによる長さの指定方法は、frameset要素以外に、テー
 ブルで利用する colgroup、col要素にも利用することができます。

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

◆XML初級入門講座(第9回) 属性(データ種別の定義)

 今回は、前回説明した属性に関する「データ種別」を中心に、サンプルを提示
して、詳しく解説します。

 データ種別とは
  属性リスト宣言で定義するデータ種別とは、その属性がどのような「型」の
 値を持つものなのかといった、データの「性質」を明確にするものです。
  つまり、要素の付加情報として、その値がどんな機能を有するのかを明確化
 するための「型」を定義します。

 ■CDATA型(文字データ型)
 CDATA型とは、属性の値に任意の文字列を記述することができます。

  CDATA型の属性リスト宣言
  <!ATTLIST 要素名 属性名 CDATA "デフォルト値">

  具体的な例文
  <!ATTLIST magazine title CDATA "Introduction">
    <magazine title="第71号">初心者のためのホームページ作り</magazine>

 ■ENTITY型(エンティティ参照型)
 ENTITY型は、属性の値に「置換文字列」や外部ファイルを記述することができ
 る型です。(なお、ENTITYS型は、ENTITY型の複数型になります。)
  この場合、同時に値となる文字列のエンティティ宣言を行わなければなりま
 せん。(エンティティ宣言については、次回(第73号)で解説します。)

  ENTITY型の属性リスト宣言
  <!ATTLIST 要素名 属性名 ENTITY "デフォルト値">

  具体的な例文
  <!ATTLIST magazine page ENTITY #IMPLIED>
  <magazine page="at">初心者のためのホームページ作り</magazine>

 page属性の値「at」には、エンティティ宣言で定義した文字列が値となります。
  デフォルト値の「#IMPLIED」は前回説明したとおり、属性の利用が「任意」
 となるために定義しているものです。つまり、要素に属性を記述しなくてもよ
 いとされるものです。

 ■ID型(識別子型)
 ID型は、属性の値が識別子として記述することができる型です。

  ID型の属性リスト宣言
  <!ATTLIST 要素名 属性名 ID "デフォルト値">

  具体的な例文
  <!ATTLIST magazine id ID #IMPLIED>
  <magazine id="No.90196">初心者のためのホームページ作り</magazine>

 当然「識別子」なので、複数の要素のID属性に同じ値を与えることや、同じ名
 前の要素が複数のID属性を持つことは、認められていません。 
   ID属性の属性値(つまり要素に付けられるID名)は、要素や属性の名前と同
 じように「命名規則」という制限を満たさなければなりません。 
  (命名規則については、いずれ講座の中で詳しく説明します。)

 ■IDREF型(参照識別子型)
 IDREF型は、ID型と同様、属性値の識別子を記述しますが ID型との違いは、識
 別子による参照ができるということです。

  IDREF型の属性リスト宣言
  <!ATTLIST 要素名 属性名 IDREF "デフォルト値">

  具体的な例文
  <!ATTLIST magazine id ID #IMPLIED>
  <!ATTLIST outline out IDREF #IMPLIED>
    <magazine id="No.90196">
      <outline out="No.90196">まぐまぐID番号</outline>
    </magazine>

  ID型で設定された属性値を IDREFによって参照し、利用することができます。

 ■MMTOKEN型(名前トークン型)
 属性の型に NMTOKENと指定すると、その属性が「名前トークン」として許され
  る値を、属性値としてとることができることを宣言できます。
  大きな特徴として NMTOKEN型を宣言した場合、名前開始文字ではない文字で
 属性値を開始することが可能になります。例えば、数字やハイフンなどから始
 まる属性値を記述することが可能です。
  なお、NMTOKEN型の文字列を、スペースで区切りながら複数属性値に指定でき
 るのが NMTOKENS型です。

  MMTOKEN型の属性リスト宣言
  <!ATTLIST 要素名 属性名 MMTOKEN "デフォルト値">

  具体的な例文
  <!ATTLIST magazine no MMTOKEN #IMPLIED>
    <magazine no="90190">初心者のためのホームページ作り</magazine>

 ■NOTATION型(記法型)
 このデータ種別は、別途、NOTATION(記法)を示した DTDの宣言が行われてい
 る外部ファイルを参照する場合に、このファイルを扱えるアプリケーションを
 起動したい場合などに、そのアプリケーションとの特定の因果関係を定義する
 ことができます。
  (NOTATIONを示す DTDについてはいずれ講座で解説します。)

  NOTATION型の属性リスト宣言
  <!ATTLIST 要素名 属性名 NOTATION "デフォルト値">

  具体的な例文
    <!NOTATION view SYSTEM "http://www.banban/viewr.exe">
  <!ATTLIST magazine myapl NOTATION "view">
    <magazine myapl="view">初心者のためのホームページ作り</magazine>

  あらかじめ NOTATIONを示す DTDを書き揃える必要があります。
 (サンプルに示した URIは実存しません、念のため。)

 ■列挙型
 列挙型は、属性地に指定する具体的な値を列挙することができる型で、データ
 の候補を書き並べます。

  列挙型の属性リスト宣言
  <!ATTLIST 要素名 属性名 (候補1|候補2| … ) "デフォルト値">

  具体的な例文
  <!ATTLIST magazine name (ばんばん|臨時制作委員会) "ばんばん">
    <magazine name="ばんばん">初心者のためのホームページ作り</magazine>

◆まとめ

 今回説明した属性のデータ種別については、なかなか難しい面があり、作者が
どのような「型」を選ぶのか悩むところでもあります。
 しかし、HTMLで利用している属性の型を、ここで掲げたデータ種別と重ね合わ
せてみると、なるほどとうなずける点があるハズです。

 例えば、長さを示す width、height属性などは、数値が記述されるところから
名前トークン型であることが分かります。また title属性は文字列が記述される
ことから、文字列型であることも理解できるでしょう。

 HTMLであっても、基本的な属性を示す DTDの記述法は同じであると云えるでし
ょう。要素の付加情報を示す属性を利用する場合にヒントになると思います。

 次回の XML初級講座では DTDで記述するエンティティ宣言について詳しく解説
します。

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

◆HTML、XHTML 属性の解説 name属性

 多くの要素で利用されるこの属性は、自身の要素内容に任意の名前を付け、他
の要素、あるいは外部から参照する場合に用いられることが多いようです。なお
HTMLと XHTMLでは、利用できる要素が限られていますので注意してください。

 ■name属性 任意の名前を付けます。
 属性値:  名前(テキスト)
 記述法:  name="banban"
 関連要素: a、button、form、input、select、textarea、mata、map、
       object、param
       apllet(非推奨)、iframe(非推奨)、frame(フレームセット)

 XHTMLの制限: a、及び map要素には利用できません。(代替は id属性)

 ■name属性の機能
 name属性は要素に名前を付けることで機能します。他の要素や外部にある文書
 から、名前が付けられた要素内容に関連付けることで、特定の位置に移動した
 り、スクリプトの関数に適用させたりします。
  また、フォームでは送信されるデータにその名前が付与されたりします。

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

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

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

 次回は、10月31日に配信を予定しています。主な内容として、背景画像を扱う
 JavaScript講座を考えています。

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

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

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

発行者 ばんばん
協 力 スズキ・コラボレーション 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

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

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

 このところ急に寒くなってきて、我が家では奥さんがコタツを引っ張り出して
丸まって焼き芋をほうばっています。
 長いこと入院していたので季節感がなかったのですが、このところの急激な気
温の低下は、晩秋を感じさせてくれます。

 今日は24節気の1つである「霜降」。風が冷たくて冬の近さを告げているよう
です。季節の変わり目、体調の変化に気をつけましょう。

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

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

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



最新更新日 2003/10/28
Copyright(C) 2002-3003 banban@scollabo.com