スタイルシートによって、ウェブ・ページのデザインを統一できることが分かりました。 しかし、タグの種類ごとにスタイルの指定をするのでは、不便な場合が多いのです。
例えば、次のようなウェブ・ページを書くことにします。
質問文は緑、回答文は赤です。
質問文と回答文はともに段落なので、
<P>
タグを使って表そうと考えます。
これまでのスタイルシートでは、スタイルを変更すると、質問文も回答文も「規則的に」同じスタイルになります。
確かに同じ「段落」ですが、質問文と回答文が区別しにくいのでは、スタイルシートを使う気になれません。
では、どうしたらよいでしょうか。 別のタグを使うというのは本末転倒です。 「段落」という情報がなくなりますし、HTMLのタグもそれほど多く種類はありません。
class属性
を用いると、この問題が解決できます。
具体的には、
class
属性を使って
<HEAD>
<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>
となります。
class
属性を利用するためには、まずクラスの名前を決めます。
クラス
（
class
）とは、タグの種類の細分です。
上記の例では、質問文の段落ということで
question
という名前にし、回答文の段落というこで
answer
という名前にしています。
クラスの名前はかなり自由に決められますが、英字から始まる英数字の並びが安全です。
次に、タグを
<
tag
class="
class
">
〜
</
tag
>
という形に置き換えます。
ここで、
class
はクラスの名前です。
上の例では、質問文を
<P class="question">
〜
</P>
で囲み、回答文を
<P class="answer">
〜
</P>
で囲みます。
最後に、スタイルシートに
tag.class {property: value; ...}
を追加します。 これによって、質問文が緑で統一され、回答文が赤で統一されます。
class
属性を用いると、タグの種類の限界を越えて、よりきめ細かくスタイルの規則が定められるのです。
なお、スタイルシートの
tag
.
class
のような部分は、
セレクタ
（
selector
）とよばれます。
セレクタには
tag
や
tag
.
class
の他にも色々な形式があり、これによってスタイルシートをコンパクトにまとめたり、より柔軟な規則を作り出したりします。
前節で、クラスがタグの種類の細分であることが分かりました。
質問文や回答文を表したければ、それらを段落に分類し、
<P>
タグを使うということです。
しかし、これまでのタグでは分類しにくいクラスも考えられます。
例えば、電話番号を緑で書くという規則を設けたいとします。
クラスの名前は
telephone
でよいでしょう。
telephone
クラスはどのタグに分類できるでしょうか。
強調でもありませんし、キー入力でもありません。
このような、分類しにくいクラスを分類させる目的で、HTMLには
<DIV>
タグと
<SPAN>
タグが用意されています。
<DIV>
タグは、（分類しにくい）ブロックレベル要素に使い、
<SPAN>
タグは、（分類しにくい）インライン要素に使います。
ここで、
ブロックレベル要素
（
block-level element
）とは、見出しや段落などのように、前後に改行が入る要素で、
インライン要素
（
inline element
）とは、強調などのように、前後に改行が入らない要素です。
例えば、次のようなウェブ・ページを書くことにします。
事務所の名前が赤、電話番号が緑という規則です。
事務所の名前のクラス名を
office
とし、電話番号のクラス名を
telephone
とします。
office
も、
telephone
も、分類しにくいクラスです。
これらは、前後に改行が入りませんので、インライン要素です。
従って、
<SPAN>
タグを使います。
<HEAD>
<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>
ブロックレベル要素の例として、次のようなウェブ・ページを考えます。
主催者の名前を緑で書き、右に揃えるという規則です。
主催者の名前のクラス名を
organizer
とします。
やはり分類しにくいクラスです。
前後に改行が入りますので、これはブロックレベル要素です。
従って、
<DIV>
タグを使います。
<HEAD>
<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>
スタイルシートに関係するものとして、
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>
これまで、スタイルシート、
class
属性、
style
属性などを紹介してきました。
これらを一度に使うとどうなるでしょうか。
例えば、
<HEAD>
<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ファイルを表示すると、次のようになります。
スタイルシートには、スタイルの指定が同時に実現できない場合、より特定的な指定を優先するという原則があります。
上記の例ですと、2行目には赤で書く指定と緑で書く指定がされています。
同時にはできませんので、セレクタ
P
より特定的な
P.test
が優先されて、緑になります。
3行目には赤で書く、緑で書く、そして青で書くという指定がされています。
もちろん同時にはできませんので、最も特定的である
style
属性が優先されて、青になります。
このメカニズムに基づいた、スタイルシートの設計方針は次のようになります。
まず、全般的な規則をタグの一つ一つに定めます。
次に、タグの細かな分類が必要になったら、
class
属性を用います。
最後に、例外的な要素に対して、
style
属性を使います。
今までは、スタイルシートを
<STYLE>
タグの中に書いてきました。
スタイルシートは、別のファイルに格納できます。
つまり、スタイルシートだけのファイル（CSSファイル）を作成し、それをHTMLファイルから読み込むのです。
CSSファイルの拡張子はcssです。
CSSファイルをHTMLファイルから読み込むには、
<LINK>
タグを用います。
このタグに終了タグはありません。
CSSファイルが
filename
.cssの場合、
<HEAD>
〜
</HEAD>
の中に
<LINK rel="stylesheet" type="text/css" href="filename.css">
と書きます。
例えば、
<HEAD>
<STYLE>
H1 {color: red}
P {color: green}
</STYLE>
</HEAD>
<BODY>
<H1>市民講座のご案内</H1>
<P>今年も市民講座が開催されます。</P>
</BODY>
これは、CSSファイル
H1 {color: red}
P {color: green}
とHTMLファイル
<HEAD> <LINK rel="stylesheet" type="text/css" href="style01.css"> </HEAD> <BODY> <H1>市民講座のご案内</H1> <P>今年も市民講座が開催されます。</P> </BODY>
に分けられます。
CSSファイルを利用すれば、複数のウェブ・ページのデザインが統一できます。 同じCSSファイルを、それぞれのHTMLファイルから読み込めばよいのです。
文献リストのウェブ・ページを作成してください。 以下の例を参考にして、知っている本の中から3冊を選び、その著者名、書名、出版社名、発行年を書いてください。 （出版社名や発行年が分からなければ、"???"などとしてください。） このページのスタイルは、次の指示に従ってください。
<SPAN>
タグを用い、
class
属性の値を
author
とする。
<SPAN>
タグを用い、
class
属性の値を
title
とする。
<SPAN>
タグを用い、
class
属性の値を
publisher
とする。
<SPAN>
タグを用い、
class
属性の値を
year
とする。
style
属性は使用禁止。
ファイル名は、report11.htmlとしてください。
今日の演習11の答案（URL）をメールで提出してください。 差出人は学内のメール・アドレス（b08a001@cis.twcu.ac.jpなど）とし、宛先はkonishi@cis.twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（12月12日）を明記してください。