diff options
Diffstat (limited to 'files/ja/conflicting/learn')
| -rw-r--r-- | files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html | 150 |
1 files changed, 0 insertions, 150 deletions
diff --git a/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html deleted file mode 100644 index a8a29ff6c8..0000000000 --- a/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: JavaScript and CSS -slug: conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -tags: - - CSS - - CSS:Getting_Started -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript -original_slug: Web/Guide/CSS/Getting_started/JavaScript ---- -<div> - {{CSSTutorialTOC}}</div> -<p>これは <a href="/ja/docs/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">CSS チュートリアル</a> 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。</p> -<p>第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。</p> -<p>代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。</p> -<p>前の章（第 1 部）: <a href="/ja/docs/CSS/Getting_Started/Media" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Media">メディア</a><br> - 次の章: <a href="/ja/docs/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/ja/CSS/Getting_Started/SVG_graphics">SVG</a></p> -<h2 id="Information:_JavaScript" name="Information:_JavaScript">JavaScriptについて</h2> -<p>JavaScript は<em>プログラミング言語</em> です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。</p> -<p>JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。</p> -<p>3 つの方法があります:</p> -<ul> - <li>文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集</li> - <li>スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集</li> - <li>DOM 内の 個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します</li> -</ul> -<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> - <caption> - さらに詳しく</caption> - <tbody> - <tr> - <td>JavaScript, についてのさらに詳しい情報は、この wiki の <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> のページをご覧ください。</td> - </tr> - </tbody> -</table> -<h2 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">実習: JavaScript の実演</h2> -<p>新規 HTML 文書 <code>doc5.html</code> を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:</p> -<div style="width: 48em;"> - <pre class="brush: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> -</pre> -</div> -<p>新規 CSS ファイル <code>style5.css</code> を作り、次の内容をコピー＆ペーストしてください:</p> -<div style="width: 48em;"> - <pre class="brush:css;">/*** JavaScript demonstration ***/ -#square { - width: 20em; - height: 20em; - border: 2px inset gray; - margin-bottom: 1em; -} - -button { - padding: .5em 2em; -} -</pre> -</div> -<p>新規テキストファイル <code>script5.js</code> を作り、以下の内容をコピー＆ペーストしてください:</p> -<div style="width: 48em;"> - <pre class="brush: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"); -} -</pre> -</div> -<p>ブラウザで HTML 文書を開いて、ボタンを押してください。</p> -<p>この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:</p> -<table> - <tbody> - <tr> - <td style="padding-right: 2em;"> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript sample</strong></p> - </td> - </tr> - <tr> - <td> </td> - </tr> - </tbody> - </table> - </td> - <td> - <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> - <tbody> - <tr> - <td> - <p><strong>JavaScript sample</strong></p> - </td> - </tr> - <tr> - <td style="background: #fa4;"> </td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -<div class="note"> - この実演についての<strong>重要な補足</strong>: - <ul> - <li>HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています</li> - <li>スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。</li> - <li>JavaScript では、<code>document.getElementById("square")</code> は CSS セレクタ <code>#square</code> と、機能的に同義です。</li> - <li>JavaScript では、<code>backgroundColor</code> は CSSのプロパティ <code>background-color</code> に相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。</li> - <li>ブラウザ内蔵の CSS ルールには<br> - <code>button{{mediawiki.external('disabled=\"true\"')}}</code> に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。</li> - </ul> -</div> -<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> - <caption> - チャレンジ</caption> - <tbody> - <tr> - <td>スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。</td> - </tr> - </tbody> -</table> -<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#JavaScript">チャレンジの解答を見る。</a></p> -<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> -<p>このページにわかりづらいところやご意見があれば <a href="/Talk:ja/CSS/Getting_Started/JavaScript" title="Talk:ja/CSS/Getting_Started/JavaScript">Discussion</a> ページに参加してください。</p> -<p>この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: <strong><a href="/ja/docs/CSS/Getting_Started/XBL_bindings" title="CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> |