目次 | 索引 |
---|---|
前回紹介した
<center>
タグや
<font>
タグを用いると、見栄えのよいホームページが書けそうです。
しかし、規格では、これらのタグは使わないようにと指示されています。
その理由は、ホームページの作者は文書の内容に集中すべきであって、どのように表示されるかは気にしないほうがよいと考えているからです。
この「気にしない」は、見栄えはどうでもよいということではありません。
個々の表示に気を配るのではなく、見栄えに規則性を持たせ、その規則を利用しなさいということです。
スタイルシート ( style sheet )とは、見栄えの規則を表すのものです。 スタイルシートを用いますと、一つのホームページだけでなく、複数のホームページに対しても見栄えを統一できます。 HTMLでは、 カスケーディングスタイルシート ( Cascading Style Sheets , 以下 CSS )が利用できます。 この授業ではCSSを紹介します。
例として、「強調する部分は(イタリック体ではなく)赤で書く」という規則に従ってホームページを書くことにします。
<font>
タグを使って強調するのが取りあえず簡単です。
... <font color="red">Deadline: May 17, 2001.</font> ...
しかし、他人がこのHTMLドキュメントを読むと、なぜ赤で書くのかがよく分かりません。
強調していることを示すためには、
<em>
タグを使うべきです。
... <em> <font color="red">Deadline: May 17, 2001.</font> </em> ...
赤くはなりますが、イタリック体にするという規則にも従ってしまいます。
style
属性を用いますと、この規則が変更できます。
... <em style="color: red; font-style: normal"> Deadline: May 17, 2001. </em> ...
これで、強調していることを示しながら、新しい規則に従って書くことができます。
強調が一か所しかないならばこれで十分ですが、
... <em style="color: red; font-style: normal"> Deadline: May 17, 2001. </em> ... <em style="color: red; font-style: normal"> Deadline: May 24, 2001. </em> ...
何か所もありますと、ドキュメントの記述が繁雑になります。
<style>
タグを用いますと、これらの
style
属性が一つにまとめられます。
<html> <head> <title>Important dates</title> <style type="text/css"> <!-- em {color: red; font-style: normal} --> </style> </head> <body> ... <em>Deadline: May 17, 2001.</em> ... <em>Deadline: May 24, 2001.</em> ... </body> </html>
これで、
style
属性を何度も書く必要がなくなります。
スタイルシートを用いますと、ホームページの作者は、「強調する部分は(イタリック体ではなく)赤で書く」という規則を忘れて、文書の内容に集中できるのです。
スタイルシートの前に、
style
属性
について説明します。
タグに
style
属性を書きますと、その範囲内に限りスタイルが指定されます。
スタイルの規則は作っていませんので、これをスタイルシートとはよびません。
style
属性は、例外的な要素に対してスタイルを指定するとき役立ちます。
style
属性はほとんどすべてのタグで使えます。
書式は次の通りです。
<tag style="property: value"> 〜 </tag>
ここで、 property はプロパティの名前です。 プロパティ ( property )とは、テキストの色やフォントの大きさなど、見栄えに関する性質です。 CSSには数十種類のプロパティが定義されています。 この書式は、プロパティ property の値を value にするという意味です。 プロパティ名とその値をコロンで区切ることに注意してください。
プロパティが2つあるときは、
<tag style="property1: value1; property2: value2"> 〜 </tag>
と、セミコロンで区切って書きます。 3つ以上でも同様です。
テキストに関するプロパティには、テキストの位置揃えや修飾などがあります。
text-align
プロパティ
は、テキストの位置揃えを指定します。
これまでの
align
属性に対応します。
<h1 style="text-align: center">講演会のご案内</h1>
講演会のご案内
text-decoration
プロパティ
は、アンダーラインなどテキストの装飾を指定します。
プロパティと値 | 修飾 | 例 |
---|---|---|
text-decoration: none
|
修飾しない | Good morning! |
text-decoration: underline
|
アンダーライン | Good morning! |
text-decoration: overline
|
オーバーライン | Good morning! |
text-decoration: line-through
|
打ち消し線 | Good morning! |
text-decoration: blink
|
点滅 | Good morning! |
<p> <strong style="text-decoration: underline"> 入場無料 </strong> ですので、どなた様も気軽に参加してください。 </p>
入場無料 ですので、どなた様も気軽に参加してください。
フォントに関するプロパティには、種類や傾き、太さ、大きさなどがあります。 システムに適切なフォントがなければ、指定は無視されます。
font-family
プロパティ
は、フォントの種類を指定します。
セリフとはアルファベットに付いている「ひげ」のことです。
サンセリフとはセリフなしという意味です。
プロパティと値 | 種類 | 例 |
---|---|---|
font-family: serif
|
ローマン体 | Good morning! |
font-family: sans-serif
|
サンセリフ体 | Good morning! |
font-family: monospace
|
タイプライタ体 | Good morning! |
font-style
プロパティ
は、フォントを傾けるかどうか指定します。
プロパティと値 | 傾き | 例 |
---|---|---|
font-style: normal
|
傾けない | Good morning! |
font-style: italic
|
イタリック体 | Good morning! |
font-weight
プロパティ
は、フォントの太さを指定します。
プロパティと値 | 太さ | 例 |
---|---|---|
font-weight: normal
|
太くしない | Good morning! |
font-weight: bold
|
ボールド体 | Good morning! |
<address style="font-style: normal; font-weight: bold"> b00a001@twcu.ac.jp 東 京子 </address>
b00a001@twcu.ac.jp 東 京子
font-size
プロパティ
は、フォントの大きさを指定します。
large
や
small
などのキーワードの他に、
16pt
など長さでも指定できます。
(1ポイントは約72分の1インチです。)
プロパティと値 | 大きさ | 例 |
---|---|---|
font-size: medium
|
通常の大きさ | Good morning! |
font-size: large
|
通常より大きめ | Good morning! |
font-size: small
|
通常より小さめ | Good morning! |
font-size: larger
|
前後より大きめ | Good morning! |
font-size: smaller
|
前後より小さめ | Good morning! |
font-size: 16pt
|
16ポイント | Good morning! |
色に関するプロパティには、テキストの色や背景の色などがあります。 この値はカラー・ネームを用いるのが簡単です。 カラー・ネームの一覧を再掲します。
カラー・ネーム | 色 | 例 |
---|---|---|
aqua
|
水色 | ■ |
black
|
黒 | ■ |
blue
|
青 | ■ |
fuchsia
|
桃色 | ■ |
gray
|
灰色 | ■ |
green
|
緑 | ■ |
lime
|
黄緑 | ■ |
maroon
|
茶色 | ■ |
navy
|
紺 | ■ |
olive
|
黄土色 | ■ |
purple
|
紫 | ■ |
red
|
赤 | ■ |
silver
|
銀色 | ■ |
teal
|
深緑 | ■ |
white
|
白 | ■ |
yellow
|
黄色 | ■ |
color
プロパティ
は、テキストの色を指定します。
<body>
タグに書きますと、テキスト全体がその色になります。
background-color
プロパティ
は、背景の色を指定します。
<body>
タグに書きますと、背景全体がその色になります。
<h2 style="color: white; background-color: black"> 講演スケジュール </h2>
講演スケジュール
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
属性によって
<title>Important dates</title> <body style="background-color: white"> <p> Writing the prototype program in JavaScript. <em style="color: red; font-style: normal"> Deadline: May 17, 2001. </em> </p> <p> Writing the program's manual. <em style="color: red; font-style: normal"> Deadline: May 24, 2001. </em> </p> </body>
とスタイル指定したHTMLドキュメントは、
<html> <head> <title>Important dates</title> <style type="text/css"> <!-- body {background-color: white} em {color: red; font-style: normal} --> </style> </head> <body> <p> Writing the prototype program in JavaScript. <em>Deadline: May 17, 2001.</em> </p> <p> Writing the program's manual. <em>Deadline: May 24, 2001.</em> </p> </body> </html>
となります。
次のHTMLドキュメントにスタイルシートを指定します。
<html> <head> <title>My diary</title> <style type="text/css"> <!-- ??? --> </style> </head> <body> <h1>5月17日の日記</h1> <p> デパートにサンダルを買いに行った。 <strong>1万5千円</strong>したので買うのをやめた。 </p> <h1>5月18日の日記</h1> <p> <strong>のどが痛い。</strong> 風邪でも引いたか。 </p> </body> </html>
???の部分を埋めて、以下の表の通りにスタイルの規則を変更してください。 (本文を変えても構いませんが、タグは変えないでください。)
要素 | 変更前 | 変更後 |
---|---|---|
body | 背景は銀色、テキストは黒。 | 背景は水色、テキストは青。 |
h1 | 左揃えで巨大なボールド体。 | 中央揃えで黒の巨大なボールド体。 |
strong | ボールド体。 | 太くせずアンダーライン。 |
5月17日の日記
デパートにサンダルを買いに行った。 1万5千円 したので買うのをやめた。
5月18日の日記
のどが痛い。 風邪でも引いたか。
5月17日の日記
デパートにサンダルを買いに行った。 1万5千円 したので買うのをやめた。
5月18日の日記
のどが痛い。 風邪でも引いたか。
今日の演習4に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。