コンピュータIIE（HTML入門）第12回

目次	索引
12.1 XML（2） 12.1.1 XMLとスタイルシート 12.1.2 xml-stylesheet処理命令 12.1.3 インライン要素とブロック・レベル要素 12.1.4 リスト要素 12.1.5 表要素 12.1.6 隠し要素 12.2 試験について 12.3 成績評価について 12.4 演習12 12.5 レポート課題	displayプロパティ href疑似属性 list-style-typeプロパティ type疑似属性 xml-stylesheet処理命令処理命令

12.1 XML（2）

12.1.1 XMLとスタイルシート

前回説明した通り、XMLは意味データを表すための言語です。 XMLドキュメントをどう表示するかは決まっていません。

ここで、ある展示会のデータを、次のようなXMLドキュメントで表したとします。

ex12a.xml

<exhibition>
  <name>○○株式会社製品展示会</name>
  <date>2004年7月10日(土)</date>
  <place>○○ビル一階</place>
  <fee>参加費無料</fee>
  <schedule>
    <item><time>9:30</time><event>受付開始</event></item>
    <item><time>10:00</time><event>展示開始</event></item>
    <item><time>15:30</time><event>受付終了</event></item>
    <item><time>16:00</time><event>展示終了</event></item>
  </schedule>
</exhibition>

このXMLファイルをMozilla Firefoxなどで開きますと、次のような木構造が表示されます。これは、必ずしも人間にとって読みやすいものではありません。

- <exhibition>

<name>○○株式会社製品展示会</name>

<fee>参加費無料</fee>

- <schedule>

- <item>

</item>

- <item>

</item>

- <item>

</item>

- <item>

</item>

</schedule>

</exhibition>

XMLドキュメントを人間にとって読みやすく表示するには、次のような方法があります。

XMLドキュメントをHTMLドキュメントに変換し、HTMLドキュメントを表示する。
XMLドキュメントにスタイルシートを割り当てる。

今回は、スタイルシートの割り当てについて解説します。

スタイルシートについては、以前、HTMLドキュメントにCSSスタイルシートを割り当てました。実は、CSSスタイルシートは、XMLドキュメントにも割り当てられます。以下では、CSSスタイルシートを単にスタイルシートと呼び、HTMLの場合との違いについて説明します。

なお、XML+CSSが利用できるウェブ・ブラウザは、最近のものに限られます。情報処理センターが用意しているウェブ・ブラウザの中では、SafariとMozilla Firefoxが対応しています。 Internet Explorerではうまくいきません。

12.1.2 xml-stylesheet処理命令

一般的に、ドキュメント処理に関するデータをXMLドキュメントに埋め込むには、 処理命令 （ processing instruction ）というものが使われます。処理命令は、 <? processname から始まり、データの並びが続き、 ?> で終わります。処理命令は、コメントと同様、要素ではありません。

XMLドキュメントにスタイルシートを割り当てるには、 xml-stylesheet処理命令を利用します。この type疑似属性の値を"text/css"とし、 href疑似属性の値をスタイルシート・ファイルのURLとします。要素の属性と同じ形式なのに、属性と呼ばずに疑似属性と呼ぶのは、処理命令は要素ではないからです。

展示会のデータに、同じディレクトリのスタイルシート・ファイル ex12a.css を割り当てますと、次のようになります。

ex12a.xml（第2版）

<?xml-stylesheet type="text/css" href="ex12a.css"?>
<exhibition>
  <name>○○株式会社製品展示会</name>
  <date>2004年7月10日(土)</date>
  <place>○○ビル一階</place>
  <fee>参加費無料</fee>
  <schedule>
    <item><time>9:30</time><event>受付開始</event></item>
    <item><time>10:00</time><event>展示開始</event></item>
    <item><time>15:30</time><event>受付終了</event></item>
    <item><time>16:00</time><event>展示終了</event></item>
  </schedule>
</exhibition>

