Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
Cascading Style Sheet (Part 3)

Cascading Style Sheet

Part 3

ここでは、CSS（Cascading Style Sheet）の具体的なスタイル設定について説明します。

行の高さを設定する

現在のWebブラウザでは、何も指定をしていないページでは行と行の間隔はほとんどなく、非常に読み辛いものになっています。そこで、次のプロパティを使います。

line-height : 値

このプロパティは、行（インラインボックス）の高さを設定します。

値の設定の仕方は、次の３通りがあります。

数値＋単位
数値
パーセント

具体的には次のように指定します。

BODY { line-height: 1.5em }
BODY { line-height: 1.5 }
BODY { line-height: 150% }

どの場合でも、マイナスの値を指定することは出来ません。

行揃えを設定する。

中央に揃えるタグとして<CENTER>はよく使われています。しかし、現在W3Cの方針としては廃止される予定になっています。<DIV align=center>も同様です。そうなると、将来、行揃えをする為にはCSSが不可欠になってきます。CSSでは次のプロパティで設定します。

text-align : 値

値は次のようなものがあります。

left（左寄せに設定します。）
right（右寄せに設定ます。）
center（中央揃えに設定します。）
justify（両端揃えに設定します。）
文字列（テーブルの縦列で位置を揃えたい文字を指定します。）
inherit（親（祖先）要素の値を継承します。）

具体的には、CSSファイルで、

.center { text-align : center }

と指定し、

などと置き換えます。

インデントを指定する。

スタイルシートで、テキスト文章の一行目にインデントを指定することが出来ます。次のプロパティを使います。

text-indent : 値

値は次のようなものがあります。

数値＋単位
パーセント
inherit（親（祖先）要素の値を継承します。）

このページでは、

P { text-indent: 16px }

として、段落ごとに16pxのインデントを指定しています。

背景画像を設定する

全ての要素に対して、背景画像を設定することが出来ます。次のプロパティを使います。

background-image : 値

値は次のようなものがあります。

URI（url('～')またはurl("～")形式で、背景画像のURIを指定します。）
none（背景に画像を使用しません。初期値は「none」です。）
inherit（親（祖先）要素の値を継承します。「inherit」を指定しなければ親（祖先）要素の値を継承しません。）

このページでは、

H2 : { background-image : url("dot-move.gif;") }

として、H2に背景画像「dot-move.gif」を設定しています。

疑問点、誤りなどありましたら、掲示板にてお願いします。出来る限りお答え致します。

Home

from 1998/6/8