以前紹介した
<center>
タグや
<font>
タグを用いると、見栄えのよいホームページが書けそうです。
しかし、規格では、これらのタグは使わないようにと指示されています。
その理由は、ホームページの作者は文書の内容に集中すべきであって、どのように表示されるかは気にしないほうがよいと考えているからです。
この「気にしない」は、見栄えはどうでもよいということではありません。
個々の表示に気を配るのではなく、見栄えに規則性を持たせ、その規則を利用しなさいということです。
スタイルシート ( style sheet )とは、見栄えの規則を表すのものです。 スタイルシートを用いますと、一つのホームページだけでなく、複数のホームページに対しても見栄えを統一できます。 HTMLでは、 カスケーディングスタイルシート ( Cascading Style Sheets , 以下 CSS )が利用できます。 この授業ではCSSを紹介します。
例として、「強く強調する部分は(ボールド体ではなく)赤で書く」という規則に従ってホームページを書くことにします。
<font>
タグを使って強く強調するのが取りあえず簡単です。
<p> 本製品を取り付けるときには、 <font color="red"> 必ずパソコン本体の電源をお切りください。 </font> パソコンの内部には高電圧の部品が使われており、 <font color="red"> 触ると危険です。 </font> </p>
しかし、他人が(そして将来の自分が)このHTMLドキュメントを読むと、なぜ赤で書くのかがよく分かりません。
強く強調していることを示すためには、
<strong>
タグを使うべきです。
<p> 本製品を取り付けるときには、 <strong> <font color="red"> 必ずパソコン本体の電源をお切りください。 </font> </strong> パソコンの内部には高電圧の部品が使われており、 <strong> <font color="red"> 触ると危険です。 </font> </strong> </p>
赤くはなりますが、ボールド体にするという規則にも従ってしまいます。
しかし、それ以上に問題なのは、いつも
<strong>
タグと
<font>
タグを組み合わせるという規則を、作者が覚えておかなくてはいけないことです。
ここでスタイルシートの出番です。
CSSでは、「
<strong>
タグの部分をボールド体ではなく赤で書く」という規則を
strong {font-weight: normal; color: red}
と書き表します。
そして、これを
<style>
タグで囲みます。
<html> <head> <title>Important notes</title> <style type="text/css"> <!-- strong {font-weight: normal; color: red} --> </style> </head> <body> <p> 本製品を取り付けるときには、 <strong> 必ずパソコン本体の電源をお切りください。 </strong> パソコンの内部には高電圧の部品が使われており、 <strong> 触ると危険です。 </strong> </p> </body> </html>
スタイルシートを用いますと、ホームページの作者は、「強く強調する部分は(ボールド体ではなく)赤で書く」という規則を忘れて、文書の内容に集中できるのです。
CSSがどの程度利用できるかは、WWWブラウザによって大きく異なります。
Netscape 4.xはCSSの一部に対応しています。 色を変えたりする機能はうまく働きますが、長さを変えたりしますと、表示がおかしくなることがあります。 CSSそのものの学習にはあまり向いていません。 ただし、いくらCSSを使ったとしましても、Netscape 4.xで全く読めないようなホームページは勧められません。 Netscape 4.xでも内容が伝わるかどうか、確かめるようにしてください。
情報処理センターでは、Netscape 4.xの他にMozillaが利用できます。 Mozilla とは、Netacape 4.xの後継版を目的にして開発されたWWWブラウザです。 MozillaはCSSに対応しています。 おそらく、現時点では最もよいCSSブラウザです。 CSSを勉強したければ、Mozillaを使うのがよいでしょう。
スタイルシートの書式は、
tag {property: value}
が基本です。 ここで、 property はプロパティの名前です。 プロパティ ( property )とは、テキストの色やフォントの大きさなど、見栄えに関する性質です。 CSSには数十種類のプロパティが定義されています。 この書式は、プロパティ property の値を value にするという意味です。
プロパティが2つあるときは、
tag {property1: value1; property2: value2}
と、セミコロンで区切って書きます。 3つ以上でも同様です。
HTMLドキュメントの中でスタイルシートを指定するには
<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であることを明示します。
スタイルシートを理解しないブラウザは、
style
要素の内容を表示するかもしれません。
そこで、内容を
<!--
と
-->
で囲んで、そのようなブラウザにはコメントと思わせます。
スタイルシートを理解するブラウザは、この事情を知っていますので、
<style>
〜
</style>
内の
<!--
と
-->
を無視します。
フォントに関するプロパティには、種類や傾き、太さ、大きさなどがあります。 システムに適切なフォントがなければ、指定は無視されます。
font-family
プロパティ
は、フォントの種類を指定します。
セリフとはアルファベットに付いている「ひげ」のことです。
サンセリフとはセリフなしという意味です。
プロパティと値 | 種類 | 例 |
---|---|---|
font-family: serif |
ローマン体 | Good afternoon! |
font-family: sans-serif |
サンセリフ体 | Good afternoon! |
font-family: monospace |
タイプライタ体 | Good afternoon! |
font-style
プロパティ
は、フォントを傾けるかどうか指定します。
プロパティと値 | 傾き | 例 |
---|---|---|
font-style: normal |
傾けない | Good afternoon! |
font-style: italic |
イタリック体 | Good afternoon! |
font-weight
プロパティ
は、フォントの太さを指定します。
プロパティと値 | 太さ | 例 |
---|---|---|
font-weight: normal |
太くしない | Good afternoon! |
font-weight: bold |
ボールド体 | Good afternoon! |
<html> <head> <title>citizens' courses</title> <style type="text/css"> <!-- address {font-style: normal; font-weight: bold} --> </style> </head> <body> <address> 市民講座事務局 電話 03-XXXX-XXXX </address> </body> </html>
font-size
プロパティ
は、フォントの大きさを指定します。
large
や
small
などのキーワードの他に、
16px
など長さでも指定できます。
プロパティと値 | 大きさ | 例 |
---|---|---|
font-size: larger |
前後より大きめ | Good afternoon! |
font-size: smaller |
前後より小さめ | Good afternoon! |
font-size: xx-large |
非常に大きめ | |
font-size: x-large |
より大きめ | Good afternoon! |
font-size: large |
大きめ | Good afternoon! |
font-size: medium |
通常 | Good afternoon! |
font-size: small |
小さめ | Good afternoon! |
font-size: x-small |
より小さめ | Good afternoon! |
font-size: xx-small |
非常に小さめ | |
font-size: 16px |
16ピクセル | Good afternoon! |
色と背景に関するプロパティには、テキストの色、背景の色、背景画像などがあります。 色の指定は、キーワードを用いるのが簡単です。 一覧表を再掲します。
カラー・ネーム | 色 | 例 |
---|---|---|
aqua |
水色 | ■ |
black |
黒 | ■ |
blue |
青 | ■ |
fuchsia |
桃色 | ■ |
gray |
灰色 | ■ |
green |
緑 | ■ |
lime |
黄緑 | ■ |
maroon |
茶色 | ■ |
navy |
紺 | ■ |
olive |
黄土色 | ■ |
purple |
紫 | ■ |
red |
赤 | ■ |
silver |
銀色 | ■ |
teal |
深緑 | ■ |
white |
白 | ■ |
yellow |
黄色 | ■ |
color
プロパティ
は、テキストの色を指定します。
<body>
タグに指定しますと、これまでの
text
属性と同様に、テキスト全体がその色になります。
background-color
プロパティ
は、背景の色を指定します。
<body>
タグに指定しますと、これまでの
bgcolor
属性と同様に、ページ全体の背景がその色になります。
background-image
プロパティ
は、背景イメージを指定します。
このプロパティの値は、独特の形式を持ちます。
イメージ・ファイルのファイル名が
filename
であり、HTMLファイルとイメージ・ファイルが同じディレクトリにある場合、
background-image: url(filename)
と書きます。
<body>
タグに指定しますと、これまでの
background
属性と同様に、ページ全体にその背景イメージが用いられます。
<html> <head> <title>citizens' courses</title> <style type="text/css"> <!-- body {background-image: url(triangle.png)} h2 {color: green} --> </style> </head> <body> <h2>講演スケジュール</h2> </body> </html>
テキストに関するプロパティには、テキストの位置揃えや修飾などがあります。
text-align
プロパティ
は、テキストの位置揃えを指定します。
これまでの
align
属性に対応します。
<html> <head> <title>citizens' courses</title> <style type="text/css"> <!-- h1 {text-align: center} --> </style> </head> <body> <h1>市民講座のご案内</h1> </body> </html>
text-decoration
プロパティ
は、アンダーラインなどテキストの装飾を指定します。
プロパティと値 | 修飾 | 例 |
---|---|---|
text-decoration: none |
修飾しない | Good afternoon! |
text-decoration: underline |
アンダーライン | Good afternoon! |
text-decoration: overline |
オーバーライン | Good afternoon! |
text-decoration: line-through |
打ち消し線 | Good afternoon! |
text-decoration: blink |
点滅 | Good afternoon! |
<html> <head> <title>citizens' courses</title> <style type="text/css"> <!-- strong {text-decoration: underline} --> </style> </head> <body> <p> <strong> 入場無料 </strong> ですので、どなた様も気軽に参加してください。 </p> </body> </html>
vertical-align
プロパティ
は、垂直方向の位置揃えを指定します。
これまでの
valign
属性に対応します。
<html> <head> <title>citizens' courses</title> <style type="text/css"> <!-- td {vertical-align: top} --> </style> </head> <body> <table border="1"> <tr> <th>日時</th> <th>演題</th> </tr> <tr> <td>5/22</td> <td>インターネットの歴史<br>〜その過去・現在・未来〜</td> </tr> </table> </body> </html>
日時 | 演題 |
---|---|
5/22 | インターネットの歴史 〜その過去・現在・未来〜 |
テキストの流し込みに関するプロパティには、イメージの位置の指定と流し込みの解除があります。
float
プロパティ
は、流し込みの際のイメージの位置を指定します。
あいている範囲にテキストが流し込まれます。
これまでの
align
属性に対応します。
clear
プロパティ
は、流し込みの解除を指定します。
これまでの
clear
属性に対応しますが、
<br>
タグ以外でも使えます。
プロパティと値 | イメージの位置 |
---|---|
clear: left |
左側 |
clear: right |
右側 |
clear: none |
解除しない |
<html> <head> <title>citizens' courses</title> <style type="text/css"> <!-- hr {clear: left} img {float: left} --> </style> </head> <body> <img src="books.png" alt="Books" width="100" height="100"> <p>今年も市民講座を開催します。</p> <hr> </body> </html>
人名録のホームページを作成してください。 歴史上の人物や有名人を3人考え、以下の例を参考にして、その氏名と説明を書いてください。 このページのスタイルは、次の指示に従ってください。
<h2>
タグを用いる。
<p>
タグを用いる。
<font>
タグや
bgcolor
属性、
style
属性は使用禁止。
今日の演習7に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(5/22)を明記してください。
CSSについて本格的に勉強したければ、以下のホームページを参考にするとよいでしょう。
CSSは1996年にレベル1が勧告段階(recommendation)となり、1998年にレベル2が勧告段階になりました。 現在はレベル3の開発段階となっています。