勝手にHTML4.0講座 - スクリプト スタイルシート

1.スクリプトの概説

クライアント側スクリプトというのは、HTML文書中に埋め込まれたりHTML文書に対して作業するプログラムのことです。 このプログラムは文書が読み込まれた時、あるいはリンクがアクティブにされたときなどの何かのタイミングで起動します。 HTMLのスクリプト機能は、スクリプト言語の種別は問いません。
スクリプトを使うと、動きのあるHTML文書や、読み手に反応する文書を作成できます。

HTML文書に添付できるスクリプトには、次の2つの型があります。


2.<SCRIPT>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
src = URI外部スクリプトデータの所在を指定します。
type = MIMEタイプ使用するスクリプト言語の種類をMIMEタイプで指定します。
language = 文字列スクリプト言語種を指定します。普通は使いません。[非推奨]
deferここで使用するスクリプトが文書の本文を生成するプログラムを含まないことを記します。
その他charset

SCRIPT要素は、文書中にスクリプトを組み込むものです。 HTML文書のHEAD要素中、あるいはBODY要素中に何回でも記すことができます。

スクリプトはSCRIPT要素の内容として記すか、外部ファイルをして記します。 src属性がなければSCRIPT要素の内容がスクリプトとして解釈されます。 src属性の値がURIだった場合、SCRIPT要素の内容を無視して指定先URIのファイルが参照されます。

個々のスクリプトデータの記し方は、使用するスクリプト言語の文法に従うことになります。 スクリプトを書くときは、どのスクリプト言語を使用するかを明示する必要があります。 明示する方法は使用する基本スクリプト言語を一回宣言する方法と、文書中で逐一宣言する方法の2通りがあります。

基本スクリプト言語を一回宣言する方法は、ヘッダー部でMETA要素によって宣言します。 そのときtype属性にスクリプト言語名をMIMEタイプで記します。(text/javascript,text/vbscriptなど) またHTTPヘッダの「Content-Script-Type」でも宣言できます。

<META http-equiv="Content-Script-Type" content="type">

文書中に現れる全てのSCRIPT要素でtype属性を通じた使用言語の設定が必要ですが、 基本スクリプト言語が宣言されていた場合の各SCRIPT要素での設定は、基本使用言語を上書きします。
下の例は、基本スクリプト言語が「text/tcl」、 ヘッド部では「text/vbscript」による外部スクリプトを参照し、 ボディー部のスクリプトは「text/javascript」で書かれています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>A document with SCRIPT</TITLE> <META http-equiv="Content-Script-Type" content="text/tcl"> <SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc"></SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> ...JavaScriptのプログラム... </SCRIPT> </BODY> </HTML>


3.<NOSCRIPT>要素

開始タグ: 必要
終了タグ: 必要

このNOSCRIPT要素は、スクリプトが実行されない環境での代替物となる文章を記すために利用します。
次の例文のような文書を読み込むと、SCRIPT要素の内容を実行できる場合は文書を動的に生成し、 実行できない場合はリンクを表示し、リンクを辿ってデータを読んでもらうことになります。

<SCRIPT type="text/javascript"> ...本文中にデータを追加するようなJavaScript... </SCRIPT> <NOSCRIPT> <A href="http://someplace.com/data">ここ</A>にアクセス! </NOSCRIPT>


4.内在イベント

内在イベント = スクリプト説明
onload = script文書を全て読み込み終わったときに発生します。BODY要素かFRAMESET要素で設定します。
onunload = script文書が表示されなくなった時に発生します(別の文書を表示したときなど)。BODY要素かFRAMESET要素で設定します。
onclick = scriptマウスなどがクリックされたときに発生します。
ondblclick = scriptマウスなどがダブルクリックされたときに発生します
onmousedown = scriptマウスなどのボタンが押し下げられたときに発生します。
onmouseup = scriptマウスなどのボタンが離されたときに発生します。
onmouseover = scriptマウスなどのカーソルがそのコントロールなどに移動したときに発生します。
onmousemove = scriptマウスなどのカーソルがそのコントロールなどの中で動いたときに発生します。
onmouseout = scriptマウスなどのカーソルがそのコントロールなどから移動していったときに発生します。
onfocus = scriptそのコントロールが、マウスやタブキー移動などによってフォーカスを受けたとき(選択されたとき)に発生します。
onblur = scriptonfocusと反対で、フォーカスを失ったときに発生します。
onkeypress = scriptそのコントロール内でキーボードのキーが押されて離されたときに発生します。
onkeydown = scriptそのコントロール内でキーボードのキーが押し下げられたときに発生します。
onkeyup = scriptそのコントロール内でキーボードのキーが話されたときに発生します。
onsubmit = scriptユーザーがフォームを送信するときに発生します。
onreset = scriptユーザーがフォームをリセットするときに発生します。
onselect = scriptテキスト入力欄内のテキストが選択されたときに発生します。INPUT要素と、TEXTAREA要素で設定可能です。
onchange = scriptそのコントロールがフォーカスを失った時点で、内容が変化しているときに発生します。

