From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../css/getting_started/javascript/index.html | 148 +++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 files/ja/web/guide/css/getting_started/javascript/index.html (limited to 'files/ja/web/guide/css/getting_started/javascript') diff --git a/files/ja/web/guide/css/getting_started/javascript/index.html b/files/ja/web/guide/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..9f8cf9b250 --- /dev/null +++ b/files/ja/web/guide/css/getting_started/javascript/index.html @@ -0,0 +1,148 @@ +--- +title: JavaScript and CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +
+ {{CSSTutorialTOC}}
+

これは CSS チュートリアル 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。

+

第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。

+

代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。

+

前の章（第 1 部）: メディア
+ 次の章: SVG

+

JavaScriptについて

+

JavaScript はプログラミング言語 です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。

+

JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。

+

3 つの方法があります:

+ + + + + + + + +
+ さらに詳しく
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 を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:

+ + + + + + + +
+ + + + + + + + + +
+

JavaScript sample

+
 
+ 		+ + + + + + + + + +
+

JavaScript sample

+
 
+
+
+ この実演についての重要な補足: + +
+ + + + + + + +
+ チャレンジ
スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。
+

チャレンジの解答を見る。

+

さて次は？

+

このページにわかりづらいところやご意見があれば Discussion ページに参加してください。

+

この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: XBL bindings

-- cgit v1.2.3-54-g00ecf