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

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

目次 索引
4.1 スタイルシートとは
4.1.1 なぜスタイルシートか
4.1.2 スタイルシートの例
4.2 style属性
4.2.1 スタイルの書式
4.2.2 テキストのプロパティ
4.2.3 フォントのプロパティ
4.2.4 色のプロパティ
4.3 style要素
4.3.1 スタイルの規則
4.4 演習4
4.5 レポート課題
background-colorプロパティ   colorプロパティ   CSS   font-familyプロパティ   font-sizeプロパティ   font-styleプロパティ   font-weightプロパティ   <style>   style属性   text-alignプロパティ   text-decorationプロパティ   アンダーライン   イタリック体   打ち消し線   オーバーライン   カスケーディングスタイルシート   サンセリフ体   スタイルシート   タイプライタ体   中央揃え   点滅   左揃え   プロパティ   ボールド体   右揃え   ローマン体  

4.1 スタイルシートとは

4.1.1 なぜスタイルシートか

前回紹介した <center> タグや <font> タグを用いると、見栄えのよいホームページが書けそうです。 しかし、規格では、これらのタグは使わないようにと指示されています。 その理由は、ホームページの作者は文書の内容に集中すべきであって、どのように表示されるかは気にしないほうがよいと考えているからです。 この「気にしない」は、見栄えはどうでもよいということではありません。 個々の表示に気を配るのではなく、見栄えに規則性を持たせ、その規則を利用しなさいということです。

スタイルシートstyle sheet )とは、見栄えの規則を表すのものです。 スタイルシートを用いますと、一つのホームページだけでなく、複数のホームページに対しても見栄えを統一できます。 HTMLでは、 カスケーディングスタイルシートCascading Style Sheets , 以下 CSS )が利用できます。 この授業ではCSSを紹介します。

4.1.2 スタイルシートの例

例として、「強調する部分は(イタリック体ではなく)赤で書く」という規則に従ってホームページを書くことにします。 <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 属性を何度も書く必要がなくなります。

スタイルシートを用いますと、ホームページの作者は、「強調する部分は(イタリック体ではなく)赤で書く」という規則を忘れて、文書の内容に集中できるのです。


4.2 style属性

4.2.1 スタイルの書式

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

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

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

ここで、 property はプロパティの名前です。 プロパティproperty )とは、テキストの色やフォントの大きさなど、見栄えに関する性質です。 CSSには数十種類のプロパティが定義されています。 この書式は、プロパティ property の値を value にするという意味です。 プロパティ名とその値をコロンで区切ることに注意してください。

プロパティが2つあるときは、

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

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

4.2.2 テキストのプロパティ

テキストに関するプロパティには、テキストの位置揃えや修飾などがあります。

text-alignプロパティ

text-alignプロパティ は、テキストの位置揃えを指定します。 これまでの align 属性に対応します。

表 4.1  テキストの位置揃え
プロパティと値 位置揃え
text-align: left 左揃え
text-align: center 中央揃え
text-align: right 右揃え
例 4.1 
<h1 style="text-align: center">講演会のご案内</h1>
講演会のご案内

text-decorationプロパティ

text-decorationプロパティ は、アンダーラインなどテキストの装飾を指定します。

表 4.2  テキストの修飾
プロパティと値 修飾
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!
例 4.2 
<p>
<strong style="text-decoration: underline">
入場無料
</strong>
ですので、どなた様も気軽に参加してください。
</p>
入場無料 ですので、どなた様も気軽に参加してください。

4.2.3 フォントのプロパティ

フォントに関するプロパティには、種類や傾き、太さ、大きさなどがあります。 システムに適切なフォントがなければ、指定は無視されます。

font-familyプロパティ

font-familyプロパティ は、フォントの種類を指定します。 セリフとはアルファベットに付いている「ひげ」のことです。 サンセリフとはセリフなしという意味です。

表 4.3  フォントの種類
プロパティと値 種類
font-family: serif ローマン体 Good morning!
font-family: sans-serif サンセリフ体 Good morning!
font-family: monospace タイプライタ体 Good morning!

font-styleプロパティ

font-styleプロパティ は、フォントを傾けるかどうか指定します。

表 4.4  フォントの傾き
プロパティと値 傾き
font-style: normal 傾けない Good morning!
font-style: italic イタリック体 Good morning!

font-weightプロパティ

font-weightプロパティ は、フォントの太さを指定します。

表 4.5  フォントの太さ
プロパティと値 太さ
font-weight: normal 太くしない Good morning!
font-weight: bold ボールド体 Good morning!
例 4.3 
<address style="font-style: normal; font-weight: bold">
b00a001@twcu.ac.jp 東 京子
</address>
b00a001@twcu.ac.jp 東 京子

font-sizeプロパティ

font-sizeプロパティ は、フォントの大きさを指定します。 largesmall などのキーワードの他に、 16pt など長さでも指定できます。 (1ポイントは約72分の1インチです。)

表 4.6  フォントの大きさ
プロパティと値 大きさ
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!

4.2.4 色のプロパティ

色に関するプロパティには、テキストの色や背景の色などがあります。 この値はカラー・ネームを用いるのが簡単です。 カラー・ネームの一覧を再掲します。

表 4.7  基本カラー・ネーム
カラー・ネーム
aqua 水色
black
blue
fuchsia 桃色
gray 灰色
green
lime 黄緑
maroon 茶色
navy
olive 黄土色
purple
red
silver 銀色
teal 深緑
white
yellow 黄色

colorプロパティ

colorプロパティ は、テキストの色を指定します。 <body> タグに書きますと、テキスト全体がその色になります。

background-colorプロパティ

background-colorプロパティ は、背景の色を指定します。 <body> タグに書きますと、背景全体がその色になります。

例 4.4 
<h2 style="color: white; background-color: black">
講演スケジュール
</h2>
講演スケジュール

4.3 style要素

4.3.1 スタイルの規則

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 要素の内容はスタイルの規則を定めています。 これがスタイルシートです。

例 4.5 

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>

となります。


4.4 演習4

次の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>

???の部分を埋めて、以下の表の通りにスタイルの規則を変更してください。 (本文を変えても構いませんが、タグは変えないでください。)

表 4.8  スタイルの変更規則
要素 変更前 変更後
body 背景は銀色、テキストは黒。 背景は水色、テキストは青。
h1 左揃えで巨大なボールド体。 中央揃えで黒の巨大なボールド体。
strong ボールド体。 太くせずアンダーライン。
変更前
5月17日の日記

デパートにサンダルを買いに行った。 1万5千円 したので買うのをやめた。

5月18日の日記

のどが痛い。 風邪でも引いたか。
変更後
5月17日の日記

デパートにサンダルを買いに行った。 1万5千円 したので買うのをやめた。

5月18日の日記

のどが痛い。 風邪でも引いたか。

4.5 レポート課題

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


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

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