JSS 解説編

「JavaScript Style Sheets」は、JavaScriptで記述するスタイルシートです。したがって、このスタイルシート中で、JavaScript言語を使用することができます。ただ、ほとんどのプロパティ名は「Cascading Style Sheets」と同様で、機能的にも同じようなものを備えていますので、その記述方法を除けば両者とも同様なスタイルを記述することができます。ただし、このスタイルシートを記述するには、JavaScript についての基本的な知識が必要です。

－ＩＮＤＥＸ－
●HTMLの中にスタイルシートを組み込む
　１．<STYLE>～</STYLE>タグにスタイルを書く
 　２．スタイルを記述したファイルを読み込む
 　３．既存のタグの属性としてスタイルを記述する
 　４．<SPAN>タグで部分的にスタイルを適用する
●スタイルシートの記述方法
　１．tags プロパティ
 　２．classes プロパティ
 　３．ids プロパティ
 　４．contextual() メソッド
 　５．コメント
 　６．数値の単位

| CSS解説編 | CSSリファレンス編 | JSS解説編 | JSSリファレンス編 |

●HTMLの中にスタイルシートを組み込む

１．<STYLE>～</STYLE>タグにスタイルを書く
「JavaScript Style Sheets」の最も基本的な記述方法は、<HEAD>～</HEAD>タグのあいだに<STYLE>～</STYLE>タグを記述して、そこにスタイルを記述する方法です。この方法は「Cascading Style Sheets」（CSS）と同様ですので、「TYPE=」属性で「JavaScript Style Sheets」のタイプ「text/javascript」を指定する必要があります。
【使用例】
以下の例では、ドキュメント中の<BLOCKQUOTE>～</BLOCKQUOTE>の範囲の行間（行の高さ）をフォントサイズの1.5倍に設定します。
<HTML> <HEAD> <TITLE>JavaScript Style Sheets Sample</TITLE> <STYLE TYPE="text/javascript">  </STYLE> </HEAD> <BODY> <BLOCKQUOTE> 　・・・この範囲の行間はフォントサイズの1.5倍になります。 </BLOCKQUOTE> </BODY> </HTML>

※ スタイルシートに対応していないブラウザでスタイルシートを記述したドキュメントを見ると、<STYLE>～</STYLE>の範囲に記述したスタイル定義がそのまま画面に表示されてしまう場合があります。したがって、<SCRIPT>～</SCRIPT>の範囲にJavaScriptを記述する場合と同様に「」でスタイルの定義をコメントにする必要があります。

２．スタイルを記述したファイルを読み込む
<STYLE>～</STYLE>の範囲で定義するスタイルは別ファイルに記述して、それを参照するようにすることもできます。この機能は複数のHTMLドキュメントで同じスタイルを共有する場合などに便利です。以下の２つの方法でスタイルのファイルを読み込むことができます。
※ この場合、読み込むファイルには、<STYLE>・</STYLE>タグを記述する必要はありません。
※ 連続して複数のファイルを読み込むことも可能です。
※ いずれの場合も、<HEAD>～</HEAD>の間に記述します。

■ <STYLE>タグの「SRC=」属性を利用して読み込む。
【使用例】
<STYLE TYPE="text/javascript" SRC="http://www.zspc.com/abc.jss"> </STYLE>

■ <LINK>タグを使用して読み込む。
【使用例】
<LINK REL="stylesheet" TYPE="text/javascript" HREF="http://www.zspc.com/abc.jss" TITLE="Example">

※ <LINK>タグの各属性については「Super HTML Reference」を参照してください。

３．既存のタグの属性としてスタイルを記述する
既存のタグに「STYLE=」属性を指定して、そのタグの範囲に有効なスタイルを直接記述することができます。
また、後述しますが「classes」や「ids」プロパティとして、<STYLE>～</STYLE>の範囲または外部のファイルにスタイルをあらかじめ定義しておき、既存のタグの「CLASS=」・「ID=」属性としてスタイルを指定することも可能です。

