目次 | 索引 |
---|---|
スタイルシートによって、ドキュメントに規則的なスタイルの指定ができることが分かりました。 しかし、タグの種類ごとにスタイルの指定をするのでは、不便な場合が多いのです。
例えば、次のようなホームページを書くことにします。
質問文は緑、回答文は赤です。
質問文と回答文はともに段落ですので、
<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
)とよばれます。
セレクタには
tag
や
tag
.
class
の他にも色々な形式があり、これによってスタイルシートをコンパクトにまとめたり、より柔軟な規則を作り出したりします。
前の小節で、クラスがタグの種類の細分であることが分かりました。
質問文や回答文を表したければ、それらを段落に分類し、
<p>
タグを使うということです。
しかし、これまでのタグでは分類しにくいクラスも考えられます。
例えば、電話番号を緑で書くという規則を設けたいとします。
クラスの名前は
telephone
でよいでしょう。
telephone
クラスはどのタグに分類できるでしょうか。
強調でもありませんし、キー入力でもありません。
このような、分類しにくいクラスを分類させる目的で、HTMLには
<div>
タグと
<span>
タグが用意されています。
<div>
タグは、字を位置揃えするタグとして、以前紹介しました。
クラスを分類させる役割も果たしています。
<div>
タグは、(分類しにくい)ブロックレベル要素に使い、
<span>
タグは、(分類しにくい)インライン要素に使います。
ここで、
ブロックレベル要素
(
block-level element
)とは、見出しや段落などのように、前後と独立して表示される要素で、
インライン要素
(
inline element
)とは、強調などのように、前後と独立しないで表示される要素です。
例えば、次のようなホームページを書くことにします。
事務所の名前が赤、電話番号が緑という規則です。
事務所の名前のクラス名を
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>
スタイルシートに関係するものとして、
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
属性などを紹介してきました。
これらを一度に使うとどうなるでしょうか。
例えば、
<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
属性を使います。
今までは、スタイルシートを
<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>
これは、スタイルシート・ファイル
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ドキュメントから読み込めばよいのです。
CSSでは、見出しや段落などほとんどの要素に対して、それが長方形の(透明な)枠の中に配置されると考えます。 この枠は、
から構成されます。 これらのイメージは次の通りです。
+-------------------------+ |margin | | +-------------------+ | | |border | | | | +-------------+ | | | | |padding | | | | | | +-------+ | | | | | | | | | | | | | | +-------+ | | | | | | | | | | | +-------------+ | | | | | | | +-------------------+ | | | +-------------------------+
例えば、
<blockquote>
タグを使って引用を表した場合、表示では左右に余白が設けられました。
この余白がマージンになります。
border-width
プロパティ
は、ボーダーの太さを指定します。
thin
や
thick
などのキーワードの他に、
1px
などの長さでも指定できます。
プロパティと値 | 種類 |
---|---|
border-width: thin |
細い |
border-width: medium |
普通 |
border-width: thick |
太い |
border-width: 1px |
1ピクセル |
border-color
プロパティ
は、ボーダーの色を指定します。
上記のカラー・ネームを用いるのがよいでしょう。
border-style
プロパティ
は、ボーダーの種類を指定します。
プロパティと値 | 種類 |
---|---|
border-style: none |
なし |
border-style: solid |
実線 |
<h2 style="color: white; background-color: teal; border-width: thick; border-color: olive; border-style: solid"> 講演スケジュール </h2>
margin-top
プロパティ
は、上のマージンを指定します。
この値を
32px
にしますと、上に32ピクセルのマージンが確保されます。
margin-right
プロパティ
は、右のマージンを指定します。
この値を
32px
にしますと、右に32ピクセルのマージンが確保されます。
margin-bottom
プロパティ
は、下のマージンを指定します。
この値を
32px
にしますと、下に32ピクセルのマージンが確保されます。
margin-left
プロパティ
は、左のマージンを指定します。
この値を
32px
にしますと、左に32ピクセルのマージンが確保されます。
<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
プロパティ
は、上のパディングを指定します。
この値を
32px
にしますと、上に32ピクセルのパディングが確保されます。
padding-right
プロパティ
は、右のパディングを指定します。
この値を
32px
にしますと、右に32ピクセルのパディングが確保されます。
padding-bottom
プロパティ
は、下のパディングを指定します。
この値を
32px
にしますと、下に32ピクセルのパディングが確保されます。
padding-left
プロパティ
は、左のパディングを指定します。
この値を
32px
にしますと、左に32ピクセルのパディングが確保されます。
<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>
文献リストのホームページを作成してください。 以下の例を参考にして、知っている本の中から3冊を選び、その著者名、書名、出版社名、発行年を書いてください。 (出版社名や発行年が分からなければ、"???"などとしてください。) このページのスタイルは、次の指示に従ってください。
<span>
タグを用い、
class
属性の値を
author
とする。
<span>
タグを用い、
class
属性の値を
title
とする。
<span>
タグを用い、
class
属性の値を
publisher
とする。
<span>
タグを用い、
class
属性の値を
year
とする。
<font>
タグや
style
属性は使用禁止。
余力のある人は、スタイルシート・ファイルを利用してください。
今日の演習8に従ってホームページを作成し、そのURLをkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(6/11)を明記してください。