XMLドキュメントのためのスタイルシートでは、 displayプロパティが重要です。このプロパティは、要素をインライン要素またはブロック・レベル要素に分類します。インライン要素は前後に改行が入らないことと、ブロック・レベル要素は前後に改行が入ることを思い出してください。インライン要素にするには display: inline とし、ブロック・レベル要素にするには display: block とします。

展示会のデータでは、 exhibition 要素、 name 要素、 schedule 要素、および item 要素をブロック・レベル要素に分類し、他の要素をインライン要素に分類します。

ex12a.css

date {display: inline}
event {display: inline}
exhibition {display: block}
fee {display: inline}
item {display: block}
name {display: block}
place {display: inline}
schedule {display: block}
time {display: inline}

○○株式会社製品展示会

2004年7月10日(土) ○○ビル一階参加費無料

9:30受付開始

10:00展示開始

15:30受付終了

16:00展示終了

スタイルシートには、HTMLのときのプロパティが追加できます。ここでは、マージンを設定して、上下に余白を設けてみます。

ex12a.css（第2版）

date {display: inline}
event {display: inline}
exhibition {display: block}
fee {display: inline}
item {display: block}
name {display: block; margin-bottom: 16px; margin-top: 16px}
place {display: inline}
schedule {display: block; margin-bottom: 16px; margin-top: 16px}
time {display: inline}

○○株式会社製品展示会

2004年7月10日(土) ○○ビル一階参加費無料

9:30受付開始

10:00展示開始

15:30受付終了

16:00展示終了

12.1.4 リスト要素

display プロパティで、要素をインライン要素かブロック・レベル要素に分類できますが、他の分類もあります。その一つが、リスト項目です。これは、左側に黒丸や数字などが付く要素です。要素をリスト項目にするには、 display: list-item とします。

list-style-typeプロパティは、リスト項目とともに使われます。このプロパティの値によって、左側に黒丸が付いたり数字が付いたりします。次の表に従ってください。

表 12.1 リスト項目の記号

プロパティと値	記号	例
`list-style-type: disc`	黒丸	●
`list-style-type: circle`	白丸	○
`list-style-type: square`	四角	■
`list-style-type: decimal`	数字	1 2 3
`list-style-type: lower-roman`	小文字ローマ数字	i ii iii
`list-style-type: upper-roman`	大文字ローマ数字	I II III
`list-style-type: lower-alpha`	小文字アルファベット	a b c
`list-style-type: upper-alpha`	大文字アルファベット	A B C
`list-style-type: none`	記号なし

展示会のデータでは、 item 要素をリスト項目に分類します。 item 要素の親要素である schedule 要素に、 list-style-type プロパティを指定します。四角を付けるために、 schedule 要素にマージンを設定して、左にも余白を設けます。

ex12a.css（第3版）

date {display: inline}
event {display: inline}
exhibition {display: block}
fee {display: inline}
item {display: list-item}
name {display: block; margin-bottom: 16px; margin-top: 16px}
place {display: inline}
schedule {display: block; list-style-type: square;
        margin-bottom: 16px; margin-left: 32px;
        margin-top: 16px}
time {display: inline}

○○株式会社製品展示会

2004年7月10日(土) ○○ビル一階参加費無料

■ 9:30受付開始

■ 10:00展示開始

■ 15:30受付終了

■ 16:00展示終了

注意: XML+CSSで番号付きのリスト要素を作成した場合、どの項目から数え始めるかの判定が、ブラウザによって異なります。正確に番号を付けるには、カウンタと呼ばれる機能を利用する必要があります。

12.1.5 表要素

display プロパティで表を作成することもできます。 HTMLでは、 <table> タグ、 <tr> タグ、 <td> タグ、および <th> タグを組み合わせて表を作りました。次の表に従って要素を分類しますと、あたかもHTMLのタグを使ったように表示されます。

表 12.2 表に関する要素