内在イベント値はスクリプトであり、それらのスクリプトはイベントが発生するたびに動作します。 複数のイベントを連結させて1つの動作が起こるような文書を作成することも可能です。 スクリプトの記述方法は各スクリプト言語の文法に依存します。
フォームのコントロールを表す INPUT SELECT BUTTON TEXTAREA LABEL要素は、各々固有の内在イベントを発生させます。 これらの要素をフォーム以外の部分で使用してグラフィカルなユーザインタフェースとして機能させるような使い道もあります。

次の例ではテキスト入力欄userNameに入力を終えると、onblurイベントによりuserNameの内容が調べられます。 二番目は別の例です。

<INPUT NAME="userName" onblur="validUserName(this.value)"> <INPUT NAME="num" onchange="if(!checkNum(this.value, 1, 10)){this.focus();this.select();} else{thanks()}" VALUE="0">

続いて、スクリプトの記述にイベントを組み込んだJavaScriptの例を挙げます。

<BUTTON type="button" name="mybutton" value="10"> <SCRIPT type="text/javascript"> function my_onclick() { ... } document.form.mybutton.onclick = my_onclick </SCRIPT> </BUTTON> <SCRIPT type="text/javascript"> function my_onload() { ... } var win = window.open("some/other/URI") if(win) win.onload=my_onload </SCRIPT>

文書の読み込みと同時に動作するスクリプトは、文書の内容を動的に変更することが可能です。 その能力はスクリプト言語自体に依存します。

次の例は文書の動的変更がどのようになされるかを示すものです。 二番目は、HTMLで同等の表記をした場合です。

<TITLE>Test Document</TITLE> <SCRIPT type="text/javascript"> document.write("<b>Hello World!<\/b>") </SCRIPT> <TITLE>Test Document</TITLE> <B>Hello World!</B>


5.スクリプトデータの隠蔽

SCRIPT要素に対応していない場合、その内容であるスクリプトデータそのものを普通の文章のように表示してしまいがちです。 JavaScript、VBScript、Tclを初めとするスクリプト実行環境は、スクリプトそのものをSGMLのコメントとして記せるような仕組みを備えています。 そこでコメントとして記しておけば、SCRIPT要素に対応していない場合はスクリプト内容を無視し、 コメント式記法に対応しているスクリプト実行環境においてはスクリプト内容が実行されることとなります。

スクリプト内容を隠すための別の方法は、全スクリプトを外部データとして提供しsrc属性による参照によって実行させる形をとることです。

JavaScriptでは、SCRIPT要素の開始タグ直後の行頭に「<!--」が記してあれば、その行に書かれている内容はコメントになります。 JavaScriptのコメントは、行頭に「//」を記した1論理行で表します。 スクリプトデータを隠蔽するときは、JavaScriptのコメントとして「//」から始め、コメントの終了タグ「-->」をその末尾に記します。

<SCRIPT type="text/javascript"> <!-- to hide script contents from old browsers function square(i) { document.write("The call passed ", i ," to the function.","<BR>") return i * i } document.write("The function returned ",square(5),".") // end hiding contents from old browsers --> </SCRIPT>

VBScriptの言語体系では単引用符「'」から始まる文が、VBScriptのコメントとなります。 前のように、SGMLコメントを閉じる部分は単引用符から始まる文として記します。

<SCRIPT type="text/vbscript"> <!-- Sub foo() ... End Sub ' --> </SCRIPT>

Tclでは、「#」で始まる文が、Tclのコメントとなります。

<SCRIPT type="text/tcl"> <!-- to hide script contents from old browsers proc square {i} { document write "The call passed $i to the function.<BR>" return [expr $i * $i] } document write "The function returned [square 5]." # end hiding contents from old browsers --> </SCRIPT>


