スタイルシート

StyleSheet

最近、凝ったホームページが増えています。しかし、ブラウザのユーザー設定の仕方によって作者の思った通りの見え方でないことがあります。Netscape とMS Internet Explorerで見比べてみると、特にフォントサイズの違いで大きく変わります。そこでW3C（World Web Consortium. HTMLの規格を決定する機関）から勧告されたのがこのスタイルシートという自由度の高い表現ができる規格です。
スタイルシートを使うと background repeat、行間、マージン、フォントのポイントなどを指定できます。
例えば、ここの文字はWindous® やMicrosoftのホームページでよく使われている、フォントサイズ"13px"、フォントファミリー（font face と同）"MS UI Gothic"です。

ここからはフォントサイズ big(font-size:24pt)です。


ここはフォントサイズ"8pt"です。

フォントサイズ定義。ポイント(pt),ピクセル(px),センチ(cm),インチ(in),が使える。


ここは「ＭＳ Ｐ明朝」です。


FONT-FAMILY:Arial
上はフォント"Arial"です。


FONT-FAMILY:Courier
This is "Courier New".....



ここは、行間の設定を「50%」にして
文字を重ねてみました。

line-heightの定義（行間の設定）：
「line-height:0」で定義すると、文字がまったく重なってしまいます。普通は100%以上、150,180%位が良いでしょう。これも、値にピクセル(px),ポイント(pt),センチ(cm),インチ(in),パーセント(%)がつかえる。


Thanks !
 Thanks !
  Thanks !
   Thanks !



こんな事もできます。

background:url(xxx.gif)repeat の定義

このページの background は no-repeat 定義で「繰り返して張り込まない」です。
（* 野町雅弘さんからメ−ルを頂きました、MSIE4.0では
background:#ffffff url(*****.jpg または ****.gif) no-repeat で表示されます。
野町さんありがとうございました！）

repeat-x 横方向のみに連続して張り込まれる。

repeat-y 縦方向のみに連続して張り込まれる。

（fixed を使うとスクロールしても背景が動きません,MS-IE ＆ Netscape6）

マージン(margin)の定義

このページは、margin-left:3cm（左側 3cm）margin-right:1cm（右側 1cm）指定。その他、値にはピクセル(px),インチ(in),パーセント(%)が使える

文字の背景色の定義です。marker として使えます。ここは、background:#FFFF00 のはずですが？

ここは、"background:#FF0000"です
ここは、"background:#0000FF"です
ここは、"background:#FF00FF"です
ここは、"background:#00FF00"です
ここは、"background:#00FFFF"です
ここは、"background:#BBAA00"です
ここは、"background:#000050"です 詳しくはソースを見てください

スタイルシ−トは、定義したい本文に直接書いてもいいし、ヘッダ<HEAD>〜</HEAD>の中にJavaScriptと同じように<STYLE TYPE="text/css">を使ってスタイル情報を定義してページ全体で適応させることができます。また、スタイル情報を含んだファイルへリンクして複数ページで使うことができます、ヘッダに<LINK REL=StyleSheet HREF="http://www.〜.〜/style.css" TYPE="text/css">と記述します。同じサーバー上にある必要もないとのことです。ただし、backgroundの背景は同じディレクトリーでない場合、BODYタグのところでリンクしないと入らないみたいです。
* *<P>は「改行が２つ入る」、<DIV>は「改行が１つ入る」、<SPAN>は「改行なし」、これらをうまく使い分けないと変なところで改行されてしまいます。

NEXT
StyleSheet page2へ

BACK
Ojindowsへもどる