lHTML スタイル シートファイル '99. 1. 4 '98. 4. 7

l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .スタイル .名前. _一覧_
 備考  スタイル  文字 ( 配置 )  縁取り枠  領域  浮動域  座標  シート   
全体のスタイル   リンク文字   スタイルの定義   内容定義   シートファイル   その他
サンプルテキストに<HEAD>が2個書かれていました。 '99. 3 訂正
ページ内  [bih-h_s1.txt]

T ページ全体のスタイル

ページの基本的なスタイルは BODY タグと共に書きます。
<BODY STYLE=" FONT-SIZE=20PX; COLOR:BLACK; ">

ページのスタイルを スタイルシートに定義する場合の書式は、他のタグと同じです。
<STYLE TYPE="TEXT/CSS"><!--
BODY { FONT-SIZE=20PX; COLOR:BLACK; }
--></STYLE>

T リンク文字のスタイル
個々のリンク文字のスタイルは、アンカータグで指定できます。
<A HREF="bih-h_g1.htm" STYLE="COLOR:PINK"> Aのページ </A>

スタイルシートに定義しておくと、そのページ全体のスタイルを指定できます。
A { COLOR:PINK; }

次の書式は、状態によってリンク文字のスタイルを設定します。
A { FONT-SIZE:16PX; TEXT-DECORATION:NONE; }
A:LINK { COLOR:#0000D0; }
A:VISITED { COLOR:#900090; }
A:ACTIVE { COLOR:#FFFFFE; }
リンク文字全体のスタイル
未閲覧ページ のリンク文字スタイル
閲覧済ページ のリンク文字スタイル
ページ切替え中 のリンク文字スタイル
Netscape では、
A:ACTIVE の色は赤に固定されています。
色 以外の、文字の大きさなどは共通です。( 最後の指定がすべてに適用されます。)


T スタイルの定義
スタイルの指定は普通、HTML タグよりも長いコードを書く必要があります。
スタイルを あらかじめ定義しておけば、短いコードで使うことができます。

ページのヘッダで定義する例
abc.htm
<HTML><HEAD><TITLE>スタイル</TITLE>
<STYLE TYPE="TEXT/CSS">
<!-- /* 以下の内容は、スタイル未対応ブラウザには表示されません。*/
     /* ←これはスタイル専用のコメント記号です。→ */
/* 以下は、必要なものだけを書きます。 */

/* 既存のタグに、文字の表示属性を追加(または変更)します。*/
P {FONT-SIZE: 22PX; COLOR: BLACK; }
H6 {FONT-SIZE: 22PX; COLOR:#800000; }
/* SPAN タグは、属性を設定すれば単独でも使用できます。 */
SPAN { FONT-SIZE:16PX; }

/* 他のタグと組み合わせて使うためのクラスを設定します。*/
.PX12 { FONT-SIZE:12PX; } /* 文字の大きさ */
.PX23 { FONT-SIZE:23PX; }
.BLUE { COLOR:BLUE; } /* 文字の色 */
.RED23 { COLOR:RED; FONT-SIZE:23PX; } /* 大きさと色 */

/* 特定のタグ用のクラスを用意します */
P.L0 { LINE-HEIGHT:80%; } /* 1行の幅( <P>専用 ) */
P.L1 { LINE-HEIGHT:100%; }
P.L2 { LINE-HEIGHT:150%; }

/* 他のタグと組み合わせて使うための ID を設定します。*/
#PX12 { FONT-SIZE:12PX; }
#PX23 { FONT-SIZE:23PX; }
#BLUE { COLOR:BLUE; } /* 文字の色 */
-->
</STYLE> <!--- スタイルの設定終了。 --->
</HEAD>
<BODY>
<H6>ページヘッダで定義した クラスとID の使用例。<H6>
<SPAN>SPANは文字の大きさを 16PX に設定しています。</SPAN><BR>
<SPAN CLASS="PX12">クラスを使えば、大きさを変更できます。</SPAN><BR>
<SPAN CLASS="PX23">大きくもできます。</SPAN><BR><BR>

<SPAN CLASS="RED23">色も指定できます。</SPAN><BR>
<SPAN ID="BLUE">IDでの指定もできます。</SPAN><BR><BR>

<FONT COLOR=BLUE ID="PX12">既存タグと併用することができます。</FONT><BR>
<I ID=PX12 CLASS=BLUE>CLASS と ID は併用できます。</I><BR>
</BODY></HTML>

スタイルの定義を書いたもの(上記の茶色枠部分)は、スタイルシートといいます。
スタイルの、ひとつひとつの{ 定義内容 } はクラスといいます。
. と共に 定義に付けた名前( 上例では PX23 など )は、クラス名といいます。
# と共に 定義に付けた名前は、ID といいます。

もし、同じクラス名またはIDを重複して使った場合は、後に書いたものが有効になります。
クラス名とIDには、同じ名前を付けても ちゃんと区別されます。
ページ全体のスタイルも同様に定義できます。 → [全体] のページ参照。

Netscape では
クラス名 および ID に、日本語は使用できません。
SPAN {"COLOR:RED"} のように、定義内容を " " で囲むと、その定義が無効になります。
途中の定義を <!-- --> で囲んでも 無効にはなりません。→ /* */で囲みます。

 
T スタイルの内容定義

{ } の中には、{ COLOR: BLUE; } のように、具体的なスタイルを記述します。
BODY { } ページ全体のスタイルを指定します。
A:LINK { } リンク文字のスタイルを指定します。
P { } 既存のタグ( この例では<P> ) の属性を、スタイルで変更します。
P.C_RED { } 既存のタグの、専用スタイル( この例では C_RED ) を定義します。
P#C_BLUE { } 既存のタグの、専用スタイル( この例では C_BLUE ) を定義します。
.C1 { } 任意のタグと組み合わせて使えるスタイル( この例では C1 ) を定義します。
#C2 { } 任意のタグと組み合わせて使えるスタイル( この例では C2 ) を定義します。
他のタグと組み合わせて使うための RED や C1 などは、クラスと呼ばれます。
あらかじめクラスを定義しておくことで、クラスの指定が単純化されます。

クラスは、同じ名前で再定義できるようです。
例えば、スタイルシートで 文字の大きさだけを定義し、
それを使うページで、文字の色を指定するために 同じ名前のクラスを定義します。

まとめ書きする場合
複数の既存タグ または クラスに、同じスタイルを定義する場合は、まとめ書きできます。
H6,H5,H4.C4,H3#C3,.C2,#C1 { COLOR:D00000; }
 H6,H5,H4,H3 . . . 見出し文字用の既存タグ
 C4,C3 . . . H4,H3 専用のクラス
 C2,C1 . . . 任意のタグと組み合わせて使うためのクラス




T スタイルシートファイル

スタイルは、別ファイルに定義して使うことができます。
スタイルの定義を書いておくファイルは、スタイルシートファイルと呼ばれます。

上記[ページのヘッダで定義する例]の 定義部分(茶色枠)を、別なファイルに分け;ればスタイルシートファイルになります。
例えば、上記茶色枠の内側部分を、abc.css という名前を付けて、ファイルに保存します。
スタイルシートを使いたいページでは、次のようにファイルを指定してから使います。
<HTML><HEAD><TITLE>スタイル</TITLE>
<LINK REL=STYLESHEET TYPE ="TEXT/CSS" HREF="abc.css">
</HEAD>
<BODY>
ここには、上記の青枠部分と同じ内容を書くことができます。
</BODY>
</HTML>
スタイルシートファイルをいちど作ってしまえば、簡単にスタイルを使用できます。
テキストファイルなら 拡張子は何でもかまいませんが、普通は .css にします。

このホームページでは、bih-h_s1.css をスタイルの各ページで使っています。
※ bih-h_s1.css をクリックすると、同じ内容の bih-h_s1.txt を表示します。


スタイルシートファイルを使用しても、更にスタイルを定義できます。
<HTML><HEAD><TITLE>スタイル</TITLE>
<LINK REL=STYLESHEET TYPE ="TEXT/CSS" HREF="abc.css">
<STYLE TYPE="TEXT/CSS">
<!--
# PT10 {FONT-SIZE:10PT; COLOR:BLUE }
-->
</STYLE>
</HEAD>
<BODY>
             
</BODY>
</HTML>
スタイルシートファイルの使用は先に宣言します。
ページ内での定義はその次に書きます。( 普通は。)
それは、同じクラス名を書いたときに、後のものが有効になるからです。
( スタイルシートでの定義を、そのページで変更できます。)

使用するスタイルシートファイルの固定 ( IExplore のみ。)
[ファイル]メニューの、[インターネットオプション]の、[ユーザー補助]で指定できます。
例えば、自分で作ったスタイルシートファイルを使えば、リンク文字を赤に固定することができます。



T その他

◆デフォルトのスタイル

太字の指定は FONT-WEIGHT:BOLD; ですが、
 FONT-WEIGHT:NORMAL; という指定もできます。
太字にしたくなければ 太字の指定をしなければよいのだから、NORMAL は不要に見えます。

全部太字で表示するようなスタイルシートファイルを作ったとき、
FONT-WEIGHT:NORMAL; の指定をしたページだけは、細字で表示できます。


◆IExplore と Netscape のスタイル

BODY { } で指定したスタイルは、・・・
Netscape では、既存のHTMLタグ <FONT SIZE> で変更できません。
4.0 以外のブラウザでも表示するときは、
 → BODY { } で文字の大きさを指定しません。

TABLE の中は・・・
BODY { } で指定した文字の大きさは、TABLE の中では無効です。
Netscape のみ、BODY { } で指定した文字の色は 〃
 → TABLE の中では別に設定します。
IExplore は、TABLE{ }, TR{ }, TD{ }, TH{ } でスタイルを定義できます。
Netscape は、TD{ } TH{ } でのみ、スタイルを定義できます。
 → TABLE{ } と TR{ } を使わず、TD{ } または TH{ } で定義します。
<P> <NOBR> <PRE> などは、TABLE の中には影響を与えません。

間に TABLE が入ったときは・・・ ( Netscape のみ )
BODY { } で指定した FONT-SIZE などの、スタイルが中断されます。
 例 表の中で、文章の折り返しが二回以上発生したとき。
 → NOWRAP の指定をします。折り返しが生じないだけの幅を指定します。
 例 縁取りを作るために、空の表で囲んだとき。
 → 表の前後では、別々にスタイルを指定します。

スタイル外側の折返し禁止は、・・・
<NOBR> <PRE> は、その中に書かれたスタイルにも作用します。
ただし Netscape では、
[縁取り枠]の指定をしたスタイル、および
[浮動配置]の指定をしたスタイルは、
外側の<NOBR> と <PRE> を無視します。
 → 折返し禁止の必要がないだけの幅を指定します。

背景色は・・・
Netscape では、文字などの内容部分だけが着色されます。ただし、
[縁取り枠]の指定をしたスタイル、および
[浮動配置]の指定をしたスタイルは、領域全体が着色されます。
 背景色が必要なら、→ [縁取り枠] または [浮動配置] の指定をします。

</SPAN>では普通改行されませんが、Netscape では
[縁取り枠] または [浮動配置] の指定をしたとき、外部余白を指定したときは改行されます。


◆ BR タグ ( Netscape のみ。) <BR STYLE="MARGIN-BOTTOM:10PX;">
Netscape では、文字サイズだけを急に大きくすると、下の行と多く重なります。
<BR>に下余白を付加すると、重ならないようにできます。
文章自体の行間を調整するより、正確ではありませんが簡単です。


T

  mtoga@sannet.ne.jp   登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html