HTMLデータの作り方3

CSS ( スタイルシート )

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

CSSの利点

CSSの使い方

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

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

CSSの例

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

  1. CSSファイル(test.css)を作る。
    viなどで適当な名前(例えばtest.css)のCSSファイルを作る。
    ここではバックの色を赤にして、<H1>タグの中の文字を白色にしている。 
    BODY {
	background: red;
}
H1 {
	color: white;
}
  2. HTMLファイル(test.html)の中にCSSファイルを取り込む。
    そのためにCSSファイルの名前をtest.cssとすると、 以下のように<HEAD>タグの中に<LINK>タグによって test.cssファイルを取り込んでおく。 
    <!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>
<P>
スタイルシートのテスト
</P>
</BODY>
</HTML>
  3. ブラウザで表示する。 
    # netscape test.html

CSSを使う時の注意

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

CSSの基本的なプロパティ

color
文字などの色
background
バックの色
background-image
バックに貼る画像ファイル
URLで指定できるので他のマシンの画像も利用できる。
font-size
文字の大きさ
font-family
フォントの種類
text-align
テキストの位置
left, center, right のいづれかを指定
margin
枠線(ボックス)の外側の余白の幅
padding
枠線(ボックス)の内側の余白の幅
border-width
枠線(ボックス)の線幅
border-color
枠線(ボックス)の色

CSSの単位

例 

BODY {
	color: white;
	background: #FF0000;
	margin-left: 10%;
	padding-left: 1cm;
	margin-right: 15%;
	padding-right: 1cm;
	border-width: 2;
}

H1 {
	color: green;
	font-size: 20pt;
	font-family: sans-serif;;
}

上のCSSを使ったページ。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
test page of CSS
</TITLE>
<LINK REL = STYLESHEET TYPE = "text/css" HREF = "test-css.css" TITLE = "Default css">
</HEAD>
<BODY>
<H1> Sample of CSS</H1>
このようなページになる。
<HR>
<CENTER>
<A HREF = "css2.html">back</A>
</CENTER>
</BODY>
</HTML>

参考

Prev | Next
index | home
abe@injapan.net