プロパティと値	対応するHTML要素
`display: table`	table
`display: table-row`	tr
`display: table-cell`	th, td

展示会のデータでは、 schedule 要素を <table> タグに、 item 要素を <tr> タグに、 time 要素と event 要素を <td> タグに、それぞれ対応させます。表に枠をつけるため、 schedule 要素、 time 要素、および event 要素にボーダーを設定します。

ex12a.css（第4版）

date {display: inline}
event {border-style: solid; border-width: thin;
        display: table-cell}
exhibition {display: block}
fee {display: inline}
item {display: table-row}
name {display: block; margin-bottom: 16px; margin-top: 16px}
place {display: inline}
schedule {border-style: solid; border-width: thin;
        display: table; margin-bottom: 16px; margin-top: 16px}
time {border-style: solid; border-width: thin;
        display: table-cell}

○○株式会社製品展示会

2004年7月10日(土) ○○ビル一階参加費無料

9:30	受付開始
10:00	展示開始
15:30	受付終了
16:00	展示終了

12.1.6 隠し要素

リストや表の他に、表示しないという分類もあります。これは、 display: none とします。指定された要素の子要素も表示されません。

展示会のデータで、 schedule 要素を表示しないようにしますと、子要素である item 要素も表示されません。

ex12a.css（第5版）

date {display: inline}
event {display: inline}
exhibition {display: block}
fee {display: inline}
item {display: block}
name {display: block; margin-bottom: 16px; margin-top: 16px}
place {display: inline}
schedule {display: none}
time {display: inline}

○○株式会社製品展示会

2004年7月10日(土) ○○ビル一階参加費無料

12.2 試験について

次回（7/16）の授業では試験を行います。今日の演習問題を見直しておいてください。

12.3 成績評価について

レポートの提出に関するスケジュールは次の通りです。

7月23日（金）: 全員にレポートの提出状況をメールで知らせます。
7月31日（土）: レポートの最終締め切り日です。これ以降提出されたレポートは採点しません。

この授業の成績は、レポートの提出と試験の得点で決まります。

S: レポートはすべて提出。「余力のある人」のための問題にも取り組んでいる。試験の得点は「優」相当。
A: レポートはすべて提出。試験の得点は「優」相当。
B: レポートはおおむね提出。試験の得点は「良」相当。
C: レポートは未提出が目立つ。試験は「可」相当。
F: レポートは未提出が多い。試験は「不可」相当。

成績に関して次のような事情のある人はメールで連絡してください。できる限り対処します。

秋から留学するので、書類作成上、合否だけでも早めに知りたい。
奨学金をもらっているので、SでないならFにしてほしい。

12.4 演習12

HTMLとその関連技術について、以下の問いに答えなさい。（全20問）

問1. 次のHTMLに関する説明のうち、適切でないものを一つ選びなさい。

A. テキストに改行を入れると、原則的にウェブ・ブラウザでも改行されます。

B. タグを使ってテキストの範囲を指定するには、その範囲を開始タグと終了タグで囲みます。

C. 他人の書いたテキストは、引用を使って自分の書いたテキストと区別します。

D. リスト（箇条書き）は、順序に意味がある場合に番号付きリストを使います。

問2. 次のタグの書き方のうち、定義リストとして適切なものを一つ選びなさい。

A. <dl><dl>バグ</dl><dl>プログラムの間違い</dl></dl>

B. <dl>バグ</dl><dl>プログラムの間違い</dl>

C. <dl><dt>バグ</dt><dd>プログラムの間違い</dd></dl>

D. <dt>バグ</dt><dd>プログラムの間違い</dd>

問3. 次のHTMLに関する説明のうち、適切でないものを一つ選びなさい。

A. ハイパーテキストとは、リンクで構成されるドキュメントの構造のことです。

B. ウェブ・ブラウザに表示したくないテキストは、コメントの中に書きます。

C. 大きなイメージを埋め込んでも、ウェブ・ブラウザは前後に改行を入れたりせず、あたかもイメージを文字のように取り扱います。