6.スタイルシート概要

文書の見た目よりも中身が重要視される場合もありますが、見た目を重要視する場合もたくさんあります。 スタイルシートは見た目を重要視する場合に、有効な手段です。
以下に列記した方法は、特定の読者層には成立しますが全ての人々に置いて成り立つ表現ではありません。
これらの方法はWebページを複雑にし、変更に対する柔軟性を損ない、共同利用ができなくなる可能性を引き起こします。 スタイルシートは、上記の問題を解決すると同時にHTMLの貧弱な表現力を置き換えます。
例えば、次のちょっとしたCSSスタイルシート(special.cssというファイル名で記録)は、 段落の文字色を緑色にし、段落の周囲を赤実線で囲うよう指定する内容となっています。

P.special { color : green; border: solid red; }

このスタイルシートを利用する場合、LINK要素によってスタイルシートファイルへのリンクを指定します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <LINK href="special.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">この段落の文章は特別に緑の文字で表示されます。</P> </BODY> </HTML>

HTML 4.0 では、スタイルシートの次の機能をサポートしています。
HTML文書へのスタイル設定は文書そのものに埋め込むこともできますし、 外部スタイルシートの情報を参照することもできます。

多くのスタイルシート言語がHTMLのスタイル設定に利用できます。 例文を記すスタイルシート言語として「Cascading Style Sheets」略して「CSS」を用います。

HTML文書に対してスタイルシート言語によるスタイル設定を行う場合には、 使用するスタイルシート言語の種別を宣言する必要があります。

文書の基準となるスタイルシート言語についてはMETA要素による宣言を行う必要があります。 例えばCSSにする場合、文書のHEAD要素内でMETA宣言を記して下さい。また、HTTPヘッダ部でも宣言できます。

<META http-equiv="Content-Style-Type" content="text/css"> Content-Style-Type: text/css


7.<STYLE>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値説明
type = MIMEタイプこのSTYLE要素で使用するスタイルシート言語をMIMEタイプで指定します。必ず指定します。
media = 出力メディアスタイル設定の効力を及ぼす出力メディアを指定します。既定値はscreenです。
その他lang , dir , title

STYLE要素は、文書の初めの方で文書のスタイル設定を一括して組み込むためのものです。 HEAD要素内に、複数のSTYLE要素を記しても構いません。
CSSでは、STYLE要素によって次のような設定が行えます。

次の例はCSSによるSTYLE宣言で、文書中の全H1要素を枠線で囲みかつ中央揃えにするものです。
二番目の例はclass属性を使い、ある特定のH1要素にのみ適応させた例です。
三番目の例は、id属性により特定の要素のみにスタイル指定をした例です。

