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

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

目次 索引
7.1 スタイルシートとは
7.1.1 なぜスタイルシートか
7.1.2 スタイルシートの概略
7.2 スタイルのプロパティ
7.2.1 スタイルシートの書式
7.2.2 フォントのプロパティ
7.2.3 色と背景のプロパティ
7.2.4 テキストのプロパティ
7.2.5 流し込みのプロパティ
7.3 演習7
7.4 レポート課題
7.5 参考資料
background-colorプロパティ  background-imageプロパティ  clearプロパティ  colorプロパティ  CSS  floatプロパティ  font-familyプロパティ  font-sizeプロパティ  font-styleプロパティ  font-weightプロパティ  styleタグ  text-alignプロパティ  text-decorationプロパティ  vertical-alignプロパティ  アンダーライン  イタリック体  上揃え  打ち消し線  オーバーライン  カスケーディングスタイルシート  サンセリフ体  下揃え  スタイルシート  タイプライタ体  中央揃え  中央揃え  点滅  左揃え  左揃え  プロパティ  ボールド体  右揃え  右揃え  ローマン体 

7.1 スタイルシートとは

7.1.1 なぜスタイルシートか

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

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

7.1.2 スタイルシートの概略

例として、「強く強調する部分は(ボールド体ではなく)赤で書く」という規則に従ってホームページを書くことにします。

本製品を取り付けるときには、 必ずパソコン本体の電源をお切りください。 パソコンの内部には高電圧の部品が使われており、 触ると危険です。

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

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


7.2 スタイルのプロパティ

7.2.1 スタイルシートの書式

スタイルシートの書式は、

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> 内の <!----> を無視します。

7.2.2 フォントのプロパティ

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

font-familyプロパティ

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

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

font-styleプロパティ

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

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

font-weightプロパティ

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

表 7.3  フォントの太さ
プロパティと値 太さ
font-weight: normal 太くしない Good afternoon!
font-weight: bold ボールド体 Good afternoon!
例 7.1 
<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>
市民講座事務局 電話 03-XXXX-XXXX

font-sizeプロパティ

font-sizeプロパティ は、フォントの大きさを指定します。 largesmall などのキーワードの他に、 16px など長さでも指定できます。

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

7.2.3 色と背景のプロパティ

色と背景に関するプロパティには、テキストの色、背景の色、背景イメージなどがあります。 色の指定は、キーワードを用いるのが簡単です。 一覧表を再掲します。

表 7.5  色の名前のキーワード
カラー・ネーム
aqua 水色
black
blue
fuchsia 桃色
gray 灰色
green
lime 黄緑
maroon 茶色
navy
olive 黄土色
purple
red
silver 銀色
teal 深緑
white
yellow 黄色

colorプロパティ

colorプロパティ は、テキストの色を指定します。 <body> タグに指定しますと、これまでの text 属性と同様に、テキスト全体がその色になります。

background-colorプロパティ

background-colorプロパティ は、背景の色を指定します。 <body> タグに指定しますと、これまでの bgcolor 属性と同様に、ページ全体の背景がその色になります。

background-imageプロパティ

background-imageプロパティ は、背景イメージを指定します。 このプロパティの値は、独特の形式を持ちます。 イメージ・ファイルのファイル名が filename であり、HTMLファイルとイメージ・ファイルが同じディレクトリにある場合、

background-image: url(filename)

と書きます。 <body> タグに指定しますと、これまでの background 属性と同様に、ページ全体にその背景イメージが用いられます。

例 7.2 
<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>
triangle.png
A triangle pattern
講演スケジュール

7.2.4 テキストのプロパティ

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

text-alignプロパティ

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

表 7.6  テキストの位置揃え
プロパティと値 位置揃え
text-align: left 左揃え
text-align: center 中央揃え
text-align: right 右揃え
例 7.3 
<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プロパティ は、アンダーラインなどテキストの装飾を指定します。

表 7.7  テキストの修飾
プロパティと値 修飾
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!
例 7.4 
<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プロパティ

vertical-alignプロパティ は、垂直方向の位置揃えを指定します。 これまでの valign 属性に対応します。

表 7.8  垂直方向の位置揃え
プロパティと値 位置揃え
vertical-align: top 上揃え
vertical-align: middle 中央揃え
vertical-align: bottom 下揃え
例 7.5 
<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 インターネットの歴史
〜その過去・現在・未来〜

7.2.5 流し込みのプロパティ

テキストの流し込みに関するプロパティには、イメージの位置の指定と流し込みの解除があります。

floatプロパティ

floatプロパティ は、流し込みの際のイメージの位置を指定します。 あいている範囲にテキストが流し込まれます。 これまでの align 属性に対応します。

表 7.9  テキストの流し込み
プロパティと値 イメージの位置
float: left 左揃え
float: right 右揃え
float: none 揃えない

clearプロパティ

clearプロパティ は、流し込みの解除を指定します。 これまでの clear 属性に対応しますが、 <br> タグ以外でも使えます。

表 7.10  流し込みの解除
プロパティと値 イメージの位置
clear: left 左側
clear: right 右側
clear: none 解除しない
例 7.6 
<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>
books.png
Books
Books
今年も市民講座を開催します。


7.3 演習7

「私の年表」のホームページを作成してください。 歴史上の出来事を3項目考え、以下の例を参考にして、その年と説明を書いてください。 このページのスタイルは、次の指示に従ってください。

余力のある人は、出来事の項目を増やしてください。

例 7.7 
演習7(私の年表)

1946年

世界初の本格的な電子計算機ENIACが完成した。

1964年

トランジスタを用いた電卓が商品化された。

1977年

パソコンApple IIが発表され、世界中で使われた。

7.4 レポート課題

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


7.5 参考資料

CSSについて本格的に勉強したければ、以下のホームページを参考にするとよいでしょう。

CSSレベル1仕様書(英語)
http://www.w3.org/TR/REC-CSS1
CSS仕様書の日本語訳
http://www.w3.org/Style/css1-updates/translations

このホームページは、W3Cの正規のドキュメントとその(個人的な)日本語訳です。


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

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