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

情報処理IIA(HTML入門)第5回

目次 索引
5.1 style要素
5.1.1 スタイルの規則
5.1.2 class属性
5.1.3 div要素とspan要素
5.1.4 スタイルの優先順位
5.2 演習5
5.3 レポート課題
class属性  <div>  <span>  <style>  インライン要素  クラス  セレクタ  ブロックレベル要素 

5.1 style要素

5.1.1 スタイルの規則

前回は、 style 属性を使いました。 style 属性では、タグで囲まれた範囲にしかスタイルを指定できません。

ドキュメント全体に対して規則的にスタイルを指定するには <style> タグを用います。 <style> タグは次の雛形に従ってください。

<html>
<head>
<title>some title...</title>
<style type="text/css">
<!--
tag {property: value; ...}
tag2 {property2: value2; ...}
...
-->
</style>
</head>
<body>
document body ...
</body>
</html>

この雛形の要点は次の通りです。

まず、 <style> タグはドキュメントのヘッダに書きます。 type 属性によってスタイルシートがCSSであることを明示します。 要素名( <h1> タグなら h1 )に続けてブレース( {} )を書き、ブレース内にプロパティとその値を書きます。

スタイルシートを理解しないブラウザは、 style 要素の内容を表示するかもしれません。 そこで、内容を <!----> で囲んで、そのようなブラウザにはコメントと思わせます。 スタイルシートを理解するブラウザは、この事情を知っていますので、 <style></style> 内の <!----> を無視します。

style 属性によるスタイル指定では、ひとつひとつのタグに

<tag style="property: value; ...">...</tag>
...
<tag style="property: value; ...">...</tag>

などと書いていましたが、 <style> タグを使いますとこれらが一つにまとめられ、単に

<tag>...</tag>
...
<tag>...</tag>

でよくなります。 style 要素の内容はスタイルの規則を定めています。 これがスタイルシートです。

例えば、次のようなホームページを書くことします。

登録内容が正しければ、 を押してください。 登録を取り消す場合は、 を押してください。

ボタン(キー入力)は赤という規則です。 style 属性を使ってHTMLドキュメントを書きますと、

<html>
<head>
<title>Registration</title>
</head>
<body>
<p>
登録内容が正しければ、
<kbd style="color: red">1</kbd>
と
<kbd style="color: red">#</kbd>
を押してください。
登録を取り消す場合は、
<kbd style="color: red">3</kbd>
と
<kbd style="color: red">#</kbd>
を押してください。
</p>
</body>
</html>

となりますが、 <style> タグを利用しますと、以下のように書けます。

<html>
<head>
<title>Registration</title>
<style type="text/css">
<!--
kbd {color: red}
-->
</style>
</head>
<body>
<p>
登録内容が正しければ、
<kbd>1</kbd>
と
<kbd>#</kbd>
を押してください。
登録を取り消す場合は、
<kbd>3</kbd>
と
<kbd>#</kbd>
を押してください。
</p>
</body>
</html>

5.1.2 class属性

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

例えば、次のようなホームページを書くことにします。

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

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

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

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

質問文は緑、回答文は赤です。 質問文と回答文はともに段落ですので、 <p> タグを使って表そうと考えます。

これまでのスタイルシートでは、スタイルを変更しますと、質問文も回答文も「規則的に」同じ見栄えになります。 確かに同じ「段落」ですが、質問文と回答文が区別しにくいのでは、スタイルシートを使う気になれません。 では、どうしたらよいでしょうか。 別のタグを使うというのは本末転倒です。 「段落」という情報がなくなりますし、HTMLのタグもそれほど多く種類はありません。 かといって、一つ一つ style 属性を書いたのでは、文書の内容に集中できなくなります。

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

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

は、 class 属性を使って

<html>
<head>
<title>Questions and answers</title>
<style type="text/css">
<!--
p.question {color: green}
p.answer {color: red}
-->
</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> で囲みます。

最後に、 style 要素の内容に

tag.class {property: value; ...}

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

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

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

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

5.1.4 スタイルの優先順位

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

<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 属性を使います。


5.2 演習5

「私の好きな場所」というホームページを作成します。 はじめに、美術館などの公共施設や書店などの商業施設を例にならって3か所選び、その場所の最寄り駅と簡単な説明文を考えてください。

私の好きな場所

井の頭公園

(吉祥寺駅から徒歩10分) 天気のよい日はお弁当を作ってここで食べる。

武蔵野市立中央図書館

(三鷹駅から徒歩15分) 普通の本は大学の図書館よりもここで探す。

京王百貨店

(新宿駅に隣接) 何となく行くが、何も買わずに帰ることがよくある。

作成するホームページは、場所の名前(クラス名 place )を中央に揃え、最寄り駅(クラス名 access )を青で書くという規則に従うことにします。 そこで、場所の名前を <h2 class="place"></h2> で囲み、最寄り駅を <span class="access"></span> で囲んだHTMLドキュメントを用意してください。

<html>
<head>
<title>My favorite places</title>
<style type="text/css">
<!--

   ???

-->
</style>
</head>
<body>
<h1>私の好きな場所</h1>
<h2 class="place">井の頭公園</h2>
<p>
<span class="access">(吉祥寺駅から徒歩10分)</span>
天気のよい日はお弁当を作ってここで食べる。
</p>
<h2 class="place">武蔵野市立中央図書館</h2>
<p>
<span class="access">(三鷹駅から徒歩15分)</span>
普通の本は大学の図書館よりもここで探す。
</p>
<h2 class="place">京王百貨店</h2>
<p>
<span class="access">(新宿駅に隣接)</span>
何となく行くが、何も買わずに帰ることがよくある。
</p>
</body>
</html>

最後に、前述の規則(場所の名前を中央に揃え、最寄り駅を青で書く)を表す適切なスタイルシートを???の部分に書き、規則に従ったホームページになるようにしてください。 style 属性を追加したり、 <font> タグや <center> タグを使うのは反則とします。


5.3 レポート課題

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


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

2002年5月16日更新
konishi@twcu.ac.jp
Copyright (C) 2002 Zenjiro Konishi. All rights reserved.