■ 「STYLE=」属性
任意のタグの属性として直接スタイルを記述したい場合に使用します。
【使用例】
以下の例では、<BLOCKQUOTE>の「STYLE=」属性にスタイルを直接記述して指定しています。
<BLOCKQUOTE STYLE="lineHeight = 1.5"> 　・・・この範囲の行間はフォントサイズの1.5倍になります。 </BLOCKQUOTE>

■ 「CLASS=」属性
あらかじめ定義しておいたスタイルを任意のタグで指定したい場合に使用します。
【使用例】
以下の例では、まず「test1」というスタイルを CLASS としてあらかじめ定義しておき、<P>タグでそれを適用しています。（classes の定義方法については後述）
<HTML> <HEAD> <TITLE>JavaScript Style Sheets Sample</TITLE> <STYLE TYPE="text/javascript">  </STYLE> </HEAD> <BODY> <P CLASS = "test1"> 　・・・この範囲の色は赤になります。 </P> </BODY> </HTML>
※ 「all」の部分を特定のタグの名前にすると、そのタグにのみ有効な CLASS を作成することができます。

■ 「ID=」属性
すでにスタイルが指定されているタグに対して、例外的なスタイルを適用したい場合に使用します。特に複数のスタイルが適用されているタグの一部のスタイルを変更したい場合などに便利です。
【使用例】
以下の例では、「test1」というスタイルにフォントの色（黒）と行間（1.5）を定義しています。その後「ids」プロパティを使用して、「A01」というIDでフォントの色（赤）を定義しています（ids の定義方法については後述）。タグにCLASS 「test1」を指定していても、ID「A01」を同時に指定すると、その部分だけIDに該当するスタイルに変更されます。
<HTML> <HEAD> <TITLE>JavaScript Style Sheets Sample</TITLE> <STYLE TYPE="text/javascript">  </STYLE> </HEAD> <BODY> <P CLASS = "test1"> 　・・・この範囲の色は黒で行間は1.5倍になります。 </P> <P CLASS = "test1" ID="A01"> 　・・・この範囲の色は赤で行間は1.5倍になります。 </P> </BODY> </HTML>

４．<SPAN>タグで部分的にスタイルを適用する
上記の「３．既存のタグの属性としてスタイルを記述する」では、既存のタグの効果（範囲）にスタイルを加える方法を説明しましたが、<SPAN>～</SPAN>タグを使用すると指定した部分にスタイルのみを適用させることができます。
【使用例】
以下の例では、まず「test1」というスタイルを CLASS としてあらかじめ定義しておき、<SPAN>タグでそれを適用しています。
<HTML> <HEAD> <TITLE>JavaScript Style Sheets Sample</TITLE> <STYLE TYPE="text/javascript">  </STYLE> </HEAD> <BODY> <P> ＲＧＢの「Ｂ」とは、「 <SPAN CLASS = "test1"> BLUE </SPAN> 」の意味です。 </P> </BODY> </HTML>

●スタイルシートの記述方法

１．tags プロパティ
tags プロパティは、特定のタグに対してスタイルを適用させたい場合に使用する、document オブジェクトのプロパティです。基本的に以下のような書式で使用します。（「document.」は省略することができます）
【書　式】
　　document.tags.タグ名.スタイルプロパティ = 値;
　　tags.タグ名.スタイルプロパティ = 値;
１つのタグに対してたくさんのスタイルを指定する場合には、JavaScriptの「with」を使用して、以下のように記述することもできます。
　　with(tags.タグ名) {
　　　　スタイルプロパティ = 値;
　　　　スタイルプロパティ = 値;
　　　　スタイルプロパティ = 値;
　　　　　　　・
　　　　　　　・
　　}