<HEAD> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <HEAD> <STYLE type="text/css"> H1.myclass {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass">この標題H1には独自のスタイル指定が施されます</H1> <H1>この標題H1にはスタイル指定が施されません</H1> </BODY> <HEAD> <STYLE type="text/css"> #myid {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass">スタイル指定がされません</H1> <H1 id="myid">スタイル指定が有効です</H1> <H1>スタイル指定がされません</H1> </BODY>

スタイル設定にいちばん有用な要素はDIV要素とSPAN要素です。 この2要素だけは、文書内での構造的意味づけが存在しないからです。 この2要素のclass属性やid属性を活かせば、HTML表現を限りなく拡張させることができます。

次の例ではSPAN要素を使って、段落冒頭のみを小さい大文字のフォントで表示するスタイル設定をしています。
二番目の例ではDIV要素とclass属性を使って、 概要 の書式が字間調整ありの状態に設定されています。

<HEAD> <STYLE type="text/css"> SPAN.sc-ex { font-variant: small-caps } </STYLE> </HEAD> <BODY> <SPAN class="sc-ex">The first</SPAN> few words of this paragraph are in small-caps. </BODY> <HEAD> <STYLE type="text/css"> DIV.Abstract { text-align: justify } </STYLE> </HEAD> <BODY> <DIV class="Abstract"> The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products. Chieftain replaces the Commander range, which will remain on the price list until further notice. </DIV> </BODY>


HTML 4.0では、各出力メディアの特徴を生かした文書デザインを行うことができます。 STYLE要素のmedia属性を設定しておくと、出力環境に合わせたスタイル設定のみを拾い出すことが可能になります。

次の例ではH1要素に対してスタイル設定が施されていて、投影装置(projection)のときは青字になり、 印刷(print)された場合には中央揃えになるよう指定されています。 そして音声出力の場合は、A要素の前後に効果音を付けるように指定されています。

<STYLE type="text/css" media="projection"> H1 { color: blue} </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE> <STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE>


8.外部スタイルシート

HTML文書とスタイルシートとを別々のファイルとして保存・活用することもできます。 これには次のような利点があります。


HTML 4.0では、あるHTML文書に対して幾つでも外部スタイルシートをリンクさせることができます。
スタイル設定を行う場合、相互補完的な関係にある代替スタイルシートを用意することもできます。 ユーザーはその中から、好みに応じた設定内容のものを選択できます。 代替スタイルシートを用意する場合、そのうちの1つを第一指定のスタイルシートとして指定することもできます。 ユーザーの指示が無い限り、第一指定のスタイルシートに基づいた表示を行う必要があります。
また代替スタイルシートを用意する場合、同じスタイル名を共有するスタイル設定としてグループ化することもできます。 その名前のスタイル設定を選んだ場合、グループに属するスタイルシート全てを参照する必要があります。
さらに代替スタイルシートに加えて、常に参照する必要のある固定スタイルシートを用意することもできます。

外部スタイルシートの指定は、LINK要素における次の属性によって設定します。

次の例ではまず、「mystyle.css」という名のファイルとして固定スタイルシートが用意されています。 二番目の例は、始めの例にtitle属性をつけ加えたもので、第一指定スタイルシート設定になります。 三番目の例は、代替用スタイルシートの設定となります。

<LINK href="mystyle.css" rel="stylesheet" type="text/css"> <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css"> <LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">


第一指定のスタイルシートは、META要素によって設定することもできます。 例えば第一指定のスタイルを「compact」にする場合、次のMETA宣言をHEAD要素に記します。 またHTTPヘッダ文でも設定可能です。

<META http-equiv="Default-Style" content="compact"> Default-Style: "compact"

もしMETA宣言やHTTPヘッダに2つ以上のスタイルシート言語指定が記されていた場合、 最後に記されたものが優先的に使用されます。 この際HTTPヘッダの指定はHTMLのHEAD要素より先に記されたものとして扱われます。 しかしLINK要素で2つ以上の第一指定スタイルシートが設定されていた場合は、 最初に記されたものが優先して使用されます。 META宣言やHTTPヘッダで指定された第一指定スタイルシートは、 LINK要素よりも優先して使用されます。

CSSのようにカスケードが可能なスタイルシート言語は、複数のスタイル設定を組み合わせて利用できます。 けれども、全てのスタイルシート言語がカスケード機能をサポートしているわけではありません。 カスケードを行うためには、LINK要素かSTYLE要素を複数並べて記します。 カスケードは、それらがHEAD要素中に記された順で行われます。

次の例には、「compact」と名づけたスタイルシートが2つあります。 ユーザーが「compact」スタイル設定での表示を選択した場合、この両方と「common.css」の3つが参照されます。 また「bigprint」スタイル設定での表示が選択された場合には、このスタイルシートと「common.css」とが参照されます。

<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> <LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css"> <LINK rel="stylesheet" href="common.css" type="text/css">

また、出力メディアに応じて異なる表現方法を想定したスタイル設定のカスケードも行われ得ます。

スタイルシート非対応環境では、STYLE要素の内容が表示されてしまう場合があります。 その場合は、内容をHTMLのコメント文として記してしまうという方法があります。 次の例は、CSSでの STYLE要素内容の隠し方を記したものです。

<STYLE type="text/css"> <!-- H1 { color: red } P { color: blue} --> </STYLE>

同一グループのHTML文書に対しては、サーバーの設定でスタイルシート設定が出来れば便利な場合があります。 HTTPのLinkヘッダは、属性と値が等しいHTMLのLINK要素と、同じ効力を持ちます。 複数のLinkヘッダは、複数のLINK要素と同じ効果を同じ順序で発揮します。

例えば、次のLinkヘッダは、下記の「LINK」要素に相当します。

Link: <http://www.acme.com/corporate.css>; REL=stylesheet <LINK rel="stylesheet" href="http://www.acme.com/corporate.css">


★INDEX★