aboutsummaryrefslogtreecommitdiff
path: root/files/ja/conflicting
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-07-30 13:27:16 +0900
committerGitHub <noreply@github.com>2021-07-30 13:27:16 +0900
commit1e548ca157861d80e5447962cc576f8681580f4e (patch)
tree52f515b5f5abbb767dbe0140aaf3e8ea772e1973 /files/ja/conflicting
parent17154f0db834186d94a5e897db32466ee43af8c5 (diff)
downloadtranslated-content-1e548ca157861d80e5447962cc576f8681580f4e.tar.gz
translated-content-1e548ca157861d80e5447962cc576f8681580f4e.tar.bz2
translated-content-1e548ca157861d80e5447962cc576f8681580f4e.zip
conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents を削除 (#1599)
Diffstat (limited to 'files/ja/conflicting')
-rw-r--r--files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html150
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;">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-
-&lt;head&gt;
-&lt;title&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/title&gt;
-&lt;link rel="stylesheet" type="text/css" href="style5.css" /&gt;
-&lt;script type="text/javascript" src="script5.js"&gt;&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;h1&gt;JavaScript sample&lt;/h1&gt;
-
-&lt;div id="square"&gt;&lt;/div&gt;
-
-&lt;button type="button" onclick="doDemo(this);"&gt;Click Me&lt;/button&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</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>