D. ウェブ・ブラウザで最も目立つように表示したいテキストには、タイトルを使います。

問4. 次のタグの書き方のうち、イメージ clock.png を埋め込むのに適切なものを一つ選びなさい。

A. <img>clock.png

B. <img src="clock.png">

C. <img src="clock.png"></img>

D. <img>clock.png</img>

問5. 次のHTMLに関する説明のうち、適切でないものを一つ選びなさい。

A. ページ全体でテキストを白、背景を黒にするには、 <body text="white"><body bgcolor="black"> 〜 </body></body> と書きます。

B. 英文では強調するテキストはイタリック体で書きますが、HTMLには、強調するためのタグと、イタリック体にするためのタグが用意されています。

C. HTMLには、数式や化学式に現れる、上付き添字や下付き添字のためのタグがあります。

D. 属性を指定すると、イメージを右に揃え、左の空いている部分にテキストを流し込むことができます。

問6. 次のタグの書き方のうち、青のやや大きなフォントに切り替えるのに適切なものを一つ選びなさい。

A. <font size="4"><font color="blue">夏休み</font>

B. <font size="4"><font color="blue">夏休み</font></font>

C. <font size="4" font color="blue">夏休み</font>

D. <font size="4" font color="blue">夏休み</font></font>

問7. 次の表に関する説明のうち、適切でないものを一つ選びなさい。

A. セルを作るタグは2種類あり、セルの内容によって使い分けます。

B. 特に指定しなければ、表の枠は表示されません。

C. 属性を指定すれば、縦に連続したセルや横に連続したセルが作れます。

D. HTMLでは、セルを縦に並べて列ができ、列を横に並べて表ができると考えます。

問8. 次のタグの書き方のうち、一行一列の表として適切なものを一つ選びなさい。

A. <table><tr><td>万年筆</td></tr></table>

B. <table><tt><tr><td>万年筆</td></tr></tt></table>

C. <table><tr>万年筆</tr></table>

D. <table>万年筆</table>

問9. 次のフレームに関する説明のうち、適切でないものを一つ選びなさい。

A. HTMLには、フレームに対応していないウェブ・ブラウザでテキストを表示するためのタグがあります。

B. リンクのターゲットを指定するには、フレームのURLを使います。

C. 一つのフレームセット・ドキュメントの中では、違うフレームに同じ名前を付けてはいけません。

D. 特別なターゲットを指定すると、フレームの分割が解除できます。

問10. 次のタグの書き方のうち、フレームセット・ドキュメントとして適切なものを一つ選びなさい。

A. <frameset><frame cols="20%"><frame cols="80%"></frameset>

B. <frameset cols="20%, 80%"><frame><frame></frameset>

C. <frameset cols="20%"></frameset><frameset cols="80%"></frameset>

D. <frameset><frame cols="20%, 80%"></frameset>

問11. 次のスタイルシートに関する説明のうち、適切でないものを一つ選びなさい。

A. スタイルシートはHTMLドキュメントの本文の中に書きます。

B. スタイルシートを使うと、イタリック体で表示するタグを通常のフォントにすることができます。

C. スタイルシートでは、イメージ・ファイル wall.png を url(wall.png) という形式で指定します。

D. スタイルシートを使うと、表のセルの中のテキストを右下に揃えることができます。

問12. 次のスタイルシートの書き方のうち、h1 要素を中央に揃えて緑色にするのに適切なものを一つ選びなさい。

A. h1 {color: green text-align: center}

B. h1 {color: green} {text-align: center}

C. h1 {color: green; text-align: center}

D. h1 {color: green}; {text-align: center}

問13. 次のスタイルシートに関する説明のうち、適切でないものを一つ選びなさい。

A. スタイルシート h1 {text-align: center} とタグ <h1 style="text-align: right">お知らせ</h1> を組み合わせると、「お知らせ」は右に揃います。

