Information Processing IIA

スタイルシートによって、ドキュメントに規則的なスタイルの指定ができることが分かりました。しかし、タグの種類ごとにスタイルの指定をするのでは、不便な場合が多いのです。

目次	索引
12.1 スタイルシートの応用 12.1.1 class属性 12.1.2 div要素とspan要素 12.1.3 style属性 12.1.4 スタイルの優先順位 12.2 試験について 12.3 成績評価について 12.4 演習12 12.5 レポート課題	class属性 divタグ spanタグ style属性インライン要素クラスセレクタブロックレベル要素

Q1 ユーザー登録をする必要はありますか。

A1 ユーザー登録をして頂きますと、弊社より最新の製品情報をお知らせ致します。

Q2 CD-ROMが2枚入っていますが、どちらを使えばいいのですか。

A2 小売店で最新版のCD-ROMを追加することがあります。新しいバージョンのCD-ROMをお使いください。

質問文は緑、回答文は赤です。質問文と回答文はともに段落ですので、 <p> タグを使って表そうと考えます。これまでのスタイルシートでは、スタイルを変更しますと、質問文も回答文も「規則的に」同じ見栄えになります。確かに同じ「段落」ですが、質問文と回答文が区別しにくいのでは、スタイルシートを使う気になれません。

では、どうしたらよいでしょうか。別のタグを使うというのは本末転倒です。「段落」という情報がなくなりますし、HTMLのタグもそれほど多く種類はありません。かといって、一つ一つ <font> タグで囲んだのでは、文書の内容に集中できなくなります。

class属性を用いますと、この問題が解決できます。 <font> タグを使って書いたHTMLドキュメント

<p>
<font color="green">
Q1 ユーザー登録をする必要はありますか。
</font>
</p>
<p>
<font color="red">
A1 ユーザー登録をして頂きますと、
弊社より最新の製品情報をお知らせ致します。
</font>
</p>
<p>
<font color="green">
Q2 CD-ROMが2枚入っていますが、
どちらを使えばいいのですか。
</font>
</p>
<p>
<font color="red">
A2 小売店で最新版のCD-ROMを追加することがあります。
新しいバージョンのCD-ROMをお使いください。
</font>
</p>

<html>
<head>
<title>Questions and answers</title>
<style type="text/css">
<!--
p.answer {color: red}
p.question {color: green}
-->
</style>
</head>
<body>
<p class="question">
Q1 ユーザー登録をする必要はありますか。
</p>
<p class="answer">
A1 ユーザー登録をして頂きますと、
弊社より最新の製品情報をお知らせ致します。
</p>
<p class="question">
Q2 CD-ROMが2枚入っていますが、
どちらを使えばいいのですか。
</p>
<p class="answer">
A2 小売店で最新版のCD-ROMを追加することがあります。
新しいバージョンのCD-ROMをお使いください。
</p>
</body>
</html>

class 属性を利用するためには、まずクラスの名前を決めます。 クラス （ class ）とは、タグの種類の細分です。上記の例では、質問文の段落ということで question という名前にし、回答文の段落というこで answer という名前にしています。クラスの名前はかなり自由に決められますが、英字から始まる英数字の並びが安全です。

次に、タグを < tag class=" class "> 〜 </ tag > という形に置き換えます。ここで、 class はクラスの名前です。上の例では、質問文を <p class="question"> 〜 </p> で囲み、回答文を <p class="answer"> 〜 </p> で囲みます。

を追加します。これによって、質問文が緑で統一され、回答文が赤で統一されます。

class 属性を用いますと、タグの種類の限界を越えて、より木目細かく見栄えの規則が定められるのです。

なお、スタイルシートの tag . class のような部分は、 セレクタ （ selector ）とよばれます。セレクタには tag や tag . class の他にも色々な形式があり、これによってスタイルシートをコンパクトにまとめたり、より柔軟な規則を作り出したりします。

12.1.2 div要素とspan要素

前の小節で、クラスがタグの種類の細分であることが分かりました。質問文や回答文を表したければ、それらを段落に分類し、 <p> タグを使うということです。

しかし、これまでのタグでは分類しにくいクラスも考えられます。例えば、電話番号を赤で書くという規則を設けたいとします。クラスの名前は telephone でよいでしょう。 telephone クラスはどのタグに分類できるでしょうか。強調でもありませんし、キー入力でもありません。

このような、分類しにくいクラスを分類させる目的で、HTMLには <div> タグと <span> タグが用意されています。 <div> タグは、字を位置揃えするタグとして、以前紹介しました。クラスを分類させる役割も果たしています。

<div> タグは、（分類しにくい）ブロックレベル要素に使い、 <span> タグは、（分類しにくい）インライン要素に使います。ここで、 ブロックレベル要素 （ block-level element ）とは、見出しや段落などのように、前後と独立して表示される要素で、 インライン要素 （ inline element ）とは、強調などのように、前後と独立しないで表示される要素です。

