diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
| commit | fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch) | |
| tree | 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/ja/orphaned/web | |
| parent | 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff) | |
| parent | eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff) | |
| download | translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip | |
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/ja/orphaned/web')
43 files changed, 38 insertions, 3193 deletions
diff --git a/files/ja/orphaned/web/api/htmlorforeignelement/index.html b/files/ja/orphaned/web/api/htmlorforeignelement/index.html deleted file mode 100644 index 99197278cb..0000000000 --- a/files/ja/orphaned/web/api/htmlorforeignelement/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: HTMLOrForeignElement -slug: orphaned/Web/API/HTMLOrForeignElement -tags: - - API - - HTML - - HTMLElement - - HTMLOrForeignElement - - Interface - - MathML - - MathMLElement - - Mixin - - Reference - - SVG - - SVGElement - - ミックスイン -translation_of: Web/API/HTMLOrForeignElement -original_slug: Web/API/HTMLOrForeignElement ---- -<div>{{APIRef("HTML DOM")}}{{Draft}}</div> - -<p><span class="seoSummary"><strong><code>HTMLOrForeignElement</code></strong> ミックスインは、 {{DOMxRef("HTMLElement")}}, {{DOMxRef("SVGElement")}}, {{DOMxRef("MathMLElement")}} の各インターフェイスで共通のいくつかの機能を説明します。</span>これらのインターフェイスは、もちろん、以下の列挙したものに加えたものに加えてもっと機能があります。</p> - -<div class="blockIndicator note"> -<p><strong>メモ</strong>: <code>HTMLOrForeignElement</code> はミックスインであり、インターフェイスではありません。実際に <code>HTMLOrForeignElement</code> 型のオブジェクトを生成することはできません。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "dom.html#htmlorsvgelement", '<code>HTMLOrForeignElement</code>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.HTMLOrForeignElement")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{DOMxRef("HTMLElement")}}</li> - <li>{{DOMxRef("SVGElement")}}</li> - <li>{{DOMxRef("MathMLElement")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html deleted file mode 100644 index e325f3ee41..0000000000 --- a/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: navigator.hardwareConcurrency -slug: orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency -translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency -original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>{{AvailableInWorkers}}</p> - -<p><code><strong>navigator.hardwareConcurrency</strong></code> はユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサ数を返す読み取り専用のプロパティです。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency -</pre> - -<h2 id="値">値</h2> - -<p>論理プロセッサのコア数を示す{{jsxref("Number")}}です。</p> - -<p>現代のコンピューターはCPUに複数の物理プロセッサのコアを持っています（通常は2コアか4コア）。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて一度に複数スレッドを実行することができます。 したがって、例えば4コアのCPUは8個の<strong>論理プロセッサコア</strong>を提供することができます。論理プロセッサのコア数は、コンテキストスイッチを必要とせずに一度に効果的に実行できるスレッドの数を測定するために使用できます。</p> - -<p>しかしながら、ブラウザはより少ない論理コア数を報告することを選択することで、一度に実行できる{{domxref("Worker")}}の数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。</p> - -<h2 id="例">例</h2> - -<p>この例では、ブラウザが報告した論理プロセッサごとに{{domxref("Worker")}}が1つ作られ、新しいWorkerへの参照と、そのWorkerをまだ使用しているかどうかを示すBooleanの値を含むレコードを作っています。これらのオブジェクトは後で使用するために配列に順々に格納されています。後でリクエストを処理するために使うWorkerのプールを作っています。</p> - -<pre class="brush: js">let workerList = []; - -for (let i = 0; i < window.navigator.hardwareConcurrency; i++) { - let newWorker = { - worker: new Worker('cpuworker.js'), - inUse: false - }; - workerList.push(newWorker); -}</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-hardwareconcurrency', 'navigator.hardwareConcurrency')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザでの実装状況">ブラウザでの実装状況</h2> - -<div> - - -<p>{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html b/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html deleted file mode 100644 index 43e5ae1965..0000000000 --- a/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: NavigatorConcurrentHardware -slug: orphaned/Web/API/NavigatorConcurrentHardware -tags: - - API - - Concurrency - - HTML DOM - - Interface - - Navigator - - NavigatorCPU - - NavigatorConcurrentHardware - - NeedsBrowserCompatibility - - NeedsTranslation - - Reference - - Threading - - Threads - - TopicStub - - WorkerNavigator - - Workers -translation_of: Web/API/NavigatorConcurrentHardware -original_slug: Web/API/NavigatorConcurrentHardware ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <strong><code>NavigatorConcurrentHardware</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.</p> - -<p>{{AvailableInWorkers}}</p> - -<p>The number of <strong>logical processor cores</strong> is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}</dt> - <dd>Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorConcurrentHardware</code></em><em> mixin has no methods.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.NavigatorConcurrentHardware")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorid/appcodename/index.html b/files/ja/orphaned/web/api/navigatorid/appcodename/index.html deleted file mode 100644 index 36f09b360f..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/appcodename/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: window.navigator.appCodeName -slug: orphaned/Web/API/NavigatorID/appCodeName -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference -translation_of: Web/API/NavigatorID/appCodeName -original_slug: Web/API/NavigatorID/appCodeName ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>現在のブラウザの内部 "コード" ネームを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>codeName = window.navigator.appCodeName</code></pre> -<ul> - <li><code>codeName</code> : ブラウザの内部名を表す文字列</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">console.log(window.navigator.appCodeName); -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>Mozilla、Netscape 6、IE5 は全て、内部名に "Mozilla" を用いています。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0()}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/appname/index.html b/files/ja/orphaned/web/api/navigatorid/appname/index.html deleted file mode 100644 index 450525027b..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/appname/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: window.navigator.appName -slug: orphaned/Web/API/NavigatorID/appName -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference - - 要更新 -translation_of: Web/API/NavigatorID/appName -original_slug: Web/API/NavigatorID/appName ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ブラウザの公式な名前を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>appName = window.navigator.appName</code></pre> -<ul> - <li><code>appName</code> は、ブラウザの名前を表す文字列です。</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">dump(window.navigator.appName); -// NS6 のコンソールに "Navigator" を出力します。 -</pre> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/appversion/index.html b/files/ja/orphaned/web/api/navigatorid/appversion/index.html deleted file mode 100644 index 48436c71ca..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/appversion/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: NavigatorID.appVersion -slug: orphaned/Web/API/NavigatorID/appVersion -tags: - - API - - Deprecated - - NavigatorID - - Property - - Reference - - appVersion -translation_of: Web/API/NavigatorID/appVersion -original_slug: Web/API/NavigatorID/appVersion ---- -<p>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</p> - -<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかを返します。</p> - -<div class="notecard note"> - <h4>注</h4> - <p>このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。</p> -</div> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js">window.navigator.appVersion -</pre> - -<h3 id="Returned_value">値</h3> - -<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかです。</p> - -<h2 id="Example">例</h2> - -<pre class="brush: js">alert("このブラウザーのバージョンは " + navigator.appVersion + " と報告されています。"); -</pre> - -<h2 id="Notes">注</h2> - -<p><code>window.navigator.userAgent</code> プロパティもバージョン番号を含んでいる場合がありますが ("<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>" など)、ユーザーエージェント文字列を変更したり、他のブラウザー、プラットフォーム、ユーザーエージェントに「偽装」したり、ブラウザーベンダー自身がこれらのプロパティに無頓着であったりすることを意識しておいてください。</p> - -<p><code>window.navigator.appVersion</code>, <code>window.navigator.appName</code>, <code>window.navigator.userAgent</code> の各プロパティは、「ブラウザー推定」 (browser sniffing) コード、すなわち使用しているブラウザーを検出し、それに従ってページを調整しようとするスクリプトで使われてきました。これにより、一部のウェブサイトから拒否されないようにするために、ブラウザーがこれらのプロパティで偽の情報を返さなければならないという現在の状況が発生したのです。</p> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-appversion', - 'NavigatorID.appVersion')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.NavigatorID.appVersion")}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/index.html b/files/ja/orphaned/web/api/navigatorid/index.html deleted file mode 100644 index bea00f1477..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: NavigatorID -slug: orphaned/Web/API/NavigatorID -tags: - - API -translation_of: Web/API/NavigatorID -original_slug: Web/API/NavigatorID ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>NavigatorID</strong></code> interface contains methods and properties related to the identity of the browser.</p> - -<p>There is no object of type <code>NavigatorID</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorID</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}</dt> - <dd>Always returns <code>'Mozilla'</code>, on any browser. This property is kept only for compatibility purpose.</dd> - <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Returns the official name of the browser. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Returns the version of the browser as a string. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Returns a string representing the platform of the browser. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> - <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> - <dd>Returns the user agent string for the current browser.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorID</code></em><em> interface doesn't inherit any method.</em></p> - -<dl> - <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}</dt> - <dd>Always returns <code>false</code>. JavaScript taint/untaint functions were removed in JavaScript 1.2. This method is only kept for compatibility purpose</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Added the <code>appCodeName</code> property and the <code>taintEnabled()</code> method, for compatibility purpose.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.NavigatorID")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces that implement it.</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorid/platform/index.html b/files/ja/orphaned/web/api/navigatorid/platform/index.html deleted file mode 100644 index a369a1f12e..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/platform/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: NavigatorID.platform -slug: orphaned/Web/API/NavigatorID/platform -tags: - - API - - Navigator - - NavigatorID - - Property - - Reference - - platform -translation_of: Web/API/NavigatorID/platform -original_slug: Web/API/NavigatorID/platform ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>platform</em> = <em>navigator</em>.platform -</pre> - -<ul> - <li><code>platform</code> : 文字列 (例： "Win32" 、 "Linux i686" 、 "MacPPC" 、 "MacIntel" ...等)</li> -</ul> - -<h3 id="Value" name="Value">値</h3> - -<p>ブラウザーを実行しているプラットフォームを識別する {{domxref("DOMString")}}、あるいはブラウザーがプラットフォームの識別を断る (または識別できない) 場合は空文字列になります。<code>platform</code> は空文字列か、ブラウザーを実行しているプラットフォームを表す文字列でなければなりません。</p> - -<p>例: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">console.log(navigator.platform);</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても <code>"Win32"</code> を返します。Internet Explorer やバージョン 63 より前の Firefox は <code>"Win64"</code> を返します。</p> - -<p>Firefox は設定項目 <code>general.platform.override</code> で、このプロパティが返す値を上書きできます。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.NavigatorID.platform")}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/product/index.html b/files/ja/orphaned/web/api/navigatorid/product/index.html deleted file mode 100644 index 7c9649cf3d..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/product/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: window.navigator.product -slug: orphaned/Web/API/NavigatorID/product -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference -translation_of: Web/API/NavigatorID/product -original_slug: Web/API/NavigatorID/product ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>このプロパティは、現在のブラウザの製品名を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><i>productName</i> = window.navigator.product -</pre> -<ul> - <li><code>productName</code> : 製品名を表す文字列</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:html"><script> -function prod() { - dt = document.getElementById("d"); - dt.innerHTML = window.navigator.product; -} -</script> - -<button onclick="prod();">product</button> -<div id="d"> </div> - -<!-- "Gecko" などの文字列が表示される --> -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>製品名は、ユーザエージェント全体の文字列の一部（プラットフォームの直後）です。例えば、Netscape 6.1 を表すユーザエージェントでは、製品名は、"Gecko" であり、ユーザエージェント文字列全体は、次の通りです。</p> -<pre>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</pre> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/useragent/index.html b/files/ja/orphaned/web/api/navigatorid/useragent/index.html deleted file mode 100644 index 6fe20d0c79..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/useragent/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: NavigatorID.userAgent -slug: orphaned/Web/API/NavigatorID/userAgent -tags: - - API - - Deprecated - - NavigatorID - - Property - - Read-only - - Reference -translation_of: Web/API/NavigatorID/userAgent -original_slug: Web/API/NavigatorID/userAgent ---- -<p>{{ApiRef("HTML DOM")}}</p> - -<p><code><strong>NavigatorID.userAgent</strong></code> は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。</p> - -<div class="note"> -<p>仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。<br> -<br> -また、ブラウザのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。</p> -</div> - -<p>ユーザーエージェント文字列の検出に基づくブラウザーの識別は<strong>信頼性が低く</strong>、ユーザーエージェント文字列はユーザーが設定可能なので<strong>推奨されません</strong>。例えば、以下のようになります。</p> - -<ul> - <li>Mozilla Suite と Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。</li> - <li>Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。</li> - <li>Microsoft Internet Explorer では、 Windows レジストリを利用できます。</li> - <li>Safari と iCab は、メニューから、ブラウザユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。</li> -</ul> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">var <var>ua</var> = navigator.userAgent; -</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。</p> - -<p>ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。</p> - -<pre class="notranslate">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; -Localization; rv: revision-version-number) product/productSub -Application-Name Application-Name-version -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js notranslate">alert(window.navigator.userAgent) -// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1" -</pre> - -<ul> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.NavigatorID.userAgent")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{httpheader("User-Agent")}} HTTP ヘッダー</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorlanguage/index.html b/files/ja/orphaned/web/api/navigatorlanguage/index.html deleted file mode 100644 index 05a2180b9f..0000000000 --- a/files/ja/orphaned/web/api/navigatorlanguage/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: NavigatorLanguage -slug: orphaned/Web/API/NavigatorLanguage -tags: - - API - - HTML-DOM - - Reference -translation_of: Web/API/NavigatorLanguage -original_slug: Web/API/NavigatorLanguage ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>NavigatorLanguage</strong></code> はナビゲーターの言語に関するメソッドやプロパティを含んでいます。</p> - -<p><code>NavigatorLanguage</code> 型のオブジェクトはありませんが、 {{domxref("Navigator")}} や {{domxref("WorkerNavigator")}} 等の他のインターフェイスが実装しています。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<p><em><code>NavigatorLanguage</code> インターフェイスが継承するプロパティはありません。</em></p> - -<dl> - <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> - <dd>ユーザーの推奨言語、ふつうはブラウザーの UI の言語を表す {{domxref("DOMString")}} を返します。これが分からない場合は <code>null</code> 値を返します。</dd> - <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> - <dd>ユーザーが理解できる言語を表す {{domxref("DOMString")}} の設定順の配列を返します。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<p><em><code>NavigatorLanguage</code> インターフェイスが実装・継承するメソッドはありません。</em></p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>{{SpecName('HTML5 W3C')}} のスナップショット以降、 <code>languages</code> プロパティが追加された。</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>初回の仕様書。早期版の {{SpecName('HTML WHATWG')}} のスナップショット。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.NavigatorLanguage")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このインターフェイスを実装する {{domxref("Navigator")}} インターフェイス</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorlanguage/language/index.html b/files/ja/orphaned/web/api/navigatorlanguage/language/index.html deleted file mode 100644 index 1fd6c7b55f..0000000000 --- a/files/ja/orphaned/web/api/navigatorlanguage/language/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: window.navigator.language -slug: orphaned/Web/API/NavigatorLanguage/language -tags: - - API - - Language - - NavigatorLanguage - - Property - - Read-only - - Reference -translation_of: Web/API/NavigatorLanguage/language -original_slug: Web/API/NavigatorLanguage/language ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><strong><code>NavigatorLanguage.language</code></strong> は、読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">const <em>lang</em> = navigator.language -</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>{{domxref("DOMString")}}。<em><code>lang</code></em> は、<a class="external" href="https://tools.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a> で定義された言語バージョンを表す文字列が格納されます。例えば、"en", "en-US", "fr", "fr-FR", "es-ES" などが含まれます。</p> - -<p>iOS 10.2 以前の Safari では、国コードは小文字で返されます: "en-us", "fr-fr"</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: js notranslate">if (window.navigator.language.slice(0, 2) !== 'en') { - doLangSelect(window.navigator.language); -} -</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-language', 'NavigatorLanguage: language')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.NavigatorLanguage.language")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li> - <li>{{domxref("navigator")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorlanguage/languages/index.html b/files/ja/orphaned/web/api/navigatorlanguage/languages/index.html deleted file mode 100644 index 106a5975b2..0000000000 --- a/files/ja/orphaned/web/api/navigatorlanguage/languages/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: navigator.languages -slug: orphaned/Web/API/NavigatorLanguage/languages -translation_of: Web/API/NavigatorLanguage/languages -original_slug: Web/API/NavigatorLanguage/languages ---- -<p>{{APIRef}}</p> -<h2 id="Summary" name="Summary">概要</h2> -<p><code><strong>navigator.languages</strong></code> を参照することで、ユーザの使用する言語を表すタグを取得できます。</p> -<h2 id="構文">構文</h2> -<pre class="syntaxbox">preferredLanguages = navigator.languages -</pre> -<h2 id="説明">説明</h2> -<p><code><strong>navigator.languages</strong></code> 属性を参照することで、ユーザが使用する言語の配列を取得できます。この配列は読み取り専用で、各要素は <a href="http://tools.ietf.org/html/bcp47">BCP 47</a> 言語タグです。並び順はユーザの設定した優先度順となっています。この配列の先頭にある、もっとも優先される言語タグは {{domxref("NavigatorLanguage.language","navigator.language")}} を参照することで取得できます。</p> -<p>Firefox の場合、<code><strong>navigator.languages</strong></code> 属性には、 <code>intl.accept_languages</code> の値が利用されます.</p> -<p>ユーザが言語設定を変更した場合、{{domxref("window")}} に対して <a href="/en-US/docs/Web/Reference/Events/languagechange">languagechange</a> イベントが発生します。</p> -<p>全ての HTTP リクエストの <code>Accept-Language</code> ヘッダは、<strong>qvalues</strong> (quality values) がつくことを除き、 <code><strong>navigator.languages</strong></code> と同じ値でなければなりません。 (例: <code>en-US;q=0.8</code>).</p> -<h2 id="例">例</h2> -<pre class="brush: js">navigator.language //"en-US" -navigator.languages //["en-US", "zh-CN", "ja-JP"] -</pre> -<h2 id="仕様">仕様</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{ SpecName('HTML5 Web application', '#dom-navigator-languages', 'navigator.languages') }}</td> - <td>{{ Spec2('HTML5.1') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> -<h2 id="ブラウザ互換性">ブラウザ互換性</h2> -<p>{{Compat("api.NavigatorLanguage.languages")}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li> - <li>{{domxref("navigator")}}</li> - <li>{{domxref("window.onlanguagechange")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/node/getuserdata/index.html b/files/ja/orphaned/web/api/node/getuserdata/index.html deleted file mode 100644 index 8c0a07a058..0000000000 --- a/files/ja/orphaned/web/api/node/getuserdata/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Node.getUserData() -slug: orphaned/Web/API/Node/getUserData -tags: - - API - - DOM - - Method - - Node - - Obsolete - - Reference - - メソッド -translation_of: Web/API/Node/getUserData -original_slug: Web/API/Node/getUserData ---- -<div>{{APIRef("DOM")}}{{obsolete_header}}</div> - -<p><code><strong>Node.getUserData()</strong></code> メソッドは、以前 {{domxref("Node.setUserData()")}} によってノードに設定されたすべてのユーザーデータを {{domxref("DOMUserData")}} 形式で返します。</p> - -<div class="note"> -<p><code>Node.setUserData</code> および {{domxref("Node.getUserData")}} メソッドはウェブコンテンツから利用できなくなりました。 {{domxref("Element.dataset")}} または <a href="/ja/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> を代わりに利用することができます。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<ul> - <li><code>userKey</code> は指定されたノードに関連付けられた特定のデータを選択するためのキーです。指定されたノードに複数のキーが、それぞれの値を所持して割り当てられている可能性があります。</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: js">var d = document.setUserData('key', 15, null); -console.log(document.getUserData('key')); // 15</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Node.getUserData")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.setUserData()")}}</li> - <li>{{domxref("UserDataHandler")}}</li> - <li>{{domxref("DOMUserData")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/append/index.html b/files/ja/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 1206957c43..0000000000 --- a/files/ja/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -<p>{{APIRef("DOM")}}</p> - -<p><strong><code>ParentNode.append()</code></strong> メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを <code>ParentNode</code> の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。</p> - -<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p> - -<ul> - <li><code>ParentNode.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li> - <li><code>ParentNode.append()</code> は戻り値を持っていませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li> - <li><code>ParentNode.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> 一つのノードだけしか追加することができせん。</li> -</ul> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">// [Throws, Unscopable] -ParentNode.append(...<var>nodesOrDOMStrings</var>) // returns undefined -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット</dd> -</dl> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Appending_an_element" name="Appending_an_element">要素の追加</h3> - -<pre class="brush: js notranslate">let parent = document.createElement("div") -let p = document.createElement("p") -parent.append(p) - -console.log(parent.childNodes) // NodeList [ <p> ] -</pre> - -<h3 id="Appending_text" name="Appending_text">テキストの追加</h3> - -<pre class="brush: js notranslate">let parent = document.createElement("div") -parent.append("Some text") - -console.log(parent.textContent) // "Some text"</pre> - -<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3> - -<pre class="brush: js notranslate">let parent = document.createElement("div") -let p = document.createElement("p") -parent.append("Some text", p) - -console.log(parent.childNodes) // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_is_unscopable" name="ParentNode.append_is_unscopable">ParentNode.append() はスコープが効かない</h3> - -<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> - -<pre class="brush: js notranslate">let parent = document.createElement("div") - -with(parent) { - append("foo") -} -// ReferenceError: append is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>append()</code> メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p> - -<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/children/index.html b/files/ja/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 537c91d1c6..0000000000 --- a/files/ja/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - API - - Child - - Child Nodes - - DOM - - HTMLCollection - - Node - - ParentNode - - Property - - children -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<div>{{ APIRef("DOM") }}</div> - -<p>{{domxref("ParentNode")}} の <strong><code>children</code></strong> プロパティは、呼び出された際のノードの子{{domxref("Element", "要素", "", 1)}}ノードをすべて含んだ動的な（生きている） {{domxref("HTMLCollection")}} を返す、読み取り専用プロパティです。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">let <em>children</em> = <var>node</var>.children;</pre> - -<h3 id="Value" name="Value">値</h3> - -<p><em><code>node</code></em> の子の DOM要素の生きている順序付きコレクションの、 {{ domxref("HTMLCollection") }} です。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p> - -<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p> - -<h2 id="Example" name="Example">例 </h2> - -<pre class="brush: js notranslate">const foo = document.getElementById('foo'); -for (let i = 0; i < foo.children.length; i++) { - console.log(foo.children[i].tagName); -}</pre> - -<h2 id="Polyfill" name="Polyfill">Polyfill</h2> - -<pre class="brush: js notranslate">// Overwrites native 'children' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.children == null) { - Object.defineProperty(constructor.prototype, 'children', { - get: function() { - let i = 0, node, nodes = this.childNodes, children = []; - while (node = nodes[i++]) { - if (node.nodeType === 1) { - children.push(node); - } - } - return children; - } - }); - } -})(window.Node || window.Element); -</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初めての定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("api.ParentNode.children")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}} インターフェイス</li> - <li> - <div class="syntaxbox">このインターフェイスを実装する次のオブジェクトタイプ。{{domxref("Document")}}、{{domxref("Element")}}、 および {{domxref("DocumentFragment")}}</div> - </li> - <li> - <div class="syntaxbox">{{domxref("Node.childNodes")}}</div> - </li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/index.html b/files/ja/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 5d1ec6c97e..0000000000 --- a/files/ja/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Finding Elements - - Finding Nodes - - Interface - - Locating Elements - - Locating Nodes - - Managing Elements - - Managing Nodes - - Mixin - - Node - - ParentNode - - Reference - - Selectors -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><code><strong>ParentNode</strong></code> ミックスインは、子を持つことができるすべての型の {{domxref("Node")}} オブジェクトに特有のメソッドやプロパティを含みます。</span>これは、{{domxref("Element")}} と {{domxref("Document")}}、{{domxref("DocumentFragment")}} オブジェクトに実装されています。</p> - -<p>対象のノードや要素を見つけるために<a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>を使用する方法について、詳しくは<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクタを使用した DOM 要素の指定</a>をご覧ください。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> - <dd>オブジェクトが持つ子の数を表す <code>unsigned long</code> 値を返します。</dd> - <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> - <dd>この <code>ParentNode</code> の子であるすべての {{domxref("Element")}} 型のオブジェクトを含む実際の {{domxref("HTMLCollection")}} を返します。要素ではないノードは省きます。</dd> - <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> - <dd>この <code>ParentNode</code> の最初の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd> - <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> - <dd>この <code>ParentNode</code> の最後の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code> の最後の子の後ろに、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd> - <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code> の最初の子の前に、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd> - <dt>{{domxref("ParentNode.querySelector()")}}</dt> - <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする最初の {{domxref("Element")}} を返します。</dd> - <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> - <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする要素のリストを表す {{domxref("NodeList")}} を返します。</dd> - <dt>{{domxref("ParentNode.replaceChildren()")}}</dt> - <dd>ノードの既存の子ノードを、指定した新しい子ノードのセットに入れ替えます。</dd> -</dl> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> インターフェイスを {{domxref("ChildNode")}} と {{domxref("ParentNode")}} に分割しました。{{domxref("ParentNode.firstElementChild")}} と {{domxref("ParentNode.lastElementChild")}}、{{domxref("ParentNode.childElementCount")}} プロパティは、後者で定義されていません。<br> - {{domxref("ParentNode.children")}} プロパティが追加されました。<br> - {{domxref("ParentNode.querySelector()")}}、{{domxref("ParentNode.querySelectorAll()")}}、{{domxref("ParentNode.append()")}}、{{domxref("ParentNode.prepend()")}} メソッドが追加されました。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td><code>ElementTraversal</code> 基本インターフェイスにこのプロパティの初期定義が追加され、{{domxref("Element")}} で使われます。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.ParentNode")}}</p> - -<h2 id="See_also" name="See_also">関連項目</h2> - -<ul> - <li>{{domxref("ChildNode")}} 基本インターフェース。</li> - <li> - <div class="syntaxbox">このミックスインを実装したオブジェクト型: {{domxref("Document")}} と {{domxref("Element")}}、{{domxref("DocumentFragment")}}。</div> - </li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/prepend/index.html b/files/ja/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index 8c6c87cede..0000000000 --- a/files/ja/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference - - prepend -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend ---- -<p>{{APIRef("DOM")}}</p> - -<p><strong><code>ParentNode.prepend()</code></strong> メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>nodesToPrepend</code></dt> - <dd>現在 <code>ParentNode</code> にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p><code>undefined</code>.</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Prepending_an_element" name="Prepending_an_element">要素の前に追加</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var p = document.createElement("p"); -var span = document.createElement("span"); -parent.append(p); -parent.prepend(span); - -console.log(parent.childNodes); // NodeList [ <span>, <p> ] -</pre> - -<h3 id="Prepending_text" name="Prepending_text">テキストの前に追加</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -parent.append("Some text"); -parent.prepend("Headline: "); - -console.log(parent.textContent); // "Headline: Some text"</pre> - -<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.prepend("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.prepend_is_unscopable" name="ParentNode.prepend_is_unscopable">ParentNode.prepend() はスコープが効かない</h3> - -<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); - -with(parent) { - prepend("foo"); -} -// ReferenceError: prepend is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>prepend()</code> メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p> - -<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('prepend')) { - return; - } - Object.defineProperty(item, 'prepend', { - configurable: true, - enumerable: true, - writable: true, - value: function prepend() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.insertBefore(docFrag, this.firstChild); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.ParentNode.prepend")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html b/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html deleted file mode 100644 index 01e307ed31..0000000000 --- a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ParentNode.querySelectorAll() -slug: orphaned/Web/API/ParentNode/querySelectorAll -tags: - - API - - DOM - - Document - - Finding Elements - - Finding Nodes - - Method - - ParentNode - - Reference - - Searching Elements - - Searching Nodes - - Selectors - - querySelectorAll -translation_of: Web/API/ParentNode/querySelectorAll -original_slug: Web/API/ParentNode/querySelectorAll ---- -<div>{{ApiRef("DOM")}}</div> - -<p>{{domxref("ParentNode")}} ミックスインは <code><strong>querySelectorAll()</strong></code> メソッドを定義しており、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを示す {{domxref("NodeList")}} を返します。</p> - -<p>単一の結果のみが必要な場合は、代わりに {{domxref("ParentNode.querySelector", "querySelector()")}} メソッドを使用することを検討してください。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} として実装されています。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p> -</div> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの1つ以上に一致する子孫ノード1つに対して1つずつの {{domxref("Element")}} を含みます。</p> - -<div class="note"> -<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p> -</div> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> - -<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); -</pre> - -<p>次に、 <code>test</code> という ID を持つコンテナ内に位置し、直接の親要素が <code>highlighted</code> クラスを持つ {{HTMLElement("div")}} である、<code><p></code> 要素のリストを取得します。</p> - -<pre class="brush: js">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p");</pre> - -<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> - -<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p> - -<pre class="brush: js">var container = document.querySelector("#userlist"); -var matches = container.querySelectorAll("li[data-active=1]");</pre> - -<h2 id="User_notes" name="User_notes">ユーザーのメモ</h2> - -<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> - -<h3 id="HTML">HTML</h3> - -<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> - -<pre class="brush: html"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1 です。0 ではありません! -</pre> - -<p>この例では、<code>select</code> class を持つ <code><div></code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> - -<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>元の定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.ParentNode.querySelectorAll")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> - <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> - <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> - <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li> - <li>メソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} で利用可能です</li> -</ul> diff --git a/files/ja/orphaned/web/css/conic-gradient()/index.html b/files/ja/orphaned/web/css/conic-gradient()/index.html deleted file mode 100644 index d030c33b9d..0000000000 --- a/files/ja/orphaned/web/css/conic-gradient()/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: conic-gradient() -slug: orphaned/Web/CSS/conic-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラデーション - - グラフィック - - レイアウト -translation_of: Web/CSS/conic-gradient() -original_slug: Web/CSS/conic-gradient() ---- -<div>{{CSSRef}}</div> - -<p><strong><code>conic-gradient()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 <code>conic-gradient()</code> 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>他のグラデーションと同様、扇形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <code><image></code> の寸法に一致します。</p> - -<p>繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("repeating-conic-gradient")}} 関数を使用してください。</p> - -<p>g</p> - -<p><code><gradient></code> は <code><image></code> データ型に属するため、 <code><image></code> が使用できるところでしか使用できません。このため、 <code>conic-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> - -<div class="blockIndicator note"> -<p>なぜ "conic" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。</p> -</div> - -<h2 id="Understanding_conic_gradients" name="Understanding_conic_gradients">扇型グラデーションの理解</h2> - -<p>扇形グラデーションの構文は放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p> - -<p><img alt="扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点" src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p> - -<p>扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。<a href="/ja/docs/Web/CSS/length">長さ</a>を指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位には<a href="/ja/docs/Web/CSS/angle">度</a>を表す <code>deg</code>、グラデーションを表す <code>grad</code>、ラジアンを表す <code>rad</code>、回転数を表す <code>turn</code> があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。</p> - -<p>放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。</p> - -<p>グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の<em>始点</em>は北、つまり12時の方向です。そして、グラデーションは <em>from</em> の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。</p> - -<h3 id="Customizing_gradients" name="Customizing_gradients">グラデーションのカスタマイズ</h3> - -<p>By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an {{CSSxRef("<angle>")}}. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent</p> - -<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue); -conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre> - -<p>By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.</p> - -<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre> - -<p>If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:</p> - -<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); -conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre> - -<p>Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient</p> - -<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); -</pre> - -<p>There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.</p> - -<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); -background-size: 25% 25%; -</pre> - -<p>And, yes, you can mix and match different angle units, but don't. The above is hard to read.</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="language-css notranslate" id="css">/* 45度回転した扇形グラデーション、 - 青で始まり赤で終わる */ -conic-gradient(from 45deg, blue, red); - -/* A a bluish purple box: the gradient goes from blue to red, - but as only the bottom right quadrant is visible, as the - center of the conic gradient is in at the top left corner */ -conic-gradient(from 90deg at 0 0, blue, red); - -/* 色相環 */ -background: conic-gradient( - hsl(360, 100%, 50%), - hsl(315, 100%, 50%), - hsl(270, 100%, 50%), - hsl(225, 100%, 50%), - hsl(180, 100%, 50%), - hsl(135, 100%, 50%), - hsl(90, 100%, 50%), - hsl(45, 100%, 50%), - hsl(0, 100%, 50%) -);</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{CSSxRef("<angle>")}}</dt> - <dd>Preceded by the <code>from</code> keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.</dd> - <dt><code><position></code></dt> - <dd>Using the same length, order and keyterm values as the <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property, the position defines center of the gradient. If omitted, the default value is <code>center</code>, meaing the gradient will be centered, .</dd> - <dt><code><angular-color-stop></code></dt> - <dd>A color-stop's {{CSSxRef("<color>")}} value, followed by one or two optional stop positions, (an {{CSSxRef("<angle>")}} along the gradient's circumference axis).</dd> - <dt><code><color-hint></code></dt> - <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd> - <dd> - <div class="note"> - <p><strong>Note:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p> - </div> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox notranslate">conic-gradient( - [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> ) - \---------------------------------/ \----------------------------/ - Gradient definition List of color stops - -where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop> - and <angular-color-stop> = <color> && <color-stop-angle>? - and <angular-color-hint> = <angle-percentage> - and <color-stop-angle> = <angle-percentage>{1,2}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<div> -<h3 id="Gradient_at_a_40-degrees" name="Gradient_at_a_40-degrees">40度のグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background-image: - conic-gradient(from 40deg, #fff, #000); -} -</pre> - -<p>{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}</p> -</div> - -<div> -<h3 id="Off-centered_gradient" name="Off-centered_gradient">中心をずらしたグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); -}</pre> - -<p>{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}</p> -</div> - -<div> -<h3 id="Gradient_pie-chart" name="Gradient_pie-chart">グラデーションの円グラフ</h3> - -<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: conic-gradient( - red 36deg, orange 36deg 170deg, yellow 170deg); - border-radius: 50% -}</pre> - -<p>{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}</p> -</div> - -<div> -<h3 id="Checkerboard">Checkerboard</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: - conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) - top left / 25% 25% repeat; - border: 1px solid; -}</pre> - -<p>{{EmbedLiveSample("Checkerboard", 120, 120)}}</p> -</div> - -<div class="note"> -<p><strong>注:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p> -</div> - -<h2 id="Acessibility_Concerns" name="Acessibility_Concerns">アクセシビリティの考慮事項</h2> - -<p>Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat("css.types.image.gradient.conic-gradient")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li> - <li>他のグラデーション関数: {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/orphaned/web/css/image-set()/index.html b/files/ja/orphaned/web/css/image-set()/index.html deleted file mode 100644 index 1e8e370e2a..0000000000 --- a/files/ja/orphaned/web/css/image-set()/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: image-set() -slug: orphaned/Web/CSS/image-set() -tags: - - CSS - - CSS Function - - CSS-4 Images - - Function - - Reference - - Web -translation_of: Web/CSS/image-set() -original_slug: Web/CSS/image-set() ---- -<div>{{cssref}}</div> - -<p class="summary"><strong><code>image-set()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。</p> - -<p>解像度と帯域は端末やネットワークアクセスによって様々です。 <code>image-set()</code> 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。</p> - -<p><code>image-set()</code> はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">image-set() = image-set( <image-set-option># ) -where <image-set-option> = [ <image> | <string> ] <resolution> and - <string> is an <url> -</pre> - -<h3 id="Values" name="Values">値</h3> - -<p>もっともよく見かけるのは <code>url()</code> または <code><string></code> 値ですが、 <code><a href="/ja/docs/Web/CSS/image"><image></a></code> は画像セット以外のあらゆる画像型を取ることができます。 <code>image-set()</code> 関数は他の <code>image-set()</code> 関数の中に入れることはできません。</p> - -<p><code><a href="/ja/docs/Web/CSS/resolution"><resolution></a></code> の単位には、ピクセル当たりのドット数を表す <code>x</code> または <code>dppx</code>、インチ当たりのドット数を表す <code>dpi</code>、センチメートル当たりのドット数を表す <code>dpcm</code> があります。 <code>image-set()</code> の中の画像はすべて、固有の解像度が必要です。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_image-set_to_provide_alternative_background-image_options" name="Using_image-set_to_provide_alternative_background-image_options">image-set() を使用して代替の background-image オプションを提供する</h3> - -<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x, - "cat-2x.png" 2x, - "cat-print.png" 600dpi);</pre> - -<p>この例は <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> - -<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状態</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.image.image-set")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("image")}}</li> - <li>{{cssxref("_image", "image()")}}</li> - <li>{{cssxref("element")}}</li> - <li>{{cssxref("url")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/orphaned/web/css/linear-gradient()/index.html b/files/ja/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index a5659d4660..0000000000 --- a/files/ja/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: linear-gradient() -slug: orphaned/Web/CSS/linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - Web - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>linear-gradient()</code></strong> 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>他のグラデーションと同様、線形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p> - -<p>繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{CSSxRef("repeating-linear-gradient")}} プロパティを使用してください。</p> - -<p><code><gradient></code> は CSS の <code><image></code> データ型に所属しますので、 <code><image></code> が使用できるところでのみ使用できます。このため、 <code>linear-gradient</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。</p> - -<h2 id="Composition_of_a_linear_gradient" name="Composition_of_a_linear_gradient">線形グラデーションの構成</h2> - -<p>線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 <code>linear-gradient()</code> 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p>グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 <em>終了点</em> (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。</p> - -<p>開始点は、グラデーションラインの最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、<em>マジックコーナー</em>と呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。</p> - -<h3 id="Customizing_Gradients" name="Customizing_Gradients">グラデーションのカスタマイズ</h3> - -<p>グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。</p> - -<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> - -<p>ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から10%の位置まで、純粋な青を90%の位置から末尾までに配置します。10%から90％までの間は、赤から青への色変化ですが、色ヒントがない30%があるので、変化の中間点は50%の位置ではなく30%の位置になります。</p> - -<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p>2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。</p> - -<p>色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例は30%が赤から黄へ変化し、黄から青への変化がその上でグラデーションの35%になります。</p> - -<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p>複数位置の色経由点が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。</p> - -<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> - -<p>既定では、0%の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が100%の位置まで続くか、100%の位置の色になります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="language-css notranslate" id="css">/* 45度に傾いたグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(45deg, blue, red); - -/* 右下から左上に向かうグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(to left top, blue, red); - -/* 色経由点: 下から上に向かうグラデーションで、 - 青から始まり、長さの40%ののところで緑になり、 - 赤で終わる */ -linear-gradient(0deg, blue, green 40%, red); - -/* 色ヒント: 左から右に向かうグラデーションで、 - 赤から始まり、グラデーションの長さ全体の - 10%に中間点が来て、残りの90%の長さをかけて - 青色に変わる */ -linear-gradient(.25turn, red, 10%, blue); - -/* 複数位置の色経由点: 45度傾いたグラデーションで、 - 左下半分が赤で右上半分が青、 - 赤から青への変化は明確な線 */ -linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>グラデーションラインの開始点の位置。指定する場合は、 <code>to</code> に続けて2つ以下のキーワードから成ります。一つは水平方向の辺 (<code>left</code> または <code>right</code>)、もう一方は垂直方向の辺 (<code>top</code> または <code>bottom</code>) です。辺を表すキーワードは順不同です。指定しない場合は、 <code>to bottom</code> が既定になります。</dd> - <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> の値は、 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>, の角度にそれぞれ対応します。他の値は角度に変換されます。</dd> - <dt>{{CSSxRef("<angle>")}}</dt> - <dd>グラデーションラインの方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd> - <dt><code><linear-color-stop></code></dt> - <dd>色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。</dd> - <dt><code><color-hint></code></dt> - <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd> - <dd> - <div class="note"> - <p><strong>メモ:</strong> <a href="#Gradient_with_multiple_color_stops">CSS グラデーションにおける色経由点</a>の描画は、 <a href="/ja/docs/Web/SVG/Tutorial/Gradients">SVG グラデーション</a>と同じ規則に従います。</p> - </div> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox notranslate">linear-gradient( - [ <a href="/ja/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - -where <side-or-corner> = [ left | right ] || [ top | bottom ] - and <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop> - and <linear-color-stop> = <color> [ <color-stop-length> ]? - and <color-stop-length> = [ <percentage> | <length> ]{1,2} - and <color-hint> = [ <percentage> | <length> ]</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Gradient_at_a_45-degree_angle" name="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(45deg, red, blue); -} -</pre> - -<p>{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}</p> - -<h3 id="Gradient_that_starts_at_60_of_the_gradient_line" name="Gradient_that_starts_at_60_of_the_gradient_line">グラデーションラインの60%から始まるグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(135deg, orange, orange 60%, cyan); -}</pre> - -<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p> - -<h3 id="Gradient_with_multi-position_color_stops" name="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3> - -<p>この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。</p> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}}</p> - -<div class="note"> -<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>補間のヒントを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの利用</a></li> - <li>他のグラデーション関数: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> - <li>{{CSSxRef("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/orphaned/web/css/paint()/index.html b/files/ja/orphaned/web/css/paint()/index.html deleted file mode 100644 index 9f29cb31e3..0000000000 --- a/files/ja/orphaned/web/css/paint()/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: paint() -slug: orphaned/Web/CSS/paint() -tags: - - CSS - - CSS Function - - CSS 関数 - - CSS4-images - - Houdini - - Reference - - Web - - ウェブ -translation_of: Web/CSS/paint() -original_slug: Web/CSS/paint() ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>paint()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の関数で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">paint(<var>workletName</var>, <var>parameters</var>)</pre> - -<p>凡例</p> - -<dl> - <dt><var>workletName</var></dt> - <dd>登録された Worklet の名前です。</dd> - <dt><var>parameters</var></dt> - <dd>PaintWorklet へ渡される省略可能な追加の引数です。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。</p> - -<pre class="brush: html hidden"><ul> - <li>item 1</li> - <li>item 2</li> - <li>item 3</li> - <li>item 4</li> - <li>item 5</li> - <li>item 6</li> - <li>item 7</li> - <li>item 8</li> - <li>item 9</li> - <li>item 10</li> - <li>item 11</li> - <li>item 12</li> - <li>item 13</li> - <li>item 14</li> - <li>item 15</li> - <li>item 16</li> - <li>item 17</li> - <li>item 18</li> - <li>item 19</li> - <li>item 20</li> -</ul></pre> - -<pre class="brush: js hidden"> CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); -</pre> - -<pre class="brush: css">li { - --boxColor: hsla(55, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, stroke, 2px); -} - -li:nth-of-type(3n) { - --boxColor: hsla(155, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, filled, 3px); -} - -li:nth-of-type(3n+1) { - --boxColor: hsla(255, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, stroke, 1px); -}</pre> - -<p>boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。</p> - -<p>{{EmbedLiveSample("Examples", 300, 300)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}</td> - <td>{{Spec2('CSS Painting API')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.image.paint")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref('PaintWorklet')}}</li> - <li>{{domxref('CSS Painting API')}}</li> - <li><a href="/ja/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API の使用</a></li> - <li>{{cssxref("<image>")}}</li> - <li>{{domxref("canvas")}}</li> -</ul> diff --git a/files/ja/orphaned/web/css/radial-gradient()/index.html b/files/ja/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index c2caff4bc1..0000000000 --- a/files/ja/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>radial-gradient()</code></strong> 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央にあるグラデーション、 - 赤で始まり、青へ変わり、緑で終わる */ -radial-gradient(circle at center, red 0, blue, green 100%)</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<position>")}}</dt> - <dd>グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は <code>center</code> です。</dd> - <dt><code><shape></code></dt> - <dd>グラデーションの形状です。値は <code>circle</code> (つまり、グラデーションの形状が一定の半径の円) か <code>ellipse</code> (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は <code>ellipse</code> です。</dd> - <dt><code><extent-keyword></code></dt> - <dd>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 - <table class="standard-table"> - <thead> - <tr> - <th>キーワード</th> - <th>説明</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>closest-side</code></td> - <td>グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td><code>closest-side</code> と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。</td> - </tr> - </tbody> - </table> - - <div class="note"> - <p><strong>注:</strong> この関数の初期の実装では、他のキーワード (<code>cover</code> および <code>contain</code>) をそれぞれ標準の <code>farthest-corner</code> および <code>closest-side</code> の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。</p> - </div> - </dd> - <dt><code><linear-color-stop></code></dt> - <dd>色経由点の {{cssxref("<color>")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。</dd> - <dt><code><color-hint></code></dt> - <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>他のグラデーションと同様、放射グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。</p> - -<p>繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。</p> - -<p><code><gradient></code> は <code><image></code> データ型に属するため、 <code><image></code> が使用できるところでしか使用できません。このため、 <code>radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。</p> - -<h3 id="放射グラデーションの構成">放射グラデーションの構成</h3> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">放射グラデーションは<em>中心位置</em>、<em>最終的な形状</em>、および二つ以上の<em>色経由点</em>で定義されます。</p> - -<p>滑らかなグラデーションを生成するために、 <code>radial-gradient()</code> 関数は中央から<em>最終的な形状</em> (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。</p> - -<p>色経由点は、中心から右方向に水平に延びる<em>仮想的なグラデーション光</em>の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を <code>100%</code> としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Simple_gradient" name="Simple_gradient">シンプルなグラデーション</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); -} </pre> - -<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p> - -<h3 id="Non-centered_gradient" name="Non-centered_gradient">中央から外れたグラデーション</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); -}</pre> - -<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p> - -<h3 id="More_radial-gradient_examples" name="More_radial-gradient_examples">他の radial-gradient の例</h3> - -<p>他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div> - -<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3> - -<p>Gecko は <code>radial-gradient(circle gold,red)</code> のような放射グラデーションが動きそうで、 <code>circle</code> と <code>gold</code> との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が <code>radial-gradient()</code> 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの利用</a></li> - <li>他のグラデーション関数: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html b/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 0a7f158327..0000000000 --- a/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: orphaned/Web/CSS/repeating-linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>repeating-linear-gradient()</code> 関数は、反復線形グラデーションによる画像を生成します。 {{cssxref("linear-gradient")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。</p> - -<p>他のグラデーションと同じく、線形反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p> - -<p><code><gradient></code> は CSS の <code><image></code> データ型に所属しますので、 <code><image></code> が使用できるところでのみ使用できます。このため、 <code>repeating-linear-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* 45度方向に軸を延ばし、青で始め赤で終わり、 - 3回繰り返す反復グラデーション */ -repeating-linear-gradient(45deg, blue, red 33.3%); - -/* 右下から左上に延び、青で始め赤で終わり、 - 20px ごとに繰り返す反復グラデーション */ -repeating-linear-gradient(to left top, blue, red 20px); - -/* 下から上に延び、青で始め、 40% から緑になり、赤で終わる - グラデーション。最後の色経由点が既定で 100% なので、 - グラデーションは繰り返されない */ -repeating-linear-gradient(0deg, blue, green 40%, red); - -/* 5回繰り返し、左から右に、赤で始まり、緑に変わり、 - 赤に戻るグラデーション */ -repeating-linear-gradient(to right, red 0%, green 10%, red 20%); -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>グラデーション線の開始点の位置。指定する場合は、 <code>to</code> に続けて2つ以下のキーワードを指定します。一つは水平方向の辺 (<code>left</code> または <code>right</code>)、もう一方は垂直方向の辺 (<code>top</code> または <code>bottom</code>) です。辺を表すキーワードは順不同です。指定しない場合は、 <code>to bottom</code> が既定になります。</dd> - <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> の値は、 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> の角度にそれぞれ対応します。他の値は角度に変換されます。</dd> - <dt>{{cssxref("<angle>")}}</dt> - <dd>グラデーション線の方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd> - <dt><code><linear-color-stop></code></dt> - <dd>色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 <code>0%</code> のパーセント値または <code>0</code> の長さは、グラデーションの先頭を表します。 <code>100%</code> の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。</dd> - <dt><code><color-hint></code></dt> - <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd> - <dd> - <div class="note"> - <p><strong>メモ:</strong> <a href="#Gradient_with_multiple_color_stops">CSS グラデーションにおける色経由点</a>の描画は、 <a href="/ja/docs/Web/SVG/Tutorial/Gradients">SVG グラデーション</a>と同じ規則に従います。</p> - </div> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox notranslate">repeating-linear-gradient( [ <a href="/ja/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \---------------/ - Definition of the gradient line List of color stops - -where <side-or-corner> = [left | right] || [top | bottom] - and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> - and <linear-color-stop> = <color> [ <color-stop-length> ]? - and <color-stop-length> = [ <percentage> | <length> ]{1,2} - and <color-hint> = [ <percentage> | <length> ] -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Zebra_stripes" name="Zebra_stripes">縞模様</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background-image: repeating-linear-gradient(-45deg, - transparent, - transparent 20px, - black 20px, - black 40px); - /* 複数の色経由点の位置 */ - background-image: repeating-linear-gradient(-45deg, - transparent 0 20px, - black 20px 40px); -} -</pre> - -<p>{{EmbedLiveSample('Zebra_stripes', 120, 120)}}</p> - -<h3 id="Ten_repeating_horizontal_bars" name="Ten_repeating_horizontal_bars">10回繰り返す水平線</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background-image: repeating-linear-gradient(to bottom, - rgb(26,198,204), - rgb(26,198,204) 7%, - rgb(100,100,100) 10%); -} -</pre> - -<p>{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}}</p> - -<p>最後の色経由点が10%であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは10%の高さになり、10本の水平線に相当します。</p> - -<div class="note"> -<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li> - <li>他のグラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html b/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index a28cc76903..0000000000 --- a/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: orphaned/Web/CSS/repeating-radial-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラデーション - - グラフィック - - レイアウト -translation_of: Web/CSS/repeating-radial-gradient() -original_slug: Web/CSS/repeating-radial-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>repeating-radial-gradient()</code></strong> 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。</p> - -<p>他のグラデーションと同じく、放射反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p> - -<p><code><gradient></code> は <code><image></code> データ型に属するため、 <code><image></code> が使用できるところでしか使用できません。このため、 <code>repeating-radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央からのグラデーションで、 - 赤で始まり、青に変化し、緑で終わり、 - それぞれ 30px ごとに色が繰り返される */ -repeating-radial-gradient(circle at center, red 0, blue, green 30px); - -/* 左上の角付近の楕円形のグラデーションで、 - 赤で始まり、緑に変化し、また戻り、 - 中央と右下の角の間で5回繰り返され、 - 中央と左上の角の間は1回だけ */ -repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<position>")}}</dt> - <dd>グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は <code>center</code>です。</dd> - <dt><code><shape></code></dt> - <dd>グラデーションの形状です。 <code>circle</code> (グラデーションの形状が一定の半径の円の意味) か <code>ellipse</code> (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は <code>ellipse</code> です。</dd> - <dt><code><extent-keyword></code></dt> - <dd>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>キーワード</th> - <th>説明</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td><code>closest-side</code> と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。</td> - </tr> - </tbody> - </table> - - <div class="note"> - <p><strong>メモ:</strong> この関数の初期の実装では、他のキーワード (<code>cover</code> および <code>contain</code>) をそれぞれ標準の <code>farthest-corner</code> および <code>closest-side</code> の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。</p> - </div> - </dd> - <dt><code><color-stop></code></dt> - <dd>色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox notranslate">repeating-radial-gradient( - [[ circle || <a href="/ja/docs/CSS/length"><length></a> ] [at <a href="/ja/docs/Web/CSS/position_value"><position></a>]? , | - [ ellipse || [<a href="/ja/docs/CSS/length"><length></a> | <a href="/ja/docs/CSS/percentage"><percentage></a> ]{2}] [at <a href="/ja/docs/Web/CSS/position_value"><position></a>]? , | - [[ circle | ellipse ] || <extent-keyword> ] [at <a href="/ja/docs/Web/CSS/position_value"><position></a>]? , | - at <a href="/ja/docs/Web/CSS/position_value"><position></a> , <color-stop-list> ) - \---------------------------------------------------------------/\-----------------/ - Contour, size and position of the ending shape List of color stops - -where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side - and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> - and <linear-color-stop> = <color> [ <color-stop-length> ]? - and <color-stop-length> = [ <percentage> | <length> ]{1,2} - and <color-hint> = [ <percentage> | <length> ]</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Black_and_white_gradient" name="Black_and_white_gradient">白と黒のグラデーション</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 120px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); -} -</pre> - -<p>{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}</p> - -<h3 id="Farthest-corner" name="Farthest-corner">最も遠い角</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red, black 5%, blue 5%, green 10%); - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red 0 5%, green 5% 10%); -} -</pre> - -<p>{{EmbedLiveSample('Farthest-corner', 120, 120)}}</p> - -<p>楕円のグラデーションは左上から20％の位置が中心となり、中心と最も遠い角 (右下の角) の間で10回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。</p> - -<div class="note"> -<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li> - <li>他のグラデーション関数: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index a392493e50..0000000000 --- a/files/ja/orphaned/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: 制約検証 -slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation -tags: - - CSS - - Guide - - HTML5 - - NeedsContent - - Selectors -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: Web/Guide/HTML/HTML5/Constraint_validation ---- -<p>ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。<a href="/ja/docs/Web/Guide/HTML/HTML5">HTML5</a> では、フォームに新しい仕組みが導入されました。{{ HTMLElement("input") }} 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする<em>制約検証</em>が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は<a href="/ja/docs/Web/API/Constraint_validation">制約検証 API</a> を使用して検査することができます。</p> - -<p>これらの概念の基本的な入門 (サンプル付き) は、<a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォーム検証チュートリアル</a>をご覧ください。</p> - -<div class="note"><strong>メモ:</strong> HTML5 の制約検証は、<em>サーバー側</em>での検証の必要性をなくす訳ではありません。不正なフォームのリクエストは減少することが期待されるものの、不正なリクエストはまだ互換性のないブラウザー（例えば、HTML5 や JavaScript に対応していないブラウザー）から送られたり、ウェブアプリケーションをだまそうとする悪意のある人から送られたりする可能性があります。従って、HTML4 の時と同様、クライアント側で行われている検証と一貫性のある方法で、サーバー側でも入力の制約を検証する必要があります。</div> - -<h2 id="Intrinsic_and_basic_constraints" name="Intrinsic_and_basic_constraints">組込みの基本的な制約</h2> - -<p>HTML5 では、基本的な制約は 2通りの方法で定義されます。</p> - -<ul> - <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("type", "input") }} 属性に意味的に最も適切な値を選択することで、例えば <code>email</code> を選択することで、値が妥当なメールアドレスであるかどうかをチェックする制約が自動的に作成されます。</li> - <li>検証関連属性を設定することで、基本的な制約を簡単な方法で、JavaScript の必要なく記述できます。</li> -</ul> - -<h3 id="意味を持つ入力型">意味を持つ入力型</h3> - -<p>{{ htmlattrxref("type", "input") }} 属性の組込み制約は次の通りです。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">入力型</th> - <th scope="col">制約の説明</th> - <th scope="col">関連付けられた違反</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/ja/docs/Web/HTML/Element/input/url"><input type="URL"></a></code></td> - <td>値は絶対 <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> であり、<a href="https://url.spec.whatwg.org/">URL Living Standard</a> で定義された通りでなければなりません。</td> - <td><strong><a href="/ja/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> 制約違反</td> - </tr> - <tr> - <td><code><a href="/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code></td> - <td>値は統語的に妥当なメールアドレス、ふつうは <code><var>username</var>@<var>hostname</var>.<var>tld</var></code> の書式でなければなりません。</td> - <td><strong><a href="/ja/docs/Web/API/ValidityState/typeMismatch">TypeMismatch</a></strong> 制約違反</td> - </tr> - </tbody> -</table> - -<p>これらの入力型のどちらでも、{{ htmlattrxref("multiple", "input") }} 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、<strong>Type mismatch</strong> 制約違反が発生します。</p> - -<p>なお、ほとんどの入力型には組込み制約がありません。制約検証によって防ぐことができたり、既定で不正な値を妥当な値に変換する無害化アルゴリズムがあったりするためです。</p> - -<h3 id="Validation-related_attributes" name="Validation-related_attributes">検証関連属性</h3> - -<p>上記で述べた <code>type</code> 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">属性</th> - <th scope="col">属性をサポートする入力タイプ</th> - <th scope="col">とりうる値</th> - <th scope="col">制約の説明</th> - <th scope="col">関連する違反</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code></td> - <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code></td> - <td><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 正規表現</a> (<a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> <code>global</code>, <code>ignoreCase</code> と <code>multiline</code> フラグが<em>無効で</em>コンパイルされたもの)</td> - <td>値はパターンに一致する必要があります。</td> - <td><code><strong><a href="/ja/docs/Web/API/ValidityState/patternMismatch">patternMismatch</a></strong></code> 制約違反</td> - </tr> - <tr> - <td rowspan="3"><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code></td> - <td><code>range</code>, <code>number</code></td> - <td>有効な数値</td> - <td rowspan="3">値以上であること。</td> - <td rowspan="3"><strong><code><a href="/ja/docs/Web/API/ValidityState/rangeUnderflow">rangeUnderflow</a></code></strong> 制約違反</td> - </tr> - <tr> - <td><code>date</code>, <code>month</code>, <code>week</code></td> - <td>有効な日付</td> - </tr> - <tr> - <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td> - <td>有効な日付と時刻</td> - </tr> - <tr> - <td rowspan="3"><code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code></td> - <td><code>range</code>, <code>number</code></td> - <td>有効な数値</td> - <td rowspan="3">値以下であること。</td> - <td rowspan="3"><strong><code><a href="/ja/docs/Web/API/ValidityState/rangeOverflow">rangeOverflow</a></code></strong> 制約違反</td> - </tr> - <tr> - <td><code>date</code>, <code>month</code>, <code>week</code></td> - <td>有効な日付</td> - </tr> - <tr> - <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td> - <td>有効な日付と時刻</td> - </tr> - <tr> - <td><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code></td> - <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>, <code>date</code>, <code>datetime</code>, <code>datetime-local</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>number</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>; {{ HTMLElement("select") }} と {{ HTMLElement("textarea") }} 要素にも。</td> - <td><em>none</em> Boolean 属性のため: 存在すれば <em>true</em>, 存在しなければ <em>false</em></td> - <td>値は必須 (セットされた場合)。</td> - <td><strong><code><a href="/ja/docs/Web/API/ValidityState/valueMissing">valueMissing</a></code></strong> 制約違反</td> - </tr> - <tr> - <td rowspan="5"><code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code></td> - <td><code>date</code></td> - <td>日の整数値</td> - <td rowspan="5">step がリテラル値 <code>any</code> にセットされていない場合、値は <strong>min</strong> + step の整数倍</td> - <td rowspan="5"><strong><code><a href="/ja/docs/Web/API/ValidityState/stepMismatch">stepMismatch</a></code></strong> 制約違反</td> - </tr> - <tr> - <td><code>month</code></td> - <td>月の整数値</td> - </tr> - <tr> - <td><code>week</code></td> - <td>週の整数値</td> - </tr> - <tr> - <td><code>datetime</code>, <code>datetime-local</code>, <code>time</code></td> - <td>秒の整数値</td> - </tr> - <tr> - <td><code>range</code>, <code>number</code></td> - <td>整数値</td> - </tr> - <tr> - <td><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code></td> - <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; と {{ HTMLElement("textarea") }} 要素</td> - <td>整数長</td> - <td>文字列数 (code points) は、空でない場合は属性値より少なくならない。{{ HTMLElement("textarea") }}では改行はすべて 1 つの文字に正規化される (CRLF の組と対象的に)。</td> - <td><strong><code><a href="/ja/docs/Web/API/ValidityState/tooShort">tooShort</a></code></strong> 制約違反</td> - </tr> - <tr> - <td><code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></td> - <td><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code>; と {{ HTMLElement("textarea") }} 要素</td> - <td>整数長</td> - <td>文字列数 (code points) は属性値を超えない。</td> - <td><strong><code><a href="/ja/docs/Web/API/ValidityState/tooLong">tooLong</a></code></strong> 制約違反</td> - </tr> - </tbody> -</table> - -<h2 id="Constraint_validation_process" name="Constraint_validation_process">制約検証プロセス</h2> - -<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p> - -<ul> - <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method of a form-associated DOM interface, (<code><a href="/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code>, <code><a href="/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> or <code><a href="/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. The <code>checkValidity()</code> method returns a Boolean indicating whether the element's value passes its constraints. (This is typically done by the user-agent when determining which of the CSS pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.) In contrast, the <code>reportValidity()</code> method reports any constraint failures to the user.</li> - <li>By a call to the <code>checkValidity()</code> or <code>reportValidity()</code> method on the <code><a href="/ja/docs/Web/API/HTMLFormElement">HTMLFormElement</a></code> interface.</li> - <li>By submitting the form itself.</li> -</ul> - -<p>Calling <code>checkValidity()</code> is called <em>statically</em> validating the constraints, while calling <code>reportValidity()</code> or submitting the form is called <em>interactively</em> validating the constraints.</p> - -<div class="note"><strong>Note: </strong> - -<ul> - <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li> - <li>Calling the <code>submit()</code> method on the <code><a href="/en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints. Call the <code>click()</code> method on a submit button instead.</li> -</ul> -</div> - -<h2 id="Complex_constraints_using_HTML5_Constraint_API" name="Complex_constraints_using_HTML5_Constraint_API">HTML5 制約 API を使用した複雑な制約</h2> - -<p>Using JavaScript and the Constraint API, it is possible to implement more complex constraints, 例えば、constraints combining several fields, or constraints involving complex calculations.</p> - -<p>Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</p> - -<h3 id="Constraint_combining_several_fields_Postal_code_validation" name="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3> - -<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p> - -<div class="note"> -<p><strong>注:</strong> This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts.</p> -</div> - -<p>As an example, we will add a script checking the constraint validation for this simple form:</p> - -<pre class="brush: html notranslate"><form> - <label for="ZIP">ZIP : </label> - <input type="text" id="ZIP"> - <label for="Country">Country : </label> - <select id="Country"> - <option value="ch">Switzerland</option> - <option value="fr">France</option> - <option value="de">Germany</option> - <option value="nl">The Netherlands</option> - </select> - <input type="submit" value="Validate"> -</form></pre> - -<p>This displays the following form:</p> - -<p>{{EmbedLiveSample("Constraint_combining_several_fields_Postal_code_validation")}}</p> - -<p>First, we write a function checking the constraint itself:</p> - -<pre class="brush: js notranslate">function checkZIP() { - // For each country, defines the pattern that the ZIP has to follow - var constraints = { - ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ], - fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ], - de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ], - nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$', - "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ] - }; - - // Read the country id - var country = document.getElementById("Country").value; - - // Get the NPA field - var ZIPField = document.getElementById("ZIP"); - - // Build the constraint checker - var constraint = new RegExp(constraints[country][0], ""); - console.log(constraint); - - - // Check it! - if (constraint.test(ZIPField.value)) { - // The ZIP follows the constraint, we use the ConstraintAPI to tell it - ZIPField.setCustomValidity(""); - } - else { - // The ZIP doesn't follow the constraint, we use the ConstraintAPI to - // give a message about the format required for this country - ZIPField.setCustomValidity(constraints[country][1]); - } -} -</pre> - -<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation.</p> - -<h3 id="Limiting_the_size_of_a_file_before_its_upload" name="Limiting_the_size_of_a_file_before_its_upload">アップロード前のファイルサイズの制限</h3> - -<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint Validation API, and especially the <code>field.setCustomValidity()</code> method, with another JavaScript API, here the File API.</p> - -<p>Here is the HTML part:</p> - -<pre class="brush: html notranslate"><label for="FS">Select a file smaller than 75 kB : </label> -<input type="file" id="FS"></pre> - -<p>This displays:</p> - -<p>{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}</p> - -<p>The JavaScript reads the file selected, uses the <code>File.size()</code> method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p> - -<pre class="brush: js notranslate">function checkFileSize() { - var FS = document.getElementById("FS"); - var files = FS.files; - - // If there is (at least) one file selected - if (files.length > 0) { - if (files[0].size > 75 * 1024) { // Check the constraint - FS.setCustomValidity("The selected file must not be larger than 75 kB"); - return; - } - } - // No custom constraint violation - FS.setCustomValidity(""); -}</pre> - -<p>Finally we hook the method with the correct event:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p> - -<h2 id="Visual_styling_of_constraint_validation" name="Visual_styling_of_constraint_validation">制約検証における表示の整形</h2> - -<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p> - -<h3 id="Controlling_the_look_of_elements" name="Controlling_the_look_of_elements">要素の外見の制御</h3> - -<p>The look of elements can be controlled via CSS pseudo-classes.</p> - -<h4 id="required_and_optional_CSS_pseudo-classes" name="required_and_optional_CSS_pseudo-classes">CSS の :required および :optional 疑似クラス</h4> - -<p>The {{cssxref(':required')}} and {{cssxref(':optional')}} <a href="/ja/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p> - -<h4 id="placeholder-shown_CSS_pseudo-class" name="placeholder-shown_CSS_pseudo-class">:placeholder-shown CSS pseudo-class</h4> - -<p>See {{cssxref(':placeholder-shown')}}</p> - -<h4 id="valid_invalid_CSS_pseudo-classes" name="valid_invalid_CSS_pseudo-classes">CSS の :valid :invalid 疑似クラス</h4> - -<p>The {{cssxref(':valid')}} and {{cssxref(':invalid')}} <a href="/ja/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p> - -<h3 id="Controlling_the_text_of_constraint_violation" name="Controlling_the_text_of_constraint_violation">制約違反の文字列の制御</h3> - -<p>The following items can help with controlling the text of a constraint violation:</p> - -<ul> - <li><a href="/ja/docs/Web/API/Constraint_validation#element.setCustomValidity(message)">element.setCustomValidity(message)</a> method on the following elements: - - <ul> - <li>{{HTMLElement("fieldset")}}. Note: Setting a custom validity message on fieldset elements will not prevent form submission in most browsers.</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>Submit buttons (created with either a {{HTMLElement("button")}} element with the <code>submit</code> type, or an <code>input</code> element with the {{HTMLElement("input/submit", "submit")}} type. Other types of buttons do not participate in constraint validation.</li> - <li>{{HTMLElement("textarea")}}</li> - </ul> - </li> - <li>The <a href="/ja/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface describes the object returned by the <a href="/ja/docs/Web/API/Constraint_validation#validity">validity</a> property of the element types listed above. It represents various ways that an entered value can be invalid. Together, they help explain why an element's value fails to validate, if it's not valid.</li> -</ul> diff --git a/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html index 861044c138..c1cdd1d6b5 100644 --- a/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -9,7 +9,7 @@ original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 --- <p><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> は、HTML 標準の最も新しいバージョンです。HTML5 によって、リッチメディアのサポートだけでなく、ユーザ、彼らのローカルデータ、サーバの間でより簡単にかつ効果的にやり取りするための Web アプリケーションを作成するための拡張されたサポートを提供するための新機能も手に入れることができます。</p> -<p>HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。<a href="/ja/docs/orphaned/Web/Guide/HTML/HTML5" title="ja/HTML/HTML5">HTML5 のメインページ</a>に Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、<a class="external" href="http://caniuse.com/#cats=HTML5">CanIUse</a> ウェブサイトを参照してください。</p> +<p>HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。<a href="/ja/docs/orphaned/Web/Guide/HTML/HTML5">HTML5 のメインページ</a>に Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、<a class="external" href="http://caniuse.com/#cats=HTML5">CanIUse</a> ウェブサイトを参照してください。</p> <h2 id="The_HTML5_doctype">HTML5 の DOCTYPE</h2> diff --git a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html b/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 23daae0e6b..0000000000 --- a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages -original_slug: Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages ---- -<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">クラスベース言語とプロトタイプベース言語</h3> -<p>Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。</p> -<ul> <li>クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。</li> <li>一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。</li> -</ul> -<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p> -<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4> -<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p> -<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p> -<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4> -<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p> -<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p> -<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4> -<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p> -<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4> -<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p> -<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody> -</table> -<div class="noinclude"> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p> -</div> -<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html index 4da2f3be90..9b09e6c5d2 100644 --- a/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html +++ b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html @@ -18,7 +18,7 @@ original_slug: Web/JavaScript/Guide/Creating_a_Regular_Expression </dd> </dl> <ul> - <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp" title="ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li> + <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li> </ul> <pre>var re = new RegExp("ab+c"); </pre> <dl> diff --git a/files/ja/orphaned/web/javascript/guide/expressions/index.html b/files/ja/orphaned/web/javascript/guide/expressions/index.html index 6c27367d80..90deb434f3 100644 --- a/files/ja/orphaned/web/javascript/guide/expressions/index.html +++ b/files/ja/orphaned/web/javascript/guide/expressions/index.html @@ -8,9 +8,9 @@ original_slug: Web/JavaScript/Guide/Expressions <p>概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、<code>x = 7</code> という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では<em>代入演算子</em>を用います。一方、<code>3 + 4</code> という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に<em>演算子</em>と呼ばれます。</p> <p>JavaScript には以下の種類の式があります。</p> <ul> - <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li> - <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li> - <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li> - <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li> + <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li> + <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li> + <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li> + <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li> </ul> <p>{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html index 93f9f2c65a..68dab826b1 100644 --- a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html @@ -5,14 +5,14 @@ original_slug: Web/JavaScript/Guide/Loop_Statements --- <h2 id=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87" name=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87">ループ文</h2> <p>ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、<code>break</code> および <code>continue</code> 文をループ文の中で使うことができます。</p> -<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements" title="ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p> +<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p> <p>ループ文は以下のとおりです。</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li> </ul> <p>{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html index 48e820e9ae..800a9e95cf 100644 --- a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html +++ b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html @@ -6,7 +6,7 @@ original_slug: Web/JavaScript/Guide/Object_Manipulation_Statements <h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87">オブジェクト操作文</h3> <p>JavaScript はオブジェクトの操作に <code>for...in</code>、<code>for each...in</code> および <code>with</code> 文を使用します。</p> <h4 id="for...in_.E6.96.87" name="for...in_.E6.96.87">for...in 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p> <pre>for (variable in object) { statements } @@ -27,11 +27,11 @@ original_slug: Web/JavaScript/Guide/Object_Manipulation_Statements car.model = Mustang </pre> <p><strong>配列</strong><br> - <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for" title="ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p> + <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p> <h4 id="for_each...in_.E6.96.87" name="for_each...in_.E6.96.87">for each...in 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6" title="ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p> <h4 id="with_.E6.96.87" name="with_.E6.96.87">with 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p> <p><code>with</code> 文は次のように使用します。</p> <pre>with (object) { statements @@ -47,6 +47,6 @@ with (Math) { y = r * sin(PI/2); } </pre> -<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p> +<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p> <p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html index 6d126722b1..ca2ec31ef2 100644 --- a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html @@ -12,5 +12,5 @@ original_slug: Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Fun unescape(string) </pre> <p>これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。</p> - <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div> + <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div> <p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html index 3738bf8da4..e802cc270a 100644 --- a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html @@ -7,12 +7,12 @@ original_slug: Web/JavaScript/Guide/Predefined_Functions <h3 id=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0" name=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0">定義済み関数</h3> <p>JavaScript にはトップレベルの定義済み関数がいくつかあります。</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li> </ul> </div> <p>{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html index 9ed2621e37..41ec88a890 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html @@ -6,7 +6,7 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example/Creating_the_Hierarchy <h3 id=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90" name=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90">階層の作成</h3> <p>Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。</p> <p>このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。</p> -<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p> +<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p> <p><img alt="Image:hier02.gif" class="internal" src="/@api/deki/files/1905/=Hier02.gif"><br> <small><strong>図 8.2：Employee オブジェクトの定義</strong></small></p> <p>以下に示すように、Java と JavaScript の <code>Employee</code> の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html index b47856921c..79fd796301 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html @@ -17,14 +17,14 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example </ul> <p>残りの例：</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> </ul> </li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li> </ul> <div class="noinclude"> <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html index 80c2494cf2..2cf27ea0ba 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html @@ -6,8 +6,8 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties <h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">オブジェクトのプロパティ</h3> <p>このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> </ul> <div class="noinclude"> <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html index 159c3c4e01..b860b5871f 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html @@ -6,7 +6,7 @@ original_slug: >- Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Inheriting_Properties --- <h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF">プロパティの継承</h3> -<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p> +<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p> <pre class="eval">mark = new WorkerBee; </pre> <p>JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを <code>this</code> キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に <code>projects</code> プロパティの値をセットします。さらに、内部的な <code>__proto__</code> プロパティの値として <code>WorkerBee.prototype</code> の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）<code>__proto__</code> プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 <code>mark</code> にそのオブジェクトをセットします。</p> @@ -15,7 +15,7 @@ original_slug: >- mark.dept = "general"; mark.projects = []; </pre> -<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited" title="ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p> +<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p> <p>これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして <code>mark</code> に固有の情報を与えます。</p> <pre class="eval">mark.name = "Doe, Mark"; mark.dept = "admin"; diff --git a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html index 18259c91ce..446895507c 100644 --- a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html +++ b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html @@ -30,7 +30,7 @@ myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); // "sage. basil. oregano. pepper. parsley. " を返す myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); </pre> - <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function" title="ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p> + <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p> <p><strong>JavaScript 1.3 以前のバージョン</strong><br> arguments オブジェクトは <code>Function</code> オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。</p> functionName.arguments{{ mediawiki.external('i') }}</div> diff --git a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html index ee4583e4b4..f94d505365 100644 --- a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html +++ b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html @@ -5,7 +5,7 @@ original_slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern --- <h3 id=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F" name=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F">正規表現パターンを書く</h3> -<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p> +<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p> <h4 id="単純なパターンの使用">単純なパターンの使用</h4> @@ -183,7 +183,7 @@ original_slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern <h4 id="括弧の使用">括弧の使用</h4> -<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p> +<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p> <p>例えば、<code>/Chapter (\d+)\.\d*/</code> というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。</p> diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html deleted file mode 100644 index 0ed95f130e..0000000000 --- a/files/ja/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: WeakSet.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear -tags: - - JavaScript - - Method - - Obsolute - - Prototype - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/clear -original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/clear ---- -<div>{{JSRef("Global_Objects", "WeakSet")}} {{obsolete_header}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>WeakSet</code>オブジェクトからすべての要素を削除します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><code><em>ws</em>.clear();</code></pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">例: <code>clear</code> メソッドを使う</h3> - -<pre class="brush: js">var ws = new WeakSet(); - -ws.add(window); -ws.has(window); // true - -ws.clear(); - -ws.has(window); // false -</pre> - -<h2 id="仕様">仕様</h2> - -<p>すべての現在の標準やドラフトでサポートされていません。このメソッドは、リビジョン 28 (October 14, 2014のバージョン)までECMAScript第６版ドラフト仕様でサポートされました。しかし、最新バージョンのドラフトで削除されました。最終仕様では、サポートされていません。</p> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<p>{{Compat("javascript.builtins.WeakSet.clear")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WeakSet")}}</li> - <li>{{jsxref("WeakSet.prototype.delete()")}}</li> -</ul> diff --git a/files/ja/orphaned/web/svg/element/solidcolor/index.html b/files/ja/orphaned/web/svg/element/solidcolor/index.html deleted file mode 100644 index 56480133c7..0000000000 --- a/files/ja/orphaned/web/svg/element/solidcolor/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: <solidcolor> -slug: orphaned/Web/SVG/Element/solidColor -tags: - - Element - - Experimental - - Reference - - SVG -translation_of: Web/SVG/Element/solidColor -original_slug: Web/SVG/Element/solidColor ---- -<div>{{SVGRef}}{{obsolete_header}}</div> - -<p class="seoSummary"><strong><code><solidcolor></code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。</p> - -<p class="note"><strong>注:</strong> これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <code><solidcolor></code> とは異なり、それ自身をグラデーションの定義に使用することができません。</p> - -<h2 id="Usage_context" name="Usage_context">使用場面</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> - -<ul> - <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> - <li><a href="/ja/docs/Web/API/GlobalEventHandlers">グローバルイベント属性</a></li> - <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Style_attributes">スタイル属性</a></li> -</ul> - -<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> - -<p><em>なし。</em></p> - -<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> - -<p>この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150"> - <defs> - <!-- solidColor is experimental. --> - <solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/> - - <!-- linearGradient with a single color stop is a less elegant way to - achieve the same effect, but it works in current browsers. --> - <linearGradient id="myGradient"> - <stop offset="0" stop-color="green" /> - </linearGradient> - </defs> - - <text x="10" y="20">Circles colored with solidColor</text> - <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)" - fill="white"/> - <circle cx="50" cy="65" r="35" fill="url(#myColor)"/> - - <text x="10" y="120">Circles colored with linearGradient</text> - <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)" - fill="white"/> - <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/> -</svg> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("svg.elements.solidcolor")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("SVGSolidcolorElement")}}</li> - <li>{{cssxref("solid-color")}}</li> - <li>{{cssxref("solid-opacity")}}</li> - <li>{{SVGElement("linearGradient")}}</li> -</ul> |