B. スタイルシートの使い方として、スタイルシートだけのファイルを作成し、それを複数のHTMLドキュメントから読み込むことができます。

C. スタイルシートでは <div> タグと <span> タグが役立ちますが、 <div> はインライン要素、 <span> はブロックレベル要素を表します。

D. スタイルシートを使うと、見出しを黒い枠で囲むことができます。

問14. 次のうち、「駅名を赤で表示する」というスタイルシートとタグの組み合わせとして、適切なものを一つ選びなさい。

span.color {station: red}
...
<span class="station">西荻窪駅</span>

span.station {color: red}
...
<span class="color">西荻窪駅</span>

span.color {station: red}
...
<span class="color">西荻窪駅</span>

span.station {color: red}
...
<span class="station">西荻窪駅</span>

問15. 次のURLに関する説明のうち、適切でないものを一つ選びなさい。

A. http://www.twcu.ac.jp/ は、http://www.twcu.ac.jp/index.html を指定します。

B. 基準URLが http://www.fiction.co.jp/index.html のとき、相対URL intro.html は http://www.fiction.co.jp/intro.html に解決されます。

C. 基準URLが http://www.fiction.co.jp/index.html のとき、相対URL http://www.imagine.ac.jp/index.html は http://www.imagine.ac.jp/index.html に解決されます。

D. http://www-local.twcu.ac.jp/b04a001/list.html は、ユーザ b04a001 のドキュメント・ルートにあるファイル list.html を指定します。

問16. ~/WWW-local/kanagawa/yokohama/yokohama.html から ~/WWW-local/toppage.html にリンクを張ることを考えます。次のうち、yokohama.html に書くタグとして適切なものを一つ選びなさい。

A. <a href="../toppage.html">トップページへ</a>

B. <a href="../WWW-local/toppage.html">トップページへ</a>

C. <a href="../../toppage.html">トップページへ</a>

D. <a href="WWW-local/toppage.html">トップページへ</a>

問17. 次のフォームに関する説明のうち、適切でないものを一つ選びなさい。

A. フォーム・データは、指定されたフォーム処理プログラムで処理されます。

B. テキストを入力するコントロールには、一行のものと複数行のものがあります。

C. コントロールの中には、メニューと呼ばれる、用意された項目の中から選択をするものがあります。

D. リセット・ボタンをクリックすると、フォーム・データが送信されます。

問18. 次のタグの書き方のうち、喫煙車か禁煙車かを問うラジオ・ボタンとして適切なものを一つ選びなさい。

<input type="radio" name="smoking" value="car">喫煙車
<input type="radio" name="nonsmoking" value="car">禁煙車

<input type="radio" value="smoking">喫煙車</input>
<input type="radio" value="nonsmoking">禁煙車</input>

<input type="radio" name="car" value="smoking">喫煙車
<input type="radio" name="car" value="nonsmoking">禁煙車

<input type="radio" value="car">喫煙車</input>
<input type="radio" value="car">禁煙車</input>

問19. 次のXMLに関する説明のうち、適切でないものを一つ選びなさい。

A. XMLでは自分でタグが定義できます。

B. XMLは、ウェブ・ブラウザのためではなく、意味データを表すための言語です。

C. XMLドキュメントを作成するとき、文字 < は %3c に書き換えます。

D. XMLドキュメントの要素は木構造を作ります。

問20. 次のXMLドキュメントのうち、整形式（well-formed）であるものを一つ選びなさい。

A. <month>July</month><day>16</day><year>2004</year>

B. <date><month>July</month><day>16</day><year>2004</year></date>

C. <date><month>July<day>16<year>2004</date>

D. July 16 2004

12.5 レポート課題

今日の演習12の解答をkonishi@twcu.ac.jpあてにメールで送ってください。メールには、学生番号、氏名、科目名、授業の日付け（7/9）を明記してください。

[小西ホームページ] [目次・索引] [前の授業] [次の授業]