お問い合わせ先 ■ 東京サービスセンター 03-XXXX-XXXX ■ 大阪サービスセンター 06-XXXX-XXXX ■ 福岡サービスセンター 092-XXX-XXXX

事務所の名前が赤、電話番号が緑という規則です。事務所の名前のクラス名を office とし、電話番号のクラス名を telephone とします。 office も、 telephone も、分類しにくいクラスです。これらは、前後と独立しないで表示しますので、インライン要素です。従って、 <span> タグを使います。

<html>
<head>
<title>Service centers</title>
<style type="text/css">
<!--
span.office {color: red}
span.telephone {color: green}
-->
</style>
</head>
<body>
<p>
お問い合わせ先
■
<span class="office">東京サービスセンター</span>
<span class="telephone">03-XXXX-XXXX</span>
■
<span class="office">大阪サービスセンター</span>
<span class="telephone">06-XXXX-XXXX</span>
■
<span class="office">福岡サービスセンター</span>
<span class="telephone">092-XXX-XXXX</span>
</p>
</body>
</html>

ブロックレベル要素の例として、次のようなホームページを考えます。

主催者の名前を緑で書き、右に揃えるという規則です。主催者の名前のクラス名を organizer とします。やはり分類しにくいクラスです。前後と独立して表示しますので、これはブロックレベル要素です。従って、 <div> タグを使います。

<html>
<head>
<title>citizens' courses</title>
<style type="text/css">
<!--
div.organizer {color: green; text-align: right}
h1 {text-align: center}
-->
</style>
</head>
<body>
<h1>市民講座のご案内</h1>
<div class="organizer">
○○市教育委員会
</div>
<div class="organizer">
○○大学生涯学習センター
</div>
</body>
</html>

12.1.3 style属性

スタイルシートに関係するものとして、 style属性を紹介します。タグに style 属性を書きますと、その範囲内に限りスタイルが指定されます。スタイルの規則は作っていませんので、これをスタイルシートとはよびません。 style 属性は、例外的な要素に対してスタイルを指定するとき役立ちます。

style 属性はほとんどすべてのタグで使えます。書式は次の通りです。

<tag style="property: value"> 〜 </tag>

ここで、 property はプロパティの名前です。プロパティが2つあるときは、

<tag style="property1: value1; property2: value2"> 〜 </tag>

と、セミコロンで区切って書きます。 3つ以上でも同様です。

<h3 style="color: red; text-align: center">
交通機関について
</h3>

12.1.4 スタイルの優先順位

これまで、スタイルシート、 class 属性、 style 属性などを紹介してきました。これらを一度に使うとどうなるでしょうか。例えば、

<html>
<head>
<title>Precedence test</title>
<style type="text/css">
<!--
p {color: red}
p.test {color: green}
-->
</style>
</head>
<body>
<p>赤で書かれる。</p>
<p class="test">緑で書かれる。</p>
<p class="test" style="color: blue">青で書かれる。</p>
</body>
</html>

このHTMLドキュメントを表示しますと、次のようになります。

スタイルシートには、スタイルの指定が同時に実現できない場合、より特定的な指定を優先するという原則があります。上記の例ですと、2行目には赤で書く指定と緑で書く指定がされています。同時にはできませんので、セレクタ p より特定的な p.test が優先されて、緑になります。 3行目には赤で書く、緑で書く、そして青で書くという指定がされています。もちろん同時にはできませんので、最も特定的である style 属性が優先されて、青になります。

このメカニズムに基づいた、スタイルシートの設計方針は次のようになります。まず、全般的な規則をタグの一つ一つに定めます。次に、タグの細かな分類が必要になりましたら、 class 属性を用います。最後に、例外的な要素に対して、 style 属性を使います。

12.2 試験について

次回（7/3）の授業では試験を行います。これまでの演習問題をよく復習しておいてください。なお、演習問題の正解は次の通りです。

12.3 成績評価について

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

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

12.4 演習12

文献リストのホームページを作成してください。以下の例を参考にして、知っている本の中から3冊を選び、その著者名、書名、出版社名、発行年を書いてください。（出版社名や発行年が分からなければ、"???"などとしてください。）このページのスタイルは、次の指示に従ってください。

演習12（文献リスト）

1. 青島幸男 : 人間万事塞翁が丙午 , 新潮社 , 1981 .

2. 石原慎太郎 : 太陽の季節 , 新潮社 , 1956 .

3. 田中康夫 : なんとなく、クリスタル , 新潮社 , 1985 .

12.5 レポート課題

今日の演習12に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。メールには、学生番号、氏名、科目名、授業の日付け（6/26）を明記してください。

情報処理IIA（HTML入門）第12回