「Cascading Style Sheets (level 1)」は、W3Cが定義したスタイルシートで、Internet Explorer 3.0 以降や Netscape Navigator 4.0 以降がその機能をサポートしています。ただし、現段階では両者ともすべての機能をサポートしているわけではないようです。
− ＩＮＤＥＸ −
●HTMLの中にスタイルシートを組み込む１．<STYLE>〜</STYLE>の範囲にスタイルを書く
２．スタイルを記述したファイルを読み込む
３．任意の要素の属性としてスタイルを記述する
４．<SPAN>で部分的にスタイルを適用する
５．<DIV>でブロック単位でスタイルを適用する●スタイルシートの記述方法
１．基本的な記述方法
２．class の定義
３．id の定義
４．CONTEXTUAL セレクタの定義
５．特殊なセレクタ
６．コメント
７．数値の単位
| CSS解説編 | CSSリファレンス編 | JSS解説編 | JSSリファレンス編 |
●HTMLの中にスタイルシートを組み込む
１．<STYLE>〜</STYLE>の範囲にスタイルを書く
「Cascading Style Sheets」の最も基本的な記述方法は、<HEAD>〜</HEAD>のあいだに<STYLE>〜</STYLE>を記述して、そこにスタイルを配置する方法です。この時、それがCSSであることを示すために「type」属性の値として Cascading Style Sheets のタイプ「text/css」を指定します。※ <STYLE>には、「title=」でスタイルのタイトルを指定することができます。ここで指定されたタイトルは、スタイルのオン・オフが可能なブラウザを使用した場合に、オン・オフするスタイルを選択する目的で使用されます。
【使用例】
以下の例では、ドキュメント中の<BLOCKQUOTE>〜</BLOCKQUOTE>の範囲の行間（行の高さ）をフォントサイズの1.5倍に設定します。
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
BLOCKQUOTE { line-height: 1.5 }
-->
</STYLE>
</HEAD>
<BODY>
<BLOCKQUOTE>
・・・この範囲の行間はフォントサイズの1.5倍になります。
</BLOCKQUOTE>
</BODY>
</HTML>
※ Internet Explorer 3.0 では、単位をつけないで行間を指定すると正常に表示されません。その場合は「150%」などとパーセントで指定するとよいでしょう。
※ スタイルシートに対応していないブラウザでスタイルシートを記述したドキュメントを見ると、<STYLE>〜</STYLE>の範囲に記述したスタイル定義がそのまま画面に表示されてしまう場合があります。それを防ぐためには「<!--」「-->」でスタイルの定義をHTMLのコメントにする必要があります。
２．スタイルを記述したファイルを読み込む
<STYLE>〜</STYLE>の範囲で定義するスタイルは別ファイルに記述して、それを参照するようにすることもできます。この機能は複数のHTMLドキュメントで同じスタイルを共有する場合などに便利です。以下の２つの方法でスタイルのファイルを読み込むことができます。※ この場合、読み込むファイル内には、<STYLE>・</STYLE>タグを記述する必要はありません。
※ 連続して複数のファイルを読み込むことも可能です。
■ <LINK>を使用して読み込む。【使用例】
<LINK rel="stylesheet" type="text/css" href="http://www.zspc.com/abc.css" title="Example">
※ <LINK>要素の各属性については「SUPER HTML4.0 REFERENCE」を参照してください。
※ <LINK>要素は、<HEAD>〜</HEAD>の間に配置します。
■ 「@import」を使用して読み込む。【使用例】
<STYLE type="text/css">
<!--
@import url(http://www.zspc.com/style_a.css);
H2 { color: red }
-->
</STYLE>
※ 「@import」は、<STYLE>〜</STYLE>の間に記述します。同時に他のスタイルも記述する場合には、「@import」の後に記述するようにします。
※ Netscape Navigator 4.Xで「@import」を使用すると、エラーが発生する場合がありますので、ご注意ください。
３．任意の要素の属性としてスタイルを記述する
任意の要素に「style」属性を指定して、その要素の範囲に対して有効なスタイルを直接記述することができます。また、後述しますが <STYLE>〜</STYLE>の範囲または外部のファイルにスタイルをあらかじめ定義しておき、既存の要素の「class」、「id」属性としてスタイルを指定することもできます。
■ 「style」属性任意の要素の属性として直接スタイルを記述したい場合に使用します。
【使用例】
以下の例では、<BLOCKQUOTE>の「style」属性にスタイルを直接記述して指定しています。
<BLOCKQUOTE style="line-height: 1.5">
・・・この範囲の行間はフォントサイズの1.5倍になります。
</BLOCKQUOTE>
■ 「class」属性
あらかじめ定義しておいたスタイルを任意の要素に適用させたい場合に使用します。
【使用例】
以下の例では、まず「test1」というスタイルを class としてあらかじめ定義しておき、<P>要素にそれを適用しています。（class の定義方法については後述）
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
.test1 { color: red }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">
・・・この範囲の色は赤になります。
</P>
</BODY>
</HTML>
※ 「.test1」の前に要素名を指定すると、その要素にのみ有効な class を定義することができます。（例：H2.test1）
■ 「id」属性
文書中で唯一例外的なスタイルを適用したい場合などに使用します。特に複数のスタイルが適用されている要素の一部のスタイルを変更したい場合などに便利です。
【使用例】
以下の例では、「test1」というスタイル（class）にフォントの色（黒）と行間（1.5）を指定しています。その後「A01」という id でフォントの色（赤）を指定しています（id の定義方法については後述）。P要素に対して class「test1」を指定していても、id「A01」を同時に指定すると、その部分だけ id に該当するスタイルに変更されます。
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
.test1 { color: black; line-height: 1.5 }
#A01 { color: red }
-->
</STYLE>
</HEAD>
<BODY>
<P class="test1">
・・・この範囲の色は黒で行間は1.5倍になります。
</P>
<P class="test1" id="A01">
・・・この範囲の色は赤で行間は1.5倍になります。
</P>
</BODY>
</HTML>
４．<SPAN>で部分的にスタイルを適用する
上記の「３．任意の要素の属性としてスタイルを記述する」では、任意のタグの範囲にスタイルを加える方法を説明しましたが、<SPAN>〜</SPAN>を使用すると、それを指定した範囲にのみスタイルを適用させることができます。※ <SPAN>はインライン要素で、文章の一部など比較的短い範囲に使用されます。これに対して次に説明する<DIV>要素は、段落や章などのブロック単位で使用されるものです。
【使用例】
以下の例では、まず「test1」というスタイルを class としてあらかじめ定義しておき、<SPAN>でそれを部分的に適用しています。
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
.test1 { color: blue }
-->
</STYLE>
</HEAD>
<BODY>
<P>
ＲＧＢの「Ｂ」とは、
「 <SPAN class="test1"> BLUE </SPAN> 」の意味です。
</P>
</BODY>
</HTML>
５．<DIV>でブロック単位でスタイルを適用する
<DIV>は、<SPAN>と同様に指定した範囲にのみスタイルを適用させる目的で使用できる要素です。ただし、<SPAN>が文章の一部などの比較的短い範囲（インライン）に使用されるのに対して、<DIV>は、段落や章などのブロックの範囲で使用されます。※ <DIV>は、「Division」の略です。
【使用例】
以下の例では、まず「test2」というスタイルを class としてあらかじめ定義しておき、<DIV>要素でそれを適用しています。
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
.test2 { color: gray }
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="test2">
・・・この範囲はグレーで表示されます。
</DIV>
</BODY>
</HTML>
●スタイルシートの記述方法
１．基本的な記述方法
「Cascading Style Sheets」の基本的な記述方法は以下のとおりです。セレクタとは、要素やclassの名前、id などスタイルを適用させる対象を記述する部分です。プロパティには、「color」や「line-height」などそのセレクタに適用するスタイルの種類を記述します。【書 式】
セレクタ { プロパティ: 値 }
また、下記のようにセレクタやプロパティとその値を一度に複数記述することもできます。
セレクタ, セレクタ, セレクタ ... {プロパティ: 値}
セレクタ {プロパティ: 値; プロパティ: 値; ... }
セレクタ {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
・
・
}
※ 「プロパティ」やそこで指定できる「値」については、「CSSリファレンス編」を参照してください。
※ プロパティの種類によっては、独自の書式をもっているものもあります。詳しくは、「CSSリファレンス編」を参照してください。
※ ドキュメント中のすべての内容にスタイルを適用させたい場合には、<BODY>に対してスタイルを指定します。
【使用例】
H1 { color: #0000ff } /* カラーをブルーに設定 */ H1 { text-align: center } /* 行揃えを中央に設定 */ H2 { margin-right: 2em } /* 右マージンを２emに設定 */ BLOCKQUOTE { font-style: italic } /* 斜体で表示 */ BLOCKQUOTE { line-height: 1.5 } /* 行間を1.5倍に設定 */
H1, H2, H3 { color: green } /* カラーをグリーンに設定 */
P { color: green; font-size: 10pt } /* グリーンで10point に設定 */
BODY { margin-top: 1em; /* 上マージン設定 */ margin-right: 2em; /* 右マージン設定 */ margin-bottom: 3em; /* 下マージン設定 */ margin-left: 2em; /* 左マージン設定 */ }
BODY { margin: 1em 2em 3em 2em } /* 上右下左のマージンを一度に設定 */ BODY { margin: 1em 2em } /* マージンを上下=1em、左右=2emに設定 */
２．class の定義
class とは、特定のスタイルに名前をつけて定義しておき、あとで任意の場所でそれを指定して適用できるようにするものです。基本的に以下のような書式で定義します。
【書 式】
.クラス名 { プロパティ: 値 }
要素名.クラス名 { プロパティ: 値 }
ここで「要素名」を指定すると、その要素に対してその「class」が指定された場合にのみ有効なスタイルになります。「要素名」を指定しない場合は、任意の要素に使用できるスタイルとなります。
※ 「プロパティ」やそこで指定できる「値」については、「CSSリファレンス編」を参照してください。
【使用例】
以下の例では、「style01」は基本的にどの要素にでも使用できますが、「style02」は要素として「P」が指定されていますので、他の要素では無効になります。
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
.style01 { color: red }
P.style02 { color: green }
-->
</STYLE>
</HEAD>
<BODY>
<P class="style02">
・・・この範囲の色は緑になります。
</P>
<BLOCKQUOTE class="style01">
・・・この範囲の色は赤になります。
</BLOCKQUOTE>
</BODY>
</HTML>
３．id の定義
id は、特定のスタイルに名前をつけて定義しておき、あとで特定の場所でそれを指定して適用できるようにするものですが、文書中で１ヵ所にしか適用させることができません。したがって、主に例外的なスタイルを適用したい場合に使用します。特に「class=」で複数のスタイルが適用されている要素の一部のスタイルを変更したい場合などに便利です。基本的に以下のような書式で定義します。【書 式】
#id名 { プロパティ: 値 };
要素名#id名 { プロパティ: 値 };
このように、idを定義する場合には「id名」の前に「#」をつけます。さらにその前に「要素名」を指定すると、その要素でその「id」が指定された場合にのみ有効なスタイルになります。「要素名」を指定しない場合は、任意の要素に適用できるスタイルとなります。
※ 「プロパティ」やそこで指定できる「値」については、「CSSリファレンス編」を参照してください。
【使用例】
以下の例では、「MyStyle03」という class にフォントの色（黒）と斜体と行間（1.5倍）を定義し、その後「a01」というidでフォントの色（赤）を定義しています。要素に class「MyStyle03」を指定していても、id「a01」を同時に指定すると、その部分だけ赤い文字で表示されます。
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
.MyStyle03 { color: black }
.MyStyle03 { font-style: italic }
.MyStyle03 { line-height: 1.5 }
#a01 { color: red }
-->
</STYLE>
</HEAD>
<BODY>
<P class="MyStyle03">
・・・この範囲の色は黒の斜体で行間は1.5倍になります。
</P>
<P class="MyStyle03" id="a01">
・・・この範囲の色は赤の斜体で行間は1.5倍になります。
</P>
</BODY>
</HTML>
４．CONTEXTUAL セレクタの定義
CONTEXTUAL セレクタは、指定された特定の要素やスタイルの階層構造に該当する場合にのみ有効なスタイルを定義する場合に使用します。この記述方法を使用することで、例えば「<BLOCKQUOTE>〜</BLOCKQUOTE>の範囲内で<P>〜</P>が使用された場合にのみ適用されるスタイルを定義する」というような指定が可能になります。基本的に以下のような書式で使用します。【書 式】
階層1 階層2 .... 階層n { プロパティ: 値 }
ここでセレクタの部分には、上位の「階層」から順にスペースで区切って、必要なだけ並べて記述します。「階層」の部分には、「要素名」や「.クラス名」や「#id名」を指定することができます。一番最後の「階層n」に該当する部分にスタイルが適用されます。
つまり、「階層1」の範囲の「階層2」の ...... という具合に階層の条件を指定していき、最終的にその階層構造と合致する範囲内にある「階層n」にのみスタイルを適用するということになります。
【使用例】
以下の例では、「BLOCKQUOTE」の中で使用された「P」要素の範囲だけが赤で表示されるように定義しています。
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets Sample</TITLE>
<STYLE type="text/css">
<!--
BLOCKQUOTE P { color: red }
-->
</STYLE>
</HEAD>
<BODY>
<P>
・・・この範囲は普通の色になります。
</P>
<BLOCKQUOTE>
・・・この範囲は普通の色になります。
<P>
・・・この範囲のみ赤で表示されます。
</P>
・・・この範囲は普通の色になります。
</BLOCKQUOTE>
</BODY>
</HTML>
以下の例では、「BLOCKQUOTE」の中でさらに「BLOCKQUOTE」が使用された中の「P」要素の範囲だけが斜体で表示されるように定義しています。BLOCKQUOTE BLOCKQUOTE P { font-style: italic }
以下の例では、class「myStyle」が指定されている範囲内で、さらに「EM」要素の範囲だけが青で表示されるように定義しています。.myStyle EM { color: blue }
以下の例では、id「c44」が指定されている範囲内で、「H2」要素の範囲だけが白で表示されるように定義しています。#c44 H2 { color: white }
以下の例では、３つの CONTEXTUAL セレクタを同時に定義しています。つまり、「H1」の範囲の「B」も、「H2」の範囲の「B」も、「H3」の範囲の「B」も赤で表示されます。H1 B, H2 B, H3 B { color: red }
５．特殊なセレクタ
スタイルは通常、指定した要素の範囲に対して適用されますが、そうではない範囲や状態に対してスタイルを適用させることもできます。これは CSS で「Pseudo-classes」「Pseudo-elements」と言われているものですが、CSS1では以下の３種類があります。・リンクしている部分のスタイル
・１行目に適用するスタイル
・１文字目に適用するスタイル
■ リンクしている部分のスタイルリンク部分には、通常の状態(unvisited)とすでにページを読み込んだ状態(visited)、マウスのボタンを押している間の状態(active)の３種類がありますが、それぞれに対してスタイルを適用することができます。基本的な記述方法は、以下のとおりです。
【書 式】
A:link { プロパティ: 値 }
A:visited { プロパティ: 値 }
A:active { プロパティ: 値 }リンク部分のスタイルは、A要素にのみ使用可能ですので「A」を省略して以下のように記述することもできます。
:link { プロパティ: 値 }
:visited { プロパティ: 値 }
:active { プロパティ: 値 }また、通常の class や CONTEXTUAL セレクタとしても使用することもできます。
A.クラス名:link { プロパティ: 値 }
A.クラス名:visited { プロパティ: 値 }
A.クラス名:active { プロパティ: 値 }※ 「プロパティ」やそこで指定できる「値」については、「CSSリファレンス編」を参照してください。
【使用例】
以下の例では、リンク部分の３つの状態について、それぞれ色を設定しています。
A:link { color: blue }
A:visited { color: green }
A:active { color: black }
以下の例では、通常の class としてリンク部分の色を設定しています。
A.MyClass:link { color: blue }
以下の例は、 CONTEXTUAL セレクタの中で使用した例です。
A:link IMG { border: solid red }
■ １行目に適用するスタイル英語圏の新聞などでは、１行目だけをすべて大文字で表現したりする場合があるようですが、そのような場合に使用されるのがこのスタイルです。主に「P」や「H1」などのブロック単位の要素で使用されます。
【書 式】
要素名:first-line { プロパティ: 値 }
【使用例】
以下の例では、「P」要素の範囲の１行目を大文字で表示します。
P:first-line { font-style: small-caps }
■ １文字目に適用するスタイル
ブロック単位の要素の範囲で、１文字目だけにスタイルを適用させる場合に使用します。
【書 式】
要素名:first-letter { プロパティ: 値 }
【使用例】
以下の例では、「P」要素内の最初の文字を３倍のサイズで表示します。
P:first-letter { font-size: 300% }
６．コメント
スタイルシート内でのコメントの記述方法はＣ言語と同様です。「/* 〜 */」で囲った範囲がコメントになります。コメントの中にさらにコメントを記述することはできません。【使用例】
H1 { color: blue } /* これがコメント */
７．数値の単位
「Cascading Style Sheets」で使用される数値の単位には、絶対的な大きさを表わす単位と、相対的な大きさを表わす単位（大きさが他に依存する単位）があります。単位を記述する場合には、数値と単位の間にスペースを入れないで、続けて記述します。以下の単位を使用することが可能です。
■ 絶対的な大きさを表わす単位 ・in (inches) ... インチ（1インチ = 2.54cm） ・cm (centimeters) ... センチメートル ・mm (millimeters) ... ミリメートル ・pt (points) ... ポイント（1ポイント = 1/72インチ） ・pc (picas) ... パイカ（1パイカ = 12ポイント） ■ 相対的な大きさを表わす単位 ・em (ems) ... 使用されているフォントの高さ ・ex (x-height) ... 文字「x」の高さ ・px (pixels) ... ピクセル（1ピクセル = 出力先に依存） ・% (percentage) ... パーセント 【使用例】
H1 { font-size: 12pt } /* 12 point */
H1 { text-indent: 0.5em } /* 文字の高さの半分：6pt */H2 { line-height: 3cm } /* 3 cm */
H1 { margin: 0.6in } /* 0.6 inches */
| ホーム | ZSPCについて | ニュース | 資料集 | 作成支援 | リンク集 |
E-mail：webmaster@zspc.com