また、複数のスタイルを簡単に記述できるメソッドを利用することもできます。
　　tags.タグ名.スタイルメソッド(値1, 値2, ... );
※ 「スタイルプロパティ」やそこで指定できる「値」、「スタイルメソッド」については、「JSSリファレンス編」を参照してください。
※ ドキュメント中のすべての内容にスタイルを適用させたい場合には、<BODY>タグにスタイルを定義します。
【使用例】
tags.H1.color = "#0000FF";  // カラーをブルーに設定
tags.H1.textAlign = "center";  // 行揃えを中央に設定
tags.H2.marginRight = "2em";  // 右マージンを２emに設定
tags.BLOCKQUOTE.fontStyle = "italic";  // 斜体で表示
tags.BLOCKQUOTE.lineHeight = 1.5;  // 行間を1.5倍に設定



with(tags.BODY) {
    marginTop = "1em";     // 上マージン設定
    marginRight = "2em";   // 右マージン設定
    marginBottom = "3em";  // 下マージン設定
    marginLeft = "2em";    // 左マージン設定
}


tags.BODY.margins("1em", 2em", "3em", "2em");  
// 上右下左のマージンを一度に設定
２．classes プロパティ
classes プロパティは、特定のスタイルに名前をつけて定義しておき、あとで任意の場所でそれを指定して使用しようできるようにするものです。基本的に以下のような書式で定義します。
【書　式】
　　classes.クラス名.all.スタイルプロパティ = 値;
　　classes.クラス名.タグ名.スタイルプロパティ = 値;
ここで「タグ名」を指定すると、そのタグで「CLASS=」属性として指定された場合にのみ有効なスタイルになります。「all」を指定した場合は、任意のタグに使用できるスタイルとなります。
※ 「スタイルプロパティ」やそこで指定できる「値」については、「JSSリファレンス編」を参照してください。
【使用例】
以下の例では、「style01」は基本的にどのタグにでも使用できますが、「style02」は「P」タグが指定されていますので、他のタグでは無効になります。
<HTML> <HEAD> <TITLE>JavaScript Style Sheets Sample</TITLE> <STYLE TYPE="text/javascript">  </STYLE> </HEAD> <BODY> <P CLASS = "style02"> 　・・・この範囲の色は緑になります。 </P> <BLOCKQUOTE CLASS = "style01"> 　・・・この範囲の色は赤になります。 </BLOCKQUOTE> </BODY> </HTML>

３．ids プロパティ
ids プロパティは特定のスタイルに名前をつけて定義しておき、あとで任意の場所でそれを指定して使用しようできるようにするものですが、特に例外的なスタイルを適用したい場合に使用します。特に「CLASS=」で複数のスタイルが適用されているタグの一部のスタイルを変更したい場合などに便利です。基本的に以下のような書式で定義します。
【書　式】
　　ids.ID名.スタイルプロパティ = 値;
HTMLドキュメント中でこのIDのスタイルを適用させるには、タグの「ID=」属性に「ID名」を指定します。
※ 「スタイルプロパティ」やそこで指定できる「値」については、「JSSリファレンス編」を参照してください。

【使用例】
以下の例では、「MyStyle03」というクラスにフォントの色（黒）と斜体と行間（1.5倍）を定義しています。その後「ids」プロパティを使用して、「A01」というIDでフォントの色（赤）を定義しています。タグにクラス「MyStyle03」を指定していても、ID「A01」を同時に指定すると、その部分だけ赤い文字で表示されます。
<HTML> <HEAD> <TITLE>JavaScript Style Sheets Sample</TITLE> <STYLE TYPE="text/javascript">  </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>が使用された場合にのみ適用されるスタイルを定義する」というような指定が可能になります。基本的に以下のような書式で使用します。
【書　式】
　　tags.contextual(階層1, 階層2, .... , 階層n).スタイルプロパティ = 値;
ここで（）の中には、上位の「階層」から順に「,」で区切って、必要なだけ並べて記述します。「階層」の部分には、「tags.○○」や「classes.○○」や「ids.○○」を指定することができます。一番最後の「階層n」に該当する部分にスタイルが適用されます。
つまり、「階層1」の範囲の「階層2」の ...... という具合に階層の条件を指定していき、最終的にその階層構造と合致する範囲内にある「階層n」にのみスタイルを適用するということになります。
【使用例】
以下の例では、「BLOCKQUOTE」の中で使用された「P」タグの範囲だけが赤で表示されるように定義しています。
<HTML> <HEAD> <TITLE>JavaScript Style Sheets Sample</TITLE> <STYLE TYPE="text/javascript">  </STYLE> </HEAD> <BODY> <P> 　・・・この範囲は普通の色になります。 </P> <BLOCKQUOTE> 　・・・この範囲は普通の色になります。 <P> 　・・・この範囲のみ赤で表示されます。 </P> 　・・・この範囲は普通の色になります。 </BLOCKQUOTE> </BODY> </HTML>

以下の例では、「BLOCKQUOTE」の中でさらに「BLOCKQUOTE」が使用された中の「P」タグの範囲だけが斜体で表示されるように定義しています。
tags.contextual(tags.BLOCKQUOTE, tags.BLOCKQUOTE, tags.P).fontStyle = "italic";

以下の例では、「myStyle」クラスが指定されている範囲内で、「EM」タグが指定された範囲だけが青で表示されるように定義しています。
tags.contextual(classes.myStyle.all, tags.EM).color = "blue";

以下の例では、ID「C44」が指定されている範囲内で、「H2」タグが指定された範囲だけが白で表示されるように定義しています。
tags.contextual(ids.C44, tags.H2).color = "white";

５．コメント
スタイルシート内でのコメントの記述方法は、JavaScriptと同様です。（つまり、ＣやＣ++と同様です。）「//」と「/* ～ */」の２通りの記述方法があります。
【使用例】
以下の例では、「//」からその行の終りまでがコメントになります。
tags.BLOCKQUOTE.lineHeight = 1.5; // これがコメント

以下の例では、「/*」から「*/」の範囲がコメントになります。複数行のコメントを書きたい場合は、この方法で記述します。
tags.BLOCKQUOTE.lineHeight = 1.5; /* これがコメント */

６．数値の単位
「JavaScript Style Sheets」で使用される数値の単位には、絶対的な大きさを表わす単位と、相対的な大きさを表わす単位（大きさが他に依存する単位）があります。単位を記述する場合には、数値と単位の間にスペースを入れないで、続けて記述します。以下の単位を使用することが可能です。

■ 絶対的な大きさを表わす単位

・pt (points) 　...　ポイント（1ポイント = 1/72インチ）

・pc (picas) 　...　パイカ（1パイカ = 12ポイント）

■ 相対的な大きさを表わす単位

・em (ems) 　...　使用されているフォントの高さ

・ex (x-height) 　...　文字「x」の高さ

・px (pixels) 　...　ピクセル（1ピクセル = 出力先に依存）

・% (percentage) 　...　パーセント

【使用例】

tags.H4.fontSize = "1pc" // 12 point
tags.H4.fontSize = "0.5em" // 半分の高さ
tags.BODY.fontSize = "12pt" // 12 point tags.BODY.textIndent = "3em" // 36 point

E-mail：webmaster@zspc.com

■ 絶対的な大きさを表わす単位
`・pt (points)`	...	ポイント（1ポイント = 1/72インチ）
`・pc (picas)`	...	パイカ（1パイカ = 12ポイント）
■ 相対的な大きさを表わす単位
`・em (ems)`	...	使用されているフォントの高さ
`・ex (x-height)`	...	文字「x」の高さ
`・px (pixels)`	...	ピクセル（1ピクセル = 出力先に依存）
`・% (percentage)`	...	パーセント

－ ＩＮＤＥＸ －

●HTMLの中にスタイルシートを組み込む

１．<STYLE>～</STYLE>タグにスタイルを書く

２．スタイルを記述したファイルを読み込む

３．既存のタグの属性としてスタイルを記述する

４．<SPAN>タグで部分的にスタイルを適用する

●スタイルシートの記述方法

１．tags プロパティ

２．classes プロパティ

３．ids プロパティ

４．contextual() メソッド

５．コメント

６．数値の単位

－ＩＮＤＥＸ－