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

コンピュータIIE(HTML入門)第8回

目次 索引
8.1 スタイルシートの応用
8.1.1 class属性
8.1.2 div要素とspan要素
8.1.3 style属性
8.1.4 スタイルの優先順位
8.1.5 スタイルシート・ファイル
8.1.6 枠のプロパティ
8.2 演習8
8.3 レポート課題
border-colorプロパティ  border-styleプロパティ  border-widthプロパティ  class属性  divタグ  margin-bottomプロパティ  margin-leftプロパティ  margin-rightプロパティ  margin-topプロパティ  padding-bottomプロパティ  padding-leftプロパティ  padding-rightプロパティ  padding-topプロパティ  spanタグ  style属性  インライン要素  クラス  セレクタ  パディング  ブロックレベル要素  ボーダー  マージン 

8.1 スタイルシートの応用

8.1.1 class属性

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

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

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>

は、 class 属性を使って

<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> で囲みます。

最後に、スタイルシートに

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

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

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

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

8.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>

8.1.3 style属性

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

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

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

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

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

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

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

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

8.1.5 スタイルシート・ファイル

今までは、スタイルシートを <style> タグの中に書いてきました。 スタイルシートは、別のファイルに格納できます。 つまり、スタイルシートだけのファイルを作成し、それをHTMLキュメントから読み込むのです。

スタイルシート・ファイルの拡張子はcssです。 このファイルをHTMLドキュメントから読み込むには、 <link> タグを用います。 このタグに終了タグはありません。 スタイルシート・ファイルが filename .cssの場合、 <head></head> の中に

<link rel="stylesheet" type="text/css" href=" filename .css">

と書きます。

例えば、

<html>
<head>
<title>citizens' courses</title>
<style>
<!--
h1 {color: red}
p {color: green}
-->
</style>
</head>
<body>
<h1>市民講座のご案内</h1>
<p>今年も市民講座が開催されます。</p>
</body>
</html>

これは、スタイルシート・ファイル

style01.css
h1 {color: red}
p {color: green}

とHTMLドキュメント

<html>
<head>
<title>citizens' courses</title>
<link rel="stylesheet" type="text/css" href="style01.css">
</head>
<body>
<h1>市民講座のご案内</h1>
<p>今年も市民講座が開催されます。</p>
</body>
</html>

に分けられます。

スタイルシート・ファイルを利用すれば、複数のホームページの見栄えが統一できます。 同じスタイルシート・ファイルを、それぞれのHTMLドキュメントから読み込めばよいのです。

8.1.6 枠のプロパティ

CSSでは、見出しや段落などほとんどの要素に対して、それが長方形の(透明な)枠の中に配置されると考えます。 この枠は、

から構成されます。 これらのイメージは次の通りです。

+-------------------------+
|margin                   |
|  +-------------------+  |
|  |border             |  |
|  |  +-------------+  |  |
|  |  |padding      |  |  |
|  |  |  +-------+  |  |  |
|  |  |  |       |  |  |  |
|  |  |  +-------+  |  |  |
|  |  |             |  |  |
|  |  +-------------+  |  |
|  |                   |  |
|  +-------------------+  |
|                         |
+-------------------------+

例えば、 <blockquote> タグを使って引用を表した場合、表示では左右に余白が設けられました。 この余白がマージンになります。

border-widthプロパティ

border-widthプロパティ は、ボーダーの太さを指定します。 thinthick などのキーワードの他に、 1px などの長さでも指定できます。

表 8.1  ボーダーの太さ
プロパティと値 種類
border-width: thin 細い
border-width: medium 普通
border-width: thick 太い
border-width: 1px 1ピクセル

border-colorプロパティ

border-colorプロパティ は、ボーダーの色を指定します。 上記のカラー・ネームを用いるのがよいでしょう。

border-styleプロパティ

border-styleプロパティ は、ボーダーの種類を指定します。

表 8.2  ボーダーの種類
プロパティと値 種類
border-style: none なし
border-style: solid 実線
例 8.2 
<h2 style="color: white;
           background-color: teal;
           border-width: thick;
           border-color: olive;
           border-style: solid">
講演スケジュール
</h2>
講演スケジュール

margin-topプロパティ

margin-topプロパティ は、上のマージンを指定します。 この値を 32px にしますと、上に32ピクセルのマージンが確保されます。

margin-rightプロパティ

margin-rightプロパティ は、右のマージンを指定します。 この値を 32px にしますと、右に32ピクセルのマージンが確保されます。

margin-bottomプロパティ

margin-bottomプロパティ は、下のマージンを指定します。 この値を 32px にしますと、下に32ピクセルのマージンが確保されます。

margin-leftプロパティ

margin-leftプロパティ は、左のマージンを指定します。 この値を 32px にしますと、左に32ピクセルのマージンが確保されます。

例 8.3 
<h2 style="color: white;
           background-color: teal;
           border-width: thick;
           border-color: olive;
           border-style: solid;
           margin-left: 64px;
           margin-right: 64px">
講演スケジュール
</h2>
講演スケジュール

padding-topプロパティ

padding-topプロパティ は、上のパディングを指定します。 この値を 32px にしますと、上に32ピクセルのパディングが確保されます。

padding-rightプロパティ

padding-rightプロパティ は、右のパディングを指定します。 この値を 32px にしますと、右に32ピクセルのパディングが確保されます。

padding-bottomプロパティ

padding-bottomプロパティ は、下のパディングを指定します。 この値を 32px にしますと、下に32ピクセルのパディングが確保されます。

padding-leftプロパティ

padding-leftプロパティ は、左のパディングを指定します。 この値を 32px にしますと、左に32ピクセルのパディングが確保されます。

例 8.4 
<h2 style="color: white;
           background-color: teal;
           border-width: thick;
           border-color: olive;
           border-style: solid;
           margin-left: 64px;
           margin-right: 64px;
           padding-top: 32px;
           padding-bottom: 32px">
講演スケジュール
</h2>
講演スケジュール

8.2 演習8

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

例 8.5 
演習8(文献リスト)

1. 片山恭一 : 世界の中心で、愛をさけぶ , 小学館 , 2001 .
2. 養老孟司 : バカの壁 , 新潮社 , 2003 .
3. 綿矢りさ : 蹴りたい背中 , 河出書房新社 , 2003 .

余力のある人は、スタイルシート・ファイルを利用してください。


8.3 レポート課題

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


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

2004年6月11日更新
konishi@twcu.ac.jp
Copyright (C) 2004 Zenjiro Konishi. All rights reserved.