HTMLデータの作り方6

CSS ( スタイルシート )

CSS( Cascading Style Sheet )とはHTMLにおいてレイアウトを表現するための文法である。 HTMLのタグはあくまでも文書の構造を表すものなので、文字の大きさ・色・段付けなどレイアウトやデザインを決めるにはCSSを使うようにする。

CSSの利点

HTMLの文書が簡単になる。
HTMLのタグの中にレイアウトの要素を含めなくて良いのでHTMLの文書が簡単になる。
同じことを繰り返さなくて済む。
一度CSSで定義しておくと同じタグでは全て同じレイアウトで表現できる。
だから複数のページのレイアウトを簡単に変更することもできる。
HTMLのタグよりも豊かな表現ができる。
フォントの大きさ・ポジションニングなどがHTMLより細かな指定ができる。
将来の規格にも対応できる。
XMLなどの規格を使うときにでも対応しやすい。

CSSの使い方

CSSを使うには以下の3つの方法のいづれかで行う。

タグに直接書き込む。 <タグ STYLE = "プロパティ名: 値; ..." >
ヘッダ( <HEAD>タグの中 ) に書き込む。 <HEAD> <TITLE>タイトル</TITLE> <STYLE>  </STYLE> </HEAD>
CSSファイルを作る。
ファイルの中に以下のようにプロパティを書き込んでおき、 タグ {プロパティ名: 値; ..." >} HTMLファイルの中で <LINK> タグによって取り込む。

実際に使用する時には3番目のCSSファイルを作って、各HTMLファイルに読み込ませる方法が後のメンテナンスが楽で良いだろう。

CSSの例

CSSを使った簡単なHTMLの作り方について以下に述べる。

CSSファイルを作る。
viなどで適当な名前(例えばtest.css)のCSSファイルを作る。
ここではバックの色を赤にして、<H1>タグの中の文字を白色にしている。
```
# cat test.css
BODY {
	background: red;
}
H1 {
	color: white;
}
```

HTMLファイルの中にCSSファイルを取り込む。
そのためにCSSファイルの名前をtest.cssとすると、以下のように<HEAD>タグの中に<LINK>タグによって test.cssファイルを取り込んでおく。

# cat test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<LINK REL = "stylesheet" TYPE = "text/css" HREF = "test.css">
</HEAD>
<BODY>
<H1>CSSのテスト </H1>
スタイルシートのテスト
</BODY>
</HTML>

ブラウザで表示する。
```
# netscape test.html
```

CSSを使う時の注意

現在CSSにはCSS1とCSS2というバージョンがあるがNetscapeやIEなどのブラウザではCSS1のほとんどとCSS2の一部をサポートしている。
しかし、NetscapeとIEでは使うことのできるCSSが違うのでどちらかのブラウザしかうまく表示できないことが有り得る。

参考

HTMLのリファレンス
CSSのリファレンス
W3C
HTMLの規格を決めている所。

prev | next
index | home

abe@injapan.net