これは CSS チュートリアル 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。
第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。
代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。
JavaScriptについて
JavaScript はプログラミング言語 です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。
JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。
3 つの方法があります:
- 文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集
- スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集
- DOM 内の 個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します
| JavaScript, についてのさらに詳しい情報は、この wiki の JavaScript のページをご覧ください。 |
実習: JavaScript の実演
新規 HTML 文書 doc5.html を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:
<!DOCTYPE html> <html> <head> <title>Mozilla CSS Getting Started - JavaScript demonstration</title> <link rel="stylesheet" type="text/css" href="style5.css" /> <script type="text/javascript" src="script5.js"></script> </head> <body> <h1>JavaScript sample</h1> <div id="square"></div> <button type="button" onclick="doDemo(this);">Click Me</button> </body> </html>
新規 CSS ファイル style5.css を作り、次の内容をコピー＆ペーストしてください:
/*** JavaScript demonstration ***/
#square {
width: 20em;
height: 20em;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
新規テキストファイル script5.js を作り、以下の内容をコピー＆ペーストしてください:
// JavaScript demonstration
function doDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "#fa4";
button.setAttribute("disabled", "true");
setTimeout(clearDemo, 2000, button);
}
function clearDemo (button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
ブラウザで HTML 文書を開いて、ボタンを押してください。
この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:
|
|
- HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています
- スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。
- JavaScript では、
document.getElementById("square")は CSS セレクタ#squareと、機能的に同義です。 - JavaScript では、
backgroundColorは CSSのプロパティbackground-colorに相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。 - ブラウザ内蔵の CSS ルールには
button[disabled="true"]に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。
| スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。 |
さて次は？
このページにわかりづらいところやご意見があれば Discussion ページに参加してください。
この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: XBL bindings