diff options
Diffstat (limited to 'files/ja/web')
/linear-gradient.png?h=dependabot/github_actions/actions/labeler-4&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}
/radial_gradient.png?h=dependabot/github_actions/actions/labeler-4&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}
219 files changed, 11064 insertions, 8302 deletions
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html index f93a7c4fd0..3c6dedd029 100644 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html +++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html @@ -96,7 +96,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_at <h4 id="Working_Examples" name="Working_Examples">動作する例</h4> -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/"><code>alert</code> ロールの例</a>（<code>aria-invalid</code> 属性を使用）</p> +<p><a href="https://www.w3.org/WAI/WCAG21/working-examples/aria-invalid-data-format/">正しくない形式の値を強調するために aria-invalid を使ったフォームの例</a></p> <h3 id="Notes" name="Notes">注</h3> diff --git a/files/ja/web/api/windoworworkerglobalscope/atob/index.html b/files/ja/web/api/atob/index.html index 4408d9319b..96eb707a54 100644 --- a/files/ja/web/api/windoworworkerglobalscope/atob/index.html +++ b/files/ja/web/api/atob/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.atob() -slug: Web/API/WindowOrWorkerGlobalScope/atob +slug: Web/API/atob tags: - API - HTML DOM @@ -9,7 +9,7 @@ tags: - WindowOrWorkerGlobalScope - atob translation_of: Web/API/WindowOrWorkerGlobalScope/atob -original_slug: Web/API/WindowBase64/atob +original_slug: Web/API/WindowOrWorkerGlobalScope/atob --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/btoa/index.html b/files/ja/web/api/btoa/index.html index da5c8c872d..69b1ec384a 100644 --- a/files/ja/web/api/windoworworkerglobalscope/btoa/index.html +++ b/files/ja/web/api/btoa/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.btoa() -slug: Web/API/WindowOrWorkerGlobalScope/btoa +slug: Web/API/btoa tags: - API - HTML DOM @@ -12,6 +12,7 @@ tags: - data - strings translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +original_slug: Web/API/WindowOrWorkerGlobalScope/btoa --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/caches/index.html b/files/ja/web/api/caches/index.html index 89583bbda5..24bcabe2aa 100644 --- a/files/ja/web/api/windoworworkerglobalscope/caches/index.html +++ b/files/ja/web/api/caches/index.html @@ -1,6 +1,6 @@ --- title: WorkerGlobalScope.caches -slug: Web/API/WindowOrWorkerGlobalScope/caches +slug: Web/API/caches tags: - API - Experimental @@ -12,7 +12,7 @@ tags: - Window - WindowOrWorkerGlobalScope translation_of: Web/API/WindowOrWorkerGlobalScope/caches -original_slug: Web/API/WorkerGlobalScope/caches +original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- <div>{{APIRef()}}{{SeeCompatTable}}</div> diff --git a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html index 74051e9a9d..d54da1283b 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash <h2 id="例">例</h2> -<h3 id="簡単な例">簡単な例</h3> +<h3 id="Basic_example">簡単な例</h3> <p>この例では、<code>setLineDash()</code>メソッドを使用して、実線の上に破線を描画します。</p> @@ -58,7 +58,7 @@ ctx.stroke(); <p>{{ EmbedLiveSample('Basic_example', 700, 180) }}</p> -<h3 id="いくつかの一般的な模様">いくつかの一般的な模様</h3> +<h3 id="Some_common_patterns">いくつかの一般的な模様</h3> <p>この例は、さまざまな一般的な破線のパターンを示しています。</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/ja/web/api/clearinterval/index.html index f3e9b52e6d..3bccc06f99 100644 --- a/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html +++ b/files/ja/web/api/clearinterval/index.html @@ -1,6 +1,6 @@ --- title: window.clearInterval -slug: Web/API/WindowOrWorkerGlobalScope/clearInterval +slug: Web/API/clearInterval tags: - DOM - DOM_0 @@ -8,7 +8,7 @@ tags: - JavaScript timers - Window translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval -original_slug: Web/API/WindowTimers/clearInterval +original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval --- <div>{{ApiRef}}</div> diff --git a/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ja/web/api/cleartimeout/index.html index 2ce0bb071e..bc1b59314e 100644 --- a/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html +++ b/files/ja/web/api/cleartimeout/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.clearTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout +slug: Web/API/clearTimeout tags: - API - HTML DOM @@ -11,6 +11,7 @@ tags: - メソッド - リファレンス translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/ja/web/api/createimagebitmap/index.html index cd0334402a..940af211e0 100644 --- a/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html +++ b/files/ja/web/api/createimagebitmap/index.html @@ -1,12 +1,13 @@ --- title: self.createImageBitmap() -slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +slug: Web/API/createImageBitmap tags: - API - Canvas - DOM - createImageBitmap translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +original_slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap --- <div>{{APIRef("Canvas API")}}</div> diff --git a/files/ja/web/api/document/childelementcount/index.html b/files/ja/web/api/document/childelementcount/index.html new file mode 100644 index 0000000000..fcd6244dd0 --- /dev/null +++ b/files/ja/web/api/document/childelementcount/index.html @@ -0,0 +1,46 @@ +--- +title: Document.childElementCount +slug: Web/API/Document/childElementCount +tags: + - API + - DOM + - Property + - Reference +browser-compat: api.Document.childElementCount +translation_of: Web/API/Document/childElementCount +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>Document.childElementCount</strong></code> は読み取り専用のプロパティで、文書の子要素の数を返します。</p> + +<p>特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>document</em>.childElementCount; +</pre> + +<h2 id="Example">例</h2> + +<pre class="brush:js"> +document.children; +// HTMLCollection で、ふつうは <html> 要素をこの文書の唯一の子として含んでいる + +document.childElementCount; +// 1 +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.childElementCount")}}</li> + <li>{{domxref("DocumentFragment.childElementCount")}}</li> +</ul> diff --git a/files/ja/web/api/document/getelementbyid/index.html b/files/ja/web/api/document/getelementbyid/index.html index 47aad75103..6bf6b57b97 100644 --- a/files/ja/web/api/document/getelementbyid/index.html +++ b/files/ja/web/api/document/getelementbyid/index.html @@ -100,7 +100,7 @@ element.id = 'testqq'; var el = document.getElementById('testqq'); // el は null になります </pre> -<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL" title="ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p> +<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p> <h2 id="Specification" name="Specification">仕様書</h2> @@ -145,5 +145,5 @@ var el = document.getElementById('testqq'); // el は null になります <ul> <li>{{domxref("Document")}}: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。</li> <li>{{domxref("Document.querySelector()")}}: <code>'div.myclass'</code> のようなセレクターを通したクエリのためのもの。</li> - <li><a href="/ja/docs/xml/xml:id" title="ja/docs/xml/id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li> + <li><a href="/ja/docs/xml/xml:id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li> </ul> diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html index 96734201de..c0af97a434 100644 --- a/files/ja/web/api/document/queryselector/index.html +++ b/files/ja/web/api/document/queryselector/index.html @@ -7,60 +7,62 @@ tags: - DOM - DOM 要素 - Document - - Reference - - querySelector - - セレクター - メソッド + - リファレンス + - Selector API + - セレクター + - querySelector translation_of: Web/API/Document/querySelector +browser-compat: api.Document.querySelector --- <div>{{ApiRef("DOM")}}</div> <p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p> <div class="note"> -<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの<ruby>深さ優先前順走査<rp> (</rp><rt>depth-first pre-order traversal</rt><rp>) </rp></ruby>を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p> +<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>); +<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>); </pre> -<h3 id="Parameters" name="Parameters">引数</h3> +<h3 id="Parameters">引数</h3> <dl> - <dt><var>selectors</var></dt> - <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SYNTAX_ERR</code> が投げられます。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd> + <dt><var>selectors</var></dt> + <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <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> +<p><strong>メモ:</strong> 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p> </div> -<h3 id="Return_value" name="Return_value">返値</h3> +<h3 id="Return_value">返値</h3> -<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p> +<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("Element")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p> <p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p> -<h3 id="Exceptions" name="Exceptions">例外</h3> +<h3 id="Exceptions">例外</h3> <dl> - <dt><code>SYNTAX_ERR</code></dt> - <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd> + <dt><code>SyntaxError</code></dt> + <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd> </dl> -<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> +<h2 id="Usage_notes">使用上のメモ</h2> <p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p> -<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p> +<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="https://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p> -<h3 id="Escaping_special_characters" name="Escaping_special_characters">特殊文字のエスケープ</h3> +<h3 id="Escaping_special_characters">特殊文字のエスケープ</h3> <p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p> -<pre class="brush: html notranslate"><div id="foo\bar"></div> +<pre class="brush: html"><div id="foo\bar"></div> <div id="foo:bar"></div> <script> @@ -75,59 +77,43 @@ translation_of: Web/API/Document/querySelector document.querySelector('#foo\\:bar'); // 2番目の div に一致する </script></pre> -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<h3 id="Finding_the_first_element_matching_a_class" name="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3> +<h3 id="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3> <p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p> -<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); +<pre class="brush: js">var el = document.querySelector(".myclass"); </pre> -<h3 id="A_more_complex_selector" name="A_more_complex_selector">より複雑なセレクター</h3> +<h3 id="A_more_complex_selector">より複雑なセレクター</h3> <p>セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<code><div class="user-panel main"></code>) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<code><input name="login"/></code>) が返されます。</p> -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']"); +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']"); </pre> -<h3 id="Negation" name="Negation">否定</h3> +<h3 id="Negation">否定</h3> <p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p> -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre> +<pre class="brush: js">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre> <p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<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("DOM WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<div>{{Compat("api.Document.querySelector")}}</div> +<div>{{Compat}}</div> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("Element.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector">querySelector のコードスニペット</a></li> + <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> </ul> diff --git a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index 65524033fb..4eb86d5287 100644 --- a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -46,5 +46,5 @@ translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_select <li>{{domxref("Element.querySelectorAll()")}}</li> <li>{{domxref("Document.querySelector()")}}</li> <li>{{domxref("Document.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector" title="ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> + <li><a href="/ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> </ul> diff --git a/files/ja/web/api/documentfragment/childelementcount/index.html b/files/ja/web/api/documentfragment/childelementcount/index.html new file mode 100644 index 0000000000..16bc5ed135 --- /dev/null +++ b/files/ja/web/api/documentfragment/childelementcount/index.html @@ -0,0 +1,48 @@ +--- +title: DocumentFragment.childElementCount +slug: Web/API/DocumentFragment/childElementCount +tags: + - API + - DOM + - Property + - Reference +browser-compat: api.DocumentFragment.childElementCount +translation_of: Web/API/DocumentFragment/childElementCount +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>Document.childElementCount</strong></code> は読み取り専用のプロパティで、 <code>DocumentFragment</code> の子要素の数を返します。</p> + +<p>特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>fragment</em>.childElementCount; +</pre> + +<h2 id="Example">例</h2> + +<pre class="brush:js"> +let fragment = new DocumentFragment() +fragment.childElementCount; // 0 + +let paragraph = document.createElement('p') +fragment.appendChild(paragraph) + +fragment.childElementCount; // 1 +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.childElementCount")}}</li> + <li>{{domxref("Document.childElementCount")}}</li> +</ul> diff --git a/files/ja/web/api/domstringlist/index.html b/files/ja/web/api/domstringlist/index.html index 27c3d8eb74..dfdf9efb5d 100644 --- a/files/ja/web/api/domstringlist/index.html +++ b/files/ja/web/api/domstringlist/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/DOMStringList --- <p>{{APIRef("DOM")}}</p> -<p><a href="/ja/DOM/DOMString" title="ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p> +<p><a href="/ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p> <h2 id="Properties" name="Properties">プロパティ</h2> diff --git a/files/ja/web/api/element/append/index.html b/files/ja/web/api/element/append/index.html new file mode 100644 index 0000000000..82feaa6f91 --- /dev/null +++ b/files/ja/web/api/element/append/index.html @@ -0,0 +1,100 @@ +--- +title: Element.append() +slug: Web/API/Element/append +tags: + - API + - DOM + - Method + - Node + - Element + - Reference +browser-compat: api.Element.append +translation_of: Web/API/Element/append +original_slug: Web/API/ParentNode/append +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p> + +<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p> + +<ul> + <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li> + <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li> + <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li> +</ul> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"> +append(...nodesOrDOMStrings) +</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodesOrDOMStrings</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Appending_an_element">要素の追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +let p = document.createElement("p") +div.append(p) + +console.log(div.childNodes) // NodeList [ <p> ] +</pre> + +<h3 id="Appending_text">テキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +div.append("Some text") + +console.log(div.textContent) // "Some text"</pre> + +<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +let p = document.createElement("p") +div.append("Some text", p) + +console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3> + +<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">let div = document.createElement("div") + +with(div) { + append("foo") +} +// ReferenceError: append is not defined </pre> + + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.prepend()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Element.after()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html index a06357d366..c3520c9a31 100644 --- a/files/ja/web/api/element/childelementcount/index.html +++ b/files/ja/web/api/element/childelementcount/index.html @@ -1,96 +1,42 @@ --- -title: ParentNode.childElementCount +title: Element.childElementCount slug: Web/API/Element/childElementCount tags: - API - DOM - - ParentNode - Property -translation_of: Web/API/ParentNode/childElementCount + - Reference +browser-compat: api.Element.childElementCount +translation_of: Web/API/Element/childElementCount original_slug: Web/API/ParentNode/childElementCount --- <div>{{ APIRef("DOM") }}</div> -<p>読み取り専用の <code><strong>ParentNode.childElementCount</strong></code> プロパティは、与えられた要素の子要素の数を表す <code>unsigned long</code> 値を返します。</p> +<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p> -<div class="note"> -<p>このプロパティは、当初 {{domxref("ElementTraversal")}} 基本インターフェースで定義されていました。このインターフェースには 2 セットの異なるプロパティが含まれており、一つは子要素を持つ {{domxref("Node")}} を対象とし、もう一つはその子要素群を対象としたものでしたが、これらは 2 つの基本インターフェースである {{domxref("ParentNode")}} と {{domxref("ChildNode")}} に移されました。この際、<code>childElementCount</code> は {{domxref("ParentNode")}} へ移されました。これは技術的な変更であり、互換性に影響を与えるものではありません。</p> -</div> +<h2 id="Syntax">構文</h2> -<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="brush: js">element.childElementCount;</pre> -<pre class="syntaxbox notranslate">var <var>count</var> = <em>node</em>.childElementCount; -</pre> - -<dl> - <dt><code>count</code></dt> - <dd><code>unsigned long</code> 型(つまり整数型)の戻り値.</dd> - <dt><code>node</code></dt> - <dd>{{domxref("Document")}}、{{domxref("DocumentFragment")}}、 {{domxref("Element")}}を表現するオブジェクト.</dd> -</dl> - -<h2 id="例">例</h2> +<h2 id="Example">例</h2> -<pre class="brush:js notranslate">var foo = document.getElementById('foo'); -if (foo.childElementCount > 0) { - // Do something +<pre class="brush:js">let sidebar = document.getElementById('sidebar'); +if (sidebar.childElementCount > 0) { + // 何もしない } </pre> +<h2 id="Specifications">仕様書</h2> +{{Specifications}} -<h2 id="IE8_IE9Safari向けの互換コード">IE8, IE9/Safari向けの互換コード</h2> - -<p>このプロパティは IE9 より前のバージョンでサポートされていません。IE9とSafariでは <code>Document</code> と <code>DocumentFragment</code> においてサポートされていません。</p> - -<pre class="brush:js notranslate">;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.childElementCount == null) { - Object.defineProperty(constructor.prototype, 'childElementCount', { - get: function() { - var i = 0, count = 0, node, nodes = this.childNodes; - while (node = nodes[i++]) { - if (node.nodeType === 1) count++; - } - return count; - } - }); - } -})(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-childElementCount', 'ParentNode.childElementCount')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> インターフェースを {{domxref("ChildNode")}} と <code>ParentNode</code> に分割。このメソッドは後者で定義されています。<br> - {{domxref("Document")}} と {{domxref("DocumentFragment")}} が新しいインターフェースを実装しました。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>この初期定義は <code>ElementTraversal</code> 基本インターフェースに追加され、{{domxref("Element")}} で使用します。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2> - - +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.ParentNode.childElementCount")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li>基本インターフェースの {{domxref("ParentNode")}} と {{domxref("ChildNode")}}</li> - <li>この基本インターフェースを実装するオブジェクト型: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}</li> + <li>{{domxref("Document.childElementCount")}}</li> + <li>{{domxref("DocumentFragment.childElementCount")}}</li> </ul> diff --git a/files/ja/web/api/element/children/index.html b/files/ja/web/api/element/children/index.html new file mode 100644 index 0000000000..5dd887af4f --- /dev/null +++ b/files/ja/web/api/element/children/index.html @@ -0,0 +1,58 @@ +--- +title: Element.children +slug: Web/API/Element/children +tags: + - API + - DOM + - Element + - HTMLCollection + - Property + - children +browser-compat: api.Element.children +translation_of: Web/API/Element/children +original_slug: Web/API/ParentNode/children +--- +<div>{{ APIRef("DOM") }}</div> + +<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p> + +<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"> +// Getter +collection = myElement.children; + +// No setter; read-only property +</pre> + +<h3 id="Return_value">返値</h3> + +<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p> + +<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p> + +<h2 id="Example">例 </h2> + +<pre class="brush: js">const myElement = document.getElementById('foo'); +for (let i = 0; i < myElement.children.length; i++) { + console.log(myElement.children[i].tagName); +} +</pre> + +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li> + {{domxref("Node.childNodes")}} + </li> +</ul> diff --git a/files/ja/web/api/element/getattributenodens/index.html b/files/ja/web/api/element/getattributenodens/index.html index f56fd71658..fb48807b05 100644 --- a/files/ja/web/api/element/getattributenodens/index.html +++ b/files/ja/web/api/element/getattributenodens/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/Element/getAttributeNodeNS <h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> -<p><span class="comment"><code>getAttributeNodeNS</code> is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode" title="ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS" title="ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p> +<p><span class="comment"><code>getAttributeNodeNS</code> is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p> <p>{{ DOMAttributeMethods() }}<span class="comment">== Specification ==</span></p> diff --git a/files/ja/web/api/element/prepend/index.html b/files/ja/web/api/element/prepend/index.html new file mode 100644 index 0000000000..9a0a993e08 --- /dev/null +++ b/files/ja/web/api/element/prepend/index.html @@ -0,0 +1,98 @@ +--- +title: Element.prepend() +slug: Web/API/Element/prepend +tags: + - API + - DOM + - Method + - Node + - Element + - Reference + - prepend +translation_of: Web/API/Element/prepend +original_slug: Web/API/ParentNode/prepend +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.prepend()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの {{domxref("Element")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">prepend(...nodesOrDOMStrings); +</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodesOrDOMStrings</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Return_value">返値</h3> + +<p><code>undefined</code>.</p> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加することができません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Prepending_an_element">要素の前に追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +let p = document.createElement("p"); +let span = document.createElement("span"); +div.append(p); +div.prepend(span); + +console.log(div.childNodes); // NodeList [ <span>, <p> ] +</pre> + +<h3 id="Prepending_text">テキストの前に追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +div.append("Some text"); +div.prepend("Headline: "); + +console.log(div.textContent); // "Headline: Some text"</pre> + +<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +let p = document.createElement("p"); +div.prepend("Some text", p); + +console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="The_prepend_method_is_unscopable">prepend() メソッドはスコープが効かない</h3> + +<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">let div = document.createElement("div"); + +with(div) { + prepend("foo"); +} +// ReferenceError: prepend is not defined </pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Element.before()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html index ec2323fa35..08dc56b7c0 100644 --- a/files/ja/web/api/element/queryselectorall/index.html +++ b/files/ja/web/api/element/queryselectorall/index.html @@ -1,5 +1,5 @@ --- -title: element.querySelectorAll +title: Element.querySelectorAll() slug: Web/API/Element/querySelectorAll tags: - API @@ -13,59 +13,57 @@ tags: - Selecting Elements - Selectors - querySelector +browser-compat: api.Element.querySelectorAll translation_of: Web/API/Element/querySelectorAll +original_slug: Web/API/ParentNode/querySelectorAll --- <div>{{APIRef("DOM")}}</div> -<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。</p> +<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。</p> -<div class="note"> -<p><strong>注:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); </pre> -<h3 id="Parameters" name="Parameters">引数</h3> +<h3 id="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> + <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 でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。</p> +<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p> </div> -<h3 id="Return_value" name="Return_value">戻り値</h3> +<h3 id="Return_value">返値</h3> -<p>指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。</p> +<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> +<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p> </div> -<h3 id="Exceptions" name="Exceptions">例外</h3> +<h3 id="Exceptions">例外</h3> <dl> <dt><code>SyntaxError</code></dt> - <dd>指定した <code>selectors</code> の構文が妥当ではない。</dd> + <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd> </dl> -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples">例</h2> -<h3 id="dataset_selector_attribute_selectors" name="dataset_selector_attribute_selectors">dataset セレクターと属性セレクター</h3> +<h3 id="dataset_selector_attribute_selectors">データセットセレクターと属性セレクター</h3> -<pre class="brush: html notranslate"><section class="box" id="sect1"> +<pre class="brush: html"><section class="box" id="sect1"> <div class="funnel-chart-percent1">10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> </pre> -<pre class="brush: js notranslate">// dataset セレクター +<pre class="brush: js">// データセットセレクター const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)]; // 属性セレクター @@ -75,129 +73,95 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]` // const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)]; </pre> -<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストを入手する</h3> +<h3 id="Obtaining_a_list_of_matches">一致するもののリストの入手</h3> -<p>次の例では、<code>myBox</code> 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。</p> -<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("p"); -</pre> +<p>{{domxref("NodeList")}} で <code>"myBox"</code> 要素の中にあるすべての {{HTMLElement("p")}} 要素を取得するには、次のようにします。</p> + +<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre> -<p>次の例では、<code>mybox</code> 内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> +<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> -<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("div.note, div.alert"); +<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert"); </pre> -<p>次の例では、<code>test</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>highlighted</code> のクラスを持つ {{domxref("div")}} である <code>p</code> 要素のリストを取得します。</p> +<p>次に、 <code>"test"</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>"highlighted"</code> クラスを持つ {{HTMLElement("div")}} である、<code><p></code> 要素のリストを取得します。</p> -<pre class="brush: js notranslate">var container = document.querySelector("#test"); +<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> 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。</p> +<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p> -<pre class="brush: js notranslate">var matches = domument.querySelectorAll("iframe[data-src]"); -</pre> +<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> +<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p> -<pre class="brush: js notranslate">var container = document.querySelector("#userlist"); +<pre class="brush: js">var container = document.querySelector("#userlist"); var matches = container.querySelectorAll("li[data-active='1']");</pre> -<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへアクセスする</h3> +<h3 id="Accessing_the_matches">一致したものへのアクセス</h3> -<p>一旦、一致した要素の {{domxref("NodeList")}}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p> +<p>一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 <code>length</code> プロパティが 0 であれば)、一致するものが見つからなかったということです。</p> -<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p> +<p>それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。</p> -<pre class="brush: js notranslate">var highlightedItems = userList.querySelectorAll(".highlighted"); +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function(userItem) { deleteUser(userItem); });</pre> <div class="note"> -<p><strong>注: </strong>NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。</p> + <p><strong>メモ:</strong> NodeList は、本物の配列ではありません。つまり、slice、some、map などの配列メソッドを持っていません。これを配列に変換するには、 Array.from(nodeList) のようにします。</p> </div> -<h2 id="User_notes" name="User_notes">特殊な例</h2> +<h2 id="User_notes">ユーザーのメモ</h2> -<p><code>querySelectorAll()</code> は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> +<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> -<h3 id="HTML" name="HTML">HTML</h3> +<h3 id="HTML">HTML</h3> <p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> -<pre class="brush: html notranslate"><div class="outer"> +<pre class="brush: html"><div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div></pre> -<h3 id="JavaScript" name="JavaScript">JavaScript</h3> +<h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var select = document.querySelector('.select'); +<pre class="brush: js">var select = document.querySelector('.select'); var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0! +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>この例では、<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> +<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> -<pre class="brush: js notranslate">var select = document.querySelector('.select'); +<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','#queryselectorall','querySelectorAll')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div> -<p>{{Compat("api.Element.querySelectorAll")}}</p> -</div> +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</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.querySelector()")}}</li> - <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} および {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> + <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> + <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> + <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> </ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/fetch/index.html b/files/ja/web/api/fetch/index.html index 05704bb11f..79024057be 100644 --- a/files/ja/web/api/windoworworkerglobalscope/fetch/index.html +++ b/files/ja/web/api/fetch/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.fetch() -slug: Web/API/WindowOrWorkerGlobalScope/fetch +slug: Web/API/fetch tags: - API - Experimental @@ -13,6 +13,7 @@ tags: - request - メソッド translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- <p>{{APIRef("Fetch API")}}</p> diff --git a/files/ja/web/api/globaleventhandlers/onload/index.html b/files/ja/web/api/globaleventhandlers/onload/index.html index 6165e41f7e..4d4f54793a 100644 --- a/files/ja/web/api/globaleventhandlers/onload/index.html +++ b/files/ja/web/api/globaleventhandlers/onload/index.html @@ -1,56 +1,85 @@ --- -title: window.onload +title: GlobalEventHandlers.onload slug: Web/API/GlobalEventHandlers/onload tags: - - DOM - - Gecko - - Gecko DOM Reference - - Window +- API +- Event Handler +- GlobalEventHandlers +- HTML DOM +- Property +- Reference +- onload +browser-compat: api.GlobalEventHandlers.onload translation_of: Web/API/GlobalEventHandlers/onload --- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>{{domxref("window")}} の <code>load</code> イベントに対応するイベントハンドラです。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">window.onload = <var>funcRef</var>; +<div>{{ApiRef()}}</div> + +<p><strong><code>onload</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{domxref("Window")}}、{{domxref("XMLHttpRequest")}}、{{htmlelement("img")}} 要素などで発生した {{event("load")}} イベントを処理する<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p> + +<p><code>load</code> イベントは指定されたリソースの読み込みが完了したときに発行されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>target</em>.onload = <em>functionRef</em>; </pre> -<ul> - <li><var>funcRef</var> : <code>load</code> イベント発生時に呼び出す関数への参照または関数式</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">window.onload = function() { - doSomething(); // DOM 構築後に実行したい関数の呼び出し + +<h3 id="Value">値</h3> + +<p><code>functionRef</code> は、ウィンドウの <code>load</code> イベントが発行されたときに呼び出されるハンドラー関数です。</p> + +<h2 id="Examples">例</h2> + +<pre class="brush: js">window.onload = function() { + init(); + doSomethingElse(); }; </pre> -<pre class="brush:html"><!DOCTYPE html> -<html lang="ja"> -<head> -<meta charset="UTF-8" /> -<title>onload のテスト</title> - -<script> -function load() { - alert("load イベントが発生しました。"); -} - -window.onload = load; -</script> - -</head> -<body> -<p>文書の読み込みの完了時に load イベントが発生します。</p> -</body> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>onload test</title> + // ES5 + <script> + function load() { + console.log("load イベントが検出されました。"); + } + window.onload = load; + </script> + // ES2015 + <script> + const load = () => { + console.log("load イベントが検出されました。"); + } + window.onload = load; + </script> + </head> + <body> + <p>load イベントは、文書の読み込みが完了したときに発行されます。</p> + </body> </html> </pre> -<h2 id="Notes" name="Notes">注記</h2> -<p><code>load</code> イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。</p> -<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような Gecko で定められた <a href="/ja/docs/Web/Reference/Events">DOM イベント</a> (※{{domxref("element.addEventListener()")}} でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 <code>window.onload</code> より先に発生します。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<ul> - <li><a href="http://www.whatwg.org/html/#handler-window-onload">http://www.whatwg.org/html/#handler-window-onload</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> + +<h2 id="Notes">メモ</h2> + +<p><code>load</code> イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。</p> + +<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような <a href="/ja/docs/Web/Events">DOM イベント</a> ({{domxref("EventTarget.addEventListener()")}} で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + <ul> - <li><a href="/ja/docs/Listening_to_events_in_Firefox_extensions">Firefox 拡張機能内でのイベントのリスニング</a></li> + <li>{{Event("load")}} イベント</li> + <li><code>DOMContentLoaded</code> イベント (<a + href="/ja/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">イベントの待ち受け: 単純な DOM イベント</a>内)</li> + <li>IIFE <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" + rel="nofollow noreferrer">Immediately-invoked function expression</a></li> </ul> diff --git a/files/ja/web/api/history_api/working_with_the_history_api/index.html b/files/ja/web/api/history_api/working_with_the_history_api/index.html index c7b71399b2..a2fb053d73 100644 --- a/files/ja/web/api/history_api/working_with_the_history_api/index.html +++ b/files/ja/web/api/history_api/working_with_the_history_api/index.html @@ -54,7 +54,7 @@ history.pushState(stateObj, "page 2", "bar.html"); </li> </ul> -<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> +<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> <p>ある意味では、<code>pushState()</code> の呼び出しは <code>window.location = "#foo";</code> と設定するのと似ています。どちらも、現在のドキュメントに関連する別の履歴エントリの生成とアクティベートを行います。ですが <code>pushState()</code> にはいくらかの利点があります：</p> @@ -77,7 +77,7 @@ history.pushState(stateObj, "page 2", "bar.html"); <p>具体的には、何らかのユーザーのアクションを受け、現在の履歴エントリの URL または state オブジェクトを更新したい場合に <code>replaceState()</code> が役立ちます。</p> -<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> +<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> <h3 id="replaceState_の例">replaceState() の例</h3> diff --git a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html index 23d2cd518f..5a4fded9fe 100644 --- a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html +++ b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html @@ -4,14 +4,14 @@ slug: Web/API/HTML_Drag_and_Drop_API/Multiple_items translation_of: Web/API/HTML_Drag_and_Drop_API/Multiple_items original_slug: DragDrop/Dragging_and_Dropping_Multiple_Items --- -<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29" title="Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p> +<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p> <pre>var dt = event.dataTransfer; dt.mozSetDataAt("text/plain", "ドラッグされるデータ", 0); dt.mozSetDataAt("text/plain", "ドラッグされる2つめのデータ", 1); </pre> -<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p> +<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p> <pre>event.dataTransfer.mozClearDataAt("text/plain", 1); </pre> <p>あるインデックスで示される項目について、最後のデータ形式の削除によって項目全体を削除すると、残りの項目が繰り上がって項目のインデックスが変わることに注意してください。例えば、</p> @@ -36,9 +36,9 @@ dt.mozClearDataAt("text/plain", 1); </pre> <p>幸いなことに、通常は項目を削除する必要がある場合は希で、それよりも、必要に応じて項目を追加するだけの場合の方がずっと多いです。</p> <p>複数の項目のドラッグが使われる場合の代表は、複数のファイルやブックマークをドラッグする時です。この場合には、適切な形式でそれらの項目を追加してください。また必須ではありませんが、それぞれの項目は常に同じ形式でデータを追加するべきです。これによりドロップ対象は、一貫したデータの受け取りを期待できます。</p> -<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29" title="Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p> -<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p> -<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p> +<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p> +<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p> +<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p> <pre>function onDrop(event) { var files = []; @@ -47,15 +47,15 @@ dt.mozClearDataAt("text/plain", 1); files.push(dt.mozGetDataAt("application/x-moz-file", i)); } </pre> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p> <pre>var types = event.dataTransfer.mozTypesAt(1); </pre> <h2 id="文字列でないデータのドラッグ">文字列でないデータのドラッグ</h2> -<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file" title="Ja/DragDrop/Recommended Drag Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile" title="ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p> +<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p> <pre>dt.mozSetDataAt("application/x-moz-file", file, 0); </pre> <p>複数の項目を扱う必要がない場合でも、このメソッドを使うことによって任意のオブジェクトをデータに指定できます。この場合には、インデックスとして0を指定しておきます。</p> -<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p> +<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p> <h2 id="複数項目のドロップの例">複数項目のドロップの例</h2> <p>以下は、ドロップされた項目のデータとその形式を一覧表示するボックスの例です。</p> <pre><html> @@ -103,7 +103,7 @@ function output(text) </body> </html> </pre> -<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault" title="ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p> -<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p> +<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p> +<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p> <p>この例は、あるドラッグ操作が保持しているデータを確かめたい時に便利です。ただ項目をこの例のドロップ対象にドロップするだけで、ドラッグされたどの項目がどんな形式でどのようなデータを保持しているのかを見ることができます。</p> <p>{{ languages( { "en": "En/DragDrop/Dragging_and_Dropping_Multiple_Items" } ) }}</p> diff --git a/files/ja/web/api/index/index.html b/files/ja/web/api/index/index.html deleted file mode 100644 index e37c8080c2..0000000000 --- a/files/ja/web/api/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 索引 -slug: Web/API/Index -tags: - - API - - Index - - Landing -translation_of: Web/API/Index ---- -<p>{{Index("/ja/docs/Web/API")}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/ja/web/api/indexeddb/index.html index ae7659a244..bdf8532b6a 100644 --- a/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html +++ b/files/ja/web/api/indexeddb/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.indexedDB -slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +slug: Web/API/indexedDB tags: - API - Database @@ -9,6 +9,7 @@ tags: - Reference - Storage translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB --- <p>{{ APIRef() }}</p> diff --git a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index 47c47bad45..0db54a15b6 100644 --- a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter <p class="summary">クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術は何種類かがあります。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。この記事では、必要なローカルストレージの容量を確保するために、いつどのローカルコンテンツを破棄するのかをどうやって特定するのかを説明します。</p> <div class="note"> -<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーでおおむね正確ですが、既知の詳細情報も記載しています。 Opera および Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p> +<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーではおおむね正確ですが、ブラウザー固有の注意事項も知られています。 Opera と Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p> </div> -<h2 id="What_technologies_use_browser_data_storage" name="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2> +<h2 id="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2> -<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではそれらの技術を "クォータクライアント" と呼びます。</p> +<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではこれらの技術を「クォータクライアント」と呼びます。</p> <ul> <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a></li> @@ -31,45 +31,45 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter </ul> <div class="note"> -<p><strong>メモ</strong>: Firefox では、 <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> もすぐに同じストレージ管理ツールとして使えるようになり、それはこの文書で記述します。</p> +<p><strong>メモ</strong>: Firefox では、<a href="/ja/docs/Web/API/Web_Storage_API">ウェブストレージ</a>もまもなく同じストレージ管理ツールを使い始めます。それはこの文書で記述します。</p> </div> <div class="note"> <p><strong>メモ</strong>: プライベートブラウジングモードは、大半のデータストレージに対応していません。ローカルストレージのデータと Cookie は保存されますが、短命です。 — 最後のプライベートブラウジングウィンドウを閉じた時にデータは消去されます。</p> </div> -<p>生成元の "最終アクセス日時" は、これらのいずれかによってアクティブ化/非アクティブ化される origin eviction によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p> +<p>オリジンの「最終アクセス日時」はこれらのうちの何れかがアクティブ化/非アクティブ化されたときに更新されます。オリジン立ち退き (origin eviction) によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p> -<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_System_API">File System API</a> のクォータ管理を制御しています。</p> +<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File System API</a> のクォータ管理を制御しています。</p> -<h2 id="Different_types_of_data_storage" name="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2> +<h2 id="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2> <p>同じブラウザー内で同じ保存方法を使用していても、解釈されるデータストレージの種類はさまざまです。この章では、さまざまなブラウザーで見つけられる多様なストレージについて説明します。</p> <p>ストレージは 2 種類に分けられます。</p> <ul> - <li>永続的: 長期間にわたって保持されることを意図するデータです。これはユーザーが決断した場合にのみ削除されます (例えば Firefox では、各ページのページ情報ダイアログに "ストレージを消去" ボタンがあります)。</li> - <li>一時的: 長期間にわたって維持する必要がないデータです。ストレージの容量制限に達すると、もっとも過去に使用されたものから削除されます ({{anch("LRU policy", "LRU ポリシー")}})。</li> + <li>永続的なもの。長期間保存されることを意図したデータです。これは、ユーザーが選択した場合にのみ削除されます (たとえば、Firefox では、<em>設定</em>に進み、<em>プライバシーとセキュリティ > Cookie とサイトデータ</em>のオプションを使用することで、すべての保存データを削除するか、または選択したオリジンからの保存データのみを削除するかを選択できます)。</li> + <li>一時的なもの。長期間にわたって維持する必要がないデータです。{{anch("Storage limits", "ストレージの容量制限")}}に達すると、 {{anch("LRU policy", "LRU ポリシー")}}によりもっとも古く使用されたものから削除されます。</li> </ul> <p>Firefox では、永続的なストレージが使用されると、ユーザーにはデータが永続的になることを警告するポップアップが表示され、それが良いかどうかを尋ねます。一時的データストレージは明示的にユーザーにプロンプトを表示しません。</p> -<p>既定では、一時的なストレージがほとんどの使用環境 (例えば、標準的な Web アプリ) で使用され、永続的なストレージはインストールされたアプリ (例えば、Firefox OS やデスクトップ版 Firefox にインストールした Firefox アプリ、および Chrome アプリ) で使用されます。</p> +<p>ストレージは既定では一時的です。開発者は <a href="/ja/docs/Web/API/Storage_API">Storage API</a> で利用できる {{domxref("StorageManager.persist()")}} メソッドを使用して永続的なストレージにすることができます。</p> -<h2 id="Where_is_the_data_stored" name="Where_is_the_data_stored">データの保存先は?</h2> +<h2 id="Where_is_the_data_stored">データの保存先は?</h2> -<p>それぞれのストレージタイプが別々のリポジトリに相当しており、ユーザーの Firefox プロファイル内のディレクトリーとは以下のように対応づけられます (ほかのブラウザーでは、若干異なるでしょう):</p> +<p>それぞれのストレージ種別は、個別のリポジトリーーを表します。以下は、ユーザーの Firefox プロファイル下のディレクトリにおける実際のマッピングです (他のブラウザーでは若干異なる場合があります)。</p> <ul> - <li><code><profile>/storage</code> — クォータマネージャ (後述) に管理されている、ストレージの主要なトップレベルディレクトリーです。</li> - <li><code><profile>/storage/permanent</code> — 永続的なデータストレージのリポジトリです。</li> - <li><code><profile>/storage/temporary</code> — 一時的なデータストレージのリポジトリです。</li> - <li><code><profile>/storage/default</code> — 既定のデータストレージのリポジトリです。</li> + <li><code><profile>/storage</code> — クォータマネージャーー (後述) に管理されている、ストレージの主要な最上位ディレクトリーです。</li> + <li><code><profile>/storage/permanent</code> — 永続的なデータストレージのリポジトリーです。</li> + <li><code><profile>/storage/temporary</code> — 一時的なデータストレージのリポジトリーです。</li> + <li><code><profile>/storage/default</code> — 既定のデータストレージのリポジトリーです。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的なタイプのデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは <profile>/storage/default 以下に保存されます。</p> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的な種類のデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは <profile>/storage/default 以下に保存されます。</p> </div> <div class="note"> @@ -81,52 +81,52 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter </div> <div class="note"> -<p><strong>メモ</strong>: ユーザーが <code><profile>/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化が失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p> +<p><strong>メモ</strong>: ユーザーが <code><profile>/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化に失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p> </div> -<h2 id="Storage_limits" name="Storage_limits">ストレージの制限</h2> +<h2 id="Storage_limits">ストレージの制限</h2> -<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャと飛ばれる内部のブラウザーツールが生成元ごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p> +<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャーと飛ばれる内部のブラウザーツールがオリジンごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p> -<p>従ってハードディスクドライブが 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると <strong>origin eviction</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、生成元全体に相当するデータを削除します。生成元内の一部分を削除するような縮小法はありません。生成元内のひとつのデータベースだけ削除すると、矛盾の問題が発生するおそれがあります。</p> +<p>従ってハードディスクドライブの空き容量が 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると<strong>オリジン立ち退き (origin eviction)</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、オリジン全体に相当するデータを削除します。オリジン内の一部分を削除するような縮小法はありません。オリジン内のデータベースをひとつだけ削除すると、矛盾が発生するおそれがあります。</p> -<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれの生成元は、グループ (生成元のグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通り:</p> +<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれのオリジンは、グループ (オリジンのグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通りです。</p> <ul> - <li><code>mozilla.org</code> — グループ 1、生成元 1</li> - <li><code>www.mozilla.org</code> — グループ 1、生成元 2</li> - <li><code>joe.blogs.mozilla.org</code> — グループ 1、生成元 3</li> - <li><code>firefox.com</code> — グループ 2、生成元 4</li> + <li><code>mozilla.org</code> — グループ 1、オリジン 1</li> + <li><code>www.mozilla.org</code> — グループ 1、オリジン 2</li> + <li><code>joe.blogs.mozilla.org</code> — グループ 1、オリジン 3</li> + <li><code>firefox.com</code> — グループ 2、オリジン 4</li> </ul> <p>このグループでは <code>mozilla.org</code>、<code>www.mozilla.org</code>、<code>joe.blogs.mozilla.org</code> が、合わせてグローバルリミットの 20% を上限としてストレージを使用できます。<code>firefox.com</code> は、別に 20% の上限を持ちます。</p> -<p>これら 2 種類の制限は、制限に達したときの動作が異なります:</p> +<p>これら 2 種類の制限は、制限に達したときの動作が異なります。</p> <ul> - <li>グループリミットは "ハードリミット" とも呼ばれます。 origin eviction を発生させません。</li> - <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので "ソフトリミット" です。</li> + <li>グループリミットは「ハードリミット」とも呼ばれます。オリジン立ち退きを発生させません。</li> + <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので「ソフトリミット」です。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当に低メモリな状況では、グループリミットも 8MB となります。</p> +<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当にメモリーが少ない状況では、グループリミットも 8MB となります。</p> </div> <div class="note"> -<p><strong>メモ</strong>: グループリミットに達したとき、あるいは origin eviction で十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p> +<p><strong>メモ</strong>: グループリミットに達したとき、あるいはオリジン立ち退きで十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p> </div> <div class="note"> <p><strong>メモ</strong>: Chrome では、ソフトおよびハードのストレージのクォータの限界が <strong>M66</strong> から変更されました。詳しい情報は<a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68">こちら</a>にあります。</p> </div> -<h2 id="LRU_policy" name="LRU_policy">LRU ポリシー</h2> +<h2 id="LRU_policy">LRU ポリシー</h2> -<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用された生成元のデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p> +<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用されたオリジンのデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p> -<p>一時的なストレージを使用して、生成元ごとに "最終アクセス日時" を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) 生成元をすべて発見しようとします。これらは、"最終アクセス日時" によって整列されます。 origin eviction を発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用された生成元を削除し続けます。</p> +<p>一時的なストレージを使用して、オリジンごとに「最終アクセス日時」を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) オリジンをすべて発見しようとします。これらは、「最終アクセス日時」によって整列されます。オリジン立ち退きを発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用されたオリジンを削除し続けます。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, by<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> モバイルブラウザーのクライアント側ストレージについて詳しく分析した記事。</li> diff --git a/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html new file mode 100644 index 0000000000..ac21ce3e45 --- /dev/null +++ b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html @@ -0,0 +1,213 @@ +--- +title: 期限の確認 +slug: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due +tags: + - Apps + - Date + - Example + - Guide + - IndexedDB + - deadline +translation_of: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due +--- +<div>{{DefaultAPISidebar("IndexedDB")}}</div><div class="summary"> +<p>この記事では、 IndexedDB で保存された期限と現在の日時を照合する複雑な例を見てみましょう。ここでの主な課題は、保存されている期限情報 (月、時、日など) を、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> オブジェクトから取得した現在の日時と照合することです。</p> +</div> + +<img alt="サンプルアプリのスクリーンショット。赤いメインタイトルの「To do app」、テスト用の To Do 項目、ユーザーが新しいタスクを入力するための赤いフォーム。" src="to-do-app.png"> + +<p>この記事で紹介するアプリケーションの例は、 <strong>To-do リスト通知</strong>です。これは、タスクのタイトルと期限を <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> に格納し、期限になったときに <a href="/ja/docs/Web/API/Notification">Notification</a> および <a href="/ja/docs/Web/API/Vibration_API">Vibration</a> API を使ってユーザーに通知を行う、シンプルな To-do リストアプリケーションです。 <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do リスト通知アプリは GitHub ダウンロード</a>してソースコードをいじったり、<a href="https://mdn.github.io/to-do-notifications/">アプリの動作をライブで閲覧</a>したりすることができます。</p> + +<h2 id="The_basic_problem">基本的な問題点</h2> + +<p>この ToDo アプリでは、まず時間と日付の情報を、機械が読め、表示されたときに人間が理解できる形式で記録し、次にそれぞれの時間と日付が現在の時点で発生しているかどうかをチェックしたいと考えました。基本的には、現在の時刻と日付を確認し、保存されている各イベントの締め切りが現在の時刻と日付に一致するかどうかを確認します。もし一致していれば、ユーザーに何らかの通知をしたいと考えています。</p> + +<p>2 つの {{jsxref("Global_Objects/Date", "Date")}} オブジェクトを比較するだけなら簡単ですが、もちろん人間は JavaScript が理解できるような形式で期限を入力したいわけではありません。人間が読むことのできる日付はかなり違っていて、いくつもの異なる表現があります。</p> + +<h3 id="Recording_the_date_information">日付情報の記録</h3> + +<p>モバイル端末での合理的な使い勝手を提供するために、そして曖昧さを減らすために、 HTML フォームを作成することにしました。</p> + +<img alt="この ToDo アプリのフォームで、タスクのタイトルを入力するフィールドと、期限の年、月、日、時、分の値が入っています。" src="to-do-app-form2.png"> + +<ul> + <li>ToDo リストのタイトルを入力するためのテキスト入力です。これはユーザーの入力作業の中で最も避けられないものです。</li> + <li>期限の「時」と「分」を入力するための数値入力。 <code>type="number"</code> に対応しているブラウザーでは、小さな上下矢印の数字ピッカーが表示されます。モバイルプラットフォームでは、データを入力するためのテンキーが用意されていることが多く、これは便利です。他のプラットフォームでは、標準的なテキスト入力になりますが、これは問題ありません。</li> + <li>期限の日、月、年を入力するための {{HTMLElement("select")}} 要素。これらの値は、ユーザーにとって最も曖昧な入力となるため (7, sunday, sun? 04, 4, April, Apr? 2013, '13, 13?) 日は数値で、月は月名で、年は 4 桁の年号で記録されます。</li> +</ul> + +<p>フォームの送信ボタンが押されると、 <code>addData()</code> 関数が実行され、次のように始まります。</p> + +<pre class="brush: js">function addData(e) { + e.preventDefault(); + + if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) { + note.innerHTML += '<li>Data not submitted — form incomplete.</li>'; + return; + } +</pre> + +<p>この部分では、フォームのフィールドにすべての情報が入力されているかどうかを確認します。記入されていない場合は、開発者通知ペイン (アプリの UI の左下を参照) にメッセージを表示して、何が起こっているのかをユーザーに伝え、機能を終了します。このステップは、主に HTML フォームの検証に対応していないブラウザーのためのものです (検証に対応しているブラウザーでは、 HTML で required 属性を使用して検証を強制しています)。</p> + +<pre class="brush: js"> else { + var newItem = [ + { + taskTitle: title.value, + hours : hours.value, + minutes : minutes.value, + day : day.value, + month : month.value, + year : year.value, + notified : "no" + } + ]; + + // open a read/write db transaction, ready for adding the data + var transaction = db.transaction(["toDoList"], "readwrite"); + + // report on the success of opening the transaction + transaction.oncomplete = function(event) { + note.innerHTML += '<li>Transaction opened for task addition.</li>'; + }; + + transaction.onerror = function(event) { + note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>'; + }; + + // create an object store on the transaction + var objectStore = transaction.objectStore("toDoList"); + + // add our newItem object to the object store + var request = objectStore.add(newItem[0]); </pre> + +<p>この部分では、データベースへの挿入に必要な形式でデータを保存する <code>newItem</code> というオブジェクトを作成します。次の数行では、データベーストランザクションを開き、これが成功したか失敗したかをユーザーに通知するメッセージを提供しています。そして、新しい項目が追加される <code>objectStore</code> が生成されます。データオブジェクトの <code>notified</code> プロパティは、 To-do リストの項目の期限がまだ来ておらず、通知されていないことを示しています。これについては後ほど説明します。</p> + +<div class="note"> +<p><strong>メモ:</strong> 変数 <code>db</code> には IndexedDB のデータベースインスタンスへの参照が格納されています。この変数の様々なプロパティを使用してデータを操作することができます。</p> +</div> + +<pre class="brush: js"> + request.onsuccess = function(event) { + + note.innerHTML += '<li>New item added to database.</li>'; + + title.value = ''; + hours.value = null; + minutes.value = null; + day.value = 01; + month.value = 'January'; + year.value = 2020; + }; + }</pre> + +<p>次の部分では、新しい項目の追加が成功したことを示すログメッセージを作成し、次のタスクが入力できるようにフォームをリセットします。</p> + +<pre class="brush: js"> + // update the display of data to show the newly added item, by running displayData() again. + displayData(); +};</pre> + +<p>最後に <code>displayData()</code> 関数を実行して、アプリ内のデータの表示を更新し、先ほど入力された新しいタスクを表示します。</p> + +<h3 id="Checking_whether_a_deadline_has_been_reached">期限に達したかどうかの確認</h3> + +<p>この時点でデータはデータベースに入っていますが、今度は期限に達しているかどうかをチェックしたいと思います。これを行うのが <code>checkDeadlines()</code> 関数です。</p> + +<pre class="brush: js">function checkDeadlines() { + var now = new Date();</pre> + +<p>まず、空の <code>Date</code> オブジェクトを作成して、現在の日付と時刻を取得します。簡単でしょう？ここからは少し複雑な話になります。</p> + +<pre class="brush: js"> var minuteCheck = now.getMinutes(); + var hourCheck = now.getHours(); + var dayCheck = now.getDate(); + var monthCheck = now.getMonth(); + var yearCheck = now.getFullYear(); +</pre> + +<p><code>Date</code> オブジェクトには、内部の日付や時刻のさまざまな部分を抽出するためのメソッドがいくつかあります。ここでは、現在の分 (簡単な数値として取得)、時 (簡単な数値として取得)、日 (これは <code>getDate()</code> が必要、 <code>getDay()</code> は曜日を 1-7 で返すため)、月 (0-11 の数値を返す。下記参照)、年 (<code>getFullYear()</code> が必要、<code>getYear()</code> は非推奨であり、誰にとってもあまり役に立たない奇妙な値を返します) を読み取ります。</p> + +<pre class="brush: js"> var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); + + objectStore.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + + if(cursor) {</pre> + +<p>次にもう一つ、 IndexedDB の <code>objectStore</code> を生成し、 <code>openCursor()</code> メソッドを使用してカーソルを開きます。これは基本的に IndexedDB がストア内のすべての項目を反復処理する方法です。そして、カーソル内に有効な項目が残っている限り、カーソル内のすべての項目をループします。</p> + +<pre class="brush: js"> switch(cursor.value.month) { + case "January": + var monthNumber = 0; + break; + case "February": + var monthNumber = 1; + break; + + // other lines removed from listing for brevity + + case "December": + var monthNumber = 11; + break; + default: + alert('Incorrect month entered in database.'); + }</pre> + +<p>まず最初に行うことは、データベースに保存されている月名を、 JavaScript が理解できる月の数値に変換することです。前に見たように、 JavaScript の Date オブジェクトは月の値を 0 から 11 までの数値として生成します。</p> + +<pre class="brush: js"> if(+(cursor.value.hours) == hourCheck && + +(cursor.value.minutes) == minuteCheck && + +(cursor.value.day) == dayCheck && + monthNumber == monthCheck && + cursor.value.year == yearCheck && + notified == "no") { + + // If the numbers all do match, run the createNotification() + // function to create a system notification + createNotification(cursor.value.taskTitle); + }</pre> + +<p>IndexedDB に格納された値と照合したい現在の時刻と日付の部分がすべて組み立てられたので、いよいよチェックを実行します。ユーザーに期限切れを知らせる何らかの通知を行う前に、すべての値が一致している必要があります。</p> + +<p>ここでの <code>+</code> 演算子は、先頭にゼロが付いている数字を、先頭にゼロが付いていない同等の数字に変換します (例えば 09 -> 9)。これが必要なのは、 JavaScript の Date の数値には先頭にゼロがないが、データにはあるかもしれないからです。</p> + +<p><code>notified == "no"</code> のチェックは、 1 つの To-Do アイテムに対して 1 つの通知しか受け取れないようにするためのものです。各項目のオブジェクトに対して通知が発生すると、その <code>notification</code> プロパティが <code>"yes"</code> に設定されるので、次の繰り返しではこのチェックが通らないようにするために、 <code>createNotification()</code> 関数の中に次のようなコードを入れています (詳しくは <a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>を読んでください)。</p> + +<pre class="brush: js"> // now we need to update the value of notified to "yes" in this particular data object, so the + // notification won't be set off on it again + + // first open up a transaction as usual + var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); + + // get the to-do list object that has this title as it's title + var request = objectStore.get(title); + + request.onsuccess = function() { + // grab the data object returned as the result + var data = request.result; + + // update the notified value in the object to "yes" + data.notified = "yes"; + + // create another request that inserts the item back into the database + var requestUpdate = objectStore.put(data); + + // when this new request succeeds, run the displayData() function again to update the display + requestUpdate.onsuccess = function() { + displayData(); + }</pre> + +<p>すべてのチェックが一致した場合は、 <code>createNotification()</code> 関数を実行して、ユーザーに通知を行います。</p> + +<pre class="brush: js"> cursor.continue(); + } + } +}</pre> + +<p>この関数の最後の行では、カーソルが上に移動し、 IndexedDB に格納されている次のタスクに対して、上記の期限チェックの仕組みが実行されます。</p> + +<h3 id="Keep_on_checking!">チェックし続ける</h3> + +<p>もちろん、上記の期限チェック機能を一度実行するだけでは意味がありません。すべての締切に達していないかどうかを常にチェックし続けたいのです。そのために、 <code>setInterval()</code> を使って 1 秒に 1 回 <code>checkDeadlines()</code> を実行します。</p> + +<pre class="brush: js">setInterval(checkDeadlines, 1000);</pre> diff --git a/files/ja/web/api/indexeddb_api/index.html b/files/ja/web/api/indexeddb_api/index.html index 14369351fa..1d08f26cc8 100644 --- a/files/ja/web/api/indexeddb_api/index.html +++ b/files/ja/web/api/indexeddb_api/index.html @@ -13,54 +13,54 @@ translation_of: Web/API/IndexedDB_API --- <div>{{DefaultAPISidebar("IndexedDB")}}</div> -<p>IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。この API は高パフォーマンスなデータの検索を行うために、インデックスを使用します。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。本ページは、MDN における IndexedDB のランディングページです。ここでは API リファレンスへのリンク、使用ガイド、ブラウザーのサポート状況、主要なコンセプトの説明を掲載します。</p> +<p>IndexedDB は、ファイルや blob を含む大量の構造化データをクライアント側で保存するための低レベル API です。この API はインデックスを使用して、高パフォーマンスなデータの検索を行うことができます。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。ここでは、完全な API リファレンスと使用ガイド、ブラウザーの対応の詳細、および重要な概念の説明へのリンクを提供します。</p> <p>{{AvailableInWorkers}}</p> <div class="note"> -<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にとってはとても複雑に見えるかもしれません。シンプルな API が好ましいのでしたら、IndexedDB をより開発者フレンドリーに扱える <a href="https://localforage.github.io/localForage/">localForage</a> や <a href="http://www.dexie.org/">dexie.js</a>、<a href="https://github.com/erikolson186/zangodb">ZangoDB</a>、<a href="https://pouchdb.com/">PouchDB</a>、<a href="http://jsstore.net/">JsStore</a> などのライブラリを検討してください。</p> +<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。シンプルな API が好ましいのであれば、<a href="#see_also">関連情報</a>の節にある IndexedDB をプログラマーにとって扱いやすくするライブラリーを試してみてください。</p> </div> -<h2 id="Key_concepts_and_usage" name="Key_concepts_and_usage">主要概念と使用法</h2> +<h2 id="Key_concepts_and_usage">主要概念と使用法</h2> -<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムですが、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">Structured Clone アルゴリズム</a>がサポートする、任意のオブジェクトを保存できます。データベースのスキーマを定義する、データベースへの接続を確立する、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行うことが必要です。</p> +<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムです。しかし、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">構造化クローンアルゴリズム</a>に対応した、任意のオブジェクトを保存することができます。データベースのスキーマを定義し、データベースへの接続を確立し、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行う必要があります。</p> <ul> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">IndexedDB のコンセプト</a>を詳しく知る</li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB 使用ガイド</a>で、非同期に IndexedDB を扱い方法を基本原理から学ぶ</li> - <li><a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Worker により PWA をオフラインで動作させる</a>で概説されているように、データをオフラインに格納する IndexedDB と資産をオフラインに格納する Service Worker を組み合わせる。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>についてはこちらをご覧ください。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>のガイドで、で、非同期的に IndexedDB を使用する方法を基本原理から学びます。</li> + <li>データをオフラインで保存するための IndexedDB と、資産をオフラインで保存するためのサービスワーカーを組み合わせる方法は、 <a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">サービスワーカーにより PWA をオフラインで動作させる</a>で概説しています。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p> +<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a href="https://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p> </div> -<h3 id="Synchronous_and_asynchronous" name="Synchronous_and_asynchronous">同期と非同期</h3> +<h3 id="Synchronous_and_asynchronous">同期と非同期</h3> -<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と<span style="background-color: #f5f6f5;">非同期</span> API の両方を提供していました。同期 API は <a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a> 内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、<span style="background-color: #f5f6f5;">同期 API</span> はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p> +<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と非同期 API の両方を提供していました。同期 API は<a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">ウェブワーカー</a>内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、同期 API はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p> -<h3 id="Storage_limits_and_eviction_criteria" name="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3> +<h3 id="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3> -<p>クライアントサイド (すなわちローカルディスク) に何らかのデータを保存するウェブ技術がいくつかあり、IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a> で、少なくとも Firefox ではどのようにしているかを説明しようとしています。</p> +<p>クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術はいくつかあります。IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a>で、少なくとも Firefox ではどのようにしているかの解説を試みています。</p> -<h2 id="Interfaces" name="Interfaces">インターフェイス</h2> +<h2 id="Interfaces">インターフェイス</h2> -<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/DOM/window" title="DOM/window">window</a> オブジェクトの <a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> 属性上の <a href="/ja/docs/Web/API/IDBFactory.open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発火したイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p> +<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/Web/API/Window">window</a> オブジェクトの <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB"><code>indexedDB</code></a> 属性上で <a href="/ja/docs/Web/API/IDBFactory/open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発行されたイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p> -<h3 id="Connecting_to_a_database" name="Connecting_to_a_database">データベースへの接続</h3> +<h3 id="Connecting_to_a_database">データベースへの接続</h3> <dl> <dt>{{domxref("IDBEnvironment")}}</dt> <dd>IndexedDB 機能へのアクセスを提供します。{{domxref("window")}} および {{domxref("worker")}} オブジェクトによって実装されています。このインターフェイスは 2.0 仕様の一部ではありません。</dd> <dt>{{domxref("IDBFactory")}}</dt> - <dd>データベースへのアクセスを提供します。<a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd> + <dd>データベースへのアクセスを提供します。{{domxref("WindowOrWorkerGlobalScope/indexedDB", "indexedDB")}} グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd> <dt>{{domxref("IDBOpenDBRequest")}}</dt> <dd>データベースを開くリクエストを表します。</dd> <dt>{{domxref("IDBDatabase")}}</dt> <dd>データベース接続を表します。データベースとのトランザクション処理を行うためのみに使用されます。</dd> </dl> -<h3 id="Retrieving_and_modifying_data" name="Retrieving_and_modifying_data">データの取り出しと変更</h3> +<h3 id="Retrieving_and_modifying_data">データの取り出しと変更</h3> <dl> <dt>{{domxref("IDBTransaction")}}</dt> @@ -72,88 +72,83 @@ translation_of: Web/API/IndexedDB_API <dt>{{domxref("IDBIndex")}}</dt> <dd>こちらも IndexedDB データベース内のデータのサブセットにアクセスできますが、レコードの探索に主キーではなくインデックスを使用します。{{domxref("IDBObjectStore")}} より高速に動作する場合があります。</dd> <dt>{{domxref("IDBCursor")}}</dt> - <dd>オブジェクトストアとインデックスをイテレートします。</dd> + <dd>オブジェクトストアとインデックスを反復処理します。</dd> <dt>{{domxref("IDBCursorWithValue")}}</dt> - <dd>オブジェクトストアとインデックスをイテレートして、カーソルの現在の値を返します。</dd> + <dd>オブジェクトストアとインデックスを反復処理して、カーソルの現在の値を返します。</dd> <dt>{{domxref("IDBKeyRange")}}</dt> <dd>データベースから一定の範囲のデータを取り出すために使用可能な、キーの範囲を定義します。</dd> <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt> - <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd> + <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd> </dl> -<h3 id="Custom_event_interfaces" name="Custom_event_interfaces">カスタムイベントインターフェイス</h3> +<h3 id="Custom_event_interfaces">カスタムイベントインターフェイス</h3> -<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します:</p> +<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します。</p> <dl> <dt>{{domxref("IDBVersionChangeEvent")}}</dt> - <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラ関数によってデータベースのバージョンが変更されたことを表します。</dd> + <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラー関数によってデータベースのバージョンが変更されたことを表します。</dd> </dl> -<h3 id="Obsolete_interfaces" name="Obsolete_interfaces">廃止インターフェイス</h3> +<h3 id="Obsolete_interfaces">廃止インターフェイス</h3> -<p>仕様の早期段階で定義されていたインターフェイスの一部が、現在、削除されています。以前書いたコードを最新の仕様に合わせて更新する際に必要になるであろうことから、削除されたインターフェイスに関するドキュメントは残してあります:</p> +<p>仕様の早期段階では、以下のようなインターフェイスを定義していましたが、既に削除されています。以前書かれたコードを更新する必要がある場合のために、ドキュメントを残しています。</p> <dl> - <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt> - <dd>データベースのバージョンの変更リクエストを表現します。データベースのバージョンを変更する方法が ({{domxref("IDBDatabase.setVersion")}} ではなく {{domxref("IDBFactory.open")}} を呼び出すように) 変わりました。また削除された {{domxref("IDBVersionChangeRequest")}} に代わり {{domxref("IDBOpenDBRequest")}} インターフェイスが用意されています。</dd> - <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt> + <dt>{{domxref("IDBDatabaseException")}} {{deprecated_inline}}</dt> <dd>データベース操作が実行されている間に発生した例外状況を表します。</dd> - <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBTransaction")}} です。</dd> - <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBObjectStore")}} です。</dd> - <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBIndex")}} です。</dd> - <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBFactory")}} です。</dd> - <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBEnvironment")}} です。</dd> - <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBDatabase")}} です。</dd> - <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBCursor")}} です。</dd> + <dt>{{domxref("IDBTransactionSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBTransaction")}} です。</dd> + <dt>{{domxref("IDBObjectStoreSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBObjectStore")}} です。</dd> + <dt>{{domxref("IDBIndexSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBIndex")}} です。</dd> + <dt>{{domxref("IDBFactorySync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBFactory")}} です。</dd> + <dt>{{domxref("IDBEnvironmentSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBEnvironment")}} です。</dd> + <dt>{{domxref("IDBDatabaseSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBDatabase")}} です。</dd> + <dt>{{domxref("IDBCursorSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBCursor")}} です。</dd> </dl> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> <ul> - <li><a href="http://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li> - <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li> - <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> + <li><a href="https://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li> + <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li> + <li><a href="https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> </ul> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<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("IndexedDB 2")}}</td> - <td>{{Spec2("IndexedDB 2")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('IndexedDB')}}</td> - <td>{{Spec2('IndexedDB')}}</td> - <td>初回定義</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://w3c.github.io/IndexedDB/">Indexed Database API</a></td> + </tr> + </tbody> </table> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li> - <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> + <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB をに対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li> + <li><a href="https://dexie.org/">Dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルターリング、射影、ソート、アップデート、集計をサポートしています。</li> - <li><a href="http://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li> - <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアントサイドのインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li> - <li><a href="https://pouchdb.com">PouchDB</a>: クライアントサイドのブラウザー内の CouchDB 実装で IndexedDB を使っています。</li> + <li><a href="https://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li> + <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアント側のインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li> + <li><a href="https://pouchdb.com">PouchDB</a>: クライアント側のブラウザー内の CouchDB 実装で IndexedDB を使っています。</li> + <li><a href="https://www.npmjs.com/package/idb">idb</a>: IndexedDB API をほぼ反映した小さな (~1.15k) ライブラリーですが、使いやすさを大きく変える小さな改良が加えられています。</li> + <li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: IndexedDB で実装された超シンプルで小さな (~600B) プロミスベースのキーバリューストア</li> + <li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> クライアントサイドのキーバリューストレージ用の小さな (~2kB) プロミスベースのライブラリーです。IndexedDB、localStorage、WebSQL、Cookie で動作します。優先度に基づいて、対応しているストレージを自動的に使用できます。</li> + <li><a href="https://github.com/google/lovefield">lovefield</a>: Lovefield は、ウェブアプリケーション用のリレーショナルデータベースです。 JavaScript で書かれており、クロスブラウザーで動作します。SQL ライクな API を提供しており、高速で安全、かつ簡単に使用できます。</li> + <li><a href="https://github.com/hyoo-ru/mam_mol/tree/master/db">$mol_db</a>: 小さな (~1.3kB) TypeScript のファサードで、プロミスベースの API と自動マイグレーションを備えています。</li> + </ul> diff --git a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html index 333cda62f1..a4727f8781 100644 --- a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html @@ -1,46 +1,52 @@ --- -title: IndexedDB を使用する +title: IndexedDB の使用 slug: Web/API/IndexedDB_API/Using_IndexedDB tags: - API - Advanced - Database + - Guide - IndexedDB - Storage - Tutorial + - jsstore translation_of: Web/API/IndexedDB_API/Using_IndexedDB --- <p>{{DefaultAPISidebar("IndexedDB")}}</p> <div class="summary"> -<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つ ウェブアプリケーションを作成できますので、オンラインとオフラインの両方で動作するアプリケーションになります。</p> +<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つウェブアプリケーションを作成できますので、アプリケーションがオンラインとオフラインの両方で動作するようになります。</p> </div> -<h2 id="About_this_document" name="About_this_document">このドキュメントについて</h2> +<h2 id="About_this_document">このドキュメントについて</h2> -<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB" title="IndexedDB/Basic Concepts Behind IndexedDB">IndexedDB の基本的な概念</a>をお読みください。</p> +<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>をお読みください。</p> -<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> の記事とそのサブ記事をご覧ください。IndexedDB で使用されるオブジェクトの型や、同期 API および非同期 API のドキュメントがあります。</p> +<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> の記事とそのサブ記事をご覧ください。この記事では、IndexedDB で使用されるオブジェクトの種類と、非同期 API のメソッドについて説明します (同期 API は仕様から削除されました)。</p> -<h2 id="pattern" name="pattern">基本パターン</h2> +<h2 id="pattern">基本パターン</h2> -<p>IndexedDB で推奨される基本パターンは、以下のようになります:</p> +<p>IndexedDB で推奨される基本パターンは、以下のようになります。</p> <ol> <li>データベースを開きます。</li> <li>データベース内に、オブジェクトストアを作成します。</li> <li>データの追加や取り出しといった、データベース操作のトランザクションを開始して、リクエストを行います。</li> - <li>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</li> - <li>結果 (リクエストオブジェクトで見つけることができます) に応じた処理を行います。</li> + <li> + <div>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</div> + </li> + <li> + <div>結果 (リクエストオブジェクトにある) に応じた処理を行います。</div> + </li> </ol> <p>これらの主要な概念を踏まえることで、より具体的な手続きを理解できます。</p> -<h2 id="open" name="open">ストアを作成および構築する</h2> +<h2 id="open">ストアを作成および構築する</h2> -<h3 id="Using_an_experimental_version_of_IndexedDB" name="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3> +<h3 id="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3> -<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう:</p> +<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう。</p> <pre class="brush: js">// 以下の行に、テストを行いたい実装の接頭辞を含めてください。 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; @@ -50,35 +56,35 @@ window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // (Mozilla はこれらのオブジェクトに接頭辞をつけていませんので、window.mozIDB* は不要です)</pre> -<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。サポートしているものとして失敗するより、未サポートとする方が好ましいでしょう:</p> +<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。対応しているものとして失敗するより、未対応とする方が好ましいでしょう。</p> <pre class="brush: js">if (!window.indexedDB) { - window.alert("このブラウザーは安定版の IndexedDB をサポートしていません。IndexedDB の機能は利用できません。"); + window.console.log("このブラウザーは安定版の IndexedDB を対応していません。IndexedDB の機能は利用できません。"); } </pre> -<h3 id="Opening_a_database" name="Opening_a_database">データベースを開く</h3> +<h3 id="Opening_a_database">データベースを開く</h3> -<p>プロセス全体は以下のようにして始めます:</p> +<p>プロセス全体は以下のようにして始めます。</p> <pre class="brush: js">// データベースを開く var request = window.indexedDB.open("MyTestDatabase", 3); </pre> -<p>わかりますか? データベースを開くことも他の操作と同様であり、"リクエスト" が必要です。</p> +<p>わかりますか? データベースを開くことも他の操作と同様であり、「リクエスト」が必要です。</p> -<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest" title="IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest" title="IndexedDB/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase" title="IndexedDB/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p> +<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p> -<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラでデータベースのスキーマを作成できます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラで更新されたスキーマを提供できます。詳しくは、後ほど<a href="#Updating_the_version_of_the_database">データベースのバージョンを更新する</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p> +<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生し、そのイベントハンドラーでデータベースのスキーマを作成することができます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラーで更新されたスキーマを提供することができます。詳しくは、後ほど<a href="#updating_the_version_of_the_database">データベースのバージョンの更新</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p> <div class="warning"> -<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください:<br> +<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください。<br> <code>var request = indexedDB.open("MyTestDatabase", 2.4); // 行ってはいけません。バージョンは 2 に丸められます</code></p> </div> -<h4 id="Generating_handlers" name="Generating_handlers">ハンドラを生成する</h4> +<h4 id="Generating_handlers">ハンドラーの生成</h4> -<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラを生成することでしょう:</p> +<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラーを生成することでしょう。</p> <pre class="brush: js">request.onerror = function(event) { // request.errorCode に対して行うこと! @@ -89,38 +95,38 @@ request.onsuccess = function(event) { <p>2 つの関数 <code>onsuccess()</code> と <code>onerror()</code> のどちらが呼び出されるのでしょう? すべてが成功すると成功イベント (すなわち <code>type</code> プロパティが <code>"success"</code> である DOM イベント) が、<code>request</code> を <code>target</code> として発生します。イベントが発生すると <code>request</code> の <code>onsuccess()</code> 関数が、success イベントを引数として呼び出されます。一方、何らかの問題がある場合はエラーイベント (すなわち <code>type</code> プロパティが <code>"error"</code> である DOM イベント) が <code>request</code> で発生します。これは、エラーイベントを引数として <code>onerror()</code> 関数を呼び出します。</p> -<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ!)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーが ウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p> +<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーがウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p> -<p>広告ネットワークやコンピュータを汚染させる悪意のある Web サイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリ上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2015 年 11 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p> +<p>広告ネットワークやコンピューターを汚染させる悪意のあるウェブサイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリー上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2021 年 5 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p> -<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう:</p> +<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう。</p> <pre class="brush: js">var db; var request = indexedDB.open("MyTestDatabase"); request.onerror = function(event) { - alert("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!"); + console.log("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!"); }; request.onsuccess = function(event) { db = event.target.result; }; </pre> -<h4 id="Handling_Errors" name="Handling_Errors">エラーを処理する</h4> +<h4 id="Handling_Errors">エラーを処理する</h4> -<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラをデータベースオブジェクトに追加することができます:</p> +<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラーを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラーをデータベースオブジェクトに追加することができます。</p> <pre class="brush: js">db.onerror = function(event) { // このデータベースのリクエストに対するすべてのエラー用の - // 汎用エラーハンドラ! - alert("Database error: " + event.target.errorCode); + // 汎用エラーハンドラー! + console.log("Database error: " + event.target.errorCode); }; </pre> -<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラで処理しなければならないエラーの実例です。</p> +<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラーで処理しなければならないエラーの実例です。</p> <h3 id="Creating_or_updating_the_version_of_the_database" name="Creating_or_updating_the_version_of_the_database">データベースを作成またはデータベースのバージョンを更新する</h3> -<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラでは、このバージョンのデータベースで必要なオブジェクトストアを作成します:</p> +<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラーに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラーでは、このバージョンのデータベースで必要なオブジェクトストアを作成します。</p> <pre class="brush:js;">// このイベントは最新のブラウザーにのみ実装されています request.onupgradeneeded = function(event) { @@ -135,21 +141,19 @@ request.onupgradeneeded = function(event) { <p>既存の名称を使用してオブジェクトストアを作成しようとする (あるいは、存在しない名称のオブジェクトストアを削除しようとする) と、エラーが発生します。</p> -<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラが実行されます。</p> +<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラーが実行されます。</p> -<p>Chrome 23 以降および Opera 17 以降の Blink/Webkit は、現行バージョンの仕様をサポートします。IE10 以降も同様です。他の実装や古い実装では現行バージョンの仕様を実装しておらず、<code>indexedDB.open(name, version).onupgradeneeded</code> シグネチャが未サポートです。古い Webkit/Blink でデータベースのバージョンを更新する方法について、詳しくは <a href="/ja/docs/Web/API/IDBDatabase#setVersion()_.0A.0ADeprecated" title="IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase のリファレンス記事</a>をご覧ください。</p> +<h3 id="Structuring_the_database">データベースを構築する</h3> -<h3 id="Structuring_the_database" name="Structuring_the_database">データベースを構築する</h3> +<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keypath">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keygenerator">キージェネレーター</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p> -<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="IndexedDB#gloss_key_path">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keygenerator" title="IndexedDB#gloss key generator">キージェネレータ</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p> - -<p>以下の表で、キーを供給するさまざまな方法を示します:</p> +<p>以下の表で、キーを供給するさまざまな方法を示します。</p> <table class="standard-table"> <thead> <tr> <th scope="col">キーパス (<code>keyPath</code>)</th> - <th scope="col">キージェネレータ (<code>autoIncrement</code>)</th> + <th scope="col">キージェネレーター (<code>autoIncrement</code>)</th> <th scope="col">説明</th> </tr> </thead> @@ -181,7 +185,7 @@ request.onupgradeneeded = function(event) { <p>さらにインデックスには、保存されたデータに単純な制限を強制する機能があります。インデックスを作成する際に unique フラグを設定すると、インデックスのキーパスで同じ値を持つオブジェクトが複数保存されないことを、インデックスが保証します。よって例えば人々の集団の情報を保持するオブジェクトストアがある場合に、同じメールアドレスを持つ人が 2 人存在しないことを保証したい場合は、これを強制するために unique フラグを設定したインデックスを使用するとよいでしょう。</p> -<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します:</p> +<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します。</p> <pre class="brush: js">// 顧客データがどのようなものかを示します const customerData = [ @@ -192,7 +196,7 @@ const customerData = [ <p>もちろん、誰かの社会保障番号を顧客テーブルの主キーとして使用するべきではないですし (社会保障番号を持っていない人もいます)、年齢の代わりに誕生日を保管することもできますが、これらの不適切な選択は利便性のために無視して先へ進みましょう。</p> -<p>次に、データを保存する IndexedDB を作成するところを見てみましょう:</p> +<p>次に、データを保存する IndexedDB を作成するところを見てみましょう。</p> <pre class="brush: js">const dbName = "the_name"; @@ -222,28 +226,28 @@ request.onupgradeneeded = function(event) { objectStore.transaction.oncomplete = function(event) { // 新たに作成した objectStore に値を保存します。 var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers"); - for (var i in customerData) { - customerObjectStore.add(customerData[i]); - } + customerData.forEach(function(customer) { + customerObjectStore.add(customer); + }); }; }; </pre> <p>先に示したように、<code>onupgradeneeded</code> はデータベースの構造を変えることができる唯一の場所です。ここではオブジェクトストアの作成および削除や、インデックスの構築および削除が可能です。</p> -<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前とパラメータオブジェクトです。パラメータオブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p> +<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前と引数オブジェクトです。引数オブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p> <p>また、保存されたオブジェクトの <code>name</code> プロパティを参照する、"name" という名前のインデックスも要求しています。<code>createObjectStore()</code> と同様に <code>createIndex()</code> も、作成したいインデックスの型を改良するための省略可能な引数 <code>options</code> オブジェクトを指定できます。<code>name</code> プロパティを持たないオブジェクトを追加することはできますが、そのオブジェクトは "name" インデックス内に現れません。</p> -<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#Using_an_index" title="Using IndexedDB#Using an index">インデックスを使用する</a> をご覧ください。</p> +<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#using_an_index">インデックスを使用する</a> をご覧ください。</p> -<h3 id="Using_a_key_generator" name="Using_a_key_generator">キージェネレータを使用する</h3> +<h3 id="Using_a_key_generator">キージェネレーターを使用する</h3> -<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレータを使用できます。デフォルトで、このフラグは設定されません。</p> +<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレーターを使用できます。デフォルトで、このフラグは設定されません。</p> -<p>キージェネレータを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレータを初めて作成した時点では、キージェネレータの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレータの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレータには影響がありません。</p> +<p>キージェネレーターを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレーターを初めて作成した時点では、キージェネレーターの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレーターの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレーターには影響がありません。</p> -<p>以下のように、キージェネレータを持つ別のオブジェクトストアを作成できます:</p> +<p>以下のように、キージェネレーターを持つ別のオブジェクトストアを作成できます。</p> <pre class="brush: js">// indexedDB を開きます。 var request = indexedDB.open(dbName, 3); @@ -255,7 +259,7 @@ request.onupgradeneeded = function (event) { // autoIncrement フラグに true を設定した、"names" という名前のオブジェクトストアを作成します。 var objStore = db.createObjectStore("names", { autoIncrement : true }); - // "names" オブジェクトストアはキージェネレータを持っていますので、値 name のキーは自動的に生成されます。 + // "names" オブジェクトストアはキージェネレーターを持っていますので、値 name のキーは自動的に生成されます。 // 追加したレコードは以下のようになります: // キー : 1 => 値 : "Bill" // キー : 2 => 値 : "Donna" @@ -264,34 +268,34 @@ request.onupgradeneeded = function (event) { } };</pre> -<p>キージェネレータについて詳しくは、<a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p> +<p>キージェネレーターについて詳しくは、<a href="https://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p> -<h2 id="Adding_retrieving_and_removing_data" name="Adding_retrieving_and_removing_data">データを追加する、読み出す、削除する</h2> +<h2 id="Adding_retrieving_and_removing_data">データの追加、読み取り、削除</h2> <p>新しいデータベースで何かを行えるようにする前に、トランザクションを開始しなければなりません。トランザクションはデータベースオブジェクトから生じており、トランザクションの対象にしたいオブジェクトストアを指定しなければなりません。トランザクションの内部では、データを保持しているオブジェクトストアへのアクセスや、リクエストの実行が可能です。次に、データベースに変更処理を行うのか、あるいはデータベースから読み出すだけかを決めなければなりません。トランザクションは <code>readonly</code>、<code>readwrite</code>、<code>versionchange</code> の 3 つのモードを使用できます。</p> -<p>データベースの "スキーマ" や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。(最新の仕様を実装していない WebKit ブラウザーは {{domxref("IDBFactory.open")}} メソッドの引数が、データベースの <code>name</code> の 1 つしかありません。よって、<code>versionchange</code> トランザクションを開始するには {{domxref("IDBVersionChangeRequest.setVersion")}} を呼び出さなければなりません)</p> +<p>データベースの「スキーマ」や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。</p> <p>既存のオブジェクトストアからレコードを読み出すには、トランザクションで <code>readonly</code> モードまたは <code>readwrite</code> モードを使用できます。既存のオブジェクトストアに変更処理を行うには、トランザクションを <code>readwrite</code> モードにしなければなりません。このようなトランザクションは {{domxref("IDBDatabase.transaction")}} で開きます。このメソッドの引数は 2 つあり、<code>storeNames</code> (アクセスしたいオブジェクトストアの配列で定義されるスコープ) とトランザクションの <code>mode</code> (<code>readonly</code> または <code>readwrite</code>) です。またこのメソッドは、{{domxref("IDBTransaction.objectStore")}} メソッドを持つトランザクションオブジェクトを返します。<code>objectStore</code> メソッドは、オブジェクトストアにアクセスするために使用できます。デフォルトでは、モードを指定しなければ <code>readonly</code> モードでトランザクションを開きます。</p> <div class="note"> -<p><strong>注記</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p> +<p><strong>メモ</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p> </div> -<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します:</p> +<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します。</p> <ul> <li>スコープを定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li> - <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">基本的な概念</a>の記事で <dfn><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#Database">トランザクション</a></dfn>の定義をご覧ください。</li> + <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>の記事で <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">トランザクション</a>の定義をご覧ください。</li> </ul> -<h3 id="Adding_data_to_the_database" name="Adding_data_to_the_database">データベースにデータを追加する</h3> +<h3 id="Adding_data_to_the_database">データベースにデータを追加する</h3> -<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします:</p> +<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします。</p> <pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite"); -// 注記: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。 -// そのような実装をサポートしたい場合は、以下のように記述します: +// メモ: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。 +// そのような実装をサポートしたい場合は、以下のように記述します。 // var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre> <p><code>transaction()</code> 関数は引数が 2 つあり (ひとつは省略可能)、トランザクションオブジェクトを返します。第 1 引数は、トランザクションの対象にするオブジェクトストアのリストです。トランザクションですべてのオブジェクトを対象にしたい場合は空の配列を渡すことができますが、仕様書では空の配列に対して InvalidAccessError を生成すべきとされていますので、行わないようにしてください。第 2 引数に何も指定しなければ、読み取り専用のトランザクションになります。書き込みを行いたい場合は、<code>"readwrite"</code> フラグを渡さなければなりません。</p> @@ -304,7 +308,7 @@ request.onupgradeneeded = function (event) { <pre class="brush: js">// すべてのデータがデータベースに追加されたときに行う処理 transaction.oncomplete = function(event) { - alert("All done!"); + console.log("All done!"); }; transaction.onerror = function(event) { @@ -321,9 +325,9 @@ for (var i in customerData) { <p><code>add()</code> を呼び出して生成されたリクエストの <code>result</code> は、追加された値のキーです。よってこのケースでは、オブジェクトストアでキーパスとして <code>ssn</code> プロパティを使用していますので、追加されたオブジェクトの <code>ssn</code> プロパティと等しくなります。<code>add()</code> 関数では、データベース内に同一のキーを持つオブジェクトが存在しないことを要求しますので注意してください。既存の項目を変更しようとする場合や、既存の項目があるかを配慮しない場合は、{{anch("Updating an entry in the database", "データベース内の項目を更新する")}} の章で説明している <code>put()</code> 関数を使用できます。</p> -<h3 id="Removing_data_from_the_database" name="Removing_data_from_the_database">データベースからデータを削除する</h3> +<h3 id="Removing_data_from_the_database">データベースからのデータの削除</h3> -<p>データの削除もよく似ています:</p> +<p>データの削除もよく似ています。</p> <pre class="brush: js">var request = db.transaction(["customers"], "readwrite") .objectStore("customers") @@ -332,9 +336,9 @@ request.onsuccess = function(event) { // 削除完了! };</pre> -<h3 id="Getting_data_from_the_database" name="Getting_data_from_the_database">データベースからデータを取得する</h3> +<h3 id="Getting_data_from_the_database">データベースからのデータの取得</h3> -<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません:</p> +<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません。</p> <pre class="brush: js">var transaction = db.transaction(["customers"]); var objectStore = transaction.objectStore("customers"); @@ -344,27 +348,27 @@ request.onerror = function(event) { }; request.onsuccess = function(event) { // request.result に対して行う処理! - alert("Name for SSN 444-44-4444 is " + request.result.name); + console.log("Name for SSN 444-44-4444 is " + request.result.name); };</pre> -<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します:</p> +<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します。</p> <pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) { - alert("Name for SSN 444-44-4444 is " + event.target.result.name); + console.log("Name for SSN 444-44-4444 is " + event.target.result.name); };</pre> <p>どのように動作するかわかりますか? オブジェクトストアが 1 つしかありませんので、トランザクションで必要とするオブジェクトストアのリストを渡さずに、名称を文字列で渡しています。また、データベースから読み出すだけですので、<code>"readwrite"</code> トランザクションは不要です。モードを指定せずに <code>transaction()</code> を呼び出すと、<code>"readonly"</code> トランザクションになります。さらに細かいことですが、実はリクエストオブジェクトを変数に保存していません。DOM イベントはターゲットとしてリクエストを持ちますので、<code>result</code> プロパティを得るためにイベントを使用できます。</p> -<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します:</p> +<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します。</p> <ul> <li><a href="#scope">スコープ</a>を定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li> - <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li> + <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li> </ul> -<h3 id="Updating_an_entry_in_the_database" name="Updating_an_entry_in_the_database">データベース内の項目を更新する</h3> +<h3 id="Updating_an_entry_in_the_database">データベース内の項目の更新</h3> -<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう:</p> +<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう。</p> <pre class="brush: js">var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers"); var request = objectStore.get("444-44-4444"); @@ -391,29 +395,29 @@ request.onsuccess = function(event) { <p>ここでは <code>objectStore</code> を作成して、ssn の値 (<code>444-44-4444</code>) で特定される顧客レコードの取り出しを要求しています。リクエストの結果を変数 (<code>data</code>) に代入して、そのオブジェクトの <code>age</code> プロパティを更新します。そして、顧客レコードを <code>objectStore</code> に書き戻して前の値を上書きする、第 2 のリクエスト (<code>requestUpdate</code>) を作成します。</p> <div class="note"> -<p><strong>注記</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p> +<p><strong>メモ</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p> </div> -<h3 id="Using_a_cursor" name="Using_a_cursor">カーソルを使用する</h3> +<h3 id="Using_a_cursor">カーソルの使用</h3> -<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです:</p> +<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです。</p> <pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers"); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { - alert("Name for SSN " + cursor.key + " is " + cursor.value.name); + console.log("Name for SSN " + cursor.key + " is " + cursor.value.name); cursor.continue(); } else { - alert("No more entries!"); + console.log("No more entries!"); } };</pre> -<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例ではショートハンドを使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストにマッチする項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p> +<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例では略記法を使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストに一致する項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p> -<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです:</p> +<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです。</p> <pre class="brush: js">var customers = []; @@ -424,40 +428,45 @@ objectStore.openCursor().onsuccess = function(event) { cursor.continue(); } else { - alert("Got all customers: " + customers); + console.log("Got all customers: " + customers); } };</pre> <div class="note"> -<p><strong>注記</strong>: Mozilla は、このような処理を行うために <code>getAll()</code> も実装しています (および <code>getAllKeys()</code> もあり、これは現在、about:config の設定項目 <code>dom.indexedDB.experimental</code> で隠しています)。これらは IndexedDB 標準の一部ではなく、将来削除する可能性があります。これらは便利であると考えられますので、実装しました。以下のコードは、前出の例とまったく同じことを行います:</p> +<p><strong>メモ</strong>: それ以外に、このような処理を行うために <code>getAll()</code> (および <code>getAllKeys()</code>)。を使用することができます。以下のコードは、前出の例とまったく同じことを行います。</p> <pre class="brush: js">objectStore.getAll().onsuccess = function(event) { - alert("Got all customers: " + event.target.result); + console.log("Got all customers: " + event.target.result); };</pre> <p>これはオブジェクトを横着な方法で作成するため、カーソルの <code>value</code> プロパティの検索に関してパフォーマンスコストが発生します。例えば <code>getAll()</code> を使用するとき、Gecko はすべてのオブジェクトを一度に作成しなければなりません。例えばそれぞれのキーを検索することにのみ関心がある場合は、<code>getAll()</code> よりもカーソルを使用する方がとても効率的です。オブジェクトストア内の全データの配列を得ようとしている場合は、<code>getAll()</code> を使用しましょう。</p> </div> -<h3 id="Using_an_index" name="Using_an_index">インデックスを使用する</h3> +<h3 id="Using_an_index">インデックスの使用</h3> <p>SSN は個人を一意に識別しますので、キーとして SSN を使用して顧客データを保管することは論理的です。(プライバシーの観点でよいアイデアであるかは別の問題であり、この記事の対象外です) 一方、名前で顧客を検索しなければならない場合は、正しいものが見つかるまでデータベース内のすべての SSN に対して反復処理を行わなければなりません。この方法による検索はとても遅いため、代わりにインデックスを使用するとよいでしょう。</p> -<pre class="brush: js">var index = objectStore.index("name"); +<pre class="brush: js">// 最初に、 request.onupgradeneeded の中にインデックスを生成したか確認してください。 +// objectStore.createIndex("name", "name"); +// まだであれば、 DOMException が発生します。 + +var index = objectStore.index("name"); index.get("Donna").onsuccess = function(event) { - alert("Donna's SSN is " + event.target.result.ssn); -};</pre> + console.log("Donna's SSN is " + event.target.result.ssn); +}; +</pre> <p>"name" カーソルは一意ではないので、<code>name</code> に <code>"Donna"</code> が設定されている項目は複数存在する可能性があります。この場合は常に、キーの値がもっとも小さいものを取得します。</p> -<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します:</p> +<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します。</p> <pre class="brush: js">// 顧客レコードのオブジェクト全体を得るために、ノーマルカーソルを使用します。 index.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // cursor.key は "Bill" のような名前、cursor.value はオブジェクト全体です。 - alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); + console.log("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); cursor.continue(); } }; @@ -468,40 +477,40 @@ index.openKeyCursor().onsuccess = function(event) { if (cursor) { // cursor.key は "Bill" のような名前、cursor.value は SSN です。 // 保存されたオブジェクトの他の部分を直接取得する方法はありません。 - alert("Name: " + cursor.key + ", SSN: " + cursor.value); + console.log("Name: " + cursor.key + ", SSN: " + cursor.value); cursor.continue(); } };</pre> -<h3 id="Specifying_the_range_and_direction_of_cursors" name="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3> +<h3 id="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3> -<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します:</p> +<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します。</p> -<pre class="brush: js">// "Donna" にのみマッチします。 +<pre class="brush: js">// "Donna" にのみ一致します。 var singleKeyRange = IDBKeyRange.only("Donna"); -// "Bill" より先のすべてにマッチします。"Bill" を含みます。 +// "Bill" より先のすべてに一致します。"Bill" を含みます。 var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill"); -// "Bill" より先のすべてにマッチします。ただし "Bill" は含みません。 +// "Bill" より先のすべてに一致します。ただし "Bill" は含みません。 var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true); -// "Donna" までのすべてにマッチします。ただし "Donna" は含みません。 +// "Donna" までのすべてに一致します。ただし "Donna" は含みません。 var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true); -// "Bill" から "Donna" までにマッチします。ただし "Donna" は含みません。 +// "Bill" から "Donna" までに一致します。ただし "Donna" は含みません。 var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true); // いずれかのキーレンジを使用するには、openCursor()/openKeyCursor() の第 1 引数として渡します。 index.openCursor(boundKeyRange).onsuccess = function(event) { var cursor = event.target.result; if (cursor) { - // マッチした場合の処理。 + // 一致した場合の処理。 cursor.continue(); } };</pre> -<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します:</p> +<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します。</p> <pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) { var cursor = event.target.result; @@ -511,7 +520,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します:</p> +<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します。</p> <pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) { var cursor = event.target.result; @@ -521,7 +530,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向のパラメータに <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p> +<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向の引数に <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p> <pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) { var cursor = event.target.result; @@ -531,18 +540,18 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#Constants">IDBCursor Constants</a>" をご覧ください。</p> +<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#constants">IDBCursor Constants</a>" をご覧ください。</p> -<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab" name="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2> +<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2> -<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します:</p> +<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します。</p> <pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2); openReq.onblocked = function(event) { // 他のタブがデータベースを読み込んでいる場合は、処理を進める前に // それらを閉じなければなりません。 - alert("このサイトを開いている他のタブをすべて閉じてください!"); + console.log("このサイトを開いている他のタブをすべて閉じてください!"); }; openReq.onupgradeneeded = function(event) { @@ -558,12 +567,12 @@ openReq.onsuccess = function(event) { }; function useDatabase(db) { - // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラを追加するようにしてください。 + // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラーを追加するようにしてください。 // データベースを閉じなければなりません。データベースを閉じると、別のページがデータベースをアップグレードできます。 // これを行わなければ、ユーザーがタブを閉じるまでデータベースはアップグレードされません。 db.onversionchange = function(event) { db.close(); - alert("新しいバージョンのページが使用可能になりました。再読み込みしてください!"); + console.log("新しいバージョンのページが使用可能になりました。再読み込みしてください!"); }; // データベースを使用する処理 @@ -572,39 +581,39 @@ function useDatabase(db) { <p>すでに開かれているアプリが新たにデータベースを開こうとするコードを開始したが、古いバージョンのデータベースを使用している状況に対処するため、<code>VersionError</code> エラーもリッスンしましょう。</p> -<h2 id="Security" name="Security">セキュリティ</h2> +<h2 id="Security">セキュリティ</h2> <p>IndexedDB は同一生成元の原則を使用します。すなわち、ストアとサイトの生成元 (通常、サイトのドメインまたはサブドメイン) を紐づけますので、他の生成元からアクセスすることはできません。</p> <p>サードパーティの window コンテンツ (例えば {{htmlelement("iframe")}} のコンテンツ) は、ブラウザーが<a href="https://support.mozilla.org/ja/kb/disable-third-party-cookies">サードパーティ Cookie を禁止していない</a>限り、自身が埋め込まれている生成元の IndexedDB ストアにアクセスできます ({{bug("1147821")}} をご覧ください)。</p> -<h2 id="Warning_About_Browser_Shutdown" name="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2> +<h2 id="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2> -<p>ブラウザーを終了するとき (例えばユーザーが "終了" や "閉じる" ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします:</p> +<p>ブラウザーを終了するとき (例えばユーザーが「終了」や「閉じる」ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします。</p> <ol> <li>影響するデータベース (あるいは、ブラウザーを終了する場合はすべての開いているデータベース) の各トランザクションは <code>AbortError</code> とともに中断されます。この効果は各トランザクションで {{domxref("IDBTransaction.abort()")}} が呼ばれたのと同等です。</li> <li>すべてのトランザクションが完了していたら、データベース接続は閉じられます。</li> - <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラを使ってこのイベントをリッスンできます。その結果、データベースが予期せず閉じられたことがわかります。</li> + <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラーを使ってこのイベントを待ち受けできます。その結果、データベースが予期せず閉じられたことがわかります。</li> </ol> -<p>上記の挙動は新しく、下記のブラウザーリリース以降で利用できます: Firefox 50, Google Chrome 31 (おおよそ)。</p> +<p>上記の挙動は新しく、ブラウザーの Firefox 50、Google Chrome 31 以降 (おおよそ) のリリースで利用できます。</p> -<p>このブラウザーバージョンの前は、トランザクションは静かに中断され、{{event("close")}} イベントは発火せず、予期せぬデータベースの停止を検出する方法はありませんでした。</p> +<p>このバージョンのブラウザーの前は、トランザクションは暗黙裡に中断され、{{event("close")}} イベントが発行されず、予期せぬデータベースの停止を検出する方法はありませんでした。</p> <p>ユーザーはいつでもブラウザーを終了することができますので、特定のトランザクションが完了することをあてにしたり、完了しなかったことを知ったりすることはできません。この動作が暗示することがいくつかあります。</p> <p>第一に、データベースであらゆるトランザクションが終了したときに、常に一貫性がある状態を保つように注意するべきです。例えば、ユーザーが編集可能な項目のリストを保存する IndexedDB を使用していると想定します。オブジェクトストアを消去してから新たなリストを書き込むことにより、編集後のリストを保存します。あるトランザクションでオブジェクトストアを消去して、別のトランザクションで新たなリストを書き込むとすれば、消去した後かつ書き込む前にブラウザーが閉じられる危険性があり、その場合は空のデータベースが残ります。これを避けるために、消去と書き込みをひとつのトランザクションに結合しましょう。</p> -<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p> +<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラーで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラーで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p> <p>実は通常のブラウザー終了であっても、IndexedDB のトランザクションが完了するよう保証する手段はありません。{{bug(870645)}} をご覧ください。通常の終了通知の回避策として、トランザクションの状況を追跡して、アンロード時にトランザクションが完了していないことをユーザーに警告するための <code>beforeunload</code> イベントを追加するとよいでしょう。</p> -<p>少なくともアボート通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p> +<p>少なくとも中止通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p> -<h2 id="Locale-aware_sorting" name="Locale-aware_sorting">ロケールを意識した並べ替え</h2> +<h2 id="Locale-aware_sorting">ロケールを意識した並べ替え</h2> -<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます:</p> +<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます。</p> <ul> <li>a</li> @@ -613,19 +622,19 @@ function useDatabase(db) { <li>á</li> </ul> -<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p> +<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリーに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p> <p>この新機能は、開発者が {{domxref("IDBObjectStore.createIndex()")}} を使用してインデックスを作成する際にロケールを指定できるようにします (引数を確認してください)。データセットに対して反復処理を行うためにカーソルを使用するときに、ロケールを意識した並べ替えを行いたい場合は、特化した {{domxref("IDBLocaleAwareKeyRange")}} を使用できます。</p> <p>また {{domxref("IDBIndex")}} には、ロケールが指定されているか、およびどのロケールが指定されているかを特定するために追加された新たなプロパティがあります。<code>locale</code> (指定されたロケール、または未指定であれば null を返します) と <code>isAutoLocale</code> (プラットフォームの既定のロケールを使用する自動ロケールでインデックスが作成されていれば <code>true</code>、そうでなければ <code>false</code> を返します) です。</p> <div class="note"> -<p><strong>注記</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p> +<p><strong>メモ</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p> </div> -<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2> +<h2 id="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2> -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> +<h3 id="HTML_Content">HTML コンテンツ</h3> <pre class="brush: html"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> @@ -760,7 +769,7 @@ function useDatabase(db) { </div> </pre> -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> +<h3 id="CSS_Content">CSS コンテンツ</h3> <pre class="brush: css">body { font-size: 0.8em; @@ -849,7 +858,7 @@ input { } </pre> -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> +<h3 id="JavaScript_Content">JavaScript コンテンツ</h3> <pre class="brush: js">(function () { var COMPAT_ENVS = [ @@ -877,9 +886,7 @@ input { console.log("openDb ..."); var req = indexedDB.open(DB_NAME, DB_VERSION); req.onsuccess = function (evt) { - // ガベージコレクションの問題を避けるため、結果を得る際は - // "req" より "this" を使用する方がよい - // db = req.result; + // db = req.result; と同等 db = this.result; console.log("openDb DONE"); }; @@ -907,7 +914,7 @@ input { return tx.objectStore(store_name); } - function clearObjectStore(store_name) { + function clearObjectStore() { var store = getObjectStore(DB_STORE_NAME, 'readwrite'); var req = store.clear(); req.onsuccess = function(evt) { @@ -996,7 +1003,7 @@ input { // ストア内の次のオブジェクトに移動する cursor.continue(); - // このカウンタは、個別の ID を作成するためだけに使用する + // このカウンターは、個別の ID を作成するためだけに使用する i++; } else { console.log("No more entries"); @@ -1069,7 +1076,7 @@ input { * @param {string} url ダウンロードしてローカルの IndexedDB データベースに保存する * 画像の URL。この URL の背後にあるリソースは、"同一生成元ポリシー" に従います。 * よって、この方法を動作させるために URL は、このコードを配置する - * Web サイト/アプリと同一生成元であることが必要です。 + * ウェブサイト/アプリと同一生成元であることが必要です。 */ function addPublicationFromUrl(biblioid, title, year, url) { console.log("addPublicationFromUrl:", arguments); @@ -1189,8 +1196,8 @@ input { // 警告: 削除するには、作成時に使用したものとまったく同じキーを使用しなければ // なりません。作成時のキーが数値であった場合は、削除時も数値でなければ // なりません。 - req = store.delete(key); - req.onsuccess = function(evt) { + var deleteReq = store.delete(key); + deleteReq.onsuccess = function(evt) { console.log("evt:", evt); console.log("evt.target:", evt.target); console.log("evt.target.result:", evt.target.result); @@ -1198,7 +1205,7 @@ input { displayActionSuccess("Deletion successful"); displayPubList(store); }; - req.onerror = function (evt) { + deleteReq.onerror = function (evt) { console.error("deletePublication:", evt.target.errorCode); }; }; @@ -1298,37 +1305,38 @@ input { openDb(); addEventListeners(); -})(); // Immediately-Invoked Function Expression (IIFE) -</pre> +})(); // Immediately-Invoked Function Expression (IIFE)</pre> <p>{{LiveSampleLink('Full_IndexedDB_example', "オンラインのライブデモを試す")}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<div class="notecard note"> +<p><strong>メモ</strong>: <code>window.indexedDB.open()</code> は非同期です。このメソッドは <code>success</code> イベントが発行されるよりもはるかに前に終了します。すなわち、ある関数 (例えば <code>openDb()</code>) が <code>open()</code> や <code>onsuccess</code> を呼び出すと、 <code>onsuccess</code> ハンドラーが実行されるよりも前に戻ります。この問題は、 <code>transaction()</code> や <code>get()</code> のような他のリクエストメソッドでも言えます。</p> +</div> + +<h2 id="See_also">関連情報</h2> <p>必要に応じて、より多くの情報を知るための記事集です。</p> -<h3 id="Reference" name="Reference">リファレンス</h3> +<h3 id="Reference">リファレンス</h3> <ul> - <li><a href="/ja/docs/Web/API/IndexedDB_API" title="IndexedDB">IndexedDB API リファレンス</a></li> - <li><a href="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB_in_chrome" title="IndexedDB/Using_IndexedDB_in_chrome">chrome で IndexedDB を使用する</a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Firefox で JavaScript ジェネレータを使用する</a></li> - <li>Firefox のソースコード内の、IndexedDB <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl&regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom/indexedDB/.*\.idl&regexp=1">インタフェースのファイル</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API リファレンス</a></li> + <li><a href="https://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> + <li>IndexedDB <a class="link-https" href="https://searchfox.org/mozilla-central/search?q=dom%2FindexedDB%2F.*%5C.idl&path=&case=false®exp=true">インターフェイスファイル</a> (Firefox のソースコード内)</li> </ul> -<h3 id="Tutorials_and_guides" name="Tutorials_and_guides">チュートリアルとガイド</h3> +<h3 id="Tutorials_and_guides">チュートリアルとガイド</h3> <ul> - <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> - <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> + <li><a href="https://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> + <li><a href="https://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> </ul> -<h3 id="Libraries" name="Libraries">ライブラリ</h3> +<h3 id="Libraries">ライブラリー</h3> <ul> - <li><a href="http://mozilla.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li> - <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> + <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB に対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li> + <li><a href="https://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルタリング、射影、ソート、アップデート、集計をサポートしています。</li> - <li><a href="http://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li> + <li><a href="https://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li> </ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/ja/web/api/issecurecontext/index.html index 221ce43915..877738b41b 100644 --- a/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html +++ b/files/ja/web/api/issecurecontext/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.isSecureContext -slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +slug: Web/API/isSecureContext tags: - API - DOM @@ -12,6 +12,7 @@ tags: - プロパティ - リファレンス translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext --- <p>{{APIRef()}}{{SeeCompatTable}}</p> diff --git a/files/ja/web/api/navigator/appcodename/index.html b/files/ja/web/api/navigator/appcodename/index.html new file mode 100644 index 0000000000..befb274cb5 --- /dev/null +++ b/files/ja/web/api/navigator/appcodename/index.html @@ -0,0 +1,44 @@ +--- +title: Navigator.appCodeName +slug: Web/API/Navigator/appCodeName +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference +browser-compat: api.Navigator.appCodeName +translation_of: Web/API/NavigatorID/appCodeName +original_slug: Web/API/NavigatorID/appCodeName +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.appCodeName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Mozilla</code>" です。このプロパティは互換性のためだけに維持されています。</p> + +<div class="note"><strong>メモ:</strong> このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Mozilla</code>" を返します。 +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>codeName</em> = navigator.appCodeName +</pre> + +<h3 id="Value">値</h3> + +<p>"<code>Mozilla</code>" という文字列です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appName")}}</li> + <li>{{domxref("Navigator.product")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/appname/index.html b/files/ja/web/api/navigator/appname/index.html new file mode 100644 index 0000000000..0ecf702fba --- /dev/null +++ b/files/ja/web/api/navigator/appname/index.html @@ -0,0 +1,46 @@ +--- +title: Navigator.appName +slug: Web/API/Navigator/appName +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference +browser-compat: api.Navigator.appName +translation_of: Web/API/NavigatorID/appName +original_slug: Web/API/NavigatorID/appName +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.appName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Netscape</code>" です。このプロパティは互換性ためだけに維持されています。</p> + +<div class="notecard note"> + <h4>メモ</h4> + <p>このプロパティが実際のブラウザー名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Netscape</code>" を返します。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><var>appName</var> = navigator.appName +</pre> + +<h3 id="Value">値</h3> + +<p>文字列 "<code>Netscape</code>" です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appCodeName")}}</li> + <li>{{domxref("Navigator.product")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/appversion/index.html b/files/ja/web/api/navigator/appversion/index.html new file mode 100644 index 0000000000..d3908733b7 --- /dev/null +++ b/files/ja/web/api/navigator/appversion/index.html @@ -0,0 +1,50 @@ +--- +title: Navigator.appVersion +slug: Web/API/Navigator/appVersion +tags: + - API + - Deprecated + - Navigator + - Property + - Reference + - appVersion +browser-compat: api.Navigator.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> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> diff --git a/files/ja/web/api/navigator/hardwareconcurrency/index.html b/files/ja/web/api/navigator/hardwareconcurrency/index.html new file mode 100644 index 0000000000..cd8a14f7ab --- /dev/null +++ b/files/ja/web/api/navigator/hardwareconcurrency/index.html @@ -0,0 +1,58 @@ +--- +title: Navigator.hardwareConcurrency +slug: Web/API/Navigator/hardwareConcurrency +tags: + - API + - HTML DOM + - Navigator + - Property + - hardwareConcurrency +browser-compat: api.Navigator.hardwareConcurrency +translation_of: Web/API/Navigator/hardwareConcurrency +original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><code><strong>navigator.hardwareConcurrency</strong></code> は読み取り専用のプロパティで、ユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサー数を返します。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency +</pre> + +<h2 id="Value">値</h2> + +<p>論理プロセッサーのコア数を示す数値です。</p> + +<p>現代のコンピューターは CPU に複数の物理プロセッサーのコアがあります (通常は 2 コアか 4 コア)。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて、一度に複数スレッドを実行することができます。 したがって、例えば 4 コアの CPU は 8 個の<strong>論理プロセッサーコア</strong>を提供することができます。論理プロセッサーのコア数は、コンテキスト切り替えを必要とせずに一度に効果的に実行できるスレッドの数を測定するために利用できます。</p> + +<p>しかしながら、ブラウザーはより少ない論理コア数を報告することを選択することで、一度に実行できる {{domxref("Worker")}} の数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。</p> + +<h2 id="Examples">例</h2> + +<p>この例では、ブラウザーが報告した論理プロセッサーごとに {{domxref("Worker")}} が 1 つ作られ、新しいワーカーへの参照と、そのワーカーをまだ使用しているかどうかを示す論理値の値を含むレコードを作っています。これらのオブジェクトは後で使用するために配列に順々に格納されています。後でリクエストを処理するために使うワーカーのプールを作っています。</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="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator")}}</li> + <li>{{domxref("WorkerNavigator")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/language/index.html b/files/ja/web/api/navigator/language/index.html new file mode 100644 index 0000000000..2e42ca25b2 --- /dev/null +++ b/files/ja/web/api/navigator/language/index.html @@ -0,0 +1,50 @@ +--- +title: Navigator.language +slug: Web/API/Navigator/language +tags: + - API + - Language + - Navigator + - Property + - Read-only + - Reference +browser-compat: api.Navigator.language +translation_of: Web/API/Navigator/language +original_slug: Web/API/NavigatorLanguage/language +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>Navigator.language</code></strong> は読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">const <em>lang</em> = navigator.language +</pre> + +<h3 id="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">例</h2> + +<pre class="brush: js">if (/^en\b/.test(navigator.language)) { + doLangSelect(window.navigator.language); +} +</pre> + +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("navigator.languages")}}</li> + <li>{{domxref("navigator")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/languages/index.html b/files/ja/web/api/navigator/languages/index.html new file mode 100644 index 0000000000..a621134a4e --- /dev/null +++ b/files/ja/web/api/navigator/languages/index.html @@ -0,0 +1,52 @@ +--- +title: Navigator.languages +slug: Web/API/Navigator/languages +tags: + - API + - Experimental + - Navigator + - Property + - Read-only + - Reference + - languages +browser-compat: api.Navigator.languages +translation_of: Web/API/Navigator/languages +original_slug: Web/API/NavigatorLanguage/languages +--- +<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> + +<p><code><strong>navigator.languages</strong></code> は読み取り専用プロパティで、ユーザーの推奨される言語を表す {{domxref("DOMString")}} の配列を返します。この言語は <a href="http://tools.ietf.org/html/bcp47">BCP 47</a> 言語タグを使用して記述されています。返された配列の中では、設定で最も推奨される言語が最初に来るように並べられています。</p> + +<p>{{domxref("Navigator.language","navigator.language")}} の値は返される配列の最初の要素です。</p> + +<p>この値を変更すると、ユーザーの推奨言語が変更され、 {{event("languagechange")}} イベントが {{domxref("Window")}} オブジェクトに発行されます。</p> + +<p>ユーザーのブラウザーからのすべての HTTP リクエストにある <code>Accept-Language</code> ヘッダーは、 <code>navigator.languages</code> プロパティと同じ値ですが、拡張された <code>qvalues</code> (quality values) フィールドのみが異なります (例えば <code>en-US;q=0.8</code>)。 +</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages +</pre> + +<h2 id="Examples">例</h2> + +<pre class="brush: js">navigator.language //"en-US" +navigator.languages //["en-US", "zh-CN", "ja-JP"] +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("navigator.language")}}</li> + <li>{{domxref("navigator")}}</li> + <li>{{domxref("Window.onlanguagechange")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/platform/index.html b/files/ja/web/api/navigator/platform/index.html new file mode 100644 index 0000000000..c0e4620269 --- /dev/null +++ b/files/ja/web/api/navigator/platform/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.platform +slug: Web/API/Navigator/platform +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference + - platform +browser-compat: api.Navigator.platform +translation_of: Web/API/NavigatorID/platform +original_slug: Web/API/NavigatorID/platform +--- +<p>{{ APIRef("HTML DOM") }} {{Deprecated_Header}}</p> + +<p>ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>platform</em> = navigator.platform +</pre> + +<h3 id="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">例</h2> + +<pre class="brush: js">console.log(navigator.platform);</pre> + +<h2 id="Usage_notes">使用上のメモ</h2> + +<p>Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても <code>"Win32"</code> を返します。 Internet Explorer やバージョン 63 より前の Firefox は <code>"Win64"</code> を返します。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> diff --git a/files/ja/web/api/navigator/product/index.html b/files/ja/web/api/navigator/product/index.html new file mode 100644 index 0000000000..d1f5b35941 --- /dev/null +++ b/files/ja/web/api/navigator/product/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.product +slug: Web/API/Navigator/product +tags: + - API + - Deprecated + - Navigator + - Property + - Reference +browser-compat: api.Navigator.product +translation_of: Web/API/NavigatorID/product +original_slug: Web/API/NavigatorID/product +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.product</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Gecko</code>" です。このプロパティは互換性のためだけに維持されています。</p> + + +<div class="notecard note"> + <p>このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Gecko</code>" を返します。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>productName</em> = navigator.product +</pre> + +<h3 id="Value">値</h3> + +<p>文字列 "<code>Gecko</code>" です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appCodeName")}}</li> + <li>{{domxref("Navigator.appName")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/useragent/index.html b/files/ja/web/api/navigator/useragent/index.html new file mode 100644 index 0000000000..d02c88de43 --- /dev/null +++ b/files/ja/web/api/navigator/useragent/index.html @@ -0,0 +1,67 @@ +--- +title: Navigator.userAgent +slug: Web/API/Navigator/userAgent +tags: + - API + - Navigator + - Property + - Read-only + - Reference +browser-compat: api.Navigator.userAgent +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>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">構文</h2> + +<pre class="brush: js">var <var>ua</var> = navigator.userAgent; +</pre> + +<h3 id="Value">値</h3> + +<p>{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。</p> + +<p>ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。</p> + +<pre class="brush: js">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">例</h2> + +<pre class="brush:js">alert(window.navigator.userAgent) +// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1" +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{httpheader("User-Agent")}} HTTP ヘッダー</li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/origin/index.html b/files/ja/web/api/origin/index.html index 834af4741a..cf78260061 100644 --- a/files/ja/web/api/windoworworkerglobalscope/origin/index.html +++ b/files/ja/web/api/origin/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.origin -slug: Web/API/WindowOrWorkerGlobalScope/origin +slug: Web/API/origin tags: - API - DOM @@ -10,6 +10,7 @@ tags: - ウェブ - プロパティ translation_of: Web/API/WindowOrWorkerGlobalScope/origin +original_slug: Web/API/WindowOrWorkerGlobalScope/origin --- <p>{{APIRef()}}{{SeeCompatTable}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ja/web/api/setinterval/index.html index 543639410e..f6f721580b 100644 --- a/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html +++ b/files/ja/web/api/setinterval/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.setInterval() -slug: Web/API/WindowOrWorkerGlobalScope/setInterval +slug: Web/API/setInterval tags: - API - DOM @@ -14,6 +14,7 @@ tags: - WindowOrWorkerGlobalScope - setInterval translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ja/web/api/settimeout/index.html index 34c10664ce..865c4679a6 100644 --- a/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/ja/web/api/settimeout/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.setTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/setTimeout +slug: Web/API/setTimeout tags: - API - HTML DOM @@ -16,6 +16,7 @@ tags: - WindowOrWorkerGlobalScope - setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ja/web/api/web_authentication_api/index.html b/files/ja/web/api/web_authentication_api/index.html index 5d4cf3d674..9ca6c16e84 100644 --- a/files/ja/web/api/web_authentication_api/index.html +++ b/files/ja/web/api/web_authentication_api/index.html @@ -70,7 +70,7 @@ translation_of: Web/API/Web_Authentication_API この保証には次の点を含む： <ol> <li>challenge が送信時と同じものであるかの確認</li> - <li>origin が期待された origin でとなっていることの保証</li> + <li>origin が期待された origin となっていることの保証</li> <li>clientDataHash の署名と特定モデルの認証器用の証明書チェーンを使った attestation の検証</li> </ol> 検証ステップの完全な一覧は <a href="https://w3c.github.io/webauthn/#registering-a-new-credential">WebAuthn の仕様書の中にあります</a>。 チェックが上手くいくと、サーバはユーザーアカウントに紐づいたその新しい公開鍵を保存し、将来の利用に備えます。つまりは、ユーザーが認証のためにその公開鍵を使いたい時は何時でも使えるようにするということです。</li> diff --git a/files/ja/web/api/xmlserializer/index.html b/files/ja/web/api/xmlserializer/index.html index 48bd19f8e5..1bae104f64 100644 --- a/files/ja/web/api/xmlserializer/index.html +++ b/files/ja/web/api/xmlserializer/index.html @@ -96,7 +96,7 @@ document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre> <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a href="/ja/Parsing_and_serializing_XML" title="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a href="/ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> <li>{{domxref("XMLHttpRequest")}}</li> <li>{{domxref("DOMParser")}}</li> </ul> diff --git a/files/ja/web/api/xrinputsource/handedness/index.html b/files/ja/web/api/xrinputsource/handedness/index.html index 55b2ef3fdb..4f9eb86d63 100644 --- a/files/ja/web/api/xrinputsource/handedness/index.html +++ b/files/ja/web/api/xrinputsource/handedness/index.html @@ -1,47 +1,59 @@ --- -title: XRInputSource.handedness +title: XRHandedness slug: Web/API/XRInputSource/handedness tags: - API - AR - - Controller + - Enum + - Enumerated Type - Handedness - - Input - - Property - - Read-only - Reference + - Type - VR - WebXR - - WebXR API - WebXR Device API - - XR - - XRInputSource + - XRHandedness - hand - left - right -translation_of: Web/API/XRInputSource/handedness +translation_of: Web/API/XRHandedness +original_slug: Web/API/XRHandedness --- -<p>{{APIRef("WebXR")}}{{securecontext_header}}</p> +<p>{{APIRef("WebXR")}}</p> -<p>{{domxref("XRInputSource")}} の <strong><code>handedness</code></strong> 読み取り専用プロパティは、WebXR 入力ソースがユーザーのどの手に関連付けられているか、またはまったく関連付けられていないかを示します。</p> +<p>WebXR の <strong><code>XRHandedness</code></strong> 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 <code>XRHandedness</code> は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Values" name="Values">値</h2> -<pre class="syntaxbox notranslate">let <em>hand</em> = <em>xrInputSource</em>.handedness;</pre> +<dl> + <dt><code>none</code></dt> + <dd>入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。</dd> + <dt><code>left</code></dt> + <dd>入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。</dd> + <dt><code>right</code></dt> + <dd>入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。</dd> +</dl> -<h3 id="Value" name="Value">値</h3> - -<p>入力コントローラーがユーザーの片方の手にあるかどうか、もしそうならどちらの手にあるかを示す {{domxref("DOMString")}}。 {{domxref("XRHandedness")}} 列挙型に由来する値は、次のいずれかです。</p> +<h2 id="Examples" name="Examples">例</h2> -<p>{{page("/ja/docs/Web/API/XRHandedness", "Values")}}</p> +<p><code>handedness</code> の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。</p> -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.inputSources) { + if (source.gripSpace) { + let gripPose = frame.getPose(source.gripSpace, refSpace); -<p>入力ソースがユーザーの手に関連付けられたデバイスでない場合（握られているか、取り付けられているか、着用されているかに関係なく）、<code>handedness</code> の値は <code>none</code> です。 これは、例えば、ヘッドセットに組み込まれたコントロールや、頭や体に取り付けられた入力デバイスなど、ハンドヘルドではない入力ソースを示している場合があります。</p> + if (gripPose) { + myRenderHandObject(gripPose, inputSource.handedness); + } + } + } +} +</pre> -<h2 id="Examples" name="Examples">例</h2> +<p>この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、<code>null</code> ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 <code>gripSpace</code> が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。</p> -<p>{{page("/ja/docs/Web/API/XRHandedness", "Examples")}}</p> +<p><code>gripSpace</code> が <code>null</code> 以外の場合、この関数は、現在の参照空間に変換された <code>gripSpace</code> のポーズを取得します。 それが有効であると仮定すると、<code>myRenderHandObject()</code> と呼ばれる関数が、グリップのポーズと <code>handedness</code> の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、<code>myRenderHandObject()</code> は、正しい手のために配置および形成された適切なモデルを描画できます。</p> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -53,7 +65,7 @@ translation_of: Web/API/XRInputSource/handedness <th scope="col">コメント</th> </tr> <tr> - <td>{{SpecName('WebXR','#dom-xrinputsource-handedness','XRInputSource.handedness')}}</td> + <td>{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}</td> <td>{{Spec2('WebXR')}}</td> <td>初期定義</td> </tr> @@ -62,7 +74,7 @@ translation_of: Web/API/XRInputSource/handedness <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.XRInputSource.handedness")}}</p> +<p>{{Compat("api.XRHandedness")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> @@ -70,4 +82,5 @@ translation_of: Web/API/XRInputSource/handedness <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> + <li>{{domxref("XREye")}}: ビューを表示する対象の目を示します</li> </ul> diff --git a/files/ja/web/api/xrinputsource/handedness/index.md b/files/ja/web/api/xrinputsource/handedness/index.md new file mode 100644 index 0000000000..31716b2ace --- /dev/null +++ b/files/ja/web/api/xrinputsource/handedness/index.md @@ -0,0 +1,84 @@ +--- +title: XRInputSource.handedness +slug: Web/API/XRInputSource/handedness +tags: + - API + - AR + - Controller + - Handedness + - Input + - Property + - Read-only + - Reference + - VR + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRInputSource + - hand + - left + - right +browser-compat: api.XRInputSource.handedness +translation_of: Web/API/XRInputSource/handedness +--- +{{APIRef("WebXR Device API")}} + +{{domxref("XRInputSource")}} の読み取り専用プロパティ **`handedness`** は、WebXR 入力ソースがユーザーのどの手に関連付けられているか、またはまったく関連付けられていないかを示します。 + +## 構文 + +```js +xrInputSource.handedness; +``` + +### 値 + +文字列で、入力コントローラーがユーザーの手に握られているかどうか、もしそうならばどちらの手なのかを表します。値は次のうちの一つです。 + +- `none` + - : 入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。 +- `left` + - : 入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。 +- `right` + - : 入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。 + +## 使用上の注意 + +入力ソースがユーザーの手に関連付けられた機器でない場合 (握られているか、取り付けられているか、着用されているかに関係なく)、`handedness` の値は `none` です。 これは、例えば、ヘッドセットに組み込まれたコントロールや、頭や体に取り付けられた入力機器など、ハンドヘルドではない入力ソースを示している場合があります。 + +## 例 + +`handedness` の重要な使用方法の 1 つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手 (またはその手が制御している機器) の表現を描画できるようにすることです。 + +```js +function updateInputSources(session, frame, refSpace) { + for (let source of session.inputSources) { + if (source.gripSpace) { + let gripPose = frame.getPose(source.gripSpace, refSpace); + + if (gripPose) { + myRenderHandObject(gripPose, inputSource.handedness); + } + } + } +} +``` + +この関数は、すべてのアニメーションフレームで (または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に) 呼び出され、入力ソースのリストをスキャンして、 {{domxref("XRInputSource.gripSpace", "gripSpace")}} が `null` ではないものを探します。 `gripSpace` が存在する場合、それは入力ソースが何らかのハンドヘルド機器であることを意味するため、可能であれば視覚的にレンダリングする必要があります。 + +`gripSpace` が `null` 以外の場合、この関数は、現在の参照空間に変換された `gripSpace` のポーズを取得します。 それが有効であると仮定すると、`myRenderHandObject()` と呼ばれる関数が、グリップのポーズと `handedness` の値を使用して呼び出されます。 これらの値が手元にあれば (しゃれは意図していません)、正しい手のために配置および形成された適切なモデルを描画できます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) +- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads) diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.html b/files/ja/web/api/xrinputsource/targetraymode/index.html index 7a64b7a122..79ca557c89 100644 --- a/files/ja/web/api/xrinputsource/targetraymode/index.html +++ b/files/ja/web/api/xrinputsource/targetraymode/index.html @@ -1,47 +1,78 @@ --- -title: XRInputSource.targetRayMode +title: XRTargetRayMode slug: Web/API/XRInputSource/targetRayMode tags: + - 3D - API - AR - - Pointing - - Property - - Ray - - Read-only + - Enum + - Enumerated Type + - Input + - Reality - Reference + - Type - VR + - Virtual - WebXR - WebXR API - WebXR Device API - XR - - XRInputSource - - direction - - pointer + - XRTargetRayMode + - augmented + - source - target - - targetRayMode -translation_of: Web/API/XRInputSource/targetRayMode +translation_of: Web/API/XRTargetRayMode +original_slug: Web/API/XRTargetRayMode --- -<p>{{APIRef("WebXR")}}{{securecontext_header}}</p> +<p>{{APIRef("WebXR")}}</p> -<p>{{domxref("XRInputSource")}} の <strong><code>targetRayMode</code></strong> 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。</p> +<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p> -<pre class="syntaxbox notranslate">let <em>rayMode</em> = <em>xrInputSource</em>.targetRayMode;</pre> +<div style="width: 42em;"> +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;"> +<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption> +<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure> +</div> -<h3 id="Value" name="Value">値</h3> +<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p> -<p>{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。</p> +<h2 id="Values" name="Values">値</h2> -<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}</p> +<dl> + <dt><code>gaze</code>（視線）</dt> + <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd> + <dt><code>screen</code>（画面）</dt> + <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd> + <dt><code>tracked-pointer</code>（追跡ポインター）</dt> + <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd> +</dl> -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> +<h2 id="Examples" name="Examples">例</h2> -<p>入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。</p> +<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p> -<h2 id="Example" name="Example">例</h2> +<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p> -<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}</p> +<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p> + +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +</pre> + +<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -53,7 +84,7 @@ translation_of: Web/API/XRInputSource/targetRayMode <th scope="col">コメント</th> </tr> <tr> - <td>{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}</td> + <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td> <td>{{Spec2('WebXR')}}</td> <td>初期定義</td> </tr> @@ -62,12 +93,11 @@ translation_of: Web/API/XRInputSource/targetRayMode <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.XRInputSource.handedness")}}</p> +<p>{{Compat("api.XRTargetRayMode")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> - <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> </ul> diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.md b/files/ja/web/api/xrinputsource/targetraymode/index.md new file mode 100644 index 0000000000..d21d4c82bd --- /dev/null +++ b/files/ja/web/api/xrinputsource/targetraymode/index.md @@ -0,0 +1,95 @@ +--- +title: XRInputSource.targetRayMode +slug: Web/API/XRInputSource/targetRayMode +tags: + - API + - AR + - Pointing + - Property + - Ray + - Read-only + - Reference + - VR + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRInputSource + - direction + - pointer + - target + - targetRayMode +translation_of: Web/API/XRInputSource/targetRayMode +--- +{{APIRef("WebXR Device API")}} + +{{domxref("XRInputSource")}} の読み取り専用プロパティ **`targetRayMode`** は、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。 + +一般的には、ターゲティングシステムのソースから、ユーザーが見ている、または指している方向のターゲット光線に沿って、ターゲット光線が描かれます。光線のスタイルは一般的に自由で、光線の終点を示す方法も自由です。ターゲットとなるポイントやオブジェクトは、図形を描いたり、ターゲットとなる表面やオブジェクトをハイライトすることで示されるかもしれません。 + +ターゲット光線はハンドコントローラーが影響します。 + + + +ターゲット光線は、単純な線 (理想的には距離に応じて消えていく) から、上のスクリーンショットにあるような SF の「フェイザー」スタイルのようなアニメーション効果まで、さまざまなものがあります。 + +## 構文 + +```js +let rayMode = xrInputSource.targetRayMode; +``` + +### 値 + +ターゲット光線を生成してユーザーに提示する際に、どの方法を使用するかを示す文字列です。指定できる値は次の通りです。 + +- `gaze` (視線) + - : ユーザーは、ユーザーが見ている方向を検出する視線追跡システム (または**視線入力**) を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。 +- `screen` (画面) + - : ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力機器をタップして示します。 +- `tracked-pointer` (追跡ポインター) + - : ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルド機器またはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手 (または手の中のオブジェクト) からターゲット方向に伸びます。方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。 + +## 使用上の注意 + +入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。 + +## 例 + +このコードの断片は、フレームごとに 1 回呼び出される関数の一部を示しています。 `null` 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。 + +このような入力ごとに、この例では、 {{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が `tracked-pointer` である入力を探します。 これは、入力が実際には、視線入力機器、画面タップ、またはマウスクリックではなく、ターゲティング機器を表すことを目的としていることを示しています。 追跡ポインターの場合、関数 `myRenderTargetRayAsBeam()` が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。 + +コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。 + +```js +function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +``` + +詳細とより完全な例については、[入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)の記事を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) +- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads) diff --git a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html deleted file mode 100644 index f34df48467..0000000000 --- a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: XRReferenceSpaceEvent() -slug: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent -tags: - - API - - AR - - Constructor - - Mixed - - Reality - - Reference - - Reference Space - - VR - - Virtual - - WebXR - - WebXR API - - WebXR Device API - - XR - - XRReferenceSpaceEvent - - augmented - - events -translation_of: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent ---- -<p>{{APIRef("WebXR Device API")}}{{SecureContext_header}}</p> - -<p><span class="seoSummary"><strong><code>XRReferenceSpaceEvent()</code></strong> コンストラクターは、新しい {{domxref("XRReferenceSpaceEvent")}} オブジェクトを作成するために使用します。 これは、WebXR 参照空間オブジェクト {{domxref("XRReferenceSpace")}} の状態に関するイベントを表します。</span></p> - -<p>現在、この型を使用して定義されているのは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">let <em>refSpaceEvent</em> = new XRReferenceSpaceEvent(<em>type</em>, <em>eventInitDict</em>);</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>type</code></dt> - <dd>発生したイベントタイプを示す {{domxref("DOMString")}}。 現在、これは常に <code>reset</code> です。</dd> - <dt><code>eventInitDict</code></dt> - <dd> - <p>{{domxref("XRReferenceSpaceEventInit")}} ディクショナリーに基づくオブジェクトで、新しいイベントオブジェクトの初期化に使用されるデータが含まれています。 このオブジェクトのプロパティは次のとおりです。</p> - - <p>{{page("/ja/docs/Web/API/XRReferenceSpaceEventInit", "Properties")}}</p> - </dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>入力パラメーターで定義されたとおりに初期化された、新しい <code>XRReferenceSpaceEvent</code> オブジェクト。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('WebXR','#dom-xrreferencespaceevent-xrreferencespaceevent','XRReferenceSpaceEvent()')}}</td> - <td>{{Spec2('WebXR')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - -<p>{{Compat("api.XRReferenceSpaceEvent.XRReferenceSpaceEvent")}}</p> diff --git a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md new file mode 100644 index 0000000000..580e48274e --- /dev/null +++ b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md @@ -0,0 +1,69 @@ +--- +title: XRReferenceSpaceEvent() +slug: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent +tags: + - API + - AR + - Constructor + - Events + - Mixed + - Reality + - Reference + - Reference Space + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRReferenceSpaceEvent + - augmented + - events +browser-compat: api.XRReferenceSpaceEvent.XRReferenceSpaceEvent +translation_of: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent +--- +{{APIRef("WebXR Device API")}} + +**`XRReferenceSpaceEvent()`** コンストラクターは、新しい {{domxref("XRReferenceSpaceEvent")}} オブジェクトを生成するために使用します。 これは、WebXR 参照空間オブジェクト {{domxref("XRReferenceSpace")}} の状態に関するイベントを表します。 + +この型を使用して定義されているのは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。 + +## 構文 + +```js +let refSpaceEvent = new XRReferenceSpaceEvent(type, eventInitDict); +``` + +### 引数 + +- `type` + - : 発生したイベントタイプを示す {{domxref("DOMString")}}。 現在、これは常に `reset` です。 +- `eventInitDict` + + - : イベントを構成するためのオブジェクトです。プロパティは次のとおりです。 + + - `referenceSpace`: イベントの発生元の {{domxref("XRReferenceSpace")}} です。 + - `transform`: 古い座標系（このイベントによって示される変更の前のもの）を新しい座標系にマップする {{domxref("XRRigidTransform")}} です。 + +### 返値 + +入力引数で定義されたとおりに初期化された、新しい `XRReferenceSpaceEvent` オブジェクト。 + +## 例 + +この単純なスニペットでは、コンストラクターを呼び出して {{domxref("XRReferenceSpace.reset_event", "reset")}} 型の新しい参照空間イベントを生成します。 + +```js +let refSpaceEvent = new XRReferenceSpaceEvent("reset", { + referenceSpace: myRefSpace, + transform: myTransform +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/css/@media/any-pointer/index.html b/files/ja/web/css/@media/any-pointer/index.html deleted file mode 100644 index 63866a9862..0000000000 --- a/files/ja/web/css/@media/any-pointer/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: any-pointer -slug: Web/CSS/@media/any-pointer -tags: - - '@media' - - CSS - - メディアクエリ - - メディア特性 - - リファレンス -translation_of: Web/CSS/@media/any-pointer ---- -<div>{{cssref}}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>any-pointer</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、ユーザーが (マウスなどの) <em>何かの</em>ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。</p> - -<div class="note"> -<p><strong>メモ:</strong> <em>第一の</em>ポインティングデバイスの正確性を調べたい場合は、代わりに <code><a href="/ja/docs/Web/CSS/@media/pointer">pointer</a></code> を使用してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>any-pointer</code> 特性は、以下の一覧の中から一つのキーワード値で指定します。</p> - -<dl> - <dt><code>none</code></dt> - <dd>利用できるポインティングデバイスがありません。</dd> - <dt><code>coarse</code></dt> - <dd>正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。</dd> - <dt><code>fine</code></dt> - <dd>正確性が高いポインティングデバイスが、少なくとも一つ含まれています。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 <code>none</code> はポインティングデバイスがない場合のみ一致します。</p> -</div> - -<h2 id="Example" name="Example">例</h2> - -<p>この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、粗いポインターを持つユーザーには大きなチェックボックスを生成します。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><input id="test" type="checkbox" /> -<label for="test">Look at me!</label></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input[type="checkbox"]:checked { - background: gray; -} - -@media (any-pointer: fine) { - input[type="checkbox"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - width: 15px; - height: 15px; - border: 1px solid blue; - } -} - -@media (any-pointer: coarse) { - input[type="checkbox"] { - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - width: 30px; - height: 30px; - border: 2px solid red; - } -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td> - <td>{{Spec2('CSS4 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.any-pointer")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code> メディア特性</a></li> -</ul> diff --git a/files/ja/web/css/@media/any-pointer/index.md b/files/ja/web/css/@media/any-pointer/index.md new file mode 100644 index 0000000000..3610b1d54c --- /dev/null +++ b/files/ja/web/css/@media/any-pointer/index.md @@ -0,0 +1,86 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - '@media' + - CSS + - メディアクエリー + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/any-pointer +--- +<div>{{cssref}}</div> + +**`any-pointer`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。 + +> **Note:** *第一の*ポインティングデバイスの正確性を調べたい場合は、代わりに [`pointer`](/ja/docs/Web/CSS/@media/pointer) を使用してください。 + +## 構文 + +`any-pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。 + +- `none` + - : 利用できるポインティングデバイスがありません。 +- `coarse` + - : 正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。 +- `fine` + - : 正確性が高いポインティングデバイスが、少なくとも一つ含まれています。 + +> **Note:** 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 `none` はポインティングデバイスがない場合のみ一致します。 + +<h2 id="Examples">例</h2> + +この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。 + +### HTML + +```html +<input id="test" type="checkbox" /> +<label for="test">Look at me!</label> +``` + +### CSS + +```css +input[type="checkbox"]:checked { + background: gray; +} + +@media (any-pointer: fine) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 15px; + border: 1px solid blue; + } +} + +@media (any-pointer: coarse) { + input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + border: 2px solid red; + } +} +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`pointer` メディア特性](/ja/docs/Web/CSS/@media/pointer) diff --git a/files/ja/web/css/all/index.html b/files/ja/web/css/all/index.html index f751b17f0b..242d45c7e8 100644 --- a/files/ja/web/css/all/index.html +++ b/files/ja/web/css/all/index.html @@ -42,11 +42,11 @@ all: revert; <dt>{{cssxref("revert")}}</dt> <dd>宣言が所属するスタイルシートの出所に応じて動作を指定します。 <dl> - <dt><a href="/ja/docs/Web/CSS/Cascade#User-agent_stylesheets">ユーザーエージェントのスタイルシート</a></dt> + <dt><a href="/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">ユーザーエージェントのスタイルシート</a></dt> <dd><code>unset</code> と同等です。</dd> - <dt><a href="/ja/docs/Web/CSS/Cascade#User_stylesheets">ユーザーのスタイル</a></dt> + <dt><a href="/ja/docs/Web/CSS/Cascade#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">ユーザーのスタイル</a></dt> <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーエージェントレベルまでロールバックし、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。</dd> - <dt><a href="/ja/docs/Web/CSS/Cascade#Author_stylesheets">作者のスタイル</a></dt> + <dt><a href="/ja/docs/Web/CSS/Cascade#%E4%BD%9C%E6%88%90%E8%80%85%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88">作成者のスタイル</a></dt> <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が計算されます。 <code>revert</code> の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。</dd> </dl> </dd> diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html index 1090e44454..50dde1024a 100644 --- a/files/ja/web/css/background-color/index.html +++ b/files/ja/web/css/background-color/index.html @@ -147,7 +147,7 @@ background-color: unset;</pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li> <li>{{cssxref("<color>")}} データ型</li> <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li> diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html index 5fb4b74744..d28db18a1e 100644 --- a/files/ja/web/css/box-shadow/index.html +++ b/files/ja/web/css/box-shadow/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/box-shadow <p><code>box-shadow</code> プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の<a href="/ja/CSS/text-shadow">テキストの影</a>の場合と同様になります (最初に指定された影が最も手前に来ます)。</p> -<p><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> は、 <code>box-shadow</code> を対話的に作成できるツールです。</p> +<p><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a>は、 <code>box-shadow</code> を対話的に作成できるツールです。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/cascade/index.html b/files/ja/web/css/cascade/index.html deleted file mode 100644 index fe6ecec340..0000000000 --- a/files/ja/web/css/cascade/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: CSS カスケード入門 -slug: Web/CSS/Cascade -tags: - - CSS - - CSS カスケードと継承 - - Reference - - カスケード - - ガイド - - スタイル - - スタイルシート - - レイアウト -translation_of: Web/CSS/Cascade ---- -<div>{{CSSRef}}</div> - -<p><strong>カスケード</strong>は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは<em>カスケーディング</em>スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。<span class="seoSummary">この記事では、カスケードとは何か、 {{Glossary("CSS")}} <a href="/ja/docs/Web/API/CSSStyleDeclaration">宣言</a>をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。</span></p> - -<h2 id="Which_CSS_entities_participate_in_the_cascade" name="Which_CSS_entities_participate_in_the_cascade">どの CSS エンティティがカスケードに関係するか</h2> - -<p>CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>、例えば<em>記述子</em>を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 <code>@font-face</code> は <code><a href="/ja/docs/Web/CSS/@font-face/font-family">font-family</a></code> 記述子で識別されます。いくつかの <code>@font-face</code> 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な <code>@font-face</code> が考慮されます。</p> - -<p>大部分の @-規則 — {{cssxref("@media")}}, {{cssxref("@document")}}, {{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 <code>@font-face</code> と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。</p> - -<p>最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。</p> - -<h2 id="Origin_of_CSS_declarations" name="Origin_of_CSS_declarations">CSS 宣言のオリジン</h2> - -<p>CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、 <strong>{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}</strong>, <strong>{{anch("Author stylesheets", "ページ作成者スタイルシート")}}</strong>, <strong>{{anch("User stylesheets", "ユーザースタイルシート")}}</strong> など、さまざまなものに由来します。</p> - -<p>スタイルシートはこれらの異なる起源に由来しますが、それらは範囲が重複しています。これを機能させるために、カスケードアルゴリズムはそれらの相互作用を定義します。</p> - -<h3 id="User-agent_stylesheets" name="User-agent_stylesheets">ユーザーエージェントスタイルシート</h3> - -<p>ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには<strong>ユーザーエージェントスタイルシート</strong>という名前が付けられています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。</p> - -<p>一部のブラウザーでは、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。</p> - -<h3 id="Author_stylesheets" name="Author_stylesheets">ページ作成者スタイルシート</h3> - -<p><strong>ページ作成者スタイルシート</strong>は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。</p> - -<h3 id="User_stylesheets" name="User_stylesheets">ユーザースタイルシート</h3> - -<p>ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の<strong>ユーザースタイルシート</strong>を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。</p> - -<h2 id="Cascading_order" name="Cascading_order">カスケード順</h2> - -<p>カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。</p> - -<ol> - <li>最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な <code>media</code> @-規則の一部である規則を意味します。</li> - <li>次に、これらのルールをその重要度、つまり、 <code>!important</code> が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる <code>!important</code> の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。 - <table class="standard-table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">起源</th> - <th scope="col">重要性</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>ユーザーエージェント</td> - <td>normal</td> - </tr> - <tr> - <td>2</td> - <td>ユーザー</td> - <td>normal</td> - </tr> - <tr> - <td>3</td> - <td>作成者</td> - <td>normal</td> - </tr> - <tr> - <td>4</td> - <td>アニメーション</td> - <td></td> - </tr> - <tr> - <td>5</td> - <td>ユーザーエージェント</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>6</td> - <td>作成者</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>7</td> - <td>ユーザー</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>8</td> - <td>トランジション</td> - <td></td> - </tr> - </tbody> - </table> - </li> - <li>同等の場合は、どれを選択するかに値の<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が考慮されます。</li> -</ol> - -<h2 id="Resetting_styles" name="Resetting_styles">スタイルの初期化</h2> - -<p>コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ {{cssxref("all")}} を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。</p> - -<p><code>all</code>では、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。</p> - -<h2 id="CSS_animations_and_the_cascade" name="CSS_animations_and_the_cascade">CSS アニメーションとカスケード</h2> - -<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>は、 {{cssxref("@keyframes")}} @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混合することはありません。</p> - -<p>複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。</p> - -<p><strong>ユーザーエージェント CSS:</strong></p> - -<pre class="brush:css;">li { margin-left: 10px }</pre> - -<p><strong>作成者 CSS 1:</strong></p> - -<pre class="brush:css;">li { margin-left: 0 } /* 初期化のため */</pre> - -<p><strong>作成者 CSS 2:</strong></p> - -<pre class="brush:css;">@media screen { - li { margin-left: 3px } -} - -@media print { - li { margin-left: 1px } -} -</pre> - -<p><strong>ユーザー CSS:</strong></p> - -<pre class="brush:css;">.specific { margin-left: 1em }</pre> - -<p><strong>HTML:</strong></p> - -<pre class="brush:html;"><ul> - <li class="specific">1<sup>st</sup></li> - <li>2<sup>nd</sup></li> -</ul> -</pre> - -<p>この場合、 <code>li</code> および <code>.specific</code> 規則内の宣言を適用する必要があります。 <code>!important</code>として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。</p> - -<p>ここでは3つの宣言が競合しています。</p> - -<pre class="brush:css;">margin-left: 0</pre> - -<pre class="brush:css;">margin-left: 3px</pre> - -<pre class="brush:css;">margin-left: 1px</pre> - -<p>最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。</p> - -<pre class="brush:css;">margin-left: 3px</pre> - -<p>カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。</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("CSS4 Cascade")}}</td> - <td>{{Spec2("CSS4 Cascade")}}</td> - <td>プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Cascade")}}</td> - <td>{{Spec2("CSS3 Cascade")}}</td> - <td>カスケードオリジンの上書を削除。 W3C 標準で使用されなかったため。</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">とても簡単な CSS カスケードの紹介</a></li> - <li>{{CSS_Key_Concepts}}</li> -</ul> diff --git a/files/ja/web/css/cascade/index.md b/files/ja/web/css/cascade/index.md new file mode 100644 index 0000000000..a1e6481a60 --- /dev/null +++ b/files/ja/web/css/cascade/index.md @@ -0,0 +1,157 @@ +--- +title: CSS カスケード入門 +slug: Web/CSS/Cascade +tags: + - CSS + - Reference + - カスケード + - ガイド + - スタイル + - スタイルシート + - レイアウト +translation_of: Web/CSS/Cascade +--- +{{CSSRef}} + +**カスケード**は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは*カスケーディング*スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。この記事では、カスケードとは何か、 {{Glossary("CSS")}} の[宣言](/ja/docs/Web/API/CSSStyleDeclaration)をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。 + +## どの CSS エンティティがカスケードに関係するか + +CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む[アット規則](/ja/docs/Web/CSS/At-rule)、例えば*記述子*を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としてのアット規則のみがカスケードに加わります。ここで、 `@font-face` は [`font-family`](/ja/docs/Web/CSS/@font-face/font-family) 記述子で識別されます。いくつかの `@font-face` 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な `@font-face` が考慮されます。 + +大部分のアット規則 — {{cssxref("@media")}}、{{cssxref("@document")}}、{{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 `@font-face` と同様に、アット規則全体のみがカスケードアルゴリズムによって選択されます。 + +最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。 + +## CSS 宣言のオリジン + +CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、**{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}**、**{{anch("Author stylesheets", "ページ作成者スタイルシート")}}**、**{{anch("User stylesheets", "ユーザースタイルシート")}}**など、さまざまなものに由来します。 + +スタイルシートの起源はこのように異なりますが、その範囲は重複しています。これを実現するために、カスケードアルゴリズムが相互作用を定義しています。 + +### ユーザーエージェントスタイルシート + +ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには**ユーザーエージェントスタイルシート**と呼ばれています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。 + +ブラウザーによっては、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。 + +### 作成者スタイルシート + +**作成者スタイルシート**は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。 + +### ユーザースタイルシート + +ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の**ユーザースタイルシート**を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。 + +## カスケード順 + +カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。 + +1. 最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な `media` アット規則の一部である規則を意味します。 +2. 次に、これらの規則をその重要度、つまり、 `!important` が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる `!important` の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。 + + | | 起源 | 重要度 | + | --- | -------------------- | ------------ | + | 1 | ユーザーエージェント | 通常 | + | 2 | ユーザー | 通常 | + | 3 | 作成者 | 通常 | + | 4 | アニメーション | | + | 5 | 作成者 | `!important` | + | 6 | ユーザー | `!important` | + | 7 | ユーザーエージェント | `!important` | + | 8 | トランジション | | + +3. 同等の場合は、[詳細度](/ja/docs/Web/CSS/Specificity)を考慮してどれを選択するかを考慮します。 + +## スタイルの初期化 + +コンテンツがスタイルの変更を終えた後、スタイルを既知の状態に戻す必要が出てくることがあります。これは、アニメーションやテーマの変更などの場合に起こります。 CSS プロパティの {{cssxref("all")}} を使うと、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。 + +`all` では、すべてのプロパティを、初期状態 (既定)、カスケードの前のレベルから引き継いだ状態、特定のオリジン (ユーザーエージェントスタイルシート、作成者スタイルシート、ユーザースタイルシート)、さらにはプロパティの値を完全にクリアする状態のいずれかにすぐに戻すことができます。 + +## CSS アニメーションとカスケード + +[CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)は、 {{cssxref("@keyframes")}} アット規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混在させることはありません。 + +複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。 + +## 例 + +さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、 2 つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。 + +**ユーザーエージェント CSS:** + +```css +li { margin-left: 10px } +``` + +**作成者 CSS 1:** + +```css +li { margin-left: 0 } /* これは初期化 */ +``` + +**作成者 CSS 2:** + +```css +@media screen { + li { margin-left: 3px } +} + +@media print { + li { margin-left: 1px } +} +``` + +**ユーザー CSS:** + +```css +.specific { margin-left: 1em } +``` + +**HTML:** + +```html +<ul> + <li class="specific">1<sup>st</sup></li> + <li>2<sup>nd</sup></li> +</ul> +``` + +この場合、 `li` および `.specific` 規則内の宣言を適用する必要があります。 `!important`として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。 + +ここでは 3 つの宣言が競合しています。 + +```css +margin-left: 0 +``` + +```css +margin-left: 3px +``` + +```css +margin-left: 1px +``` + +最後のものは (画面上で) 無視され、最初の 2 つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。 + +```css +margin-left: 3px +``` + +カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。 + +## 仕様書 + +| 仕様書 | 状態 | コメント | +| ------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS4 Cascade")}} | {{Spec2("CSS4 Cascade")}} | プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。 | +| {{SpecName("CSS3 Cascade")}} | {{Spec2("CSS3 Cascade")}} | カスケードオリジンの上書きを削除。 W3C 標準で使用されなかったため。 | +| {{SpecName("CSS2.1", "cascade.html", "the cascade")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS1", "#the-cascade", "the cascade")}} | {{Spec2("CSS1")}} | 初回定義 | + +## 関連情報 + +- [とても簡単な CSS カスケードの紹介](/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance) +- {{CSS_Key_Concepts}} diff --git a/files/ja/web/css/color-scheme/index.md b/files/ja/web/css/color-scheme/index.md new file mode 100644 index 0000000000..48121555dd --- /dev/null +++ b/files/ja/web/css/color-scheme/index.md @@ -0,0 +1,85 @@ +--- +title: color-scheme +slug: Web/CSS/color-scheme +tags: + - CSS + - CSS Colors + - CSS Property + - HTML Colors + - HTML Styles + - Layout + - Reference + - Styling HTML + - Styling text + - Web + - color-adjust + - recipe:css-property +browser-compat: css.properties.color-scheme +translation_of: Web/CSS/color-scheme +--- +{{CSSRef}} + +**`color-scheme`** は CSS のプロパティで、要素がどのような配色で快適に表示されるかを示すことができます。 + +オペレーティングシステムの配色の一般的な選択肢は、「ライト」と「ダーク」、または「中間モード」と「夜モード」です。ユーザーがこれらの配色のいずれかを選択すると、 OS はユーザーインターフェースを調整します。これには、フォームコントロール、スクロールバー、および CSS システムカラーの使用値が含まれます。 + +## 構文 + +```css +color-scheme: normal; +color-scheme: light; +color-scheme: dark; +color-scheme: light dark; + +/* グローバル値 */ +color-scheme: inherit; +color-scheme: initial; +color-scheme: revert; +color-scheme: unset; +``` + +`color-scheme` プロパティの値は以下のキーワードのうちの一つである必要があります。 + +### 値 + +- `normal` + - : この要素がどの配色も認識しないため、ブラウザーの既定の配色でレンダリングするべきであることを示します。 +- `light` + - : オペレーティングシステムのライト配色を使用して要素をレンダリングできることを示します。 +- `dark` + - : オペレーティングシステムのダーク配色を使用して要素をレンダリングできることを示します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 配色への適合 + +ページ全体をユーザーの配色設定に合わせるには、 `color-scheme` を {{cssxref(":root")}} 要素で設定してください。 + +```css +:root { + color-scheme: light dark; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- {{cssxref("background-image")}} +- {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html index 8ce5bab6e9..521db7ba49 100644 --- a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -1,11 +1,12 @@ --- title: 境界画像作成ツール -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator tags: - CSS - CSS 背景と境界 - ツール translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p> diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md new file mode 100644 index 0000000000..a986269354 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/border-image_generator/index.md @@ -0,0 +1,11 @@ +--- +title: 境界画像作成ツール +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +tags: + - CSS + - ツール +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +--- +このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。 + +{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}} diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html index 4ce39890a7..cec4217518 100644 --- a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -1,12 +1,13 @@ --- title: Border-radius ジェネレーター -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator tags: - CSS - CSS Borders - CSS 境界と背景 - Tools translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p> diff --git a/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md new file mode 100644 index 0000000000..878cf642be --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/border-radius_generator/index.md @@ -0,0 +1,12 @@ +--- +title: 境界角丸作成ツール +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +--- +このツールを使用して、 CSS3 の {{cssxref("border-radius")}} の効果を生成することができます。 + +{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}} diff --git a/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md new file mode 100644 index 0000000000..963bf61cb4 --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md @@ -0,0 +1,32 @@ +--- +title: ボックスの影作成ツール +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +tags: + - CSS + - Tools + - box-shadow +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator +--- +このツールで CSS の {{cssxref("box-shadow")}} 効果を組み立てて、 CSS オブジェクトにボックスの影の効果を追加することができます。 + +{{EmbedGHLiveSample("css-examples/tools/box-shadow-generator/", '100%', 900)}} + +ボックスの影作成ツールは、 1 つまたは複数のボックスの影を要素に追加することができます。 + +ツールを開くと、右上の部分に四角形があります。これがシャドウを適用する対象となる要素です。この要素が選択されている状態 (ページを最初に読み込んだときの状態) では、基本的なスタイルを適用することができます。 + +- カラーピッカーツールを使って、要素の {{cssxref("color")}} を設定しましょう。 +- "border" チェックボックスを使って、要素の {{cssxref("border")}} をつけましょう。 +- スライダーを使って、要素の {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("width")}}, {{cssxref("height")}} の各プロパティを設定しましょう。 + +ボックスの影を追加するには、左上の「+」ボタンをクリックしてください。これで影を追加し、左側の列に並べます。それで新しい影の値を設定することができるようになります。 + +- カラーピッカーツールを使って、影の {{cssxref("color")}} を設定しましょう。 +- "inset" チェックボックスを使って、影が内側になるようにしましょう。 +- スライダーを使って、影の位置、ぼかし、広がりを設定しましょう。 + +他の影を追加するには、「+」をまたクリックしてください。ここで設定した値は、この新しい影にも適用されます。左上の↑と↓のボタンで、 2 つの影の適用順を変更します。左側の列で最初の影をクリックして再度選択してください。要素のスタイルを更新するには、要素を選択し、上部にある「element」というボタンをクリックします。 + +要素に {{cssxref("::before")}} と {{cssxref("::after")}} の擬似要素を追加して、ボックスの影を付けることもできます。要素とその擬似要素を切り替えるには、上部にある「element」「:before」「:after」と書かれたボタンを使います。 + +右下のボックスには、要素と `before::` または `::after` 擬似要素の CSS が表示されます。 diff --git a/files/ja/web/css/css_backgrounds_and_borders/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html index 6e43c5ab15..43b9ab080f 100644 --- a/files/ja/web/css/css_backgrounds_and_borders/index.html +++ b/files/ja/web/css/css_backgrounds_and_borders/index.html @@ -74,11 +74,11 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders <dd>背景画像の拡大縮小や繰り返しを変更する方法を説明します。</dd> <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></dt> <dd>CSS の色が境界を含む HTML でどのように使われるかを概観します。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">境界画像作成ツール</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator">境界画像作成ツール</a></dt> <dd>境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt> <dd>角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">ボックスの影作成ツール</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a></dt> <dd>要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd> </dl> diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html index a16c0cbd4f..3021ce3f4a 100644 --- a/files/ja/web/css/css_flow_layout/index.html +++ b/files/ja/web/css/css_flow_layout/index.html @@ -43,7 +43,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index b6a71891c9..118bc26766 100644 --- a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -554,7 +554,7 @@ dd { <p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 0037394932..667917d069 100644 --- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -664,7 +664,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 536a0e931a..3f83a21dbd 100644 --- a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -648,7 +648,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p><code>margin-right</code> または <code>margin-left</code> で自動マージンを使用した場合、および <code>top</code> 、<code>right</code> 、<code>bottom</code> 、<code>left</code> を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html index 77237096cf..59e1592ef5 100644 --- a/files/ja/web/css/css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/index.html @@ -206,7 +206,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 6358de6b22..5f67402f98 100644 --- a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -436,7 +436,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 2650339665..476cf929bf 100644 --- a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -574,7 +574,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトガイド</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html deleted file mode 100644 index 35e7ac52bf..0000000000 --- a/files/ja/web/css/filter/index.html +++ /dev/null @@ -1,1138 +0,0 @@ ---- -title: filter -slug: Web/CSS/filter -tags: - - CSS - - CSS プロパティ - - Reference - - SVG - - SVG フィルター - - filter - - フィルター効果 -translation_of: Web/CSS/filter ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>filter</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。</span></p> - -<p>CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。 <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター要素</a>への URL で SVG フィルターを参照することもできます。</p> - -<div>{{EmbedInteractiveExample("pages/css/filter.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">/* SVG フィルターへの URL */ -filter: url("filters.svg#filter-id"); - -/* <filter-function> 値 */ -filter: blur(5px); -filter: brightness(0.4); -filter: contrast(200%); -filter: drop-shadow(16px 16px 20px blue); -filter: grayscale(50%); -filter: hue-rotate(90deg); -filter: invert(75%); -filter: opacity(25%); -filter: saturate(30%); -filter: sepia(60%); - -/* 複数のフィルター */ -filter: contrast(175%) brightness(3%); - -/* フィルターを使用しない */ -filter: none; - -/* グローバル値 */ -filter: inherit; -filter: initial; -filter: unset; -</pre> - -<p>次のように関数と共に使用してください。</p> - -<pre class="syntaxbox notranslate">filter: <filter-function> [<filter-function>]* | none -</pre> - -<p>SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。</p> - -<pre class="syntaxbox notranslate">filter: url(file.svg#filter-element-id) -</pre> - -<h3 id="Interpolation" name="Interpolation">補間</h3> - -<p>最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("<url>")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが <code>none</code> である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。</p> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<p>定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。</p> - -<pre class="brush: css notranslate">.mydiv { - filter: grayscale(50%); -} - -/* Gray all images by 50% and blur by 10px */ -img { - filter: grayscale(0.5) blur(10px); -}</pre> - -<p>URL 関数を使用して SVG リソースを使用した例は以下の通りです。</p> - -<pre class="brush: css notranslate">.target { - filter: url(#c1); -} - -.mydiv { - filter: url(commonfilters.xml#large-blur); -} -</pre> - -<h2 id="Functions" name="Functions">関数</h2> - -<p><code>filter</code> プロパティは <code>none</code> または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は <code>none</code> を返します。特に示す場合を除いて、パーセント記号付きの値 (<code>34%</code> など) を取る関数は、10進数の値 (<code>0.34</code> など) も受け付けます。</p> - -<p>単一の <code>filter</code> プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の <code>filter</code> プロパティに別々に適用した場合とは異なる結果になります。</p> - -<h3 id="SVG_filter" name="SVG_filter">SVG フィルター</h3> - -<h4 id="url">url()</h4> - -<p>外部 XML ファイルに埋め込むことができる <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター</a>を指す URI を取ります。</p> - -<pre class="brush: css notranslate">filter: url(resources.svg#c1) -</pre> - -<h3 id="Filter_functions" name="Filter_functions">フィルター関数</h3> - -<h4 id="blur">blur()</h4> - -<p>{{cssxref("filter-function/blur", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 <code>radius</code> の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は <code>0</code> です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。</p> - -<pre class="brush: css notranslate">filter: blur(5px) -</pre> - -<div id="blur_example" class="hidden"> -<pre class="brush: html notranslate"> <table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> - <feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/> - </filter> - <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/> - </svg> - </div> - </td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table></pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -webkit-filter:blur(5px); - -ms-filter:blur(5px); - filter:blur(5px); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0; - margin: 0 0 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> - <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> - </filter> -</svg></pre> - -<div>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</div> - -<h4 id="brightness">brightness()</h4> - -<p>{{cssxref("filter-function/brightness", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 <code>0%</code> の値を設定すると、完全な黒の画像が作成されます。 <code>100%</code> の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 <code>100%</code> を超える値が許されており、より明るい結果が得られます。補間時の空白値は <code>1</code> です。</p> - -<pre class="brush: css notranslate">filter: brightness(2)</pre> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]"/> - <feFuncG type="linear" slope="[amount]"/> - <feFuncB type="linear" slope="[amount]"/> - </feComponentTransfer> - </filter> -</svg></pre> - -<div id="brightness_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="2"/> - <feFuncG type="linear" slope="2"/> - <feFuncB type="linear" slope="2"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:brightness(2); - -webkit-filter:brightness(2); - -ms-filter:brightness(2); - filter:brightness(2); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height:100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p> - -<h4 id="contrast">contrast()</h4> - -<p>{{cssxref("filter-function/contrast", "contrast()")}} 関数は、入力画像のコントラストを調整します。 <code>0%</code> の値を指定すると完全にグレーの画像が作成されます。 <code>100%</code> の値を指定すると、入力画像は変更されません。 <code>100%</code> を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は <code>1</code> です。</p> - -<pre class="brush: css notranslate">filter: contrast(200%) -</pre> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - </feComponentTransfer> - </filter> -</svg> -</pre> - -<div id="contrast_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="2" intercept="-0.5"/> - <feFuncG type="linear" slope="2" intercept="-0.5"/> - <feFuncB type="linear" slope="2" intercept="-0.5"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> -</svg><div></td> - <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:contrast(200%); - -webkit-filter:contrast(200%); - -ms-filter:contrast(200%); - filter:contrast(200%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<div>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</div> - -<h4 id="drop-shadow">drop-shadow()</h4> - -<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は <code><shadow></code> 型 (<a href="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">CSS3 Backgrounds</a> で定義) の引数を受け取りますが、 <code>inset</code> キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、より良い性能を得るためにハードウェアアクセラレーションを提供しているブラウザーがあることです。 <code><shadow></code> 引数の値は次の通りです。</p> - -<dl> - <dt><code><offset-x></code> <code><offset-y></code> <small>(必須)</small></dt> - <dd>二つの {{cssxref("<length>")}} 値で、影をずらす大きさを設定します。 <code><offset-x></code> は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 <code><offset-y></code> は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("<length>")}} を参照してください。<br> - 両方の値が <code>0</code> である場合は、影は要素の背後に配置されます (そして、 <code><blur-radius></code> や <code><spread-radius></code> を設定することで、ぼかしの効果を生成することができます)。</dd> - <dt><code><blur-radius></code> <small>(オプション)</small></dt> - <dd>これは三番目の {{cssxref("<length>")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 <code>0</code> (影の縁がはっきりしている) になります。</dd> - <dt><code><color></code> <small>(オプション)</small></dt> - <dd>指定可能なキーワードや記述方法は {{cssxref("<color>")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("<color>")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。</dd> -</dl> - -<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="drop-shadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> - <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> - <feFlood flood-color="[color]"/> - <feComposite in2="offsetblur" operator="in"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> -</svg> -</pre> - -<div id="shadow_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> - <defs> - <image id="MyImage" xlink:href="/files/3714/Test_Form_4.jpeg" width="213px" height="161px"/> - </defs> - <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%"> - <feOffset dx="9" dy="9" in="SourceAlpha"/> - <feGaussianBlur stdDeviation="5"/> - </filter> - <use xlink:href="#MyImage" filter="url(#drop-shadow)"/> - <use xlink:href="#MyImage"/> - </svg> - </div> - </td> - <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> - </tr> - <tr> - <td><img alt="Test_Form_4 distorded border - 元の画像" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td><img alt="Test_Form_4 distorded border - ライブ例" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> - <defs> - <image id="MyImage2" xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/> - </defs> - <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> - <feOffset dx="5" dy="5.5" in="SourceAlpha"/> - <feGaussianBlur stdDeviation="2.5"/> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.8"/> - </feComponentTransfer> - </filter> - <use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/> - <use xlink:href="#MyImage2"/> - </svg> - </div> - </td> - <td><img alt="Test_Form_4 distorded border drop shadow - 画像による例" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width:100%; - height:auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3, #img13 { - width:100%; - height:auto; -} -</pre> -</div> - -<div>{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}</div> - -<h4 id="grayscale">grayscale()</h4> - -<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 <code>amount</code> の値は変換の程度を定義します。 <code>100%</code> の値は完全にグレースケールになります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p> - -<pre class="brush: css notranslate">filter: grayscale(100%)</pre> - -<div id="grayscale_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB"> - <filter id="grayscale"> - <feColorMatrix type="matrix" - values="0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> -</svg><div></td> - <td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:grayscale(100%); - -webkit-filter:grayscale(100%); - -ms-filter:grayscale(100%); - filter:grayscale(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<div>{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}</div> - -<h4 id="hue-rotate">hue-rotate()</h4> - -<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 <code class="property">angle</code> の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 <code>0deg</code> の値を指定すると入力は変更されません。補完時の空白値は <code>0</code> です。最大値はありませんが、 <code>360deg</code> を超える値の以上の値の場合は回り込みになります。</p> - -<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> - -<div id="huerotate_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB"> - <filter id="hue-rotate"> - <feColorMatrix type="hueRotate" - values="90"/> - </filter> - <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> -</svg><div></td> - <td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter:hue-rotate(90deg); - -webkit-filter:hue-rotate(90deg); - -ms-filter:hue-rotate(90deg); - filter:hue-rotate(90deg); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="svgHueRotate" > - <feColorMatrix type="hueRotate" values="[angle]" /> - <filter /> -</svg></pre> - -<p>{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}</p> - -<h4 id="invert">invert()</h4> - -<p>{{cssxref("filter-function/invert", "invert()")}} 関数は、入力画像のサンプルを反転します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全に反転されます。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p> - -<pre class="brush: css notranslate">filter: invert(100%)</pre> - -<div id="invert_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB"> - <filter id="invert"> - <feComponentTransfer> - <feFuncR type="table" tableValues="1 0"/> - <feFuncG type="table" tableValues="1 0"/> - <feFuncB type="table" tableValues="1 0"/> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> -</svg><div></td> - <td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: invert(100%); - -webkit-filter: invert(100%); - -ms-filter: invert(100%); - filter: invert(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}</p> - -<h4 id="opacity">opacity()</h4> - -<p>{{cssxref("filter-function/opacity", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、完全に透明になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は <code>1</code> です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。</p> - -<pre class="brush: css notranslate">filter: opacity(50%)</pre> - -<div id="opacity_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB"> - <filter id="opacity"> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.5"> - </feComponentTransfer> - </filter> - <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> -</svg><div></td> - <td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: opacity(50%); - -webkit-filter: opacity(50%); - -ms-filter: opacity(50%); - filter: opacity(50%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}</p> - -<h4 id="saturate">saturate()</h4> - -<p>{{cssxref("filter-function/saturate", "saturate()")}} 関数は、入力画像の彩度を変化させます。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、無彩色になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。 <code>100%</code> を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は <code>1</code> です。</p> - -<pre class="brush: css notranslate">filter: saturate(200%)</pre> - -<div id="saturate_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB"> - <filter id="saturate"> - <feColorMatrix type="saturate" - values="2"/> - </filter> - <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> -</svg><div></td> - <td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: saturate(200%); - -webkit-filter: saturate(200%); - -ms-filter: saturate(200%); - filter: saturate(200%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> - -<h4 id="sepia">sepia()</h4> - -<p>{{cssxref("filter-function/sepia", "sepia()")}} 関数は、入力画像をセピア調にします。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全にセピア調になります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p> - -<pre class="brush: css notranslate">filter: sepia(100%)</pre> - -<div id="sepia_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">同等の SVG</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB"> - <filter id="sepia"> - <feColorMatrix type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> -</svg><div></td> - <td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: sepia(100%); - -webkit-filter: sepia(100%); - -ms-filter: sepia(100%); - filter: sepia(100%); } -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}</p> - -<h2 id="Combining_functions" name="Combining_functions">関数の組み合わせ</h2> - -<p>いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。</p> - -<pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre> - -<div id="combination_example" class="hidden"> -<pre class="brush: html notranslate"><table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">元の画像</th> - <th style="text-align: left;" scope="col">ライブ例</th> - <th style="text-align: left;" scope="col">画像による例</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> - <td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -</pre> - -<pre class="brush: css notranslate">html { - height:100%; -} -body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; - color: rgb(51, 51, 51); - height:100%; - overflow:hidden; -} -#img2 { - width:100%; - height:auto; - -moz-filter: contrast(175%) brightness(103%); - -webkit-filter: contrast(175%) brightness(103%); - -ms-filter: contrast(175%) brightness(103%); - filter: contrast(175%) brightness(103%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width:25%; - height:auto; -} -#img3 { - height:100%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}</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('Filters 1.0', '#FilterProperty', 'filter')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.filter")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="internal" href="/ja/docs/Applying_SVG_effects_to_HTML_content">HTML コンテンツへの SVG 効果の適用</a></li> - <li>The {{cssxref("mask")}} property</li> - <li><a class="internal" href="/ja/docs/Web/SVG">SVG</a></li> - <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li> - <li><a href="http://www.coding-dude.com/wp/css/css-image-effects/">CSS Image Effects</a> using filter combinations for creating vintage photos</li> -</ul> diff --git a/files/ja/web/css/filter/index.md b/files/ja/web/css/filter/index.md new file mode 100644 index 0000000000..c71814bc21 --- /dev/null +++ b/files/ja/web/css/filter/index.md @@ -0,0 +1,1159 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - CSS プロパティ + - Reference + - SVG + - SVG フィルター + - recipe:css-property +browser-compat: css.properties.filter +translation_of: Web/CSS/filter +--- +{{CSSRef}} + +**`filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。 + +CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。[SVG の filter 要素](/ja/docs/Web/SVG/Element/filter)への URL で SVG フィルターを参照することもできます。 + +{{EmbedInteractiveExample("pages/css/filter.html")}} + +## 構文 + +```css +/* SVG フィルターへの URL */ +filter: url("filters.svg#filter-id"); + +/* <filter-function> 値 */ +filter: blur(5px); +filter: brightness(0.4); +filter: contrast(200%); +filter: drop-shadow(16px 16px 20px blue); +filter: grayscale(50%); +filter: hue-rotate(90deg); +filter: invert(75%); +filter: opacity(25%); +filter: saturate(30%); +filter: sepia(60%); + +/* 複数のフィルター */ +filter: contrast(175%) brightness(3%); + +/* フィルターを使用しない */ +filter: none; + +/* グローバル値 */ +filter: inherit; +filter: initial; +filter: revert; +filter: unset; +``` + +次のように関数と共に使用してください。 + +```css +filter: <filter-function> [<filter-function>]* | none +``` + +SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。 + +```css +filter: url(file.svg#filter-element-id) +``` + +### 補間 + +最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("url()","url()")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが `none` である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。 + +## 関数 + +`filter` プロパティは `none` または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は `none` を返します。特に示す場合を除いて、パーセント記号付きの値 (`34%` など) を取る関数は、10進数の値 (`0.34` など) も受け付けます。 + +単一の `filter` プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の `filter` プロパティに別々に適用した場合とは異なる結果になります。 + +### SVG フィルター + +#### url() + +外部 XML ファイルに埋め込むことができる [SVG フィルター](/ja/docs/Web/SVG/Element/filter)を指す URI を取ります。 + +```css +filter: url(resources.svg#c1) +``` + +### フィルター関数 + +#### blur() + +{{cssxref("filter-function/blur()", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 `radius` の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は `0` です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。 + +```css +filter: blur(5px) +``` + +```html hidden + <table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_2.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_2.jpeg" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/> + </filter> + <image xlink:href="test_form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/> + </svg> + </div> + </td> + <td><img id="img4" class="internal default" src="test_form_2_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -webkit-filter:blur(5px); + -ms-filter:blur(5px); + filter:blur(5px); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0; + margin: 0 0 1.286em; + height: 100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +```svg +<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> + </filter> +</svg> +``` + +{{EmbedLiveSample('blur','100%','236px','','', 'no-codepen')}} + +#### brightness() + +{{cssxref("filter-function/brightness()", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 `0%` の値を設定すると、完全な黒の画像が作成されます。 `100%` の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 `100%` を超える値が許されており、より明るい結果が得られます。補間時の空白値は `1` です。 + +```css +filter: brightness(2) +``` + +```svg +<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> + </feComponentTransfer> + </filter> +</svg> +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="2"/> + <feFuncG type="linear" slope="2"/> + <feFuncB type="linear" slope="2"/> + </feComponentTransfer> + </filter> + <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:brightness(2); + -webkit-filter:brightness(2); + -ms-filter:brightness(2); + filter:brightness(2); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height:100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('brightness','100%','231px','','', 'no-codepen')}} + +#### contrast() + +{{cssxref("filter-function/contrast()", "contrast()")}} 関数は、入力画像のコントラストを調整します。 `0%` の値を指定すると完全にグレーの画像が作成されます。 `100%` の値を指定すると、入力画像は変更されません。 `100%` を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は `1` です。 + +```css +filter: contrast(200%) +``` + +```svg +<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> + </feComponentTransfer> + </filter> +</svg> +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="2" intercept="-0.5"/> + <feFuncG type="linear" slope="2" intercept="-0.5"/> + <feFuncB type="linear" slope="2" intercept="-0.5"/> + </feComponentTransfer> + </filter> + <image xlink:href="test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_3_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:contrast(200%); + -webkit-filter:contrast(200%); + -ms-filter:contrast(200%); + filter:contrast(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('contrast','100%','203px','','', 'no-codepen')}} + +#### drop-shadow() + +{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は `<shadow>` 型 ([CSS3 Backgrounds](https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow) で定義) の引数を受け取りますが、 `inset` キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションを提供していることです。 `<shadow>` 引数の値は次の通りです。 + +- `<offset-x>` `<offset-y>` (必須) + - : 二つの {{cssxref("<length>")}} 値で、影をずらす大きさを設定します。 `<offset-x>` は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 `<offset-y>` は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("<length>")}} を参照してください。 + 両方の値が `0` である場合は、影は要素の背後に配置されます (そして、 `<blur-radius>` や `<spread-radius>` を設定することで、ぼかしの効果を生成することができます)。</dd> +- `<blur-radius>` (オプション) + - : これは三番目の {{cssxref("<length>")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 `0` (影の縁がはっきりしている) になります。</dd> +- `<color>` (オプション) + - : 指定可能なキーワードや記述方法は {{cssxref("<color>")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("<color>")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。</dd> +</dl> + +```css +filter: drop-shadow(16px 16px 10px black) +``` + +```svg +<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> + <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> + <feFlood flood-color="[color]"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> +</svg> +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> + <defs> + <image id="MyImage" xlink:href="test_form_4.jpeg" width="213px" height="161px"/> + </defs> + <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%"> + <feOffset dx="9" dy="9" in="SourceAlpha"/> + <feGaussianBlur stdDeviation="5"/> + </filter> + <use xlink:href="#MyImage" filter="url(#drop-shadow)"/> + <use xlink:href="#MyImage"/> + </svg> + </div> + </td> + <td><img id="img4" class="internal default" src="test_form_4_s.jpg" style="width: 100%;" /></td> + </tr> + <tr> + <td><img alt="test_form_4 distorted border - Original image" id="img11" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td><img alt="test_form_4 distorted border - Live example" id="img12" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> + <defs> + <image id="MyImage2" xlink:href="test_form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/> + </defs> + <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> + <feOffset dx="5" dy="5.5" in="SourceAlpha"/> + <feGaussianBlur stdDeviation="2.5"/> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.8"/> + </feComponentTransfer> + </filter> + <use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/> + <use xlink:href="#MyImage2"/> + </svg> + </div> + </td> + <td><img alt="test_form_4 distorted border drop shadow - Static example" id="img14" class="internal default" src="test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: drop-shadow(16px 16px 10px black); + -webkit-filter: drop-shadow(16px 16px 10px black); + -ms-filter: drop-shadow(16px 16px 10px black); + filter: drop-shadow(16px 16px 10px black); +} +#img12 { + width:100%; + height:auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +#irregular-shape { + width: 64%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3, #img13 { + width:100%; + height:auto; +} +``` + +{{EmbedLiveSample('drop-shadow','100%','400px','','', 'no-codepen')}} + +#### grayscale() + +{{cssxref("filter-function/grayscale()", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 `amount` の値は変換の程度を定義します。 `100%` の値は完全にグレースケールになります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: grayscale(100%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB"> + <filter id="grayscale"> + <feColorMatrix type="matrix" + values="0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_5_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:grayscale(100%); + -webkit-filter:grayscale(100%); + -ms-filter:grayscale(100%); + filter:grayscale(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('grayscale','100%','209px','','', 'no-codepen')}} + +#### hue-rotate() + +{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 `angle` の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 `0deg` の値を指定すると入力は変更されません。補完時の空白値は `0` です。最大値はありませんが、 `360deg` を超える値の以上の値の場合は回り込みになります。 + +```css +filter: hue-rotate(90deg) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" + values="90"/> + </filter> + <image xlink:href="test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_6_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:hue-rotate(90deg); + -webkit-filter:hue-rotate(90deg); + -ms-filter:hue-rotate(90deg); + filter:hue-rotate(90deg); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +```html +<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate"> + <feColorMatrix type="hueRotate" values="[angle]"/> + </filter> +</svg> +``` + +{{EmbedLiveSample('hue-rotate','100%','221px','','', 'no-codepen')}} + +#### invert() + +{{cssxref("filter-function/invert()", "invert()")}} 関数は、入力画像のサンプルを反転します。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全に反転されます。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: invert(100%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB"> + <filter id="invert"> + <feComponentTransfer> + <feFuncR type="table" tableValues="1 0"/> + <feFuncG type="table" tableValues="1 0"/> + <feFuncB type="table" tableValues="1 0"/> + </feComponentTransfer> + </filter> + <image xlink:href="test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_7_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: invert(100%); + -webkit-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('invert','100%','407px','','', 'no-codepen')}} + +#### opacity() + +{{cssxref("filter-function/opacity()", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、完全に透明になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は `1` です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。 + +```css +filter: opacity(50%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB"> + <filter id="opacity"> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.5"> + </feComponentTransfer> + </filter> + <image xlink:href="test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_14_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: opacity(50%); + -webkit-filter: opacity(50%); + -ms-filter: opacity(50%); + filter: opacity(50%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('opacity','100%','210px','','', 'no-codepen')}} + +#### saturate() + +{{cssxref("filter-function/saturate()", "saturate()")}} 関数は、入力画像の彩度を変化させます。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、無彩色になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。 `100%` を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は `1` です。 + +```css +filter: saturate(200%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB"> + <filter id="saturate"> + <feColorMatrix type="saturate" + values="2"/> + </filter> + <image xlink:href="test_form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_9_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: saturate(200%); + -webkit-filter: saturate(200%); + -ms-filter: saturate(200%); + filter: saturate(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('saturate','100%','332px','','', 'no-codepen')}} + +#### sepia() + +{{cssxref("filter-function/sepia()", "sepia()")}} 関数は、入力画像をセピア調にします。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全にセピア調になります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: sepia(100%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">SVG Equivalent</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB"> + <filter id="sepia"> + <feColorMatrix type="matrix" + values="0.393 0.769 0.189 0 0 + 0.349 0.686 0.168 0 0 + 0.272 0.534 0.131 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="test_form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> +</svg><div></td> + <td><img id="img4" class="internal default" src="test_form_12_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: sepia(100%); + -webkit-filter: sepia(100%); + -ms-filter: sepia(100%); + filter: sepia(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('sepia','100%','229px','','', 'no-codepen')}} + +<h2 id="Combining_functions">関数の組み合わせ</h2> + +いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。 + +```css +filter: contrast(175%) brightness(103%) +``` + +```html hidden +<table class="standard-table"> + <thead> + <tr> + <th style="text-align: left;" scope="col">Original image</th> + <th style="text-align: left;" scope="col">Live example</th> + <th style="text-align: left;" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img id="img1" class="internal default" src="test_form_8.jpeg" style="width: 100%;" /></td> + <td><img id="img2" class="internal default" src="test_form_8.jpeg" style="width: 100%;" /></td> + <td><img id="img4" class="internal default" src="test_form_8_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: contrast(175%) brightness(103%); + -webkit-filter: contrast(175%) brightness(103%); + -ms-filter: contrast(175%) brightness(103%); + filter: contrast(175%) brightness(103%); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('Combining_functions','100%','209px','','', 'no-codepen')}} + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### フィルター関数の適用 + +定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。 + +```css +.mydiv { + filter: grayscale(50%); +} + +/* Gray all images by 50% and blur by 10px */ +img { + filter: grayscale(0.5) blur(10px); +} +``` + +### SVG フィルターの適用 + +URL 関数を使用して SVG リソースを使用した例は以下の通りです。 + +```css +.target { + filter: url(#c1); +} + +.mydiv { + filter: url(commonfilters.xml#large-blur); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [HTML コンテンツへの SVG 効果の適用](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) +- {{cssxref("mask")}} プロパティ +- [SVG](/ja/docs/Web/SVG) diff --git a/files/ja/web/css/flex-shrink/index.html b/files/ja/web/css/flex-shrink/index.html deleted file mode 100644 index 16392cd2d4..0000000000 --- a/files/ja/web/css/flex-shrink/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: flex-shrink -slug: Web/CSS/flex-shrink -tags: - - CSS - - CSS Flexible Boxes - - CSS Property - - CSS フレックスボックス - - NeedsContent - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/flex-shrink ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>flex-shrink</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは <code>flex-shrink</code> の数値に従って縮小して収まります。</span></p> - -<p>使用時は <code>flex-shrink</code> は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。</p> - -<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <number> 値 */ -flex-shrink: 2; -flex-shrink: 0.6; - -/* グローバル値 */ -flex-shrink: inherit; -flex-shrink: initial; -flex-shrink: unset; -</pre> - -<p><code>flex-shrink</code> プロパティは単一の <code><a href="#<number>"><number></a></code> で指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code id="<number>"><number></code></dt> - <dd>{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は 1 です。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="フレックスアイテムの縮小係数の設定">フレックスアイテムの縮小係数の設定</h3> - -<h4 id="HTML">HTML</h4> - -<div id="Live_Sample"> -<pre class="brush: html notranslate"><p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p> -<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p> -<p>D と E の幅は他より狭くなります。</p> -<div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> - <div class="box1" style="background-color:brown;">D</div> - <div class="box1" style="background-color:lightgreen;">E</div> -</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">#content { - display: flex; - width: 500px; -} - -#content div { - flex-basis: 120px; - border: 3px solid rgba(0,0,0,.2); -} - -.box { - flex-shrink: 1; -} - -.box1 { - flex-shrink: 2; -} -</pre> -</div> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 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('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td> - <td>{{Spec2('CSS3 Flexbox')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.flex-shrink")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li> - <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li> -</ul> diff --git a/files/ja/web/css/flex-shrink/index.md b/files/ja/web/css/flex-shrink/index.md new file mode 100644 index 0000000000..7984548518 --- /dev/null +++ b/files/ja/web/css/flex-shrink/index.md @@ -0,0 +1,108 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - CSS フレックスボックス + - NeedsContent + - Reference + - recipe:css-property +browser-compat: css.properties.flex-shrink +translation_of: Web/CSS/flex-shrink +--- +{{CSSRef}} + +**`flex-shrink`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは `flex-shrink` の数値に従って縮小して収まります。 + +使用時は `flex-shrink` は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。 + +{{EmbedInteractiveExample("pages/css/flex-shrink.html")}} + +## 構文 + +```css +/* <number> 値 */ +flex-shrink: 2; +flex-shrink: 0.6; + +/* グローバル値 */ +flex-shrink: inherit; +flex-shrink: initial; +flex-shrink: revert; +flex-shrink: unset; +``` + +`flex-shrink` プロパティは単一の `<number>` で指定します。 + +### 値 + +- `<number>` + - : {{cssxref("<number>")}} を参照してください。負の値は無効です。既定値は 1 です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_flex_item_shrink_factor">フレックスアイテムの縮小係数の設定</h3> + +#### HTML + +```html +<p>全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。</p> +<p>A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。</p> +<p>D と E の幅は他より狭くなります。</p> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> + <div class="box1" style="background-color:brown;">D</div> + <div class="box1" style="background-color:lightgreen;">E</div> +</div> +``` + +#### CSS + +```css +#content { + display: flex; + width: 500px; +} + +#content div { + flex-basis: 120px; + border: 3px solid rgba(0,0,0,.2); +} + +.box { + flex-shrink: 1; +} + +.box1 { + flex-shrink: 2; +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ diff --git a/files/ja/web/css/font-variant-alternates/index.html b/files/ja/web/css/font-variant-alternates/index.html deleted file mode 100644 index 19abc10c3d..0000000000 --- a/files/ja/web/css/font-variant-alternates/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: font-variant-alternates -slug: Web/CSS/font-variant-alternates -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference -translation_of: Web/CSS/font-variant-alternates ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong>CSSプロパティは代替グリフの使用を制御します。代替グリフは{{cssxref("@font-feature-values")}}で定義された代替名で参照される可能性があります。</span></p> - -<pre class="brush:css no-line-numbers">/* 予約語 */ -font-variant-alternates: normal; -font-variant-alternates: historical-forms; - -/* 函数表記値 */ -font-variant-alternates: stylistic(user-defined-ident); -font-variant-alternates: styleset(user-defined-ident); -font-variant-alternates: character-variant(user-defined-ident); -font-variant-alternates: swash(user-defined-ident); -font-variant-alternates: ornaments(user-defined-ident); -font-variant-alternates: annotation(user-defined-ident); -font-variant-alternates: swash(ident1) annotation(ident2); - -/* 大域値 */ -font-variant-alternates: initial; -font-variant-alternates: inherit; -font-variant-alternates: unset; -</pre> - -<p>{{cssxref("@font-feature-values")}}@規則は，OpenType機能と関連付けられた代替グリフ函数（<code>stylistic</code>，<code>styleset</code>，<code>character-variant</code>，<code>swash</code>，<code>ornament</code>，又は<code>annotation</code>）用の名前を定義できます。本プロパティを用いて，（{{cssxref("@font-feature-values")}}で定義された）対人可読な名前をスタイルシートで使うことができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="書式">書式</h2> - -<p>本プロパティは二つの形式の内一方を取ります:</p> - -<ul> - <li>予約語<code>normal</code></li> - <li>一又は複数の後掲した他の予約語及び函数（空白区切り・順不同）</li> -</ul> - -<h3 id="値">値</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>この予約語は代替グリフを無効にします。</dd> - <dt><code>historical-forms</code></dt> - <dd>この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeの<code>hist</code>機能タグに相当します。</dd> - <dt><code><a name="stylistic()"></a>stylistic()</code></dt> - <dd>この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>salt</code>機能タグ（例: <code>salt 2</code>）に相当します。</dd> - <dt><code><a name="styleset()"></a>styleset()</code></dt> - <dd>この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ssXY</code>機能タグ（例: <code>ss02</code>）に相当します。</dd> - <dt><code><a name="character-variant()"></a>character-variant()</code></dt> - <dd>この函数は文字に対する様式的代替を有効にします。<code>styleset()</code>に似ていますが，一連の文字に対して一貫したグリフを作成せず，個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>cvXY</code>機能タグ（例: <code>cv02</code>）に相当します。</dd> - <dt><code><a name="swash()"></a>swash()</code></dt> - <dd>この函数は<a href="https://en.wikipedia.org/wiki/Swash_%28typography%29">先端装飾</a>〔訳注: グリフの先端を流線的に延長する装飾。<a href="http://www.fishtailstudio.com/others/gd201601.pdf#page=252">訳語参考</a>〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>swsh</code>及び<code>cswh</code>機能タグ（例: <code>swsh 2</code>及び<code>cswh 2</code>）に相当します。</dd> - <dt><code><a name="ornaments()"></a>ornaments()</code></dt> - <dd>この函数は<a href="https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3">花形装飾活字</a>及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ornm</code>機能タグ（例: <code>ornm 2</code>）に相当します。 - <div class="note"><strong>注意:</strong> 文義を維持する目的で，フォント設計者は，箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。</div> - </dd> - <dt><code><a name="annotation()"></a>annotation()</code></dt> - <dd>この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>nalt</code>機能タグ（例: <code>nalt 2</code>）に相当します。</dd> -</dl> - -<h3 id="形式文法">形式文法</h3> - -{{csssyntax}} - -<h2 id="例">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Firefox rocks!</p> -<p class="variant">Firefox rocks!</p> -</pre> - -<h3 id="CSS"><span class="pun">CSS</span></h3> - -<pre class="brush: css">@font-feature-values "Leitura Display Swashes" { - @swash { fancy: 1 } -} - -p { - font-size: 1.5rem; -} - -.variant { - font-family: Leitura Display Swashes; - font-variant-alternates: swash(fancy); -}</pre> - -<h3 id="結果">結果</h3> - -<div class="note"> -<p><strong>注意:</strong> この例を正しく閲覧するには，OpenTypeフォント<em>Leitura Display Swashes</em>を導入する必要があります。<a href="http://fontsgeek.com/fonts/Leitura-Display-Swashes">fontsgeek.com</a>等から試験目的の無償版が入手できます。</p> -</div> - -<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</p> - -<h2 id="仕様書">仕様書</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 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザ互換性</h2> - -<p>{{Compat("css.properties.font-variant-alternates")}}</p> diff --git a/files/ja/web/css/font-variant-alternates/index.md b/files/ja/web/css/font-variant-alternates/index.md new file mode 100644 index 0000000000..d2a89132cb --- /dev/null +++ b/files/ja/web/css/font-variant-alternates/index.md @@ -0,0 +1,124 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - recipe:css-property +browser-compat: css.properties.font-variant-alternates +translation_of: Web/CSS/font-variant-alternates +--- +{{CSSRef}} + +**`font-variant-alternates`** は CSS のプロパティで、代替書体の使用を制御します。代替書体は {{cssxref("@font-feature-values")}} で定義された代替名で参照される可能性があります。 + +```css +/* キーワード値 */ +font-variant-alternates: normal; +font-variant-alternates: historical-forms; + +/* 関数表記値 */ +font-variant-alternates: stylistic(user-defined-ident); +font-variant-alternates: styleset(user-defined-ident); +font-variant-alternates: character-variant(user-defined-ident); +font-variant-alternates: swash(user-defined-ident); +font-variant-alternates: ornaments(user-defined-ident); +font-variant-alternates: annotation(user-defined-ident); +font-variant-alternates: swash(ident1) annotation(ident2); + +/* グローバル値 */ +font-variant-alternates: initial; +font-variant-alternates: inherit; +font-variant-alternates: revert; +font-variant-alternates: unset; +``` + +{{cssxref("@font-feature-values")}} アット規則は、代替書体関数 (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament`, `annotation`) の名前を定義し、その名前を OpenType の引数と関連付けることができます。このプロパティはスタイルシート内で ({{cssxref("@font-feature-values")}} で定義された) 人間が読める名前を利用できるようにします。 + +## 構文 + +このプロパティは二つの形式のうち一つを取ります。 + +- キーワード `normal` +- または、その他の下記のキーワードおよび関数を空白区切り、順不同で 1 つ以上 + +### 値 + +- `normal` + - : このキーワードは代替書体を無効にします。 +- `historical-forms` + - : このキーワードは歴史的形式 — 過去には一般的だったけれども今日そうではない書体を有効にします。 OpenType の `hist` の値に対応します。 +- `stylistic()` + - : この関数は、個々の文字に対して表現の変更を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `salt` の値に相当します (例: `salt 2`)。 +- `styleset()` + - : この関数は、一連の文字に対するスタイルの代替を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `ssXY` の値に相当します (例: `ss02`)。 +- `character-variant()` + - : この関数は、文字に対して特定のスタイルの選択肢を有効にします。 `styleset()` に似ていますが、一連の文字に対してまとまった書体を作成するわけではありませんので、個々の文字は独立した、整合が取れているとは限らないスタイルになります。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `cvXY` の値に相当します (例: `cv02`)。 +- `swash()` + - : この関数は、[先端装飾](https://en.wikipedia.org/wiki/Swash_%28typography%29)書体を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `swsh` および `cswh` の値に相当します (例: `swsh 2` および `cswh 2`)。 +- `ornaments()` + + - : この関数は、[フルーロン](https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3)およびその他の飾り書体などの装飾を有効にします。 OpenType の `ornm` の値に相当します (例: `ornm 2`)。 + + > **Note:** テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。 + +- `annotation()` + - : この関数は、丸数字や鏡文字などの注釈表記を有効にします。この函数は丸数字又は鏡文字などの表記を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の `nalt` の値に相当します (例: `nalt 2`)。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +<h2 id="Examples">例</h2> + +### HTML + +```html +<p>Firefox rocks!</p> +<p class="variant">Firefox rocks!</p> +``` + +### CSS + +```css +@font-feature-values "Leitura Display Swashes" { + @swash { fancy: 1 } +} + +p { + font-size: 1.5rem; +} + +.variant { + font-family: Leitura Display Swashes; + font-variant-alternates: swash(fancy); +} +``` + +### 結果 + +> **Note:** この例を有効にするには、 OpenType フォントの _Leitura Display Swashes_ をインストールする必要があります。試験用途の無償版が、 [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes) などにあります。 + +{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }} + +## 仕様書 + +Not part of any standard. + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-variant")}} +- {{cssxref("font-variant-caps")}} +- {{cssxref("font-variant-east-asian")}} +- {{cssxref("font-variant-ligatures")}} +- {{cssxref("font-variant-numeric")}} diff --git a/files/ja/web/css/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md new file mode 100644 index 0000000000..7372d1f6bb --- /dev/null +++ b/files/ja/web/css/gradient/conic-gradient()/index.md @@ -0,0 +1,243 @@ +--- +title: conic-gradient() +slug: Web/CSS/gradient/conic-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.conic-gradient +translation_of: Web/CSS/gradient/conic-gradient() +original_slug: Web/CSS/conic-gradient() +--- +{{CSSRef}} + +**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} + +## 構文 + +```css +/* 45度回転した扇形グラデーション、 + 青で始まり赤で終わる */ +conic-gradient(from 45deg, blue, red); + +/* 青みがかった紫のボックス。グラデーションは青から赤へと + 進みます。しかし、扇形グラデーションの中心が左上にある + ため、右下の四分の一しか見えません。 */ +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%) +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `<position>` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `<angular-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。 +- `<color-hint>` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。 + +繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。 + +### 扇型グラデーションの構成 + +<p>扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p> + + + +扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。 + +放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。 + +グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。 + +```css +conic-gradient(red, orange, yellow, green, blue); +conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。 + +```css +conic-gradient(red 40grad, 80grad, blue 360grad); +``` + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。 + +```css +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); +``` + +色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。 + +```css +conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); +``` + +扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。 + +```css +conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); +background-size: 25% 25%; +``` + +そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +<h3 id="Gradient_at_40-degrees">40 度のグラデーション</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background-image: + conic-gradient(from 40deg, #fff, #000); +} +``` + +{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}} + +<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 120, 120)}} + +<h3 id="Gradient_pie-chart">グラデーションの円グラフ</h3> + +This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: conic-gradient( + red 36deg, orange 36deg 170deg, yellow 170deg); + border-radius: 50% +} +``` + +{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}} + +<h3 id="Checkerboard">市松模様</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +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; +} +``` + +{{EmbedLiveSample("Checkerboard", 120, 120)}} + +### その他の conic-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html deleted file mode 100644 index 6192d160da..0000000000 --- a/files/ja/web/css/gradient/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: <gradient> -slug: Web/CSS/gradient -tags: - - CSS - - CSS Data Type - - CSS Images - - Data Type - - Graphics - - Layout - - Reference -translation_of: Web/CSS/gradient ---- -<div>{{CSSRef}}</div> - -<p><strong><code><gradient></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。</p> - -<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>CSS グラデーションは<a href="/ja/docs/Web/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><gradient></code> データ型は、以下のリストにある関数型のうちの一つによって定義します。</p> - -<div id="linear-gradient"> -<h4 id="Linear_gradient" name="Linear_gradient"><ruby>線形<rp> (</rp><rt>linear</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。</p> -</div> - -<div id="radial-gradient"> -<h4 id="Radial_gradient" name="Radial_gradient"><ruby>放射<rp> (</rp><rt>radical</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。</p> -</div> - -<div id="repeating-gradient"> -<h4 id="Repeating_gradient" name="Repeating_gradient"><ruby>反復<rp> (</rp><rt>repeating</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。</p> -</div> - -<div id="conic-gradient"> -<h4 id="Conic_gradient" name="Conic_gradient"><ruby>扇形<rp> (</rp><rt>conic</rt><rp>) </rp></ruby>グラデーション</h4> - -<p>色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。</p> -</div> - -<h2 id="Interpolation" name="Interpolation">補間</h2> - -<p>色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 <a href="/ja/docs/Web/CSS/color_value#transparent_keyword">transparent キーワード</a>を使用するとこれを使用しないことがあるので注意してください。)</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Linear_gradient_example" name="Linear_gradient_example">線形グラデーションの例</h3> - -<p>単純な線形グラデーションです。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="linear-gradient">Linear gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 80px; -}</pre> -</div> - -<pre class="brush: css notranslate">.linear-gradient { - background: linear-gradient(to right, - red, orange, yellow, green, blue, indigo, violet); -}</pre> - -<p>{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}</p> - -<h3 id="Radial_gradient_example" name="Radial_gradient_example">放射グラデーションの例</h3> - -<p>単純な放射グラデーションです。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient">Radial gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 80px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background: radial-gradient(red, yellow, rgb(30, 144, 255)); -} -</pre> - -<p>{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}</p> - -<h3 id="Repeating_gradient_examples" name="Repeating_gradient_examples">反復グラデーションの例</h3> - -<p>単純な線形および放射の反復グラデーションの例です。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="linear-repeat">Repeating linear gradient</div> -<br> -<div class="radial-repeat">Repeating radial gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 240px; - height: 80px; -}</pre> -</div> - -<pre class="brush: css notranslate">.linear-repeat { - background: repeating-linear-gradient(to top left, - lightpink, lightpink 5px, white 5px, white 10px); -} - -.radial-repeat { - background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); -}</pre> - -<p>{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}</p> - -<h3 id="Conic_gradient_example" name="Conic_gradient_example">扇形グラデーションの例</h3> - -<p>単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="conic-gradient">Conic gradient</div> -</pre> - -<pre class="brush: css notranslate">div { - width: 200px; - height: 200px; -}</pre> -</div> - -<pre class="brush: css notranslate">.conic-gradient { - background: conic-gradient(lightpink, white, powderblue); -} -</pre> - -<p>{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}</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('CSS4 Images', '#gradients', '<gradient>')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>conic-gradient を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#gradients', '<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")}}</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("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}}</li> - <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a></li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li> -</ul> diff --git a/files/ja/web/css/gradient/index.md b/files/ja/web/css/gradient/index.md new file mode 100644 index 0000000000..5123beb559 --- /dev/null +++ b/files/ja/web/css/gradient/index.md @@ -0,0 +1,163 @@ +--- +title: <gradient> +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference +browser-compat: css.types.image.gradient +translation_of: Web/CSS/gradient +--- +{{CSSRef}} + +The **`<gradient>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。 + +{{EmbedInteractiveExample("pages/css/type-gradient.html")}} + +CSS グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。 + +## 構文 + +`<gradient>` データ型は、以下のリストにある関数型のうちの一つによって定義します。 + +#### 線形グラデーション + +線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数で生成されます。 + +#### 放射グラデーション + +放射グラデーション (radical gradient) は、色が中央点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。 + +#### 反復グラデーション + +反復グラデーション (repeating gradient) は、要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} および {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数で生成されます。 + +#### 扇形グラデーション + +扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数で生成されます。 + +## 補間 + +色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 [transparent キーワード](/ja/docs/Web/CSS/color_value#transparent_keyword)を使用するとこれを使用しないことがあるので注意してください。) + +## 例 + +<h3 id="Linear_gradient_example">線形グラデーションの例</h3> + +単純な線形グラデーションです。 + +```html hidden +<div class="linear-gradient">Linear gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.linear-gradient { + background: linear-gradient(to right, + red, orange, yellow, green, blue, indigo, violet); +} +``` + +{{EmbedLiveSample('Linear_gradient_example', 240, 120)}} + +<h3 id="Radial_gradient_example">放射グラデーションの例</h3> + +単純な放射グラデーションです。 + +```html hidden +<div class="radial-gradient">Radial gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.radial-gradient { + background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +``` + +{{EmbedLiveSample('Radial_gradient_example', 240, 120)}} + +<h3 id="Repeating_gradient_examples">反復グラデーションの例</h3> + +単純な線形および放射の反復グラデーションの例です。 + +```html hidden +<div class="linear-repeat">Repeating linear gradient</div> +<br> +<div class="radial-repeat">Repeating radial gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.linear-repeat { + background: repeating-linear-gradient(to top left, + lightpink, lightpink 5px, white 5px, white 10px); +} + +.radial-repeat { + background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); +} +``` + +{{EmbedLiveSample('Repeating_gradient_examples', 240, 220)}} + +<h3 id="Conic_gradient_example">扇形グラデーションの例</h3> + +単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。 + +```html hidden +<div class="conic-gradient">Conic gradient</div> +``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(lightpink, white, powderblue); +} +``` + +{{EmbedLiveSample('Conic_gradient_example', 240, 240)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- [CSS の基本データ型](/ja/docs/Web/CSS/CSS_Types) +- [CSS の単位と値](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [CSS 入門: 値と単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/gradient/linear-gradient()/index.md b/files/ja/web/css/gradient/linear-gradient()/index.md new file mode 100644 index 0000000000..963db61405 --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient()/index.md @@ -0,0 +1,198 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/linear-gradient() +original_slug: Web/CSS/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +{{CSSRef}} + +**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## 構文 + +```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%); +``` + +### 値 + +- `<side-or-corner>` + + - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{CSSxRef("<angle>")}} + - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。</dd> +- `<linear-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。</dd> +- `<color-hint>` + - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 +> +> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。 + +## 解説 + +他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。 + +`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。 + +### 線形グラデーションの構成 + +線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。 + + + +グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。 + +開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。 + +#### グラデーションのカスタマイズ + +グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。 + +```css +linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); +``` + +ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。 + +```css +linear-gradient(red 10%, 30%, blue 90%); +``` + +二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。 + +色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。 + +```css +linear-gradient(red 40%, yellow 30%, blue 65%); +``` + +色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。 + +```css +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%); +``` + +既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。 + +## 例 + +<h3 id="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(45deg, red, blue); +} +``` + +{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}} + +<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">グラデーション軸の 60% から始まるグラデーション</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(135deg, orange 60%, cyan); +} +``` + +{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}} + +<h3 id="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3> + +この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。 + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +} +``` + +{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}} + +<h3 id="More_linear-gradient_examples">その他のグラデーションの例</h3> + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{CSSxRef("<image>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png Binary files differnew file mode 100644 index 0000000000..240da5855e --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png diff --git a/files/ja/web/css/gradient/radial-gradient()/index.md b/files/ja/web/css/gradient/radial-gradient()/index.md new file mode 100644 index 0000000000..127f5f85ac --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient()/index.md @@ -0,0 +1,143 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/radial-gradient() +original_slug: Web/CSS/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient +--- +{{CSSRef}} + +**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。 + +{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} + +## 構文 + +```css +/* コンテナーの中央にあるグラデーション、 + 赤で始まり、青へ変わり、緑で終わる */ +radial-gradient(circle at center, red 0, blue, green 100%) +``` + +放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。 + +## 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `<ending-shape>` + - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `<size>` + + - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。 + + グラデーションが円でも楕円でも `<size>` に以下のキーワードを使用することができます。 + + | キーワード | 説明 | + | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 | + | `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + `<ending-shape>` を `circle` と指定した場合、大きさを明示的に [`<length>`](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。 + + `<ending-shape>` を `ellipse` と指定するか省略した場合、大きさを二つの [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。 + +- `<linear-color-stop>` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 +- `<color-hint>` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +## 解説 + +<p>他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。 + +繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +### 放射グラデーションの構成 + +放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。 + +滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。 + +色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。 + +## 例 + +<h3 id="Simple_gradient">シンプルなグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); +} +``` + +{{EmbedLiveSample('Simple_gradient', 120, 120)}} + +<h3 id="Non-centered_gradient">中央から外れたグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(farthest-corner at 40px 40px, + #f35 0%, #43e 100%); +} +``` + +{{EmbedLiveSample('Non-centered_gradient', 240, 120)}} + +### 他の radial-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png Binary files differnew file mode 100644 index 0000000000..f16dc4e5da --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png diff --git a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md new file mode 100644 index 0000000000..f9780d9829 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md @@ -0,0 +1,177 @@ +--- +title: repeating-conic-gradient() +slug: Web/CSS/gradient/repeating-conic-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.repeating-conic-gradient +translation_of: Web/CSS/gradient/repeating-conic-gradient() +--- +{{CSSRef}} + +**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。 + +## 構文 + +```css +/* スターバースト: 青の上に青のスターブラスト: + このグラデーションは左上 4 分の 1 の位置を中心とした + 明るい青と暗い青のスターブラストで、 3 度傾いている + ため垂直線がありません。 */ +background: repeating-conic-gradient( + from 3deg at 25% 25%, + hsl(200, 100%, 50%) 0deg 15deg, + hsl(200, 100%, 60%) 10deg 30deg); +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `<position>` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `<angular-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。 +- `<color-hint>` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("<gradient>")}} データ型のオブジェクトで、これは {{CSSxRef("<image>")}} の特殊形です。 + +最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。 + +### 反復扇形グラデーションの理解 + +repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。 + + + +上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。 + + repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); + + repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); + + conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); + + radial-gradient(red 33%, yellow 33% 66%, blue 66%); + +反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。 + +繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from <angle>` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。 + +繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。 + +放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。 + +グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。 + +```css +repeating-conic-gradient(red, orange, yellow, green, blue 50%); +repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg) +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。 + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。 + +異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +<h3 id="Black_and_white_starburst">白黒のスターブラスト</h3> + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background-image: + repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); +} +``` + +{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}} + +<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3> + +このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。 + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: repeating-conic-gradient( + from 3deg at 25% 25%, + green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 220, 220)}} + +### その他の repeating-conic-gradient の例 + +それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md new file mode 100644 index 0000000000..de9a11c8ab --- /dev/null +++ b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md @@ -0,0 +1,149 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-linear-gradient +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/repeating-linear-gradient() +--- +{{CSSRef}} + +**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} + +繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。 + +他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。 + +## 構文 + +```css +/* 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%); +``` + +### 値 + +- `<side-or-corner>` + + - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{cssxref("<angle>")}} + - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 +- `<linear-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。 +- `<color-hint>` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +### 形式文法 + +```css +repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ) + \---------------------------------/ \---------------/ + グラデーション線の定義 色経由点のリスト + +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> ] +``` + +## 例 + +<h3 id="Zebra_stripes">縞模様</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +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); +} +``` + +{{EmbedLiveSample('Zebra_stripes', 120, 120)}} + +<h3 id="Ten_repeating_horizontal_bars">10 回繰り返す水平線</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(to bottom, + rgb(26,198,204), + rgb(26,198,204) 7%, + rgb(100,100,100) 10%); +} +``` + +{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}} + +最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md new file mode 100644 index 0000000000..8142f54a54 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md @@ -0,0 +1,152 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-radial-gradient +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/repeating-radial-gradient() +--- +{{CSSRef}} + +**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} + +それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。 + +他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。 + +## 構文 + +```css +/* コンテナーの中央からのグラデーションで、 + 赤で始まり、青に変化し、緑で終わり、 + それぞれ 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%); +``` + +### 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `<shape>` + - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `<extent-keyword>` + + - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 + + | キーワード | 説明 | + | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 | + | `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。 + +- `<color-stop>` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。 + +### 形式文法 + +```css +repeating-radial-gradient( + [[ circle || <length> ] [at <position>]? , | + [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , | + [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , | + at <position> , <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> ] +``` + +## 例 + +<h3 id="Black_and_white_gradient">白と黒のグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 120px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +} +``` + +{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}} + +<h3 id="Farthest-corner">最も遠い角</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.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%); +} +``` + +{{EmbedLiveSample('Farthest-corner', 120, 120)}} + +楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html index 851c96552c..cf2f596e8d 100644 --- a/files/ja/web/css/grid-column-start/index.html +++ b/files/ja/web/css/grid-column-start/index.html @@ -181,7 +181,7 @@ grid-column-start: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html index 8f96c2f915..3a6f29ac1d 100644 --- a/files/ja/web/css/grid-column/index.html +++ b/files/ja/web/css/grid-column/index.html @@ -132,7 +132,7 @@ translation_of: Web/CSS/grid-column <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html index 5ec045442a..7531bbfdec 100644 --- a/files/ja/web/css/grid-row/index.html +++ b/files/ja/web/css/grid-row/index.html @@ -149,7 +149,7 @@ grid-row: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html index ab3aa7b42a..f753d8596d 100644 --- a/files/ja/web/css/grid-template-areas/index.html +++ b/files/ja/web/css/grid-template-areas/index.html @@ -126,7 +126,7 @@ grid-template-areas: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html index 8dd5cc65cc..d0b5627b94 100644 --- a/files/ja/web/css/grid-template-columns/index.html +++ b/files/ja/web/css/grid-template-columns/index.html @@ -158,7 +158,7 @@ grid-template-columns: unset; <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html index 7108c8f12b..c80fd2a006 100644 --- a/files/ja/web/css/grid-template/index.html +++ b/files/ja/web/css/grid-template/index.html @@ -152,7 +152,7 @@ footer { <li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html index f952fbd25d..6b5a8f0d1f 100644 --- a/files/ja/web/css/grid/index.html +++ b/files/ja/web/css/grid/index.html @@ -140,7 +140,7 @@ grid: unset; <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md new file mode 100644 index 0000000000..e550541331 --- /dev/null +++ b/files/ja/web/css/image/image()/index.md @@ -0,0 +1,155 @@ +--- +title: image() +slug: Web/CSS/image/image() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Reference + - Web +browser-compat: css.types.image.image +translation_of: Web/CSS/image/image() +--- +{{CSSRef}} + +The **`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 + +> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '<code>HTMLImageElement</code> のコンストラクターである <code>Image()</code>', '', 1)}} と混同しないでください。 + +## 構文 + +{{CSSSyntax("image()")}} + +ここで + +- `image-tags`{{Optional_Inline}} + - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。 +- `image-src` {{Optional_Inline}} + - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。 +- `color`{{Optional_Inline}} + - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。 + +### 書字方向の認識 + +`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。 + +### 画像フラグメント + +`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。 + +```css +background-image: image('myimage.webp#xywh=0,20,40,60'); +``` + +要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。 + + +`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。 + +```css +xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ +``` + +イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。 + +`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。 + +### 色による代替 + +`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。 + +画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。 + +色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。 + +## 例 + +<h3 id="Directionally-sensitive_images">書字方向を意識した画像</h3> + +```html +<ul> + <li dir="ltr">行頭記号が左側で右向きの矢印になります。</li> + <li dir="rtl">行頭記号は同じ矢印で、左を指します。</li> +</ul> +``` + +```css +ul { + list-style-image: image(ltr 'rightarrow.png'); +} +``` + +左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `<li>` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。 + +{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}} + +<h3 id="Displaying_a_section_of_the_background_image">背景画像のある範囲の表示</h3> + +```html +<div class="box">この上にカーソルを移動してください。どのように見えますか？</div> +``` + +```css +.box:hover { + cursor: image("sprite.png#xywh=32,64,16,16"); +} +``` + +ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。 + +{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}} + +<h3 id="Putting_color_on_top_of_a_background_image">背景画像の上に色を配置</h3> + +```css hidden +.quarterlogo {height: 200px; width: 200px; border: 1px solid;} +``` + +```css +.quarterlogo { + background-image: + image(rgba(0, 0, 0, 0.25)), + url("firefox.png"); + background-size: 25%; + background-repeat: no-repeat; +} +``` + +```html +<div class="quarterlogo">対応している場合、この div の4分の1は、ロゴが暗くなります</div> +``` + +上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。 + +{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## See also + +- {{CSSxRef("<image>")}} +- {{CSSxRef("element()")}} +- {{CSSxRef("url()")}} +- {{CSSxRef("clip-path")}} +- {{CSSxRef("-moz-image-rect")}} +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("image/image-set()")}} +- {{CSSxRef("cross-fade()")}} diff --git a/files/ja/web/css/image/image-set()/index.md b/files/ja/web/css/image/image-set()/index.md new file mode 100644 index 0000000000..8fbb72453c --- /dev/null +++ b/files/ja/web/css/image/image-set()/index.md @@ -0,0 +1,93 @@ +--- +title: image-set() +slug: Web/CSS/image/image-set() +tags: + - CSS + - CSS Function + - CSS-4 Images + - Function + - Reference + - Web +browser-compat: css.types.image.image-set +translation_of: Web/CSS/image/image-set() +original_slug: Web/CSS/image-set() +--- +{{cssref}} + +**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。 + +解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。 + +`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。 + +## 構文 + +```css +image-set() = image-set( <image-set-option># ) +where <image-set-option> = [ <image> | <string> ] <resolution> and + <string> is an <url> +``` + +### 値 + +- `<image>` + - : [`<image>`](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。 +- `<string>` + - : 画像への `url()` です。 +- `<resolution>`{{optional_inline}} + - : [`<resolution>`](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。 +- `type(<string>)`{{optional_inline}} + - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。 + +## 例 + +### image-set() を使用して代替の background-image オプションの提供 + +この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。 + +{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} + +> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。 + +### image-set() を使用して別な画像形式を提供 + +次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。 + +{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} + +#### 代替画像の提供 + +`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。 + +```css +.box { + background-image: url("large-balloons.jpg"); + background-image: image-set( + url("large-balloons.avif") type("image/avif"), + url("large-balloons.jpg") type("image/jpeg")); +} +``` + +## アクセシビリティの考慮 + +<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p> + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("element()")}} +- {{cssxref("url()")}} +- {{cssxref("<gradient>")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/index.html b/files/ja/web/css/image/index.html deleted file mode 100644 index a719ebf3e6..0000000000 --- a/files/ja/web/css/image/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: <image> -slug: Web/CSS/image -tags: - - CSS - - CSS Data Type - - CSS Images - - Data Type - - Graphics - - Layout - - Reference - - Web -translation_of: Web/CSS/image ---- -<p>{{CSSRef}}</p> - -<p><strong><code><image></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の画像を表現します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><image></code> データ型は以下のいずれかによって表すことができます。</p> - -<ul> - <li>{{CSSxRef("<url>")}} データ型で記述された画像</li> - <li>{{CSSxRef("<gradient>")}} データ型</li> - <li>{{CSSxRef("element")}} 関数で定義されたウェブページの一部</li> - <li>{{CSSxRef("image()")}} 関数で定義された画像、画像フラグメント、単色の色</li> - <li>{{CSSxRef("cross-fade")}} 関数で定義された2つ以上の画像の合成</li> - <li>{{CSSxRef("image-set")}} 関数で定義された、解像度に基づいて定義された画像の選択</li> -</ul> - -<h2 id="Description" name="Description">解説</h2> - -<p>CSS はさまざま種類の画像を扱うことができます。</p> - -<ul> - <li>JPEG や PNG やその他の<a href="https://en.wikipedia.org/wiki/Raster_graphics">ラスタ形式</a>など、<ruby><em>固有の寸法</em><rp> (</rp><rt><em>intrinsic dimensions</em></rt><rp>)</rp></ruby> (自然の寸法) を持つ画像。</li> - <li>一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、<em>複数の固有の寸法</em>を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)</li> - <li>SVG またはその他の<a href="https://en.wikipedia.org/wiki/Vector_graphics">ベクター形式</a>のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。</li> - <li id="no_intrinsic">CSS のグラデーションなど、<em>固有の寸法がなく、固有のアスペクト比もない</em>画像。</li> -</ul> - -<p>CSS はオブジェクトの<em>正しい</em>寸法を、 (1) <em>固有の寸法</em>、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などの CSS プロパティで定義された<em>指定された寸法</em>、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような<em>既定の寸法</em>によって特定します。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">オブジェクトの種類 (CSS プロパティ)</th> - <th scope="col">既定のオブジェクトの寸法</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{CSSxRef("background-image")}}</td> - <td>要素の background の置かれる領域の寸法</td> - </tr> - <tr> - <td>{{CSSxRef("list-style-image")}}</td> - <td><code>1em</code> の文字の寸法</td> - </tr> - <tr> - <td>{{CSSxRef("border-image-source")}}</td> - <td>要素の境界画像領域の寸法</td> - </tr> - <tr> - <td>{{CSSxRef("cursor")}}</td> - <td>クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法</td> - </tr> - <tr> - <td>{{CSSxRef("mask-image")}}</td> - <td>?</td> - </tr> - <tr> - <td>{{CSSxRef("shape-outside")}}</td> - <td>?</td> - </tr> - <tr> - <td>{{CSSxRef("mask-border-source")}}</td> - <td>?</td> - </tr> - <tr> - <td>@counter-style の {{CSSxRef("symbols")}}</td> - <td>危険性のある機能です。対応している場合、クライアントのシステムでのカーソルの寸法に合わせたブラウザー定義の寸法です。</td> - </tr> - <tr> - <td>擬似要素 ({{CSSxRef("::after")}} または {{cssxref("::before")}}) の {{CSSxRef("content")}}</td> - <td>300px × 150px の矩形</td> - </tr> - </tbody> -</table> - -<p>正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。</p> - -<ul> - <li>指定された寸法に<em>幅と高さの両方</em>が定義されていれば、その値が実際の寸法に使われます。</li> - <li>指定された寸法に<em>幅と高さのどちらかのみ</em>が定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。</li> - <li>指定された寸法が<em>幅と高さを定義していない</em>ときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。</li> -</ul> - -<div class="note"><strong>注:</strong> すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は<a href="#Browser_compatibility">ブラウザーの互換性</a>の節をご覧ください。</div> - -<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 "WCAG を理解する ― ガイドライン 1.1 の解説"</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="Examples" name="Examples">例</h2> - -<h3 id="Valid_images" name="Valid_images">有効な画像</h3> - -<pre class="brush: css example-good notranslate">url(test.jpg) /* <url>、但し test.jpg は実在する画像 */ -linear-gradient(blue, red) /* <gradient> */ -element(#realid) /* element() 関数で参照されるウェブページの一部、 - ページ上に "realid" が実在する ID である場合 */ -image(ltr 'arrow.png#xywh=0,0,16,16', red) - /* arrow.png が対応している画像であれば、 <url> の元画像の - 左上から 16x16 を選択し、そうでなければ赤一色の見本になります。 - 言語が右書きの場合は、画像は水平方向に反転します。 */ -cross-fade(20% url(twenty.png), url(eighty.png)) - /* 多重露光の画像で、 twenty が 20% の露光で、 - eighty が 80% の露光になる */ -image-set('test.jpg' 1x, 'test-2x.jpg' 2x) - /* 様々な解像度による画像の選択 */</pre> - -<h3 id="Invalid_images" name="Invalid_images">無効な画像</h3> - -<pre class="brush: css example-bad notranslate">nourl.jpg /* 画像ファイルは url() 関数により示す必要がある */ -url(report.pdf) /* url() 関数で指すファイルは画像でなければならない */ -element(#fakeid) /* 要素 ID はページ上に実在する ID でなければならない */ -image(z.jpg#xy=0,0) /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */ -image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */ -</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("CSS4 Images", "#typedef-image", "<image>")}}</td> - <td>{{Spec2("CSS4 Images")}}</td> - <td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("image-resolution")}} を追加</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Images", "#typedef-image", "<image>")}}</td> - <td>{{Spec2("CSS3 Images")}}</td> - <td>初回定義。これ以前は <code><image></code> データ型の明示的な定義はなし。画像は <code>url()</code> 関数記法でしか定義できなかった</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.image")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("<gradient>")}}</li> - <li>{{CSSxRef("element")}}</li> - <li>{{CSSxRef("imagefunction", "image()")}}</li> - <li>{{CSSxRef("image-set")}}</li> - <li>{{CSSxRef("cross-fade")}}</li> -</ul> diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md new file mode 100644 index 0000000000..26c1d0939c --- /dev/null +++ b/files/ja/web/css/image/index.md @@ -0,0 +1,114 @@ +--- +title: <image> +slug: Web/CSS/image +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image +translation_of: Web/CSS/image +--- +{{CSSRef}} + +**`<image>`** は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types)で、二次元の画像を表現します。 + +## 構文 + +`<image>` データ型は以下のいずれかによって表すことができます。 + +- {{CSSxRef("url()", "url()")}} データ型で記述された画像 +- {{CSSxRef("<gradient>")}} データ型 +- {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部 +- {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色 +- {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 +- {{CSSxRef("image/image-set()","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択 + +## 解説 + +CSS はさまざま種類の画像を扱うことができます。 + +- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、*自身の寸法* (自然の寸法) を持つ画像。 +- 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。) +- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 +- CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。 +</ul> + +CSS はオブジェクトの*実際の*寸法を、 (1) *自身の寸法*、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 + +| オブジェクトの種類 (CSS プロパティ) | 既定のオブジェクトの寸法 | +| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | +| {{CSSxRef("background-image")}} | 要素の背景が配置される領域の寸法 | +| {{CSSxRef("list-style-image")}} | `1em` の文字の寸法 | +| {{CSSxRef("border-image-source")}} | 要素の境界画像領域の寸法 | +| {{CSSxRef("cursor")}} | クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | +| {{CSSxRef("mask-image")}} | ? | +| {{CSSxRef("shape-outside")}} | ? | +| {{CSSxRef("mask-border-source")}} | ? | +| @counter-style の {{CSSxRef("symbols()")}} | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | +| 擬似要素 ({{CSSxRef("::after")}}/{{CSSxRef("::before")}}) の {{CSSxRef("content")}} | 300px × 150px の矩形 | + +正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。 + +- 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。 +- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像自身の寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。 +- 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。 + +> **Note:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +### 有効な画像 + +```css example-good +url(test.jpg) /* <url>、但し test.jpg は実在する画像 */ +linear-gradient(blue, red) /* <gradient> */ +element(#realid) /* element() 関数で参照されるウェブページの一部、 + ページ上に "realid" が実在する ID である場合 */ +image(ltr 'arrow.png#xywh=0,0,16,16', red) + /* arrow.png が対応している画像であれば、 <url> の元画像の + 左上から 16x16 を選択し、そうでなければ赤一色の見本になります。 + 言語が右書きの場合は、画像は水平方向に反転します。 */ +cross-fade(20% url(twenty.png), url(eighty.png)) + /* 多重露光の画像で、 twenty が 20% の露光で、 + eighty が 80% の露光になる */ +image-set('test.jpg' 1x, 'test-2x.jpg' 2x) + /* 様々な解像度による画像の選択 */ +``` + +### 無効な画像 + +```css example-bad +nourl.jpg /* 画像ファイルは url() 関数により示す必要がある */ +url(report.pdf) /* url() 関数で指すファイルは画像でなければならない */ +element(#fakeid) /* 要素 ID はページ上に実在する ID でなければならない */ +image(z.jpg#xy=0,0) /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */ +image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("element()","element()")}} +- {{CSSxRef("image/image()", "image()")}} +- {{CSSxRef("image/image-set()","image-set()")}} +- {{CSSxRef("cross-fade()","cross-fade()")}} diff --git a/files/ja/web/css/image/paint()/index.md b/files/ja/web/css/image/paint()/index.md new file mode 100644 index 0000000000..78368413bd --- /dev/null +++ b/files/ja/web/css/image/paint()/index.md @@ -0,0 +1,103 @@ +--- +title: paint() +slug: Web/CSS/image/paint() +tags: + - CSS + - CSS Function + - CSS4-images + - Function + - Houdini + - Reference + - Web +browser-compat: css.types.image.paint +translation_of: Web/CSS/image/paint() +original_slug: Web/CSS/paint() +--- +{{CSSRef}}{{SeeCompatTable}} + +**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。 + +## 構文 + +```css +paint(workletName, parameters) +``` + +凡例 + +- _workletName_ + - : 登録された Worklet の名前です。 +- _parameters_ + - : PaintWorklet へ渡される省略可能な追加の引数です。 + +## 例 + +<h3 id="Basic_usage_example">基本的な使用例</h3> + +CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 + +```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> +``` + +```js hidden + CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +``` + +```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); +} +``` + +boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。 + +{{EmbedLiveSample("Basic_usage_example", 300, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref('PaintWorklet')}} +- {{domxref('CSS Painting API')}} +- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide) +- {{cssxref("<image>")}} +- {{domxref("canvas")}} diff --git a/files/ja/web/css/inheritance/index.html b/files/ja/web/css/inheritance/index.html index bf2dd3f663..9bf6dfaa86 100644 --- a/files/ja/web/css/inheritance/index.html +++ b/files/ja/web/css/inheritance/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/inheritance <h2 id="Non-inherited_properties" name="Non-inherited_properties">非継承プロパティ</h2> -<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value" title="ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p> +<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p> <p>非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、</p> diff --git a/files/ja/web/css/length/index.html b/files/ja/web/css/length/index.html deleted file mode 100644 index 35a96136a5..0000000000 --- a/files/ja/web/css/length/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: <length> -slug: Web/CSS/Length -tags: - - CSS - - CSS データ型 - - CSS 値と単位 - - Layout - - Reference - - Web - - length - - ウェブ - - レイアウト -translation_of: Web/CSS/length ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code><length></code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、長さの値を表します。長さは {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。</p> - -<div class="note"> -<p><strong>注:</strong> {{cssxref("<percentage>")}} 値も CSS の長さに使用され、 <code><length></code> 値を受け付ける同じプロパティの一部でも使用することができますが、 <code><length></code> 値と同じものではありません。 {{cssxref("<length-percentage>")}} を参照してください。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><length></code> データ型は一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 <code>0</code> の後の単位は省略可能です。</p> - -<div class="note"> -<p><strong>注:</strong> 負の <code><length></code> を許容するプロパティとそうでないプロパティがあります。</p> -</div> - -<h3 id="Units" name="Units">単位</h3> - -<h4 id="Relative_length_units" name="Relative_length_units">相対的な長さの単位</h4> - -<p>相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、<a href="/ja/docs/Web/CSS/line-height">行の高さ</a>であったり、 {{glossary("viewport")}} の寸法であったりします。</p> - -<h5 id="Font-relative_lengths" name="Font-relative_lengths">フォント関連の長さ</h5> - -<p>フォント関連の長さは、 <code><length></code> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。</p> - -<div class="note"> -<p><strong>注:</strong> これらの単位、特に <code>em</code> と <code>rem</code> は、ユーザーがフォントの大きさを変更しても <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ページの vertical rhythm</a> を維持するような、拡縮可能なレイアウトを作成するためによく使われます。</p> -</div> - -<dl> - <dt><code id="cap">cap</code> {{experimental_inline}}</dt> - <dd>その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。</dd> - <dt><code id="ch">ch</code></dt> - <dd>その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。<br> - <br> - "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。</dd> - <dt><code id="em">em</code></dt> - <dd>その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。</dd> - <dt><code id="ex">ex</code></dt> - <dd>その要素の {{Cssxref("font")}} における <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは <code>1ex ≈ 0.5em </code> です。</dd> - <dt><code id="ic">ic</code> {{experimental_inline}}</dt> - <dd>描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。</dd> - <dt><code id="lh">lh</code> {{experimental_inline}}</dt> - <dd>使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。</dd> - <dt><code id="rem">rem</code></dt> - <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します（多くのブラウザーでは既定値は <code>16px</code> ですが、ユーザー設定によって変わる可能性があります）。</dd> - <dt><code id="rlh">rlh</code> {{experimental_inline}}</dt> - <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。</dd> -</dl> - -<h5 id="Viewport-percentage_lengths" name="Viewport-percentage_lengths">ビューポートのパーセント値による長さ</h5> - -<p>ビューポートのパーセント値による長さは、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な <code><length></code> 値を定義します。ビューポートの長さは {{cssxref("@page")}} で宣言されたブロックでは無効です。</p> - -<dl> - <dt><code id="vh">vh</code></dt> - <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における高さの1%と同じです。</dd> - <dt><code id="vw">vw</code></dt> - <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における幅の1%と同じです。</dd> - <dt><code id="vi">vi</code> {{experimental_inline}}</dt> - <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#inline-dimension">インライン軸</a>の寸法の1%と同じです。</dd> - <dt><code id="vb">vb</code> {{experimental_inline}}</dt> - <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#block-dimension">ブロック軸</a>の寸法の1%と同じです。</dd> - <dt><code id="vmin">vmin</code></dt> - <dd><code>vw</code> と <code>vh</code> の小さい方です。</dd> - <dt><code id="vmax">vmax</code></dt> - <dd><code>vw</code> と <code>vh</code> の大きい方です。</dd> -</dl> - -<h4 id="Absolute_length_units" name="Absolute_length_units">絶対的な長さの単位</h4> - -<p>絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合（印刷レイアウトなど）に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。</p> - -<p>低解像度の端末では、<code>px</code> の単位が物理的な<em>参照ピクセル</em>を表し、その他の単位はこれを基準に定義されます。例えば <code>1in</code> は <code>96px</code> と定義され、これは <code>72pt</code> と等しくなります。このような端末では結果的に、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p> - -<p>高解像度の端末では、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) は対応する物理的な単位と同じになります。従って、 <code>px</code> の単位は、それ (1インチの1/96) を基準に定義されます。</p> - -<div class="note"> -<p><strong>注:</strong> たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 <code>font-size</code> を設定する場合には、 (<code>em</code> や <code>rem</code> のような) 相対的な単位が適しています。</p> -</div> - -<dl> - <dt><code id="px">px</code></dt> - <dd>1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、<em>プリンター</em>や<em>高解像度の画面</em>では、 CSS の1ピクセルが端末の複数ピクセルになることがります。 <code>1px</code> = <code>1in</code> の1/96です。</dd> - <dt><code id="cm">cm</code></dt> - <dd>1センチメートルです。 <code>1cm</code> = <code>96px/2.54</code> です。</dd> - <dt><code id="mm">mm</code></dt> - <dd>1ミリメートルです。 <code>1mm</code> = <code>1cm</code> の1/10です。</dd> - <dt><code id="q">Q</code> {{experimental_inline}}</dt> - <dd>1/4ミリメートルです。 <code>1Q</code> = <code>1cm</code> の1/40です。</dd> - <dt><code id="in">in</code></dt> - <dd>1インチです。 <code>1in</code> = <code>2.54cm</code> = <code>96px</code> です。</dd> - <dt><code id="pc">pc</code></dt> - <dd>1パイカです。 <code>1pc</code> = <code>12pt</code> = <code>1in</code> の1/6です。</dd> - <dt><code id="pt">pt</code></dt> - <dd>1ポイントです。 <code>1pt</code> = <code>1in</code> の1/72です。</dd> - <dt><code id="mozmm">mozmm</code> {{non-standard_inline}}, Firefox 59 で削除</dt> - <dd>実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。</dd> -</dl> - -<h2 id="Interpolation" name="Interpolation">補間</h2> - -<p>アニメーションの場合、 <code><length></code> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって定められます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Length_unit_comparison" name="Length_unit_comparison">長さの単位の比較</h3> - -<p>以下のデモでは、入力欄に <code><length></code> の値 (例えば <code>300px</code>, <code>50%</code>, <code>30vw</code>) を入力することができ、 <kbd>Return</kbd> を押したときにバーの長さが反映されます。</p> - -<p>これにより、様々な長さの単位の効果を比較し対照させることができます。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="outer"> - <div class="input-container"> - <label>長さを入力してください:</label> - <input type="text" id="length"> - </div> - <div class="inner"> - - </div> -</div> -<div class="results"> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">html { - font-family: sans-serif; - font-weight: bold; - box-sizing: border-box; -} - -.outer { - width: 100%; - height: 50px; - background-color: #eee; - position: relative; -} - -.inner { - height: 50px; - background-color: #999; - box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), - inset -3px -3px 5px rgba(0,0,0,0.5); -} - -.result { - height: 20px; - background-color: #999; - box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), - inset -3px -3px 5px rgba(0,0,0,0.5); - background-color: orange; - display: flex; - align-items: center; - margin-top: 10px; -} - -.result code { - position: absolute; - margin-left: 20px; -} - -.results { - margin-top: 10px; -} - -.input-container { - position: absolute; - display: flex; - justify-content: flex-start; - align-items: center; - height: 50px; -} - -label { - margin: 0 10px 0 20px; -}</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner'); -const inputElem = document.querySelector('input'); -const resultsDiv = document.querySelector('.results'); - -inputElem.addEventListener('change', () => { - inputDiv.style.width = inputElem.value; - - const result = document.createElement('div'); - result.className = 'result'; - result.style.width = inputElem.value; - result.innerHTML = `<code>width: ${inputElem.value}</code>`; - resultsDiv.appendChild(result); - - inputElem.value = ''; - inputElem.focus(); -})</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}</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('CSS4 Values', '#lengths', '<length>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code> の単位を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#lengths', '<length>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> の単位を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td><code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の明示的な定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#length-units', '<length>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義。 <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の暗黙的な定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.length")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位チュートリアル</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位リファレンス</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a></li> -</ul> diff --git a/files/ja/web/css/length/index.md b/files/ja/web/css/length/index.md new file mode 100644 index 0000000000..2a08df09c4 --- /dev/null +++ b/files/ja/web/css/length/index.md @@ -0,0 +1,224 @@ +--- +title: <length> +slug: Web/CSS/length +tags: + - CSS + - CSS Data Type + - Data Type + - Layout + - Reference + - Web + - length +browser-compat: css.types.length +translation_of: Web/CSS/length +--- +{{CSSRef}} + +**`<length>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、長さの値を表します。長さは {{Cssxref("width")}}、{{Cssxref("height")}}、{{Cssxref("margin")}}、{{Cssxref("padding")}}、{{Cssxref("border-width")}}、{{Cssxref("font-size")}}、{{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。 + +> **Note:** {{cssxref("<percentage>")}} 値も `<length>` 値を受け付ける同じプロパティの一部でも使用することができますが、 `<length>` 値と同じものではありません。 {{cssxref("<length-percentage>")}} を参照してください。 + +## 構文 + +`<length>` データ型は一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 `0` の後の単位は省略可能です。 + +> **Note:** 負の `<length>` を許容するプロパティとそうでないプロパティがあります。 + +### 単位 + +#### 相対的な長さの単位 + +相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、[行の高さ](/ja/docs/Web/CSS/line-height)であったり、{{glossary("viewport", "ビューポート")}}の寸法であったりします。 + +##### フォントの相対長 + +フォントの相対長では、 `<length>` の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性の寸法で定義します。 + +> **Note:** これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更しても[ページの縦方向のリズム](https://24ways.org/2006/compose-to-a-vertical-rhythm)を維持する、スケーラブルなレイアウトを作るためによく使われます。 + +- `cap` {{experimental_inline}} + - : その要素の {{Cssxref("font")}} における "cap height" (ふつうの大文字の高さ) を表します。 +- `ch` + + - : その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。 + + "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。 + +- `em` + - : その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。 +- `ex` + - : その要素の {{Cssxref("font")}} における [x-height](https://en.wikipedia.org/wiki/X-height) です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは `1ex ≈ 0.5em` です。 +- `ic` {{experimental_inline}} + - : 描画に使用されるフォントにおける「水」 (CJK water ideograph, U+6C34) の文字の advance measure と同じです。 +- `lh` {{experimental_inline}} + - : 使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。 +- `rem` + - : ルート要素 (ふつうは {{HTMLElement("html")}}) の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します (多くのブラウザーでは既定値は `16px` ですが、ユーザー設定によって変わる可能性があります)。 +- `rlh` {{experimental_inline}} + - : ルート要素 (ふつうは {{HTMLElement("html")}}) の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。 + +##### ビューポートのパーセント値による寸法 + +ビューポートのパーセント値による寸法は、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な `<length>` 値を定義します。ビューポートの寸法は {{cssxref("@page")}} で宣言されたブロックでは無効です。 + +- `vh` + - : ビューポートの初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における高さの 1% と同じです。 +- `vw` + - : ビューポートの初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における幅の 1% と同じです。 +- `vi` {{experimental_inline}} + - : 初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における、ルート要素の[インライン軸](/ja/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline)の寸法の 1% と同じです。 +- `vb` {{experimental_inline}} + - : 初期値の[包含ブロック](/ja/docs/Web/CSS/Containing_block)における、ルート要素の[ブロック軸](/ja/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline)の寸法の 1% と同じです。 +- `vmin` + - : `vw` と `vh` の小さい方です。 +- `vmax` + - : `vw` と `vh` の大きい方です。 +</dl> + +#### 絶対的な長さの単位 + +絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合 (印刷レイアウトなど) に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。 + +低解像度の端末では、`px` の単位が物理的な*参照ピクセル*を表し、その他の単位はこれを基準に定義されます。例えば `1in` は `96px` と定義され、これは `72pt` と等しくなります。このような端末では結果的に、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p> + +<p>高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。</p> + +> **Note:** たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、 (`em` や `rem` のような) 相対的な単位が適しています。 + +- `px` + - : 1 ピクセルです。画面表示では、伝統的に端末の 1 ピクセル (ドット) を表します。しかし、*プリンター*や*高解像度の画面*では、 CSS の 1 ピクセルが端末の複数ピクセルになることがあります。 `1px` = `1in` の 1/96 です。 +- `cm` + - : 1センチメートルです。 `1cm` = `96px/2.54` です。 +- `mm` + - : 1ミリメートルです。 `1mm` = `1cm` の1/10です。 +- `Q` {{experimental_inline}} + - : 1/4ミリメートルです。 `1Q` = `1cm` の1/40です。 +- `in` + - : 1インチです。 `1in` = `2.54cm` = `96px` です。 +- `pc` + - : 1パイカです。 `1pc` = `12pt` = `1in` の1/6です。 +- `pt` + - : 1ポイントです。 `1pt` = `1in` の1/72です。 + +## 補間 + +アニメーションの場合、 `<length>` データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた[タイミング関数](/ja/docs/Web/CSS/easing-function)によって定められます。 + +## 例 + +<h3 id="Length_unit_comparison">長さの単位の比較</h3> + +以下のデモでは、入力欄に `<length>` の値 (例えば `300px`, `50%`, `30vw`) を入力することができ、 <kbd>Return</kbd> を押したときにバーの長さが反映されます。 + +これにより、様々な長さの単位の効果を比較し対照させることができます。 + +#### HTML + +```html +<div class="outer"> + <div class="input-container"> + <label>長さを入力してください:</label> + <input type="text" id="length"> + </div> + <div class="inner"> + + </div> +</div> +<div class="results"> +</div> +``` + +#### CSS + +```css +html { + font-family: sans-serif; + font-weight: bold; + box-sizing: border-box; +} + +.outer { + width: 100%; + height: 50px; + background-color: #eee; + position: relative; +} + +.inner { + height: 50px; + background-color: #999; + box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), + inset -3px -3px 5px rgba(0,0,0,0.5); +} + +.result { + height: 20px; + background-color: #999; + box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), + inset -3px -3px 5px rgba(0,0,0,0.5); + background-color: orange; + display: flex; + align-items: center; + margin-top: 10px; +} + +.result code { + position: absolute; + margin-left: 20px; +} + +.results { + margin-top: 10px; +} + +.input-container { + position: absolute; + display: flex; + justify-content: flex-start; + align-items: center; + height: 50px; +} + +label { + margin: 0 10px 0 20px; +} +``` + +#### JavaScript + +```js +const inputDiv = document.querySelector('.inner'); +const inputElem = document.querySelector('input'); +const resultsDiv = document.querySelector('.results'); + +inputElem.addEventListener('change', () => { + inputDiv.style.width = inputElem.value; + + const result = document.createElement('div'); + result.className = 'result'; + result.style.width = inputElem.value; + result.innerHTML = `<code>width: ${inputElem.value}</code>`; + resultsDiv.appendChild(result); + + inputElem.value = ''; + inputElem.focus(); +}) +``` + +#### 結果 + +{{EmbedLiveSample('Length_unit_comparison','100%', 700)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 値と単位チュートリアル](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) +- [CSS 値と単位リファレンス](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model) diff --git a/files/ja/web/css/list-style-type/index.html b/files/ja/web/css/list-style-type/index.html deleted file mode 100644 index fb9dfc1575..0000000000 --- a/files/ja/web/css/list-style-type/index.html +++ /dev/null @@ -1,610 +0,0 @@ ---- -title: list-style-type -slug: Web/CSS/list-style-type -tags: - - CSS - - CSS プロパティ - - CSS リスト - - Reference -translation_of: Web/CSS/list-style-type ---- -<div>{{CSSRef}}</div> - -<p><strong><code>list-style-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p> - -<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>マーカーの<a href="/ja/docs/CSS/color_value" title="color">色</a>は、適用先の要素における色の計算値と同じになります。</p> - -<p>既定で <code>display: list-item</code> の値を持っている要素はわずかです ({{HTMLElement("li")}} と {{HTMLElement("summary")}})。しかし、 <code>list-style-type</code> プロパティは {{cssxref("display")}} の値が <code>list-item</code> に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* マーカーの種類の一例 */ -list-style-type: disc; -list-style-type: circle; -list-style-type: square; -list-style-type: decimal; -list-style-type: georgian; -list-style-type: trad-chinese-informal; -list-style-type: kannada; - -/* <string> */ -list-style-type: '-'; - -/* @counter-style 規則に該当する識別子 */ -list-style-type: custom-counter-style; - -/* キーワード値 */ -list-style-type: none; - -/* グローバル値 */ -list-style-type: inherit; -list-style-type: initial; -list-style-type: unset; -</pre> - -<p>list-style-type プロパティは、以下のいずれかで定義することができます。</p> - -<ul> - <li>単一の <code><a href="#<custom-ident>"><custom-ident></a></code> 値</li> - <li>単一の <code><a href="#symbols()">symbols()</a></code> 値</li> - <li>単一の <code><a href="#<string>"><string></a></code> 値</li> - <li><code><a href="#none">none</a></code> キーワード</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><a id="<custom-ident>" name="<custom-ident>">{{cssxref("custom-ident", "<custom-ident>")}}</a></dt> - <dd>{{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。</dd> -</dl> - -<dl> - <dt><a id="symbols()" name="symbols()">{{cssxref("symbols()")}}</a></dt> - <dd>無名のリストスタイルを定義します。</dd> - <dt><a id="<string>" name="<string>">{{cssxref("<string>")}}</a></dt> - <dd>特定の文字列を、リストのマーカーとして使用します。</dd> - <dt><a id="none" name="none"><code>none</code></a></dt> - <dd>マーカーは表示されません。</dd> -</dl> - -<dl style=""> - <dt><code>disc</code></dt> - <dd> - <ul style="list-style-type: disc;"> - <li>塗りつぶされた円形 (既定値)</li> - </ul> - </dd> - <dt><code>circle</code></dt> - <dd> - <ul style="list-style-type: circle;"> - <li>中空円</li> - </ul> - </dd> - <dt><code>square</code></dt> - <dd> - <ul style="list-style-type: square;"> - <li>塗りつぶされた四角形</li> - </ul> - </dd> - <dt><code>decimal</code></dt> - <dd> - <ul style="list-style-type: decimal;"> - <li>数値</li> - <li>既定では 1 から始まります</li> - </ul> - </dd> - <dt><code>cjk-decimal</code> {{experimental_inline}}</dt> - <dd> - <ul> - <li>漢数字</li> - <li>例: 一, 二, 三, ..., 九八, 九九, 一〇〇</li> - </ul> - </dd> - <dt><code>decimal-leading-zero</code></dt> - <dd> - <ul style="list-style-type: decimal-leading-zero;"> - <li>数値</li> - <li>ゼロ埋めされて表示されます</li> - <li>例: 01, 02, 03, … 98, 99</li> - </ul> - </dd> - <dt><code>lower-roman</code></dt> - <dd> - <ul style="list-style-type: lower-roman;"> - <li>小文字のローマ数字</li> - <li>例: i, ii, iii, iv, v…</li> - </ul> - </dd> - <dt><code>upper-roman</code></dt> - <dd> - <ul style="list-style-type: upper-roman;"> - <li>大文字のローマ数字</li> - <li>例: I, II, III, IV, V…</li> - </ul> - </dd> - <dt><code>lower-greek</code></dt> - <dd> - <ul style="list-style-type: lower-greek;"> - <li>小文字のギリシャ語</li> - <li>アルファ、ベータ、ガンマ、…</li> - <li>例: α, β, γ…</li> - </ul> - </dd> - <dt><code>lower-alpha</code></dt> - <dt><code>lower-latin</code></dt> - <dd> - <ul style="list-style-type: lower-alpha;"> - <li>小文字の ASCII 文字</li> - <li>例: a, b, c, … z</li> - <li><code>lower-latin</code> は IE7 以前は対応していません</li> - <li>{{anch("Browser compatibility")}} の節も参照して下さい</li> - </ul> - </dd> - <dt><code>upper-alpha</code></dt> - <dt><code>upper-latin</code></dt> - <dd> - <ul style="list-style-type: upper-alpha;"> - <li>大文字の ASCII 文字</li> - <li>例: A, B, C, … Z</li> - <li><code>upper-latin</code> は IE7 以前は対応していません</li> - </ul> - </dd> - <dt><code>arabic-indic</code></dt> - <dt><code>-moz-arabic-indic</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>armenian</code></dt> - <dd> - <ul style="list-style-type: armenian;"> - <li>伝統的なアルメニア語の数値表記</li> - <li>(ayb/ayp, ben/pen, gim/keem…</li> - </ul> - </dd> - <dt><code>bengali</code></dt> - <dt><code>-moz-bengali</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>cambodian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: cambodian;"> - <li>例</li> - <li><code>khmer</code> と同義</li> - </ul> - </dd> - <dt><code>cjk-earthly-branch</code></dt> - <dt><code>-moz-cjk-earthly-branch</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>cjk-heavenly-stem</code></dt> - <dt><code>-moz-cjk-heavenly-stem</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: cjk-ideographic;"> - <li><code>trad-chinese-informal</code> と同義</li> - <li>例: 一萬一千一百一十一</li> - </ul> - </dd> - <dt><code>devanagari</code></dt> - <dt><code>-moz-devanagari</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: ethiopic-numeric;"> - <li>例</li> - </ul> - </dd> - <dt><code>georgian</code></dt> - <dd> - <ul style="list-style-type: georgian;"> - <li>伝統的なジョージア語の数値表記</li> - <li>例: an, ban, gan, … he, tan, in…</li> - </ul> - </dd> - <dt><code>gujarati</code></dt> - <dt><code>-moz-gujarati</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>gurmukhi</code></dt> - <dt><code>-moz-gurmukhi</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>hebrew</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hebrew;"> - <li>伝統的なヘブライ語の数値表記</li> - </ul> - </dd> - <dt><code>hiragana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana;"> - <li>例: あ, い, う, え, お, か, き…</li> - <li>日本語の「あいうえお」</li> - </ul> - </dd> - <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: hiragana-iroha;"> - <li>例: い, ろ, は, に, ほ, へ, と…</li> - <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li> - </ul> - </dd> - <dt><code>japanese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-formal;"> - <li>法的または財務の文書で使用される、日本語の公的な数値表記</li> - <li>例: 壱萬壱阡壱百壱拾壱</li> - <li>似ている別の文字に書き換えられないようにするための漢字</li> - </ul> - </dd> - <dt><code>japanese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: japanese-informal;"> - <li>日本語の日常的な数値表記</li> - </ul> - </dd> - <dt><code>kannada</code></dt> - <dt><code>-moz-kannada</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana;"> - <li>例: ア, イ, ウ, エ, オ, カ, キ…</li> - <li>日本語の「あいうえお」</li> - </ul> - </dd> - <dt><code>katakana-iroha</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: katakana-iroha;"> - <li>例: イ, ロ, ハ, ニ, ホ, ヘ, ト…</li> - <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li> - </ul> - </dd> - <dt><code>khmer</code></dt> - <dt><code>-moz-khmer</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hangul-formal;"> - <li>朝鮮のハングルの数値表記</li> - <li>例: 일만 일천일백일십일</li> - </ul> - </dd> - <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-formal;"> - <li>公的な朝鮮の漢数字</li> - <li>例: 壹萬 壹仟壹百壹拾壹</li> - </ul> - </dd> - <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: korean-hanja-informal;"> - <li>朝鮮の漢数字</li> - <li>例: 萬 一千百十一</li> - </ul> - </dd> - <dt><code>lao</code></dt> - <dt><code>-moz-lao</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>lower-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: lower-armenian;"> - <li>例</li> - </ul> - </dd> - <dt><code>malayalam</code></dt> - <dt><code>-moz-malayalam</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>mongolian</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: mongolian;"> - <li>例</li> - </ul> - </dd> - <dt><code>myanmar</code></dt> - <dt><code>-moz-myanmar</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>oriya</code></dt> - <dt><code>-moz-oriya</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>persian</code> {{experimental_inline}}</dt> - <dt><code>-moz-persian</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-formal;"> - <li>公的な簡体字中国語の数値表記</li> - <li>例: 壹万壹仟壹佰壹拾壹</li> - </ul> - </dd> - <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: simp-chinese-informal;"> - <li>簡体字中国語の日常的な数値表記</li> - <li>例: 一万一千一百一十一</li> - </ul> - </dd> - <dt><code>tamil</code> {{experimental_inline}}</dt> - <dt><code>-moz-tamil</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>telugu</code></dt> - <dt><code>-moz-telugu</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>thai</code></dt> - <dt><code>-moz-thai</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>tibetan</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: tibetan;"> - <li>例</li> - </ul> - </dd> - <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-formal;"> - <li>公的な繁体字中国語の数値表記</li> - <li>例: 壹萬壹仟壹佰壹拾壹</li> - </ul> - </dd> - <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: trad-chinese-informal;"> - <li>公的な場では使用しない、繁体字中国語の数値表記</li> - <li>例: 一萬一千一百一十一</li> - </ul> - </dd> - <dt><code>upper-armenian</code> {{experimental_inline}}*</dt> - <dd> - <ul style="list-style-type: upper-armenian;"> - <li>例</li> - </ul> - </dd> - <dt><code>disclosure-open</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-open;"> - <li>{{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号</li> - </ul> - </dd> - <dt><code>disclosure-closed</code> {{experimental_inline}}</dt> - <dd> - <ul style="list-style-type: disclosure-closed;"> - <li>{{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号</li> - </ul> - </dd> -</dl> - -<h3 id="Non-standard_extensions" name="Non-standard_extensions">標準外の拡張</h3> - -<p>Mozilla (Firefox), Blink (Chrome and Opera), WebKit (Safari) が拡張した、様々な言語のマーカーです。ブラウザーの互換性の表で、ブラウザーがどの拡張に対応しているかを確認してください。</p> - -<dl style=""> - <dt><code>-moz-ethiopic-halehame</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>-moz-ethiopic-halehame-am</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-er</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-er</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>ethiopic-halehame-ti-et</code></dt> - <dt><code>-moz-ethiopic-halehame-ti-et</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> - <dt><code>hangul</code></dt> - <dt><code>-moz-hangul</code></dt> - <dd> - <ul style=""> - <li>例</li> - <li>例</li> - <li>例</li> - </ul> - </dd> - <dt><code>hangul-consonant</code></dt> - <dt><code>-moz-hangul-consonant</code></dt> - <dd> - <ul style=""> - <li>例</li> - <li>例</li> - <li>例</li> - </ul> - </dd> - <dt><code>urdu</code></dt> - <dt><code>-moz-urdu</code></dt> - <dd> - <ul style=""> - <li>例</li> - </ul> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">ol.normal { - list-style-type: upper-alpha; -} - -/* or use the shortcut "list-style": */ -ol.shortcut { - list-style: upper-alpha; -} -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><ol class="normal">List 1 - <li>Hello</li> - <li>World</li> - <li>What's up?</li> -</ol> - -<ol class="shortcut">List 2 - <li>Looks</li> - <li>Like</li> - <li>The</li> - <li>Same</li> -</ol> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples","200","300")}}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>読み上げソフトの <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> には、 <code>list-style-type</code> の値に <code>none</code> が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に<a href="https://en.wikipedia.org/wiki/Zero-width_space">幅ゼロの空白</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。</p> - -<pre class="brush: css notranslate">ul { - list-style: none; -} - -ul li::before { - content: "\200B"; -} - -</pre> - -<ul> - <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none – Unfettered Thoughts</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Notes" name="Notes">メモ</h2> - -<ul> - <li>一部の <code>list-style-types</code> の表示には、適切なフォントのインストールが必要です。</li> - <li><code>cjk-ideographic</code> は <code>trad-chinese-informal</code> と同義です。後方互換性のために残されています。</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('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}</td> - <td>{{Spec2("CSS3 Counter Styles")}}</td> - <td>CSS2.1 counters を再定義。<br> - <code>@counter-style</code> 規則に対応するため構文を拡張。<br> - <code>@counter-style</code> を使用して、一般的なスタイルである <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code>, <code>disclosure-closed</code> を定義。<br> - <code><counter-style></code> を <code>symbols()</code> 表記で拡張。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td>{{cssxref("<string>")}} の対応を追加し、 <code>@counter-style</code> 規則で使われる識別子をキーワードに追加。<br> - 単純な <code><string></code> の対応を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.list-style-type")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li> -</ul> diff --git a/files/ja/web/css/list-style-type/index.md b/files/ja/web/css/list-style-type/index.md new file mode 100644 index 0000000000..518ab2a49c --- /dev/null +++ b/files/ja/web/css/list-style-type/index.md @@ -0,0 +1,581 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference + - recipe:css-property +browser-compat: css.properties.list-style-type +translation_of: Web/CSS/list-style-type +--- +{{CSSRef}} + +**`list-style-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p> + +{{EmbedInteractiveExample("pages/css/list-style-type.html")}} + +マーカーの[色](/ja/docs/Web/CSS/color_value)は、適用先の要素における色の計算値と同じになります。 + +わずかな要素 ({{HTMLElement("li")}} と {{HTMLElement("summary")}}) だけが既定で `display: list-item` の値を持っています。しかし、 `list-style-type` プロパティは {{cssxref("display")}} の値が `list-item` に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p> + +## 構文 + +```css +/* マーカーの種類の一例 */ +list-style-type: disc; +list-style-type: circle; +list-style-type: square; +list-style-type: decimal; +list-style-type: georgian; +list-style-type: trad-chinese-informal; +list-style-type: kannada; + +/* <string> の値 */ +list-style-type: '-'; + +/* @counter-style 規則に一致する識別子 */ +list-style-type: custom-counter-style; + +/* キーワード値 */ +list-style-type: none; + +/* グローバル値 */ +list-style-type: inherit; +list-style-type: initial; +list-style-type: revert; +list-style-type: unset; +``` + +`list-style-type` プロパティは、以下のいずれかで定義することができます。 + +- 単一の `<custom-ident>` 値 +- 単一の `symbols()` 値 +- 単一の `<string>` 値 +- キーワード `none` + +注意事項: + +- 種類によっては期待通りに表示するために適切なフォントのインストールが必要です。 +- `cjk-ideographic` は `trad-chinese-informal` と同じです。歴史的な理由で存在しています。 + +### 値 + +- {{cssxref("custom-ident", "<custom-ident>")}} + - : {{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。 +- {{cssxref("symbols()")}} + - : 無名のリストスタイルを定義します。 +- {{cssxref("<string>")}} + - : 特定の文字列を、リストのマーカーとして使用します。 +- `none` + - : マーカーは表示されません。 +- `disc` + - : 塗りつぶされた円形です (既定値)。 +- `circle` + - : 中空円です。 +- `square` + - : 塗りつぶされた四角形です。 +- `decimal` + - : 数値です。 1 から始まります。 +- `cjk-decimal` {{experimental_inline}} + - : 漢数字です。 +- `decimal-leading-zero` + - : 数値で、先頭がゼロ埋めされます。 +- `lower-roman` + - : 小文字のローマ数字です。 +- `upper-roman` + - : 大文字のローマ数字です。 +- `lower-greek` + - : 小文字の古代ギリシャ文字です。 +- `lower-alpha`, `lower-latin` + - : 小文字の ASCII 文字です。 +- `upper-alpha`, `upper-latin` + - : 大文字の ASCII 文字です。 +- `arabic-indic`, `-moz-arabic-indic` + - : アラビア－インド数字です。 +- `armenian` + - : 伝統的なアルメニア語の数値表記です。 +- `bengali`, `-moz-bengali` + - : ベンガル語の数値表記です。 +- `cambodian`/`khmer` + - : カンボジア／クメール語の数値表記です。 +- `cjk-earthly-branch`, `-moz-cjk-earthly-branch` + - : 漢字の「十二支」順です。 +- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem` + - : 漢字の「十干」順です。 +- `cjk-ideographic`{{experimental_inline}} + - : `trad-chinese-informal` と同じです。 +- `devanagari`, `-moz-devanagari` + - : デーヴァナーガリーの数値表記です。 +- `ethiopic-numeric` {{experimental_inline}} + - : エチオピア語の数値表記です。 +- `georgian` + - : 伝統的なジョージア語の数値表記です。 +- `gujarati`, `-moz-gujarati` + - : グジャラート語の数値表記です。 +- `gurmukhi`, `-moz-gurmukhi` + - : グルムキー語の数値表記です。 +- `hebrew` {{experimental_inline}} + - : 伝統的なヘブライ語の数値表記です。 +- `hiragana` {{experimental_inline}} + - : ひらがなの辞書順の文字です。 +- `hiragana-iroha` {{experimental_inline}} + - : ひらがなの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 +- `japanese-formal` {{experimental_inline}} + - : 法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。 +- `japanese-informal` {{experimental_inline}} + - : 日本語の日常的な数値表記です。 +- `kannada`, `-moz-kannada` + - : カンナダ語の数値表記です。 +- `katakana` {{experimental_inline}} + - : カタカナの辞書順の文字です。 +- `katakana-iroha` {{experimental_inline}} + - : カタカナの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 +- `korean-hangul-formal` {{experimental_inline}} + - : 韓国語のハングルの数値表記です。 +- `korean-hanja-formal` {{experimental_inline}} + - : 韓国語の公的な漢数字です。 +- `korean-hanja-informal` {{experimental_inline}} + - : 韓国語の漢数字です。 +- `lao`, `-moz-lao` + - : ラオス語の数値表記です。 +- `lower-armenian` {{experimental_inline}} + - : アルメニア語の小文字の数値表記です。 +- `malayalam`, `-moz-malayalam` + - : マラヤーラム語の数値表記です。 +- `mongolian` {{experimental_inline}} + - : モンゴル語の数値表記です。 +- `myanmar`, `-moz-myanmar` + - : ミャンマー語 (ビルマ語) の数値表記です。 +- `oriya`, `-moz-oriya` + - : オリヤー語の数値表記です。 +- `persian` {{experimental_inline}}, `-moz-persian` + - : ペルシャ語の数値表記です。 +- `simp-chinese-formal` {{experimental_inline}} + - : 公的な簡体字中国語の数値表記です。 +- `simp-chinese-informal` {{experimental_inline}} + - : 日常的な簡体字中国語の数値表記です。 +- `tamil` {{experimental_inline}}, `-moz-tamil` + - : タミル語の数値表記です。 +- `telugu`, `-moz-telugu` + - : テルグ語の数値表記です。 +- `thai`, `-moz-thai` + - : タイ語の数値表記です。 +- `tibetan` {{experimental_inline}}\* + - : チベット語の数値表記です。 +- `trad-chinese-formal` {{experimental_inline}} + - : 公的な繁体字中国語の数値表記です。 +- `trad-chinese-informal` {{experimental_inline}} + - : 日常的な繁体字中国語の数値表記です。 +- `upper-armenian` {{experimental_inline}}` + - : 伝統的なアルメニア語の大文字の数値表記です。 +- `disclosure-open` {{experimental_inline}} + - : {{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号 +- `disclosure-closed` {{experimental_inline}} + - : {{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号 + +### 標準外の拡張 + +Mozilla (Firefox)、Blink (Chrome、Opera)、WebKit (Safari) では、他の言語のリストの種類に対応するために、さらにいくつかの定義済みの種類が提供されています。どのブラウザーがどの拡張に対応しているかを確認するには、互換性一覧表を参照してください。 + +- `-moz-ethiopic-halehame` +- `-moz-ethiopic-halehame-am` +- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er` +- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et` +- `hangul`, `-moz-hangul` +- `hangul-consonant`, `-moz-hangul-consonant` +- `urdu`, `-moz-urdu` + +## アクセシビリティの考慮 + +画面リーダーの [VoiceOver](https://help.apple.com/voiceover/info/guide/) には、 `list-style-type` の値に `none` が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に[幅ゼロの空白](https://en.wikipedia.org/wiki/Zero-width_space)を[擬似コンテンツ](/ja/docs/Web/CSS/content)として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。 + +```css +ul { + list-style: none; +} + +ul li::before { + content: "\200B"; +} +``` + +- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/) +- [MDN WCAG の理解、ガイドライン 1.3 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Setting_list_item_markers">リスト項目マーカーの設定</h3> + +#### HTML + +```html +List 1 +<ol class="normal"> + <li>Hello</li> + <li>World</li> + <li>What's up?</li> +</ol> + +List 2 +<ol class="shortcut"> + <li>Looks</li> + <li>Like</li> + <li>The</li> + <li>Same</li> +</ol> +``` + +#### CSS + +```css +ol.normal { + list-style-type: upper-alpha; +} + +/* or use the shortcut "list-style": */ +ol.shortcut { + list-style: upper-alpha; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_list_item_markers","200","300")}} + +<h3 id="All_list_style_types">リストスタイルのすべての種類</h3> + +#### HTML + +```html +<ol> + <li>Apollo</li> + <li>Hubble</li> + <li>Chandra</li> + <li>Cassini-Huygens</li> + <li>Spitzer</li> +</ol> + +<h2>Choose a list style type:</h2> + +<div class="container"> + + <label for="disc"> + <input type="radio" id="disc" name="type" value="disc">disc + </label> + + <label for="circle"> + <input type="radio" id="circle" name="type" value="circle">circle + </label> + + <label for="square"> + <input type="radio" id="square" name="type" value="square">square + </label> + + <label for="decimal"> + <input type="radio" id="decimal" name="type" value="decimal">decimal + </label> + + <label for="cjk-decimal"> + <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal + </label> + + <label for="decimal-leading-zero"> + <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero + </label> + + <label for="lower-roman"> + <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman + </label> + + <label for="upper-roman"> + <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman + </label> + + <label for="lower-greek"> + <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek + </label> + + <label for="lower-alpha"> + <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin + </label> + + <label for="upper-alpha"> + <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin + </label> + + <label for="arabic-indic"> + <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic + </label> + + <label for="armenian"> + <input type="radio" id="armenian" name="type" value="armenian">armenian + </label> + + <label for="bengali"> + <input type="radio" id="bengali" name="type" value="bengali">bengali + </label> + + <label for="cambodian"> + <input type="radio" id="cambodian" name="type" value="cambodian">cambodian + </label> + + <label for="cjk-earthly-branch"> + <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch + </label> + + <label for="cjk-heavenly-stem"> + <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem + </label> + + <label for="cjk-ideographic"> + <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic + </label> + + <label for="devanagari"> + <input type="radio" id="devanagari" name="type" value="devanagari">devanagari + </label> + + <label for="ethiopic-numeric"> + <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric + </label> + + <label for="georgian"> + <input type="radio" id="georgian" name="type" value="georgian">georgian + </label> + + <label for="gujarati"> + <input type="radio" id="gujarati" name="type" value="gujarati">gujarati + </label> + + <label for="gurmukhi"> + <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi + </label> + + <label for="hebrew"> + <input type="radio" id="hebrew" name="type" value="hebrew">hebrew + </label> + + <label for="hiragana"> + <input type="radio" id="hiragana" name="type" value="hiragana">hiragana + </label> + + <label for="hiragana-iroha"> + <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha + </label> + + <label for="japanese-formal"> + <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal + </label> + + <label for="japanese-informal"> + <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal + </label> + + <label for="kannada"> + <input type="radio" id="kannada" name="type" value="kannada">kannada + </label> + + <label for="katakana"> + <input type="radio" id="katakana" name="type" value="katakana">katakana + </label> + + <label for="katakana-iroha"> + <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha + </label> + + <label for="khmer"> + <input type="radio" id="khmer" name="type" value="khmer">khmer + </label> + + <label for="korean-hangul-formal"> + <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal + </label> + + <label for="korean-hanja-formal"> + <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal + </label> + + <label for="korean-hanja-informal"> + <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal + </label> + + <label for="lao"> + <input type="radio" id="lao" name="type" value="lao">lao + </label> + + <label for="lower-armenian"> + <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian + </label> + + <label for="malayalam"> + <input type="radio" id="malayalam" name="type" value="malayalam">malayalam + </label> + + <label for="mongolian"> + <input type="radio" id="mongolian" name="type" value="mongolian">mongolian + </label> + + <label for="myanmar"> + <input type="radio" id="myanmar" name="type" value="myanmar">myanmar + </label> + + <label for="oriya"> + <input type="radio" id="oriya" name="type" value="oriya">oriya + </label> + + <label for="persian"> + <input type="radio" id="persian" name="type" value="persian">persian + </label> + + <label for="simp-chinese-formal"> + <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal + </label> + + <label for="simp-chinese-informal"> + <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal + </label> + + <label for="tamil"> + <input type="radio" id="tamil" name="type" value="tamil">tamil + </label> + + <label for="telegu"> + <input type="radio" id="telegu" name="type" value="telegu">telegu + </label> + + <label for="thai"> + <input type="radio" id="thai" name="type" value="thai">thai + </label> + + <label for="tibetan"> + <input type="radio" id="tibetan" name="type" value="tibetan">tibetan + </label> + + <label for="trad-chinese-formal"> + <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal + </label> + + <label for="trad-chinese-informal"> + <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal + </label> + + <label for="upper-armenian"> + <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian + </label> + + <label for="disclosure-open"> + <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open + </label> + + <label for="disclosure-closed"> + <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed + </label> + + <label for="-moz-ethiopic-halehame"> + <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame + </label> + + <label for="-moz-ethiopic-halehame-am"> + <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am + </label> + + <label for="ethiopic-halehame-ti-er"> + <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er + </label> + + <label for="ethiopic-halehame-ti-et"> + <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et + </label> + + <label for="hangul"> + <input type="radio" id="hangul" name="type" value="hangul">hangul + </label> + + <label for="hangul-consonant"> + <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant + </label> + + <label for="urdu"> + <input type="radio" id="urdu" name="type" value="urdu">urdu + </label> + + <label for="-moz-ethiopic-halehame-ti-er"> + <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er + </label> + + <label for="-moz-ethiopic-halehame-ti-et"> + <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et + </label> + + <label for="-moz-hangul"> + <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul + </label> + + <label for="-moz-hangul-consonant"> + <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant + </label> + + <label for="-moz-urdu"> + <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu + </label> + +</div> +``` + +#### CSS + +```css + +ol { + font-size: 1.2rem; +} + +.container { + column-count: 3; +} + +label { + display: block; +} + +input { + margin: .4rem; +} +``` + +#### JavaScript + +```js +const container = document.querySelector(".container"); +container.addEventListener("change", event => { + const list = document.querySelector("ol"); + list.setAttribute("style", `list-style-type: ${event.target.value}`); +}); +``` + +#### 結果 + +{{EmbedLiveSample("All_list_style_types", "600", "800")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html index 9ab7b88e97..ca68c8d134 100644 --- a/files/ja/web/css/minmax()/index.html +++ b/files/ja/web/css/minmax()/index.html @@ -156,7 +156,7 @@ minmax(auto, 300px) </li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/padding-bottom/index.html b/files/ja/web/css/padding-bottom/index.html index 877b22fa80..8aa21ff9bb 100644 --- a/files/ja/web/css/padding-bottom/index.html +++ b/files/ja/web/css/padding-bottom/index.html @@ -104,7 +104,7 @@ padding-bottom: unset; <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="ja/CSS/box model">CSS 基本ボックスモデルの紹介</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li> <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li> <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li> </ul> diff --git a/files/ja/web/css/reference/index.html b/files/ja/web/css/reference/index.html index a9bc022589..673dbef605 100644 --- a/files/ja/web/css/reference/index.html +++ b/files/ja/web/css/reference/index.html @@ -95,7 +95,7 @@ div.menu-bar li:hover > ul { <dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a> <code><var>A</var> > <var>B</var></code></dt> <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code> で選択された要素の直接の子であるものを指定します。</dd> <dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a> <code><var>A</var> <var>B</var></code></dt> - <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>, but is not necessarily a direct child.</dd> + <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>で選択された要素の子孫であるものを指定します。直接の子である必要はありません。</dd> <dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt> <dd><code><var>B</var></code> で指定された要素のうち、 <code><var>A</var></code> で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。</dd> </dl> diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html index 7b0322e9d0..f41da12a5c 100644 --- a/files/ja/web/css/text-decoration-color/index.html +++ b/files/ja/web/css/text-decoration-color/index.html @@ -3,14 +3,18 @@ title: text-decoration-color slug: Web/CSS/text-decoration-color tags: - CSS - - CSS テキスト - - CSS テキスト装飾 - - CSS プロパティ - - HTML スタイル - - HTML 色 + - CSS Property + - CSS Text + - CSS Text Decoration + - HTML Colors + - HTML Styles - Reference - - text-decoration-color - - 色 + - Styling HTML + - Styling text + - color + - colors + - 'recipe:css-property' +browser-compat: css.properties.text-decoration-color translation_of: Web/CSS/text-decoration-color --- <div>{{ CSSRef }}</div> @@ -21,14 +25,13 @@ translation_of: Web/CSS/text-decoration-color <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> <p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* <color> 値 */ -text-decoration-color: currentColor; +text-decoration-color: currentcolor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); @@ -37,21 +40,40 @@ text-decoration-color: transparent; /* グローバル値 */ text-decoration-color: inherit; text-decoration-color: initial; +text-decoration-color: revert; text-decoration-color: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>装飾線の色です。</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>装飾線の色です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> + +<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h3 id="Formal_syntax">形式文法</h3> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +<h3 id="Basic_example">基本的な例</h3> <pre class="brush: html"><p>This paragraph has <s>some erroneous text</s> inside it that I want to call attention to.</p></pre> @@ -62,51 +84,22 @@ text-decoration-color: unset; } s { - text-decoration-line: <code>line-through</code>; + text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; }</pre> <p>{{ EmbedLiveSample('Examples') }}</p> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> - -<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | 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('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td> - <td>{{ Spec2('CSS3 Text Decoration') }}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-decoration-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> diff --git a/files/ja/web/css/text-emphasis-color/index.html b/files/ja/web/css/text-emphasis-color/index.html index eabcc4c410..44da77376c 100644 --- a/files/ja/web/css/text-emphasis-color/index.html +++ b/files/ja/web/css/text-emphasis-color/index.html @@ -8,15 +8,19 @@ tags: - CSS プロパティ - HTML 色 - Reference - - 文字列強調 + - Styling HTML + - Text Emphasis + - 'recipe:css-property' + - text-decoration-color +browser-compat: css.properties.text-emphasis-color translation_of: Web/CSS/text-emphasis-color --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis-color</code></strong> プロパティは、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</span></p> +<p><strong><code>text-emphasis-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</p> <pre class="brush:css no-line-numbers">/* 初期値 */ -text-emphasis-color: currentColor; +text-emphasis-color: currentcolor; /* <color> */ text-emphasis-color: #555; @@ -27,68 +31,58 @@ text-emphasis-color: transparent; /* グローバル値 */ text-emphasis-color: inherit; text-emphasis-color: initial; +text-emphasis-color: revert; text-emphasis-color: unset; </pre> -<p>{{cssinfo}}</p> +<h2 id="Syntax">構文</h2> -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code><color></code></dt> - <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentColor</code> になります。</dd> + <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentcolor</code> になります。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h3 id="Formal_syntax">形式文法</h3> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +<h3 id="Emphasis_with_a_color_and_custom_character">色と固有の文字で強調</h3> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> -<pre class="brush: css">h3 { - text-emphasis-color: #555; +<pre class="brush: css">em { + text-emphasis-color: green; text-emphasis-style: "*"; }</pre> -<h3 id="HTML">HTML</h3> +<h4 id="HTML">HTML</h4> <pre class="brush: html"><p>Here's an example:</p> -<h3>This has emphasis marks!</h3> +<em>This has emphasis marks!</em> </pre> -<h3 id="Result" name="Result">結果</h3> +<h4 id="Result">結果</h4> -<p>{{EmbedLiveSample("Examples", 450, 100)}}</p> +<p>{{EmbedLiveSample("Emphasis_with_a_color_and_custom_character", 450, 100)}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<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('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-emphasis-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>{{cssxref("<color>")}} データ型</li> diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html index 8d838fe112..6d0ae6bf2c 100644 --- a/files/ja/web/css/text-emphasis/index.html +++ b/files/ja/web/css/text-emphasis/index.html @@ -14,21 +14,28 @@ translation_of: Web/CSS/text-emphasis --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis</code></strong> プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> +<p><strong><code>text-emphasis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p> -<p>圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> +<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> <div class="note"> -<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> +<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Constituent_properties">構成要素のプロパティ</h2> + +<p>このプロパティは以下のプロパティの一括指定です。</p> + +<ul> + <li><a href="/ja/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></li> + <li><a href="/ja/docs/Web/CSS/text-emphasis-style"><code>text-emphasis-style</code></a></li> +</ul> + +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* 初期値 */ text-emphasis: none; /* 圏点なし */ @@ -38,7 +45,7 @@ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25B2'; text-emphasis: '*' #555; -text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */ +text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */ /* キーワード値 */ text-emphasis: filled; @@ -52,18 +59,19 @@ text-emphasis: filled sesame #555; /* グローバル値 */ text-emphasis: inherit; text-emphasis: initial; +text-emphasis: revert; text-emphasis: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code>none</code></dt> <dd>圏点なし。</dd> <dt><code>filled</code></dt> - <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> + <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> <dt><code>open</code></dt> - <dd>図形は中抜きになります。</dd> + <dd>図形が中抜きになります。</dd> <dt><code>dot</code></dt> <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd> <dt><code>circle</code></dt> @@ -75,18 +83,22 @@ text-emphasis: unset; <dt><code>sesame</code></dt> <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd> <dt><code><string></code></dt> - <dd>記号として文字列を表示します。 <code><string></code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> + <dd>記号として文字列を表示します。 <code><string></code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> <dt><code><color></code></dt> - <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentColor</code> です。</dd> + <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="A_heading_with_emphasis_shape_and_color" name="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> +<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> <p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p> @@ -100,36 +112,19 @@ text-emphasis: unset; <pre class="brush: html"><h2>これは重要です！</h2></pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</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 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-emphasis")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li> diff --git a/files/ja/web/css/tools/index.html b/files/ja/web/css/tools/index.html deleted file mode 100644 index fb51e9d15d..0000000000 --- a/files/ja/web/css/tools/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: ツール -slug: Web/CSS/Tools -tags: - - CSS - - Guide - - NeedsUpdate - - ガイド -translation_of: Web/CSS/Tools ---- -<div></div> - -<p>CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。</p> - -<p>{{LandingPageListSubpages}}</p> - -<h2 id="Other_tools" name="Other_tools">その他のツール</h2> - -<ul> - <li>CSS アニメーション - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li> - <li>端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - <a href="http://mydevice.io">mydevice.io</a></li> - <li>CSS メニュー - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li> - <li>強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - <a href="https://stylelint.io/">stylelint</a></li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS">CSS</a></li> -</ul> diff --git a/files/ja/web/demos_of_open_web_technologies/index.html b/files/ja/web/demos/index.html index d41643d7b4..c6feeaeeee 100644 --- a/files/ja/web/demos_of_open_web_technologies/index.html +++ b/files/ja/web/demos/index.html @@ -1,7 +1,8 @@ --- title: オープン Web テクノロジーのデモ -slug: Web/Demos_of_open_web_technologies +slug: Web/Demos translation_of: Web/Demos_of_open_web_technologies +original_slug: Web/Demos_of_open_web_technologies --- <p>Mozilla は、幅広い既存の Web テクノロジーをサポートし、それらを使用することを奨励しています。このページは、<a href="https://blog.mozilla.org/community/2015/12/18/saying-goodbye-to-demo-studio/">かつて</a> Demo Studio で人気のあったものも含め、技術のデモンストレーションを提供します。オープン Web テクノロジーのデモンストレーションやアプリケーションを知っている場合、適切なセクションにリンクを追加してください。</p> diff --git a/files/ja/web/exslt/index.html b/files/ja/web/exslt/index.html index fde3c0c0c4..f3a787e9f5 100644 --- a/files/ja/web/exslt/index.html +++ b/files/ja/web/exslt/index.html @@ -10,7 +10,7 @@ translation_of: Web/EXSLT <p>{{XSLTRef}}</p> <div> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/XSLT">XSLT</a></strong></li> <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/EXSLT">EXSLT</a></strong></li> diff --git a/files/ja/web/guide/css/getting_started/challenge_solutions/index.html b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html index df62dacd38..a3825b30aa 100644 --- a/files/ja/web/guide/css/getting_started/challenge_solutions/index.html +++ b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html @@ -3,7 +3,7 @@ title: Challenge solutions slug: Web/Guide/CSS/Getting_started/Challenge_solutions translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions --- -<p>このページは、 <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。</p> +<p>このページは、 <a href="/ja/CSS/Getting_Started">CSS Getting Started</a> チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。</p> <h2 id="CSS_をなぜ用いるか"><a href="/ja/CSS/Getting_Started/Why_use_CSS" id="Why_use_CSS_Colors" title="MDC">CSS をなぜ用いるか</a></h2> <h3 id="Colors">Colors</h3> <dl> @@ -16,7 +16,7 @@ translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions <dt> Solution</dt> <dd> - CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/ja/CSS/color_value" title="ja/CSS/color value">CSS Color value</a> for a complete list as well as other ways of specifying colors.</dd> + CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/ja/CSS/color_value">CSS Color value</a> for a complete list as well as other ways of specifying colors.</dd> </dl> <h2 id="どのように_CSS_は動作するのか"><a href="/ja/CSS/Getting_Started/How_CSS_works" id="How_CSS_works_DOM_inspector" title="MDC">どのように CSS は動作するのか</a></h2> <h3 id="DOM_inspector">DOM inspector</h3> @@ -244,7 +244,7 @@ h3:before { } </pre> </dd> </dl> -<h2 id="表"><a href="/ja/CSS/Getting_Started/Tables" id="Tables" title="ja/CSS/Getting_Started/Tables">表</a></h2> +<h2 id="表"><a href="/ja/CSS/Getting_Started/Tables" id="Tables">表</a></h2> <h3 id="Borders_on_data_cells_only">Borders on data cells only</h3> <dl> <dt> diff --git a/files/ja/web/houdini/index.html b/files/ja/web/guide/houdini/index.html index df3539da77..ab81169cda 100644 --- a/files/ja/web/houdini/index.html +++ b/files/ja/web/guide/houdini/index.html @@ -1,6 +1,6 @@ --- title: CSS Houdini -slug: Web/Houdini +slug: Web/Guide/Houdini tags: - API - CSS @@ -9,6 +9,7 @@ tags: - Landing - Web translation_of: Web/Houdini +original_slug: Web/Houdini --- <p>Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。 Houdini は、開発者が <a href="/ja/docs/Web/API/CSS_Object_Model">CSS オブジェクトモデル</a>（CSSOM）に直接アクセスできるようにする API のグループです。 開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。</p> diff --git a/files/ja/web/guide/html/constraint_validation/index.html b/files/ja/web/guide/html/constraint_validation/index.html new file mode 100644 index 0000000000..5af2e0fe58 --- /dev/null +++ b/files/ja/web/guide/html/constraint_validation/index.html @@ -0,0 +1,330 @@ +--- +title: 制約検証 +slug: Web/Guide/HTML/Constraint_validation +tags: + - CSS + - Guide + - HTML5 + - NeedsContent + - Selectors +translation_of: Web/Guide/HTML/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/web/guide/html/content_categories/index.html b/files/ja/web/guide/html/content_categories/index.html index 9f0b98251f..cc2b9c20f3 100644 --- a/files/ja/web/guide/html/content_categories/index.html +++ b/files/ja/web/guide/html/content_categories/index.html @@ -84,9 +84,9 @@ translation_of: Web/Guide/HTML/Content_categories <li>{{HTMLElement("area")}}: {{HTMLElement("map")}} 要素の子孫である場合</li> <li>{{HTMLElement("del")}}: 記述コンテンツだけを含む場合</li> <li>{{HTMLElement("ins")}}: 記述コンテンツだけを含む場合</li> - <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop" title="ja/docs/HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> + <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> <li>{{HTMLElement("map")}}: 記述コンテンツだけを含む場合</li> - <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop" title="ja/docs/HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> + <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> </ul> <h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3> diff --git a/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html index 07826fa870..8a2b1b2b00 100644 --- a/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html +++ b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -50,7 +50,7 @@ translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla <p>さらに、 Mozilla には、ドキュメントが designMode になると、そのドキュメント内のイベントが無効になるという特徴があります。designMode をオフにすると (Mozilla 1.5 ではこの切り替えが可能となります)、再びイベントはアクティブになります。</p> -<p><strong>さらなる情報</strong> は、<a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla" title="ja/Migrate apps from Internet Explorer to Mozilla">Migrate apps from Internet Explorer to Mozilla</a> の <a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" title="ja/Migrate apps from Internet Explorer to Mozilla#Rich text editing">Rich text editing</a> の節をご覧ください。</p> +<p><strong>さらなる情報</strong> は、<a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a> の <a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> の節をご覧ください。</p> <h3 id="Examples" name="Examples">例</h3> @@ -277,7 +277,7 @@ img.intLink { border: 0; } <li><code><a href="/ja/docs/Web/API/Document/designMode">designMode</a></code></li> <li><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li> <li><a class="external" href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li> - <li><a href="/ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li> + <li><a href="/ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li> <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li> </ul> diff --git a/files/ja/web/guide/parsing_and_serializing_xml/index.html b/files/ja/web/guide/parsing_and_serializing_xml/index.html index 9adb073f0c..5a473bfc8f 100644 --- a/files/ja/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ja/web/guide/parsing_and_serializing_xml/index.html @@ -109,7 +109,7 @@ const xmlStr = serializer.serializeToString(doc);</pre> <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a class="internal" href="/ja/XPath" title="ja/XPath">XPath</a></li> + <li><a class="internal" href="/ja/XPath">XPath</a></li> <li>{{domxref("XMLHttpRequest")}}</li> <li>{{domxref("Document")}}, {{domxref("XMLDocument")}} および {{domxref("HTMLDocument")}}</li> </ul> diff --git a/files/ja/web/html/element/bdo/index.html b/files/ja/web/html/element/bdo/index.html index a2c417ef5f..5a1daa585b 100644 --- a/files/ja/web/html/element/bdo/index.html +++ b/files/ja/web/html/element/bdo/index.html @@ -3,41 +3,42 @@ title: '<bdo>: 双方向文字列上書き要素' slug: Web/HTML/Element/bdo tags: - BiDi + - 双方向テキスト + - 要素 - HTML - HTML 文字レベルの意味付け - 'HTML:フローコンテンツ' - 'HTML:知覚可能コンテンツ' - 'HTML:記述コンテンツ' - - Reference - - Web - - ltr - - rtl + - 左書き + - リファレンス - テキスト - 右書き - - 左書き - 書字方向 - - 要素 + - テキスト描画 + - Web + - ltr + - rtl +browser-compat: html.elements.bdo translation_of: Web/HTML/Element/bdo --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML の双方向文字列上書き要素</strong> (<code><bdo></code>) は、現在の文字列の方向を上書きし、中の文字列が異なる方向に描画されるようにします。</span></p> +<p><strong><code><bdo></code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。</span></p> <div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>文字列の文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません (ですから、例えば、文字は裏返しにはなりません)。</p> +<p>テキストの文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません (ですから、例えば、文字は裏返しにはなりません)。</p> <table class="properties"> <tbody> <tr> - <th scope="row"><a href="/ja/docs/HTML/Content_categories">コンテンツカテゴリ</a></th> - <td><a href="/ja/docs/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> </tr> <tr> <th scope="row">許可されている内容</th> - <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a></td> </tr> <tr> <th scope="row">タグの省略</th> @@ -45,7 +46,7 @@ translation_of: Web/HTML/Element/bdo </tr> <tr> <th scope="row">許可されている親要素</th> - <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> </tr> <tr> <th scope="row">暗黙の ARIA ロール</th> @@ -62,21 +63,21 @@ translation_of: Web/HTML/Element/bdo </tbody> </table> -<h2 id="Attributes" name="Attributes">属性</h2> +<h2 id="Attributes">属性</h2> -<p>この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p> +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> <dl> <dt>{{htmlattrdef("dir")}}</dt> - <dd>この要素の書字方向。以下の値を指定可能です。 + <dd>この要素の内容において、テキストが描画される方向です。以下の値が指定可能です。 <ul> - <li><code>ltr</code>: テキストを左から右へ (Left to Right) 向かわせることを意味する指定。</li> - <li><code>rtl</code>: テキストを右から左へ (Right to Left) 向かわせることを意味する指定。</li> + <li><code>ltr</code>: テキストを左から右へ (left-to-right) 向かわせることを意味する指定。</li> + <li><code>rtl</code>: テキストを右から左へ (right-to-left) 向かわせることを意味する指定。</li> </ul> </dd> </dl> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> <pre class="brush: html"><!-- 書字方向を切り替える --> <p>This text will go left to right.</p> @@ -84,43 +85,24 @@ translation_of: Web/HTML/Element/bdo to left.</bdo></p> </pre> -<h3 id="Result" name="Result">結果</h3> +<h3 id="Result">結果</h3> <p>{{EmbedLiveSample('Examples')}}</p> -<h2 id="Notes" name="Notes">メモ</h2> +<h2 id="Notes">メモ</h2> <p>HTML 4 の仕様では、この要素にイベントが指定されていません。イベントは XHTML で追加されました。これは、恐らく見落としでしょう。</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<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', 'semantics.html#the-bdo-element', '<bdo>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="See_also">関連情報</h2> -<p>{{Compat("html.elements.bdo")}}</p> +<ul> + <li>関連する HTML 要素: {{HTMLElement("bdi")}}</li> +</ul> diff --git a/files/ja/web/html/element/input/range/index.html b/files/ja/web/html/element/input/range/index.html index c9ba8346b0..1ba58f6167 100644 --- a/files/ja/web/html/element/input/range/index.html +++ b/files/ja/web/html/element/input/range/index.html @@ -17,22 +17,21 @@ tags: - フォーム - 要素 translation_of: Web/HTML/Element/input/range +browser-compat: html.elements.input.input-range --- <div>{{HTMLRef("Input_types")}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに一定の値より小さくなく、別な一定の値より大きくない数値を指定させるために使用します。しかし、厳密な値は重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの値が厳密なものではない限り、通常は使用するべきではありません。</p> +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに特定の値より小さくなく、別な特定の値より大きくない数値を指定させるために使用します。しかし、厳密な値が重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - <p>ユーザーのブラウザーが <code>range</code> 型に対応していない場合は、 <code>{{HTMLElement('input/text', 'text')}}</code> 入力で代替されて扱われます。</p> <table class="properties"> <tbody> <tr> <td><strong>{{anch("Value", "値")}}</strong></td> - <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。 {{jsxref("Number")}} として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用する。</td> + <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。数値として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用してください。</td> </tr> <tr> <td><strong>イベント</strong></td> @@ -53,7 +52,7 @@ translation_of: Web/HTML/Element/input/range </tbody> </table> -<h3 id="Validation" name="Validation">検証</h3> +<h3 id="Validation">検証</h3> <p>利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。</p> @@ -64,16 +63,16 @@ translation_of: Web/HTML/Element/input/range <li>値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。</li> </ul> -<h3 id="Value" name="Value">値</h3> +<h3 id="Value">値</h3> <p>{{htmlattrxref("value", "input")}} 属性は、選択された数値を表す文字列が入った {{domxref("DOMString")}} です。値は空文字列 (<code>""</code>) にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は <code>min</code> 属性の値に設定されます。既定値を特定するアルゴリズムは次の通りです。</p> -<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> <p>最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。</p> -<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> +<h2 id="Additional_attributes">追加の属性</h2> <p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>range</code> 型の入力欄は次の属性にも対応しています。</p> @@ -104,29 +103,29 @@ translation_of: Web/HTML/Element/input/range </tbody> </table> -<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> +<p id="attr-list">{{page("/ja/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}</p> -<p>See the <a href="#A_range_control_with_hash_marks">range control with hash marks</a> below for an example of how the options on a range are denoted in supported browsers</p> +<p>対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の<a href="#a_range_control_with_hash_marks">ハッシュマーク付き範囲コントロール</a>を参照してください。</p> -<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> +<h3 id="attr-max"><code id="max">max</code></h3> -<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p> +<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p> <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性の値より大きいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/max">HTML の <code>max</code> 属性</a>を参照してください。</p> -<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> +<h3 id="attr-min"><code id="min">min</code></h3> -<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p> +<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p> <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/max">min</a></code> 属性の値より小さいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/min">HTML の <code>min</code> 属性</a>を参照してください。</p> -<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> +<h3 id="attr-step"><code id="step">step</code></h3> <p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> -<p><code>range</code> 入力欄の既定の刻み値は1であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p> +<p><code>range</code> 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p> -<h3 id="Non_Standard_Attributes" name="Non_Standard_Attributes">標準外の属性</h3> +<h3 id="Non_Standard_Attributes">標準外の属性</h3> <table class="standard-table"> <thead> @@ -143,16 +142,15 @@ translation_of: Web/HTML/Element/input/range </tbody> </table> -<dl> - <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> - <dd id="orient-include">CSS の標準外の -moz-orient non-standard プロパティは、 {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響し、範囲スライダーの向きを定義する <code>orient</code> 属性を定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</dd> -</dl> +<h3 id="attr-orient"><code id="orient">orient</code> {{non-standard_inline}}</h3> + +<p id="orient-include">CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える <code>orient</code> 属性は、範囲スライダーの向きを定義する定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</p> -<div class="blockIndicator note"> -<p>注: 以下の input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p> +<div class="notecard note"> +<p>メモ: input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p> </div> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> <p><code>number</code> 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 <code>range</code> 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。</p> @@ -167,22 +165,22 @@ translation_of: Web/HTML/Element/input/range <p>原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を0.5に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。</p> -<h3 id="Specifying_the_minimum_and_maximum" name="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3> +<h3 id="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3> <p>既定では、最小値は0で最大値は100です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。</p> -<p>例えば、ユーザーに-10から10までの値を尋ねるのであれば、次のようにすることができます。</p> +<p>例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。</p> -<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> <p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> -<h3 id="Setting_the_values_granularity" name="Setting_the_values_granularity">値の精度の設定</h3> +<h3 id="Setting_the_values_granularity">値の精度の設定</h3> <p>By default, the granularity, is 1, meaning that the value is always an integer. You can change the {{htmlattrxref("step")}} attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of <code>step</code> to 0.01:</p> <div id="Granularity_sample1"> -<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> </div> @@ -190,22 +188,22 @@ translation_of: Web/HTML/Element/input/range <p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the {{htmlattrxref("step", "input")}} attribute:</p> <div id="Granularity_sample2"> -<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> <p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.</p> </div> -<h3 id="Adding_hash_marks_and_labels" name="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3> +<h3 id="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3> <p>The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the {{htmlattrxref("list", "input")}} attribute and a {{HTMLElement("datalist")}} element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.</p> -<h4 id="Range_control_mockups" name="Range_control_mockups">範囲コントロールのモックアップ</h4> +<h4 id="Range_control_mockups">範囲コントロールのモックアップ</h4> <p>Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.</p> -<h5 id="An_unadorned_range_control" name="An_unadorned_range_control">簡素な範囲コントロール</h5> +<h5 id="An_unadorned_range_control">簡素な範囲コントロール</h5> <p>This is what you get if you don't specify a {{htmlattrxref("list", "input")}} attribute, or if the browser doesn't support it.</p> @@ -217,13 +215,13 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td rowspan="4"> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range"></pre> </td> <th>Screenshot</th> </tr> <tr> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-plain.png"></td> </tr> <tr> <th>Live</th> @@ -234,7 +232,7 @@ translation_of: Web/HTML/Element/input/range </tbody> </table> -<h5 id="A_range_control_with_hash_marks" name="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5> +<h5 id="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5> <p>This range control is using a <code>list</code> attribute specifying the ID of a {{HTMLElement("datalist")}} which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an {{HTMLElement("option")}} element with its {{htmlattrxref("value", "option")}} set to the range's value at which a mark should be drawn.</p> @@ -246,7 +244,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td rowspan="4"> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -267,7 +265,7 @@ translation_of: Web/HTML/Element/input/range <th>Screenshot</th> </tr> <tr> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-ticks.png"></td> </tr> <tr> <th>Live</th> @@ -278,7 +276,7 @@ translation_of: Web/HTML/Element/input/range </tbody> </table> -<h5 id="A_range_control_with_hash_marks_and_labels" name="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5> +<h5 id="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5> <p>You can add labels to your range control by adding the {{htmlattrxref("label", "option")}} attribute to the {{HTMLElement("option")}} elements corresponding to the tick marks you wish to have labels for.</p> @@ -290,7 +288,7 @@ translation_of: Web/HTML/Element/input/range </tr> <tr> <td rowspan="4"> - <pre class="brush: html notranslate"> + <pre class="brush: html"> <input type="range" list="tickmarks"> <datalist id="tickmarks"> @@ -311,7 +309,7 @@ translation_of: Web/HTML/Element/input/range <th>Screenshot</th> </tr> <tr> - <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-labels.png"></td> </tr> <tr> <th>Live</th> @@ -326,22 +324,23 @@ translation_of: Web/HTML/Element/input/range <p><strong>Note</strong>: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the {{htmlelement("datalist")}} tag has to be styled with CSS as its {{cssxref("display")}} property is set to <code>none</code> by default, hiding the labels.</p> </div> -<h3 id="Change_the_orientation" name="Change_the_orientation">方向の変更</h3> +<h3 id="Change_the_orientation">方向の変更</h3> <div class="xhidden"> -<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value.<strong> </strong>This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p> +<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value. This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p> -<p>In the meantime, we can make the range vertical by rotating it using using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p> +<p>In the meantime, we can make the range vertical by rotating it using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p> <p>Consider this range control:</p> <div id="Orientation_sample1"> -<pre class="brush: html notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> </div> -<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "orientation_sample1.png")}}</p> -<p>This control is horizontal (at least on most if not all major browers; others might vary).</p> +<p>This control is horizontal (at least on most if not all major browsers; others might vary).</p> +</div> <h3 id="Standards">Standards</h3> @@ -350,19 +349,18 @@ translation_of: Web/HTML/Element/input/range <div id="Orientation_sample2"> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">#volume { +<pre class="brush: css">#volume { height: 150px; width: 50px; }</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> -<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> -</div> +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "orientation_sample2.png")}}</p> </div> <p>Unfortunately, no major browsers currently support vertical range controls directly.</p> @@ -375,7 +373,7 @@ translation_of: Web/HTML/Element/input/range <p>The HTML needs to be updated to wrap the {{HTMLElement("input")}} in a {{HTMLElement("div")}} to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):</p> -<pre class="brush: html notranslate"><div class="slider-wrapper"> +<pre class="brush: html"><div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div></pre> @@ -383,7 +381,7 @@ translation_of: Web/HTML/Element/input/range <p>Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.</p> -<pre class="brush: css notranslate">.slider-wrapper { +<pre class="brush: css">.slider-wrapper { display: inline-block; width: 20px; height: 150px; @@ -393,7 +391,7 @@ translation_of: Web/HTML/Element/input/range <p>Then comes the style information for the <code><input></code> element within the reserved space:</p> -<pre class="brush: css notranslate">.slider-wrapper input { +<pre class="brush: css">.slider-wrapper input { width: 150px; height: 20px; margin: 0; @@ -403,7 +401,7 @@ translation_of: Web/HTML/Element/input/range <p>The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the {{cssxref("transform-origin")}} is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.</p> -<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "orientation_sample3.png")}}</p> <h3 id="appearance_property">appearance property</h3> @@ -413,14 +411,14 @@ translation_of: Web/HTML/Element/input/range <p>We use the same HTML as in the previous examples:</p> -<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1"> </pre> <h4 id="CSS_3">CSS</h4> <p>We target just the inputs with a type of range:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { -webkit-appearance: slider-vertical; }</pre> @@ -434,7 +432,7 @@ translation_of: Web/HTML/Element/input/range <p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p> -<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> </pre> <p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p> @@ -447,14 +445,14 @@ translation_of: Web/HTML/Element/input/range <p>We use the same HTML as in the previous examples:</p> -<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1"> </pre> <h4 id="CSS_4">CSS</h4> <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; }</pre> @@ -468,52 +466,32 @@ translation_of: Web/HTML/Element/input/range <p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p> -<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +<pre class="brush: html"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> </pre> <h4 id="CSS_5">CSS</h4> <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add <code>-webkit-appearance: slider-vertical</code> for all -webkit-based browsers:</p> -<pre class="brush: css notranslate">input[type="range"] { +<pre class="brush: css">input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; }</pre> <p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<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', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("html.elements.input.input-range")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li> <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li> <li><code><a href="/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> <li>{{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}}</li> diff --git a/files/ja/web/html/element/input/text/index.html b/files/ja/web/html/element/input/text/index.html index 80763b2040..50d1029a08 100644 --- a/files/ja/web/html/element/input/text/index.html +++ b/files/ja/web/html/element/input/text/index.html @@ -12,6 +12,7 @@ tags: - Text - text entry - text input +browser-compat: html.elements.input.input-text translation_of: Web/HTML/Element/input/text --- <div>{{HTMLRef("Input_types")}}</div> @@ -20,8 +21,6 @@ translation_of: Web/HTML/Element/input/text <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - <table class="properties"> <tbody> <tr> @@ -47,16 +46,16 @@ translation_of: Web/HTML/Element/input/text </tbody> </table> -<h2 id="Value" name="Value">値</h2> +<h2 id="Value">値</h2> -<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement.value", "value")}} プロパティを使ってこれを受け取ることができます。</p> +<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement")}} の <code>value</code> プロパティを使ってこれを受け取ることができます。</p> -<pre class="brush: js notranslate">let theText = myTextInput.value; +<pre class="brush: js">let theText = myTextInput.value; </pre> <p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は空文字列 ("") にすることができます。</p> -<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> +<h2 id="Additional_attributes">追加の属性</h2> <p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>text</code> 型の入力欄は次の属性にも対応しています。</p> @@ -103,26 +102,26 @@ translation_of: Web/HTML/Element/input/text </tbody> </table> -<h3 id="htmlattrdeflist">{{htmlattrdef("list")}}</h3> +<h3 id="attr-list"><code id="list">list</code></h3> <p>list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。</p> -<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> +<h3 id="attr-maxlength"><code id="maxlength">maxlength</code></h3> <p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> -<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> +<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> -<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> +<h3 id="attr-minlength"><code id="minlength">minlength</code></h3> <p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最小文字数が設定されません。</p> -<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> +<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> -<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> +<h3 id="attr-pattern"><code id="pattern">pattern</code></h3> <div id="pattern-include"> -<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p> +<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p> <p>指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。</p> @@ -133,7 +132,7 @@ translation_of: Web/HTML/Element/input/text <p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p> -<h3 id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</h3> +<h3 id="attr-placeholder"><code id="placeholder">placeholder</code></h3> <p><code>placeholder</code> 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは<em>できません</em>。</p> @@ -143,21 +142,21 @@ translation_of: Web/HTML/Element/input/text <p><strong>注:</strong> 可能であれば <code>placeholder</code> を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels and placeholders", "ラベルとプレイスホルダー")}}を参照してください。</p> </div> -<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> +<h3 id="attr-readonly"><code id="readonly">readonly</code></h3> -<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p> +<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の <code>value</code> プロパティを設定することで変更することができます。</p> <div class="note"> <p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p> </div> -<h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3> +<h3 id="attr-size"><code id="size">size</code></h3> <p><code>size</code> 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の {{cssxref("font")}} 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。</p> <p>これはユーザーがフィールドに入力することができる文字数の制限を設定するものでは<em>ありません</em>。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 <code>{{anch("maxlength")}}</code> 属性を使用してください。</p> -<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> +<h3 id="attr-spellcheck"><code id="spellcheck">spellcheck</code></h3> <p><code>spellcheck</code> はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは <code>spellcheck</code> 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 <code>spellcheck</code> で利用できる値は次の通りです。</p> @@ -174,7 +173,7 @@ translation_of: Web/HTML/Element/input/text <p><code>spellcheck</code> を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。</p> -<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2> +<h2 id="Non-standard_attributes">標準外の属性</h2> <p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p> @@ -197,7 +196,7 @@ translation_of: Web/HTML/Element/input/text </tbody> </table> -<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> +<h3 id="attr-autocorrect"><code id="autocorrect">autocorrect</code> {{non-standard_inline}}</h3> <div id="autocorrect-include"> <p>Safari 拡張である <code>autocorrect</code> 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。</p> @@ -210,7 +209,7 @@ translation_of: Web/HTML/Element/input/text </dl> </div> -<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +<h3 id="attr-mozactionhint"><code id="mozactionhint">mozactionhint</code> {{non-standard_inline}}</h3> <div id="mozactionhint-include"> <p>Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの <kbd>Enter</kbd> キーにどのようなラベルを使用するかを決定するために使用されます。</p> @@ -222,13 +221,13 @@ translation_of: Web/HTML/Element/input/text <p>許可されている値は <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, <code>send</code> です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。</p> </div> -<h2 id="Using_text_inputs" name="Using_text_inputs">テキスト入力欄の使用</h2> +<h2 id="Using_text_inputs">テキスト入力欄の使用</h2> <p><code>text</code> 型の <code><input></code> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、<a href="/ja/docs/Web/HTML/Element/input/datetime-local">日付</a>、 <a href="/ja/docs/Web/HTML/Element/input/url">URL</a>、<a href="/ja/docs/Web/HTML/Element/input/email">メールアドレス</a>、<a href="/ja/docs/Web/HTML/Element/input/search">検索語</a>など、もっと良い選択肢が利用できるもの) に使用します。</p> -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> +<h3 id="Basic_example">基本的な例</h3> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name"> @@ -242,16 +241,16 @@ translation_of: Web/HTML/Element/input/text <p>{{EmbedLiveSample("Basic_example", 600, 50)}}</p> -<p>送信されると、サーバーに送信される名前と値の組のデータは <code>uname=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p> +<p>送信されると、サーバーに送信される名前と値の組のデータは <code>name=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p> -<h3 id="Setting_placeholders" name="Setting_placeholders">プレイスホルダーの設定</h3> +<h3 id="Setting_placeholders">プレイスホルダーの設定</h3> <p> {{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> - <input type="text" id="uname" name="name" + <input type="text" id="uname" placeholder="Lower case, all one word"> </div> <div> @@ -265,11 +264,11 @@ translation_of: Web/HTML/Element/input/text <p>プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 <code>value</code> 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。</p> -<h3 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力要素の寸法</h3> +<h3 id="Physical_input_element_size">物理的な入力要素の寸法</h3> <p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" @@ -283,7 +282,7 @@ translation_of: Web/HTML/Element/input/text <p>{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}</p> -<h2 id="Validation" name="Validation">検証</h2> +<h2 id="Validation">検証</h2> <p><code>text</code> 型の <code><input></code> 要素は、適用される自動的な検証はありませんが (基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです)、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。</p> @@ -291,11 +290,11 @@ translation_of: Web/HTML/Element/input/text <p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p> </div> -<h3 id="A_note_on_styling" name="A_note_on_styling">スタイルにおけるメモ</h3> +<h3 id="A_note_on_styling">スタイルにおけるメモ</h3> <p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -317,11 +316,11 @@ input:valid+span:after { <p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p> -<h3 id="Making_input_required" name="Making_input_required">入力を必須にする</h3> +<h3 id="Making_input_required">入力を必須にする</h3> <p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" required> @@ -333,7 +332,7 @@ input:valid+span:after { </form></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> </div> <p>次のように表示されます。</p> @@ -342,13 +341,13 @@ input:valid+span:after { <p>検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。</p> -<h3 id="Input_value_length" name="Input_value_length">入力値の長さ</h3> +<h3 id="Input_value_length">入力値の長さ</h3> <p> {{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p> <p>以下の例では、入力値が4～8文字の長さであることが求められます。</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" required size="10" @@ -362,29 +361,29 @@ input:valid+span:after { </form></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> </div> <p>以下のように表示されます。</p> <p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p> -<p>４文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。８文字を超えて入力しようとしても、ブラウザーが許しません。</p> +<p>4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。 8 文字を超えて入力しようとしても、ブラウザーが許しません。</p> <div class="note"> -<p><strong>Note:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p> +<p><strong>メモ:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p> </div> -<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3> +<h3 id="Specifying_a_pattern">パターンの指定</h3> -<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p> +<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p> <p>以下の例では、4～8文字の値で、英小文字のみが含まれているという要件の制約を与えます。</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="uname">Choose a username: </label> - <input type="text" id="uname" name="name" required size="45" + <input type="text" id="uname" pattern="[a-z]{4,8}"> <span class="validity"></span> <p>Usernames must be lowercase and 4-8 characters in length.</p> @@ -395,7 +394,7 @@ input:valid+span:after { </form></pre> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -426,42 +425,22 @@ input:valid+span:after { <p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<p> <a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p> +<p> <a href="/ja/docs/Learn/Forms/Your_first_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<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', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("html.elements.input.input-text")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li> <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li> <li><code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> <li>{{HTMLElement("textarea")}}: 複数行のテキスト入力欄</li> diff --git a/files/ja/web/html/element/meta/name/index.html b/files/ja/web/html/element/meta/name/index.html index 0986662e6d..898b88c7bb 100644 --- a/files/ja/web/html/element/meta/name/index.html +++ b/files/ja/web/html/element/meta/name/index.html @@ -7,13 +7,14 @@ tags: - HTML document metadata - Reference - metadata +browser-compat: html.elements.meta.name translation_of: Web/HTML/Element/meta/name --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用して、文書のメタデータを名前と値の組み合わせで提供することができ、 {{htmlattrxref("name", "meta")}} 属性はメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性は値を指定します。</span></p> +<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用すると、文書のメタデータを名前と値の組み合わせで提供することができます。 {{htmlattrxref("name", "meta")}} 属性でメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性で値を指定します。</span></p> -<h3 id="Standard_metadata_names_defined_in_the_HTML_specification" name="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3> +<h3 id="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3> <p>HTML 仕様書は、以下の一連の標準メタデータ名を定義しています。</p> @@ -21,7 +22,7 @@ translation_of: Web/HTML/Element/meta/name <li> <p><code>application-name</code>: ウェブページで動作しているアプリケーションの名前です。</p> - <div class="note"><strong>注:</strong> + <div class="note"><strong>メモ:</strong> <ul> <li>ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる {{HTMLElement("title")}} 要素とは異なります。</li> @@ -72,198 +73,193 @@ translation_of: Web/HTML/Element/meta/name </tbody> </table> - <div class="note"><strong>注:</strong> + <div class="note"><strong>メモ:</strong> <ul> - <li>Dynamically inserting <code><meta name="referrer"></code> (with {{domxref("Document.write", "document.write()")}} or {{domxref("Node.appendChild", "appendChild()")}}) makes the referrer behaviour unpredictable.</li> - <li>When several conflicting policies are defined, the <code>no-referrer</code> policy is applied.</li> + <li><code><meta name="referrer"></code> を ({{domxref("Document.write", "document.write()")}} または {{domxref("Node.appendChild", "appendChild()")}} で) 動的に挿入すると、リファラーの動作が予測不能になります。</li> + <li>相反する複数のポリシーが定義されている場合は、 <code>no-referrer</code> ポリシーが適用されます。</li> </ul> </div> </li> - <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. The <code>content</code> attribute contains a valid CSS {{cssxref("<color>")}}.</li> -</ul> - -<h3 id="Standard_metadata_names_defined_in_other_specifications" name="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ名</h3> - -<p>The CSS Color Adjustment specification defines the following metadata name:</p> - -<ul> + <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: ユーザーエージェントがページの表示や周辺のユーザーインターフェースをカスタマイズするために使用すべき推奨色を示します。 <code>content</code> 属性には、有効な CSS の {{cssxref("<color>")}} が含まれます。</li> <li> - <p><code>color-scheme</code>: specifies one or more color schemes with which the document is compatible.</p> + <p><code>color-scheme</code>: 文書と互換性のある 1 つ以上の複数のカラースキームを指定します。</p> - <p>The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for <code><meta name="color-scheme"></code> is to indicate compatibility with—and order of preference for—light and dark color modes.</p> + <p>ブラウザーは、この情報をユーザーのブラウザーや端末の設定と合わせて使用し、背景や前景、フォームコントロールやスクロールバーなど、あらゆるものに使用する色を決定します。 <code><meta name="color-scheme"></code> の主な用途は、ライトモードとダークモードの互換性と優先順位を示すことです。</p> - <p>The value of the {{htmlattrxref("content", "meta")}} property for <code>color-scheme</code> may be one of the following:</p> + <p><code>color-scheme</code> の {{htmlattrxref("content", "meta")}} プロパティは次のうちの一つになります。</p> <dl> <dt><code>normal</code></dt> - <dd>The document is unaware of color schemes and should simply be rendered using the default color palette.</dd> + <dd>この文書は配色を意識していないので、既定のカラーパレットを使って描画する必要があります。</dd> <dt>[<code>light</code> | <code>dark</code>]+</dt> - <dd>One or more color schemes supported by the document. Specifying the same color scheme more than once has the same effect as specifying it only once. Indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is acceptable if the user prefers it.</dd> + <dd>この文書で対応している 1 つ以上の配色。同じ配色を 2 回以上指定しても、 1 回だけ指定した場合と同じ効果が得られる。複数の配色を指定すると、この文書では最初の配色が優先されるが、ユーザーが好む場合は 2 番目に指定された配色でもよいことを示す。</dd> <dt><code>only light</code></dt> - <dd>Indicates that the document <em>only</em> supports light mode, with a light background and dark foreground colors. By specification, <code>only dark</code> <em>is not valid</em>, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured.</dd> + <dd>この文書がライトモード<em>のみ</em>に対応していることを示します。背景色が明るく、前景色が暗い色です。仕様書によれば、 <code>only dark</code> は有効ではありません。ダークモードに対応していない文書を強制的にダークモードで描画すると、コンテンツが読めなくなる可能性があるからです。主要なブラウザーは、特に設定されていなければ既定でライトモードになります。</dd> </dl> - <p>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:</p> + <p>例えば、この文書はダークモードを推奨するが、ライトモードでも機能的にはレンダリングできることを示すためには、次のようにします。</p> - <pre class="brush: html notranslate"><meta name="color-scheme" content="dark light"></pre> + <pre class="brush: html"><meta name="color-scheme" content="dark light"></pre> - <p>This works at the document level in the same way that the CSS {{cssxref("color-scheme")}} property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} CSS media feature.</p> + <p>これは、CSS の {{cssxref("color-scheme")}} プロパティで個々の要素が好みの配色と受け入れられる配色を指定できるのと同じように、文書レベルで機能します。スタイルは、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} という CSS メディア機能を使って、現在の配色に合わせることができます。</p> </li> </ul> -<p>The CSS Device Adaptation specification defines the following metadata name:</p> +<h3 id="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ</h3> + +<p>CSS Device Adaptation 仕様書は、以下のメタデータ名を定義しています。</p> <ul> <li> - <p><code>viewport</code>: gives hints about the size of the initial size of the {{glossary("viewport")}}. Used by mobile devices only.</p> + <p><code>viewport</code>: この{{glossary("viewport", "ビューポート")}}の初期の寸法の大きさについてのヒントを指定します。モバイル端末でのみ使用されます。</p> <table class="fullwidth-table"> - <caption>Values for the content of <code><meta name="viewport"></code></caption> + <caption><code><meta name="viewport"></code> の content の値</caption> <thead> <tr> <th scope="col">値</th> - <th scope="col">Possible subvalues</th> + <th scope="col">使用可能なサブ値</th> <th scope="col">解説</th> </tr> </thead> <tbody> <tr> <td><code>width</code></td> - <td>A positive integer number, or the text <code>device-width</code></td> - <td>Defines the pixel width of the viewport that you want the web site to be rendered at.</td> + <td>正の整数値、または <code>device-width</code> のテキスト</td> + <td>ウェブサイトを表示させるビューポートのピクセル単位の幅を定義します。</td> </tr> <tr> <td><code>height</code></td> - <td>A positive integer, or the text <code>device-height</code></td> - <td>Defines the height of the viewport. Not used by any browser.</td> + <td>正の整数値、または <code>device-height</code> のテキスト</td> + <td>ビューポートの高さを定義します。どのブラウザーでも使用されていません。</td> </tr> <tr> <td><code>initial-scale</code></td> - <td>A positive number between <code>0.0</code> and <code>10.0</code></td> - <td>Defines the ratio between the device width (<code>device-width</code> in portrait mode or <code>device-height</code> in landscape mode) and the viewport size.</td> + <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td> + <td>端末の幅 (縦長画面で <code>device-width</code>、横長画面で <code>device-height</code>) とビューポートの寸法の比率を定義します。</td> </tr> <tr> <td><code>maximum-scale</code></td> - <td>A positive number between <code>0.0</code> and <code>10.0</code></td> - <td>Defines the maximum amount to zoom in. It must be greater or equal to the <code>minimum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td> + <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td> + <td>拡大縮小インする最大値を定義します。 <code>minimum-scale</code> 以上でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td> </tr> <tr> <td><code>minimum-scale</code></td> - <td>A positive number between <code>0.0</code> and <code>10.0</code></td> - <td>Defines the minimum zoom level. It must be smaller or equal to the <code>maximum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td> + <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td> + <td>拡大縮小レベルの最小値を定義します。 <code>maximum-scale</code> 以下でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td> </tr> <tr> <td><code>user-scalable</code></td> - <td><code>yes</code> or <code>no</code></td> - <td>If set to <code>no</code>, the user is not able to zoom in the webpage. The default is <code>yes</code>. Browser settings can ignore this rule, and iOS10+ ignores it by default.</td> + <td><code>yes</code> または <code>no</code></td> + <td><code>no</code> に設定された場合は、ユーザーがウェブページを拡大縮小することができなくなります。既定値は <code>yes</code> です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td> </tr> <tr> <td><code>viewport-fit</code></td> - <td><code>auto</code>, <code>contain</code> or <code>cover</code></td> + <td><code>auto</code>, <code>contain</code>, <code>cover</code></td> <td> - <p>The <code>auto</code> value doesn’t affect the initial layout viewport, and the whole web page is viewable.</p> + <p><code>auto</code> の値は、初期レイアウトのビューポートに影響を与えず、ウェブページ全体が表示されます。</p> - <p>The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display.</p> + <p><code>contain</code> の値は、ディスプレイに内接する最大の長方形に合わせてビューポートが拡大されることを意味します。</p> - <p>The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="/ja/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display.</p> + <p><code>cover</code> の値は、ビューポートが端末のディスプレイいっぱいになるように縮小されることを意味します。重要なコンテンツがディスプレイの外に出てしまわないように、 <a href="/ja/docs/Web/CSS/env">safe-area-inset-*</a> 変数を使用することを強くお勧めします。</p> </td> </tr> </tbody> </table> - <div class="note"><strong>Notes:</strong> + <div class="note"><strong>メモ:</strong> <ul> - <li>Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.</li> - <li>The default values may vary between devices and browsers.</li> - <li>To learn about this declaration in Firefox for Mobile, see <a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li> + <li>この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。</li> + <li>既定値は、端末やブラウザーによって異なる場合があります。</li> + <li>Firefox for Mobile でのこの宣言については、<a href="/ja/docs/Mobile/Viewport_meta_tag">こちらの記事</a>を参照してください。</li> </ul> </div> - <h5 id="Accessibility_concerns_with_viewport_scaling" name="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5> + <h5 id="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5> - <div>Disabling zooming capabilities by setting <code>user-scalable</code> to a value of <code>no</code> prevents people experiencing low vision conditions from being able to read and understand page content.</div> + <div><code>user-scalable</code> を <code>no</code> に設定して拡大縮小機能を無効にすると、弱視の人がページの内容を読んだり理解したりすることができなくなります。</div> <ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG を理解する、ガイドライン 1.4 の説明</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> </ul> - <h5 id="See_also" name="See_also">関連情報</h5> + <h5 id="See_also">関連情報</h5> - <p>The <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> CSS at-rule.</p> + <p>CSS の <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> アット規則</p> </li> </ul> -<h3 id="Other_metadata_names" name="Other_metadata_names">その他のメタデータ名</h3> +<h3 id="Other_metadata_names">その他のメタデータ名</h3> -<p>The <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a> contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:</p> +<p><a href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki の MetaExtensions のページ</a>には、まだ正式に受け入れられていない標準外のメタデータの名前が多数掲載されています。しかし、ここに掲載されている名前の中には、以下のように、すでに実際によく使われているものもあります。</p> <ul> - <li><code>creator</code>: the name of the creator of the document, such as an organization or institution. If there are more than one, several {{HTMLElement("meta")}} elements should be used.</li> - <li><code>googlebot</code>, a synonym of <code>robots</code>, is only followed by Googlebot (the indexing crawler for Google).</li> - <li><code>publisher</code>: the name of the document's publisher.</li> - <li><code>robots</code>: the behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below: + <li><code>creator</code>: この文書の作成者の名前で、組織や機関などです。複数ある場合は、複数の {{HTMLElement("meta")}} 要素を使用する必要があります。</li> + <li><code>googlebot</code>: <code>robots</code> と同様ですが、Googlebot (Google のインデックス作成用クローラー) のみが従います。</li> + <li><code>publisher</code>: この文書の発行者の名前です。</li> + <li><code>robots</code>: 協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。以下の値をカンマで区切ったリストです。 <table class="standard-table"> <caption>Values for the content of <code><meta name="robots"></code></caption> <thead> <tr> <th scope="col">値</th> <th scope="col">解説</th> - <th scope="col">Used by</th> + <th scope="col">使用者</th> </tr> </thead> <tbody> <tr> <td><code>index</code></td> - <td>Allows the robot to index the page (default).</td> - <td>All</td> + <td>ロボットがこのページをインデックスすることを許可します (既定値)。</td> + <td>すべて</td> </tr> <tr> <td><code>noindex</code></td> - <td>Requests the robot to not index the page.</td> - <td>All</td> + <td>ロボットにこのページをインデックスしないよう要求します。</td> + <td>すべて</td> </tr> <tr> <td><code>follow</code></td> - <td>Allows the robot to follow the links on the page (default).</td> - <td>All</td> + <td>ロボットがこのページ上のリンクをたどることを許可します (既定値)。</td> + <td>すべて</td> </tr> <tr> <td><code>nofollow</code></td> - <td>Requests the robot to not follow the links on the page.</td> - <td>All</td> + <td>ロボットにこのページ上のリンクをたどらないよう要求します。</td> + <td>すべて</td> </tr> <tr> <td><code>all</code></td> - <td>Equivalent to <code>index, follow</code></td> - <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + <td><code>index, follow</code> と同等です。</td> + <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td> </tr> <tr> <td><code>none</code></td> - <td>Equivalent to <code>noindex, nofollow</code></td> - <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + <td><code>noindex, nofollow</code> と同等です。</td> + <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td> </tr> <tr> <td><code>noarchive</code></td> - <td>Requests the search engine not to cache the page content.</td> - <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + <td>検索エンジンにこのページの内容をキャッシュしないよう要求します。</td> + <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> </tr> <tr> <td><code>nosnippet</code></td> - <td>Prevents displaying any description of the page in search engine results.</td> - <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + <td>検索エンジンの結果でこのページの説明の表示を抑制します。</td> + <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> </tr> <tr> <td><code>noimageindex</code></td> - <td>Requests this page not to appear as the referring page of an indexed image.</td> - <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + <td>このページをインデックスされた画像の参照ページとして表示しないよう要求します。</td> + <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> </tr> <tr> <td><code>nocache</code></td> - <td>Synonym of <code>noarchive</code>.</td> - <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + <td><code>noarchive</code> と同等です。</td> + <td><a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> </tr> </tbody> </table> @@ -271,40 +267,21 @@ translation_of: Web/HTML/Element/meta/name <div class="note"><strong>Notes:</strong> <ul> - <li>Only cooperative robots follow these rules. Do not expect to prevent e-mail harvesters with them.</li> - <li>The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a <em>{{Glossary("robots.txt")}}</em> file.</li> - <li>If you want to remove a page, <code>noindex</code> will work, but only after the robot visits the page again. Ensure that the <code>robots.txt</code> file is not preventing revisits.</li> - <li>Some values are mutually exclusive, like <code>index</code> and <code>noindex</code>, or <code>follow</code> and <code>nofollow</code>. In these cases the robot's behaviour is undefined and may vary between them.</li> - <li>Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header <code>X-Robots-Tag</code>; this allows non-HTML documents like images to use these rules.</li> + <li>協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。</li> + <li>ロボットがこれらのルールを読むためには、ページにアクセスする必要があります。帯域幅の消費を防ぐには、 <em>{{Glossary("robots.txt")}}</em> ファイルを使用してください。</li> + <li>ページを削除したい場合、 <code>noindex</code> で行うことができますが、ロボットがそのページに再びアクセスした後のことになります。 <code>robots.txt</code> ファイルが再訪問を妨害していないことを確認してください。</li> + <li>値によっては互いに排他的なものがあります。例えば <code>index</code> と <code>noindex</code>、 <code>follow</code> と <code>nofollow</code> などです。このような場合、ロボットの動作は未定義であり、ロボット間で異なる可能性があります。</li> + <li>Google、Yahoo、Bing など一部のクローラーロボットでは、 HTTP ヘッダーの X-Robots-Tag で提供された同じ値に対応しているものがあります。これにより、画像などの HTML 以外の文書でもこれらの規則を使用することができます。</li> </ul> </div> </li> </ul> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td> - </tr> - <tr> - <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td> - </tr> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("html.elements.meta.name")}}</p> +<h2 id="Specifications">仕様書</h2> + +<p>{{Specifications}}</p> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + diff --git a/files/ja/web/html/element/meta/name/theme-color/index.html b/files/ja/web/html/element/meta/name/theme-color/index.html new file mode 100644 index 0000000000..46c4b3562d --- /dev/null +++ b/files/ja/web/html/element/meta/name/theme-color/index.html @@ -0,0 +1,38 @@ +--- +title: theme-color +slug: Web/HTML/Element/meta/name/theme-color +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata +browser-compat: html.elements.meta.name.theme-color +translation_of: Web/HTML/Element/meta/name/theme-color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong><code>theme-color</code></strong> の値は {{htmlelement("meta")}} 要素の {{htmlattrxref("name", "meta")}} 属性において、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 {{htmlattrxref("content", "meta")}} 属性には有効な CSS の {{cssxref("<color>")}} が含まれていなければなりません。</span></p> + +<h2 id="Example">例</h2> + +<pre class="brush: html"><meta name="theme-color" content="#4285f4"></pre> + +<p>次の画像は、上記の {{htmlelement("meta")}} 要素が、 Android モバイル端末上で動作する Chrome で表示された文書に与える影響を示しています。</p> + +<figure><img alt="theme-color を使用した影響を表す図" src="theme-color.png"> +<figcaption><small>画像の出典: <a href="https://developers.google.com/web/fundamentals/design-and-ux/browser-customization">Icons & Browser Colors</a> より、<a href="https://developers.google.com/readme/policies">Google</a> が作成・共有し <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons 4.0 Attribution License</a> に記載された条件に従って使用されています。</small></figcaption> +</figure> + +<p>{{htmlattrxref("media", "meta")}} 属性で、メディア種別やクエリーを指定することができ、メディアの条件が真である場合にのみ、色が設定されます。例えば、以下のようになります。</p> + +<pre class="brush: html"><meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> +<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"></pre> + +<h2 id="Specifications">仕様書</h2> + +<p>{{Specifications}}</p> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> diff --git a/files/ja/web/html/element/meta/name/theme-color/theme-color.png b/files/ja/web/html/element/meta/name/theme-color/theme-color.png Binary files differnew file mode 100644 index 0000000000..ef9ea7378e --- /dev/null +++ b/files/ja/web/html/element/meta/name/theme-color/theme-color.png diff --git a/files/ja/web/html/element/pre/index.html b/files/ja/web/html/element/pre/index.html index 54cc767dbe..e8b8ffd1d1 100644 --- a/files/ja/web/html/element/pre/index.html +++ b/files/ja/web/html/element/pre/index.html @@ -4,30 +4,29 @@ slug: Web/HTML/Element/pre tags: - HTML - HTML コンテンツグループ化 - - 'HTML:フローコンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML:フローコンテンツ + - HTML:知覚可能コンテンツ - ウェブ - リファレンス - 要素 +browser-compat: html.elements.pre translation_of: Web/HTML/Element/pre --- <div>{{HTMLRef}}</div> -<p><strong>HTML <code><pre></code> 要素</strong>は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("<a href="/ja/docs/XUL/Style/monospace">monospace</a>") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p> +<p><strong><code><pre></code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して<a href="https://ja.wikipedia.org/wiki/等幅フォント">等幅フォント</a>で表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p> <div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div> -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <table class="properties"> <tbody> <tr> - <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td> </tr> <tr> <th scope="row">許可されている内容</th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a></td> </tr> <tr> <th scope="row">タグの省略</th> @@ -35,7 +34,11 @@ translation_of: Web/HTML/Element/pre </tr> <tr> <th scope="row">許可されている親要素</th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> </tr> <tr> <th scope="row">許可されている ARIA ロール</th> @@ -48,45 +51,44 @@ translation_of: Web/HTML/Element/pre </tbody> </table> -<h2 id="Attributes" name="Attributes">属性</h2> +<h2 id="Attributes">属性</h2> <p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p> <dl> - <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{deprecated_inline}}</dt> <dd>1行あたりの<em>望ましい</em>文字数を示します。これは {{htmlattrxref("width", "pre")}} の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd> - <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> <dd>1行あたりの<em>望ましい</em>文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd> <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> <dd>テキストがはみ出た場合の処理に関する<em>ヒント</em>を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。</dd> </dl> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Example">例</h2> + +<h3 id="HTML">HTML</h3> <pre class="brush: html"><!-- CSS コードを表示する例 --> <pre> body { - color:red; + color: red; } </pre> </pre> -<h3 id="Result" name="Result">結果</h3> +<h3 id="Result">結果</h3> -<pre>body { - color:red; -} -</pre> +<p>{{EmbedLiveSample("Example")}}</p> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> <p>整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。</p> <p>弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。</p> -<p>{{HTMLElement("figure")}} 及び {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} 及び <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> 及び <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p> +<p>{{HTMLElement("figure")}} および {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} および <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> および <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p> -<h3 id="Example" name="Example">例</h3> +<h3 id="Example_2">例</h3> <pre><figure role="img" aria-labelledby="cow-caption"> <pre> @@ -106,45 +108,21 @@ body { </pre> <ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> </ul> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<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', 'semantics.html#the-pre-element', '<pre>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>{{SpecName("HTML5 W3C")}} から重大な変更はない</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>{{SpecName("HTML4.01")}} から重大な変更はない</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td><code>cols</code> 属性を非推奨に変更</td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("html.elements.pre")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li> + <li>関連する要素: {{HTMLElement("code")}}</li> </ul> diff --git a/files/ja/web/html/element/xmp/index.html b/files/ja/web/html/element/xmp/index.html index 639da9a3c8..a2e858eb0f 100644 --- a/files/ja/web/html/element/xmp/index.html +++ b/files/ja/web/html/element/xmp/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/xmp <h2 id="Attributes" name="Attributes">属性</h2> -<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal" title="ja/docs/HTML/global attributes">グローバル属性</a> 以外の属性を持ちません。</p> +<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal">グローバル属性</a> 以外の属性を持ちません。</p> <h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> diff --git a/files/ja/web/html/inline_elements/index.html b/files/ja/web/html/inline_elements/index.html index cb1100ea03..6d4ba241e0 100644 --- a/files/ja/web/html/inline_elements/index.html +++ b/files/ja/web/html/inline_elements/index.html @@ -161,7 +161,7 @@ the block-level element's influence.</div></pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/HTML/Block-level_elements" title="ja/HTML/Block-level_elements">ブロックレベル要素</a></li> + <li><a href="/ja/HTML/Block-level_elements">ブロックレベル要素</a></li> <li><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></li> <li>{{cssxref("display")}}</li> <li><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></li> diff --git a/files/ja/web/http/conditional_requests/index.html b/files/ja/web/http/conditional_requests/index.html deleted file mode 100644 index 9a3c57338b..0000000000 --- a/files/ja/web/http/conditional_requests/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: HTTP 条件付きリクエスト -slug: Web/HTTP/Conditional_requests -tags: - - Conditional Requests - - Guide - - HTTP -translation_of: Web/HTTP/Conditional_requests ---- -<p>{{HTTPSidebar}}</p> - -<p class="summary">HTTP には<em>条件付きリクエスト</em>の概念があり、対象となるリソースと<em>検証子</em>の値とを比較することで、リクエストの結果や、成功か失敗かまでもが変化することがあります。このようなリクエストは、キャッシュの内容を検証して、無用な制御を避けたり、ダウンロードの再開の時などに文書の整合性を検証したり、サーバー上の文書をアップロードまたは変更するときに更新内容を失うことを避ける場合などに役立つことがあります。</p> - -<h2 id="Principles" name="Principles">原理</h2> - -<p>HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異なる処理が行われるリクエストです。これらのヘッダーは前提条件を定義しており、リクエストの結果は前提条件に一致するか否かに応じて変わります。</p> - -<p>リクエストで使用したメソッドや前提条件で使用したヘッダー一式によって、さまざまな動作が定義されています。</p> - -<ul> - <li>{{HTTPMethod("GET")}} などの{{glossary("safe", "安全な")}}メソッドは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。</li> - <li>{{HTTPMethod("PUT")}} などの{{glossary("safe", "安全ではない")}}メソッドは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。</li> -</ul> - -<h2 id="Validators" name="Validators">検証子</h2> - -<p>すべての条件ヘッダーは、サーバーに保存されているリソースが特定のバージョンに一致するか確認を試みます。このため、条件付きリクエストではリソースのバージョンを示す必要があります。リソース全体をバイト単位で比較することは不可能であり、常に望まれていることとは限らないので、リクエストはバージョンを記述する値を送信します。このような値は<em>検証子</em>と呼ばれ、二種類があります。</p> - -<ul> - <li>文書が最後に変更された日時である <em>last-modified</em> の日時</li> - <li><em>エンティティタグ</em>または <em>etag</em> と呼ばれる、各バージョンを一意に識別する不透明な文字列。</li> -</ul> - -<p>同じリソースのバージョンの比較は少々複雑です。状況によって、二種類の<em>確認方法</em>があります。</p> - -<ul> - <li><ruby>強い検証<rp> (</rp><rt>Strong validation</rt><rp>) </rp></ruby>は、ダウンロードを再開するときなど、バイト単位の同一性が求められる場合に使用します。</li> - <li><ruby>弱い検証<rp> (</rp><rt>Weak validation</rt><rp>) </rp></ruby>は、ユーザーエージェントが二つのリソースが同じであることを確認することだけが必要である場合に使用します。これは広告の違いやフッターの日付の違いなど、小さな違いがある場合も含みます。</li> -</ul> - -<p>検証の種類と使用される検証子は独立しています。 {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} はどちらの種類の検証もできますが、サーバー側の実装の複雑さは異なります。 HTTP は既定で強い検証を使用し、弱い検証を使用するときはそれを指定します。</p> - -<h3 id="Strong_validation" name="Strong_validation">強い検証</h3> - -<p id="sect1">強い検証は、比較対象のリソースがバイト単位で同一であることを保証します。これは一部の条件ヘッダーで必須、また他のヘッダーでは既定の要件です。強い検証はとても厳密であり、サーバーレベルで保証することが困難である場合もありますが、時には性能を犠牲にしても、データが失われていないことを常に保証します。</p> - -<p>{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ (あるいはその派生物) を持つ {{HTTPHeader("ETag")}} を使用します。</p> - -<h3 id="Weak_validation" name="Weak_validation">弱い検証</h3> - -<p>弱い検証は、内容が等価であるなら二つのバージョンの文書が等しいと見なされるという点で、強い検証と異なります。例えばフッターの日付だけ、あるいは広告だけが異なる二つのページは、弱い検証では<em>同一</em>であるとみなされますが、強い検証では異なるものとみなされます。弱い検証を作り出す etag のシステムを構築することは、ページのさまざまな要素の重要性を知ることが伴うため複雑になるかもしれませんが、キャッシュの性能を最適化するためにとても役に立ちます。</p> - -<h2 id="Conditional_headers" name="Conditional_headers">条件ヘッダー</h2> - -<p>条件ヘッダーと呼ばれるいくつかの HTTP ヘッダーが、条件付きリクエストをもたらします。</p> - -<dl> - <dt>{{HTTPHeader("If-Match")}}</dt> - <dd>遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。デフォルトでは etag に接頭辞 <code>'W/'</code> がついていない限り、強い検証を行います。</dd> - <dt>{{HTTPHeader("If-None-Match")}}</dt> - <dd>遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。デフォルトでは etag に接頭辞 <code>'W/'</code> がついていない限り、強い検証を行います。</dd> - <dt>{{HTTPHeader("If-Modified-Since")}}</dt> - <dd>遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より新しければ成功します。</dd> - <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> - <dd>遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より過去または同一であれば成功します。</dd> - <dt>{{HTTPHeader("If-Range")}}</dt> - <dd>{{HTTPHeader("If-Match")}} や {{HTTPHeader("If-Unmodified-Since")}} に似ていますが、 etag または日時をひとつしか持つことができません。条件が失敗すると範囲指定リクエストも失敗して、 {{HTTPStatus("206")}} <code>Partial Content</code> レスポンスの代わりに {{HTTPStatus("200")}} <code>OK</code> でリソース全体を送信します。</dd> -</dl> - -<h2 id="Use_cases" name="Use_cases">使用例</h2> - -<h3 id="Cache_update" name="Cache_update">キャッシュの更新</h3> - -<p>条件付きリクエストのもっとも一般的な使用例は、キャッシュの更新です。キャッシュが空である、あるいはキャッシュを使用しない状態では {{HTTPStatus("200")}} <code>OK</code> ステータスと共に、要求したリソースが送信されます。</p> - -<p><img alt="The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled." src="https://mdn.mozillademos.org/files/13729/Cache1.png" style="height: 265px; width: 741px;"></p> - -<p>リソースと共に、ヘッダーで検証子を送信します。この例では {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} の両方を送信していますが、どちらか一方しか使用しません。これらの検証子はリソースと共に (すべてのヘッダーのように) キャッシュへ保存され、キャッシュが陳腐化したときに条件付きリクエストを作成するために使用します。</p> - -<p>キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-Match")}} ヘッダーに検証子の値を指定した<em>条件付きリクエスト</em>を発行します。</p> - -<p>リソースが変更されていなければ、サーバーは {{HTTPStatus("304")}} <code>Not Modified</code> レスポンスを返します。これはキャッシュを再び新鮮な状態にして、クライアントはキャッシュされたリソースを使用します。これはリソースをいくらか消費するレスポンスとリクエストのやり取りが発生しますが、通信網でリソース全体を再度転送するよりも効率的です。</p> - -<p><img alt="With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same." src="https://mdn.mozillademos.org/files/13731/HTTPCache2.png" style="height: 265px; width: 741px;"></p> - -<p>リソースが変更された場合は、サーバーは条件付きではないリクエストと同様に {{HTTPStatus("200")}}<code> OK</code> レスポンスで新しいバージョンのリソースを送信します。そして、クライアントは新しいリソースを使用します (また、それをキャッシュします)。</p> - -<p><img alt="In the case where the resource was changed, it is sent back as if the request wasn't conditional." src="https://mdn.mozillademos.org/files/13733/HTTPCache3.png"></p> - -<p>サーバー側で検証子を設定することをを除いて、この仕組みは透過的です。どのブラウザーもウェブ開発者が特別な作業を行うことなく、キャッシュを管理してこのような条件付きリクエストを送信します。</p> - -<h3 id="Integrity_of_a_partial_download" name="Integrity_of_a_partial_download">部分ダウンロードの整合性</h3> - -<p>ファイルの部分ダウンロードは、以前の操作を再開することが可能な HTTP の機能であり、すでに取得済みの情報を保持することによって帯域や時間を節約します。</p> - -<p><img alt="A download has been stopped and only partial content has been retrieved." src="https://mdn.mozillademos.org/files/16190/HTTPResume1.png" style="height: 397px; width: 764px;"></p> - -<p>部分ダウンロードをサポートするサーバーは、{{HTTPHeader("Accept-Ranges")}} ヘッダーを送信してそのことを知らせます。このヘッダーが送信されると、クライアントは {{HTTPHeader("Ranges")}} ヘッダーで欠落している範囲を送信することで、ダウンロードを再開できます。</p> - -<p><img alt="The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request." src="https://mdn.mozillademos.org/files/13737/HTTPResume2.png"></p> - -<p>この原理はシンプルですが、潜在的な問題がひとつあります。2 回のダウンロードの間にリソースが変更されると、取得した範囲が 2 つの異なるバージョンのリソースに対応してしまい、最終的な文書が壊れてしまうでしょう。</p> - -<p>これを防ぐため、条件付きリクエストを使用します。範囲についてこれを行うための方法が 2 つあります。より柔軟な方法は {{HTTPHeader("If-Modified-Since")}} と {{HTTPHeader("If-Match")}} を使用することであり、前提条件に合わない場合はサーバーがエラーを返します。すると、クライアントはダウンロードを始めから再実行します。</p> - -<p><img alt="When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely." src="https://mdn.mozillademos.org/files/13739/HTTPResume3.png"></p> - -<p>この方法でも動作しますが、文書が変更されると余分なレスポンスやリクエストの交換が発生します。これはパフォーマンスを低下させますので HTTP には、この問題を避けるために特化した追加ヘッダーである {{HTTPHeader("If-Range")}} があります。</p> - -<p><img alt="The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download." src="https://mdn.mozillademos.org/files/13741/HTTPResume4.png" style="height: 263px; width: 770px;"></p> - -<p>この解決策はより効率的ですが、柔軟性が若干劣ります (条件で etag をひとつしか使用できません)。ただし、これ以上の柔軟性はほとんど必要ありません。</p> - -<h3 id="Avoiding_the_lost_update_problem_with_optimistic_locking" name="Avoiding_the_lost_update_problem_with_optimistic_locking">楽観的ロックでロストアップデートを避ける</h3> - -<p>リモートの文書の<em>更新</em>は、ウェブアプリケーションで一般的な操作です。これはファイルシステムやソース管理アプリケーションではごく一般的ですが、リモートにリソースを保存できるようにするにはこのような仕組みが必要です。同様に、wiki のような一般的なウェブサイトや他の CMS でも必要です。</p> - -<p>{{HTTPMethod("PUT")}} を使用して、この機能を実装できます。クライアントは始めに元のファイルを読み込んで、変更した後にサーバーへ送信します。</p> - -<p><img alt="Updating a file with a PUT is very simple when concurrency is not involved." src="https://mdn.mozillademos.org/files/13743/HTTPLock1.png"></p> - -<p>残念ながら、並行処理を考慮すると若干の間違いが出てきます。あるクライアントがリソースの新たな複製をローカルで変更している間に、第二のクライアントが同じリソースを取得して、クライアント側で同じことを行えます。これにより、とても不幸なことが発生します。両者がリソースを引き渡すと、最初のクライアントが渡した変更点が次に渡されたものによって破棄されて、第二のクライアントは新たな変更点に気づきません。誰が勝ち取ったかの結果は他者には伝わりませんが、どのクライアントの変更点が反映されるかは引き渡す速度によって変わります。またその速度はクライアントやサーバーのパフォーマンス、さらにはクライアント側で人間が文書を編集するパフォーマンスに依存します。勝ち取る者は、その時々で変わります。これは{{glossary("race condition","競合状態")}}であり、検出やデバッグが難しい不確かな動作をもたらします。</p> - -<p><img alt="When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!" src="https://mdn.mozillademos.org/files/13749/HTTPLock2.png" style="height: 504px; width: 904px;"></p> - -<p>2 つのクライアントの片方を困らせることなく、この問題に対処する方法はありません。しかし、ロストアップデートや競合状態は避けるべきです。予測可能な結果や、クライアントが変更点を却下されたときに通知を受けることを望みます。</p> - -<p>条件付きリクエストで、<em>楽観的ロックアルゴリズム</em> (ほとんどの wiki やソース管理システムで使用されています) を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。</p> - -<p><img alt="Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error." src="https://mdn.mozillademos.org/files/13751/HTTPLock3.png" style="height: 471px; width: 904px;"></p> - -<p>これは {{HTTPHeader("If-Match")}} および {{HTTPHeader("If-Unmodified-Since")}} ヘッダーを使用して実装します。etag が元のファイルと一致しない、あるいはファイルが取得したときから変更されている場合は、変更点が {{HTTPStatus("412")}} <code>Precondition Failed</code> エラーで拒否されます。このエラーへの対処はクライアント次第であり、今度は最新のバージョンで再び実行するよう人間に通知する、あるいは "diff" を表示して変更点を維持するかを人間が選択できるように支援します。</p> - -<h3 id="Dealing_with_the_first_upload_of_a_resource" name="Dealing_with_the_first_upload_of_a_resource">リソースの最初のアップロードに対処する</h3> - -<p>リソースの最初のアップロードは、前述の状況の特別なケースです。リソースの更新と同様に、2 つのクライアントが同時 (あるいはほぼ同時) にアップロードしようとする競合状態を仮定します。これを防ぐために条件付きリクエストを使用できます。すべての etag を表す特別な値 <code>'*'</code> を持つ {{HTTPHeader("If-None-Match")}} を追加することで、それより前のリクエストが存在しない場合に限り、リクエストが成功します。</p> - -<p><img alt="Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it." src="https://mdn.mozillademos.org/files/13753/HTTPFirst.png" style="height: 311px; width: 895px;"></p> - -<p><code>If-None-Match</code> は HTTP/1.1 (およびそれ以降) に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。</p> - -<h2 id="Conclusion" name="Conclusion">まとめ</h2> - -<p>条件付きリクエストは HTTP の重要な機能であり、効率的で複雑なアプリケーションの構築を可能にします。キャッシュやダウンロードの再開について、ウェブマスターに求められる作業はサーバーを適切に設定することだけです (一部の環境では正しい etag を設定することが難しいかもしれません)。また、ブラウザーが適切な条件付きリクエストを実行しますので、ウェブ開発者に求められる作業はありません</p> - -<p>一方、ロックの仕組みでは、ウェブ開発者が適切なヘッダーを伴ってリクエストを発行しなければなりません。ウェブマスターはほとんどの場合、それらの確認をアプリケーションに頼ることができるでしょう。</p> - -<p>どちらにせよ、条件付きリクエストはウェブの重要な機能であることは明らかです。</p> diff --git a/files/ja/web/http/conditional_requests/index.md b/files/ja/web/http/conditional_requests/index.md new file mode 100644 index 0000000000..a02ce7ac95 --- /dev/null +++ b/files/ja/web/http/conditional_requests/index.md @@ -0,0 +1,140 @@ +--- +title: HTTP 条件付きリクエスト +slug: Web/HTTP/Conditional_requests +tags: + - Conditional Requests + - Guide + - HTTP +translation_of: Web/HTTP/Conditional_requests +--- +{{HTTPSidebar}} + +HTTP には*条件付きリクエスト*の概念があり、対象となるリソースと*検証子*の値とを比較することで、リクエストの結果や、成功か失敗かまでもが変化することがあります。このようなリクエストは、キャッシュの内容を検証して、無用な制御を避けたり、ダウンロードの再開の時などに文書の整合性を検証したり、サーバー上の文書をアップロードまたは変更するときに更新内容を失うことを避ける場合などに役立つことがあります。 + +## 原理 + +HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異なる処理が行われるリクエストです。これらのヘッダーは前提条件を定義しており、リクエストの結果は前提条件に一致するか否かに応じて変わります。 + +リクエストで使用したメソッドや前提条件で使用したヘッダー一式によって、さまざまな動作が定義されています。 + +- {{HTTPMethod("GET")}} などの{{glossary("safe", "安全な")}}メソッドは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。 +- {{HTTPMethod("PUT")}} などの{{glossary("safe", "安全ではない")}}メソッドは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。 + +## 検証子 + +すべての条件ヘッダーは、サーバーに保存されているリソースが特定のバージョンに一致するか確認を試みます。このため、条件付きリクエストではリソースのバージョンを示す必要があります。リソース全体をバイト単位で比較することは不可能であり、常に望まれていることとは限らないので、リクエストはバージョンを記述する値を送信します。このような値は*検証子*と呼ばれ、二種類があります。 + +- 文書が最後に変更された日時である _last-modified_ の日時 +- *エンティティタグ*または _etag_ と呼ばれる、各バージョンを一意に識別する不透明な文字列。 + +同じリソースのバージョンの比較は少々複雑です。状況によって、二種類の*確認方法*があります。 + +- 強い検証 (Strong validation) は、ダウンロードを再開するときなど、バイト単位の同一性が求められる場合に使用します。 +- 弱い検証 (Weak validation) は、ユーザーエージェントが二つのリソースが同じであることを確認することだけが必要である場合に使用します。これは広告の違いやフッターの日付の違いなど、小さな違いがある場合も含みます。 + +検証の種類と使用される検証子は独立しています。 {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} はどちらの種類の検証もできますが、サーバー側の実装の複雑さは異なります。 HTTP は既定で強い検証を使用し、弱い検証を使用するときはそれを指定します。 + +### 強い検証 + +強い検証は、比較対象のリソースがバイト単位で同一であることを保証します。これは一部の条件ヘッダーで必須、また他のヘッダーでは既定の要件です。強い検証はとても厳密であり、サーバーレベルで保証することが困難である場合もありますが、時には性能を犠牲にしても、データが失われていないことを常に保証します。 + +{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ (あるいはその派生物) を持つ {{HTTPHeader("ETag")}} を使用します。 + +### 弱い検証 + +弱い検証は、内容が等価であるなら二つのバージョンの文書が等しいと見なされるという点で、強い検証と異なります。例えばフッターの日付だけ、あるいは広告だけが異なる二つのページは、弱い検証では*同一*であるとみなされますが、強い検証では異なるものとみなされます。弱い検証を作り出す etag のシステムを構築することは、ページのさまざまな要素の重要性を知ることが伴うため複雑になるかもしれませんが、キャッシュの性能を最適化するためにとても役に立ちます。 + +## 条件ヘッダー + +条件ヘッダーと呼ばれるいくつかの HTTP ヘッダーが、条件付きリクエストをもたらします。 + +- {{HTTPHeader("If-Match")}} + - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。 +- {{HTTPHeader("If-None-Match")}} + - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。 +- {{HTTPHeader("If-Modified-Since")}} + - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より新しければ成功します。 +- {{HTTPHeader("If-Unmodified-Since")}} + - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より過去または同一であれば成功します。 +- {{HTTPHeader("If-Range")}} + - : {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-Unmodified-Since")}} に似ていますが、 etag または日時をひとつしか持つことができません。条件が失敗すると範囲指定リクエストも失敗して、 {{HTTPStatus("206")}} `Partial Content` レスポンスの代わりに {{HTTPStatus("200")}} `OK` でリソース全体を送信します。 + +## 使用例 + +### キャッシュの更新 + +条件付きリクエストのもっとも一般的な使用例は、キャッシュの更新です。キャッシュが空である、あるいはキャッシュを使用しない状態では {{HTTPStatus("200")}} `OK` ステータスと共に、要求したリソースが送信されます。 + + + +リソースと共に、ヘッダーで検証子を送信します。この例では {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} の両方を送信していますが、どちらか一方しか使用しません。これらの検証子はリソースと共に (すべてのヘッダーのように) キャッシュへ保存され、キャッシュが陳腐化したときに条件付きリクエストを作成するために使用します。 + +キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-Match")}} ヘッダーに検証子の値を指定した*条件付きリクエスト*を発行します。 + +リソースが変更されていなければ、サーバーは {{HTTPStatus("304")}} `Not Modified` レスポンスを返します。これはキャッシュを再び新鮮な状態にして、クライアントはキャッシュされたリソースを使用します。これはリソースをいくらか消費するレスポンスとリクエストのやり取りが発生しますが、通信網でリソース全体を再度転送するよりも効率的です。 + + + +リソースが変更された場合は、サーバーは条件付きではないリクエストと同様に {{HTTPStatus("200")}}` OK` レスポンスで新しいバージョンのリソースを送信します。そして、クライアントは新しいリソースを使用します (また、それをキャッシュします)。 + + + +サーバー側で検証子を設定することをを除いて、この仕組みは透過的です。どのブラウザーもウェブ開発者が特別な作業を行うことなく、キャッシュを管理してこのような条件付きリクエストを送信します。 + +### 部分ダウンロードの整合性 + +ファイルの部分ダウンロードは、以前の操作を再開することが可能な HTTP の機能であり、すでに取得済みの情報を保持することによって帯域や時間を節約します。 + + + +部分ダウンロードをサポートするサーバーは、{{HTTPHeader("Accept-Ranges")}} ヘッダーを送信してそのことを知らせます。このヘッダーが送信されると、クライアントは {{HTTPHeader("Ranges")}} ヘッダーで欠落している範囲を送信することで、ダウンロードを再開できます。 + + + +この原理はシンプルですが、潜在的な問題がひとつあります。2 回のダウンロードの間にリソースが変更されると、取得した範囲が 2 つの異なるバージョンのリソースに対応してしまい、最終的な文書が壊れてしまうでしょう。 + +これを防ぐため、条件付きリクエストを使用します。範囲についてこれを行うための方法が 2 つあります。より柔軟な方法は {{HTTPHeader("If-Modified-Since")}} と {{HTTPHeader("If-Match")}} を使用することであり、前提条件に合わない場合はサーバーがエラーを返します。すると、クライアントはダウンロードを始めから再実行します。 + + + +この方法でも動作しますが、文書が変更されると余分なレスポンスやリクエストの交換が発生します。これはパフォーマンスを低下させますので HTTP には、この問題を避けるために特化した追加ヘッダーである {{HTTPHeader("If-Range")}} があります。 + + + +この解決策はより効率的ですが、柔軟性が若干劣ります (条件で etag をひとつしか使用できません)。ただし、これ以上の柔軟性はほとんど必要ありません。 + +### 楽観的ロックで更新が失われる問題を避ける + +リモートの文書の*更新*は、ウェブアプリケーションで一般的な操作です。これはファイルシステムやソース管理アプリケーションではごく一般的ですが、リモートにリソースを保存できるようにするにはこのような仕組みが必要です。同様に、wiki のような一般的なウェブサイトや他の CMS でも必要です。 + +{{HTTPMethod("PUT")}} を使用して、この機能を実装できます。クライアントは始めに元のファイルを読み込んで、変更した後にサーバーへ送信します。 + + + +残念ながら、並行処理を考慮すると若干の間違いが出てきます。あるクライアントがリソースの新たな複製をローカルで変更している間に、第二のクライアントが同じリソースを取得して、クライアント側で同じことを行えます。これにより、とても不幸なことが発生します。両者がリソースを引き渡すと、最初のクライアントが渡した変更点が次に渡されたものによって破棄されて、第二のクライアントは新たな変更点に気づきません。誰が勝ち取ったかの結果は他者には伝わりませんが、どのクライアントの変更点が反映されるかは引き渡す速度によって変わります。またその速度はクライアントやサーバーのパフォーマンス、さらにはクライアント側で人間が文書を編集するパフォーマンスに依存します。勝ち取る者は、その時々で変わります。これは*競合状態*であり、検出やデバッグが難しい不確かな動作をもたらします。 + + + +2 つのクライアントの片方を困らせることなく、この問題に対処する方法はありません。しかし、更新が失われたりや競合状態になったりすることは避けるべきです。予測可能な結果や、クライアントが変更点を却下されたときに通知を受けることを望みます。 + +条件付きリクエストで、*楽観的ロックアルゴリズム* (ほとんどの wiki やソース管理システムで使用されています) を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。 + + + +これは {{HTTPHeader("If-Match")}} および {{HTTPHeader("If-Unmodified-Since")}} ヘッダーを使用して実装します。etag が元のファイルと一致しない、あるいはファイルが取得したときから変更されている場合は、変更点が {{HTTPStatus("412")}} `Precondition Failed` エラーで拒否されます。このエラーへの対処はクライアント次第であり、今度は最新のバージョンで再び実行するよう人間に通知する、あるいは _diff_ を表示して変更点を維持するかを人間が選択できるように支援します。 + +### リソースの最初のアップロードに対処する + +リソースの最初のアップロードは、前述の状況の特別なケースです。リソースの更新と同様に、2 つのクライアントが同時 (あるいはほぼ同時) にアップロードしようとする競合状態を仮定します。これを防ぐために条件付きリクエストを使用できます。すべての etag を表す特別な値 `'*'` を持つ {{HTTPHeader("If-None-Match")}} を追加することで、それより前のリクエストが存在しない場合に限り、リクエストが成功します。 + + + +`If-None-Match` は HTTP/1.1 (およびそれ以降) に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。 + +## まとめ + +条件付きリクエストは HTTP の重要な機能であり、効率的で複雑なアプリケーションの構築を可能にします。キャッシュやダウンロードの再開について、ウェブマスターに求められる作業はサーバーを適切に設定することだけです (一部の環境では正しい etag を設定することが難しいかもしれません)。また、ブラウザーが適切な条件付きリクエストを実行しますので、ウェブ開発者に求められる作業はありません + +一方、ロックの仕組みでは、ウェブ開発者が適切なヘッダーを伴ってリクエストを発行しなければなりません。ウェブマスターはほとんどの場合、それらの確認をアプリケーションに頼ることができるでしょう。 + +どちらにせよ、条件付きリクエストはウェブの重要な機能であることは明らかです。 diff --git a/files/ja/web/http/headers/accept-language/index.html b/files/ja/web/http/headers/accept-language/index.html index f3319e6f02..b21cdeb4a1 100644 --- a/files/ja/web/http/headers/accept-language/index.html +++ b/files/ja/web/http/headers/accept-language/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTTP/Headers/Accept-Language --- <div>{{HTTPSidebar}}</div> -<p>HTTP の <strong><code>Accept-Language</code></strong> リクエストヘッダーは、クライアントがどの言語を理解できるか、どの種類のロケールが推奨されるかを示します。 (言語というのは、英語のような自然言語を意味し、プログラミング言語ではありません。) <a href="/ja/docs/Web/HTTP/Content_negotiation">コンテンツネゴシエーション</a>を使用して、サーバーは提案されたものから一つを選択して使用し、 {{HTTPHeader("Content-Language")}} レスポンスヘッダーを使用してクライアントに選択結果を知らせます。ブラウザーはユーザーインターフェイスの言語に従って、このヘッダーに適切な値を設定し、ユーザーはこれを変更することができますが、稀です (そして指紋につながるとして難色を示されます)。</p> +<p>HTTP の <strong><code>Accept-Language</code></strong> リクエストヘッダーは、クライアントがどの言語を理解できるか、どの種類のロケールが推奨されるかを示します。 (言語というのは、英語のような自然言語を意味し、プログラミング言語ではありません。) <a href="/ja/docs/Web/HTTP/Content_negotiation">コンテンツネゴシエーション</a>を使用して、サーバーは提案されたものから一つを選択して使用し、 {{HTTPHeader("Content-Language")}} レスポンスヘッダーを使用してクライアントに選択結果を知らせます。ブラウザーはユーザーインターフェイスの言語に従って、このヘッダーに適切な値を設定し、ユーザーはこれを変更することができますが、稀です (そしてフィンガープリントにつながるとして難色を示されます)。</p> <p>このヘッダーはヒントであり、サーバーが言語を判別するための方法として、明示的なユーザーの選択によって制御する特定の URL など、他のものがない場合に使用されます。サーバーは明示的な決定を上書きしないことを推奨します。 <code>Accept-Language</code> の中身はユーザーが制御できないことが良くあります（旅行中で外国のインターネットカフェを使用している場合など）。ユーザーはユーザーインターフェースのロケール以外の言語によるページを訪問したがっているかもしれません。</p> diff --git a/files/ja/web/http/headers/content-type/index.html b/files/ja/web/http/headers/content-type/index.html deleted file mode 100644 index 7f54b32569..0000000000 --- a/files/ja/web/http/headers/content-type/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Content-Type -slug: Web/HTTP/Headers/Content-Type -tags: - - Content-Type - - HTTP - - Reference - - エンティティヘッダー - - ヘッダー -translation_of: Web/HTTP/Headers/Content-Type ---- -<div>{{HTTPSidebar}}</div> - -<p><strong><code>Content-Type</code></strong> エンティティヘッダーは、リソースの{{Glossary("MIME type","メディア種別")}}を示すために使用します。</p> - -<p>レスポンスにおいては、 <code>Content-Type</code> ヘッダーはクライアントに返されたコンテンツが実際にはどのような種類のものであるかを伝えます。場合によってはブラウザーは MIME を推定し、このヘッダーの値に従わないこともあります。 {{HTTPHeader("X-Content-Type-Options")}} を <code>nosniff</code> に設定すると、この振舞いを防ぐことができます。</p> - -<p>要求においては ({{HTTPMethod("POST")}} または {{HTTPMethod("PUT")}} などで)、クライアントがサーバーにどのような種類のデータが実際に送られたかを伝えます。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">ヘッダー種別</th> - <td>{{Glossary("Entity header", "エンティティヘッダー")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> - <td>いいえ</td> - </tr> - <tr> - <th scope="row">{{Glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}</th> - <td>はい</td> - </tr> - <tr> - <th scope="row">{{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}}</th> - <td>はい。 <em>CORS 危険リクエストヘッダーバイト</em>: <code>"():<>?@[\]{}</code>, Delete, Tab, 制御文字の 0x00 から 0x19 までを値に含むことができないという制限付きです。<br> - また、 MIME タイプの解釈値 (引数を除いたもの) が <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, <code>text/plain</code> の何れかである必要があります。</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">Content-Type: text/html; charset=UTF-8 -Content-Type: multipart/form-data; boundary=something -</pre> - -<h2 id="Directives" name="Directives">ディレクティブ</h2> - -<dl> - <dt><code>media-type</code></dt> - <dd>リソースやデータの <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>です。</dd> - <dt>charset</dt> - <dd>標準の文字エンコーディングです。</dd> - <dt>boundary</dt> - <dd>マルチパートの本文では <code>boundary</code> ディレクティブが必要で、これはメールゲートウェイを通過しても大丈夫だと知られている文字の中から1～70文字で構成され、ホワイトスペースで終了しないものです。これはメッセージの複数パートの境界を囲むために使用します。ふつう、ヘッダーの境界は2本のダッシュで始まり、最後の境界には最後にも2本のダッシュが入ります。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Content-Type_in_HTML_forms" name="Content-Type_in_HTML_forms">HTML フォームにおける <code>Content-Type</code></h3> - -<p>HTML フォームを送信した結果としての {{HTTPMethod("POST")}} 要求において、 <code>Content-Type</code> は {{HTMLElement("form")}} 要素の <code>enctype</code> 属性で指定します。</p> - -<pre class="brush: html"><form action="/" method="post" enctype="multipart/form-data"> - <input type="text" name="description" value="some text"> - <input type="file" name="myFile"> - <button type="submit">Submit</button> -</form> -</pre> - -<p>この要求はこのように見えます。 (ここではあまり重要でないヘッダーは省略しています)</p> - -<pre>POST /foo HTTP/1.1 -Content-Length: 68137 -Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575 - ------------------------------974767299852498929531610575 -Content-Disposition: form-data; name="description" - -some text ------------------------------974767299852498929531610575 -Content-Disposition: form-data; name="myFile"; filename="foo.txt" -Content-Type: text/plain - -(content of the uploaded file foo.txt) ------------------------------974767299852498929531610575-- -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">題名</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td> - </tr> - <tr> - <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("http.headers.Content-Type")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{HTTPHeader("Accept")}} および {{HTTPHeader("Accept-Charset")}}</li> - <li>{{HTTPHeader("Content-Disposition")}}</li> - <li>{{HTTPStatus("206")}} Partial Content</li> - <li>{{HTTPHeader("X-Content-Type-Options")}}</li> -</ul> diff --git a/files/ja/web/http/headers/content-type/index.md b/files/ja/web/http/headers/content-type/index.md new file mode 100644 index 0000000000..611836d9f2 --- /dev/null +++ b/files/ja/web/http/headers/content-type/index.md @@ -0,0 +1,110 @@ +--- +title: Content-Type +slug: Web/HTTP/Headers/Content-Type +tags: + - Content-Type + - HTTP + - HTTP header + - Representation header + - Reference + - 表現ヘッダー + - ヘッダー +browser-compat: http.headers.Content-Type +translation_of: Web/HTTP/Headers/Content-Type +--- +{{HTTPSidebar}} + +**`Content-Type`** 表現ヘッダーは、リソースの{{Glossary("MIME type","メディア種別")}}を示すために使用します。</p> + +レスポンスにおいては、 `Content-Type` ヘッダーはクライアントに返されたコンテンツの実際の種類を伝えます。ブラウザーは MIME を推定し、このヘッダーの値に従わないこともあります。 {{HTTPHeader("X-Content-Type-Options")}} を `nosniff` に設定すると、この動作を防ぐことができます。 + +リクエストにおいては ({{HTTPMethod("POST")}} または {{HTTPMethod("PUT")}} などで)、クライアントがサーバーに実際に送ったデータの種類を伝えます。 + +<table class="properties"> + <tbody> + <tr> + <th scope="row">ヘッダー種別</th> + <td>{{Glossary("Representation header", "表現ヘッダー")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">{{Glossary("CORS-safelisted response header", "CORS セーフリストレスポンスヘッダー")}}</th> + <td>はい</td> + </tr> + <tr> + <th scope="row"> + {{Glossary("CORS-safelisted request header", "CORS セーフリストリクエストヘッダー")}} + </th> + <td> + はい。 <em>CORS 危険リクエストヘッダーバイト</em>である 0x00-0x1F (0x09 (HT) を除く)、<code>"():<>?@[\]{}</code>、0x7F (DEL) を値に含むことができないという制限付きです。<br>また、 MIME タイプの解釈値 (引数を除いたもの) が <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data</code>, <code>text/plain</code> の何れかである必要があります。</td> + </tr> + </tbody> +</table> + +## 構文 + +``` +Content-Type: text/html; charset=UTF-8 +Content-Type: multipart/form-data; boundary=something +``` + +## ディレクティブ + +- `media-type` + - : リソースやデータの [MIME タイプ](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)です。 +- charset + - : 標準の文字エンコーディングです。 +- boundary + - : マルチパートの本文では `boundary` ディレクティブが必要で、これはメールゲートウェイを通過しても大丈夫だと知られている文字の中から 1～70 文字で構成され、ホワイトスペースで終了しないものです。これはメッセージの複数パートの境界を囲むために使用します。ふつう、ヘッダーの境界は 2 本のダッシュで始まり、最後の境界には最後にも 2 本のダッシュが入ります。</dd> +</dl> + +## 例 + +### HTML フォームにおける `Content-Type` + + HTML フォームを送信する {{HTTPMethod("POST")}} リクエストでは、リクエストの `Content-Type` は {{HTMLElement("form")}} 要素の `enctype` 属性で指定します。 + +```html +<form action="/" method="post" enctype="multipart/form-data"> + <input type="text" name="description" value="some text"> + <input type="file" name="myFile"> + <button type="submit">Submit</button> +</form> +``` + +このリクエストはこのように見えます (ここではあまり重要でないヘッダーは省略しています)。 + +``` +POST /foo HTTP/1.1 +Content-Length: 68137 +Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575 + +-----------------------------974767299852498929531610575 +Content-Disposition: form-data; name="description" + +some text +-----------------------------974767299852498929531610575 +Content-Disposition: form-data; name="myFile"; filename="foo.txt" +Content-Type: text/plain + +(content of the uploaded file foo.txt) +-----------------------------974767299852498929531610575-- +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTTPHeader("Accept")}} +- {{HTTPHeader("Content-Disposition")}} +- {{HTTPStatus("206")}} Partial Content +- {{HTTPHeader("X-Content-Type-Options")}} diff --git a/files/ja/web/http/headers/dnt/index.html b/files/ja/web/http/headers/dnt/index.html deleted file mode 100644 index 426113364d..0000000000 --- a/files/ja/web/http/headers/dnt/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: DNT -slug: Web/HTTP/Headers/DNT -tags: - - DNT - - HTTP - - ヘッダー - - リファレンス -translation_of: Web/HTTP/Headers/DNT ---- -<p>{{HTTPSidebar}}</p> - -<p><strong><code>DNT</code></strong> (<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack) リクエストヘッダーは、ユーザーのトラッキングの設定を示します。 これにより、ユーザーはパーソナライズされたコンテンツではなく、プライバシーを優先するかどうかを指定できます.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">ヘッダータイプ</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>はい</td> - </tr> - </tbody> -</table> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">DNT: 0 -DNT: 1 -DNT: null -</pre> - -<h2 id="宣言">宣言</h2> - -<dl> - <dt>0</dt> - <dd>ユーザーは対象のサイトでトラッキングを許可している。</dd> - <dt>1</dt> - <dd>ユーザーは対象のサイトでトラッキングを拒否している。</dd> - <dt>null</dt> - <dd>ユーザーはトラッキングに関する設定を指定していない。</dd> -</dl> - -<h2 id="例">例</h2> - -<h3 id="JavaScript_から_Do_Not_Track_の状態を読み取る">JavaScript から Do Not Track の状態を読み取る</h3> - -<p>ユーザーの DNT 設定は {{domxref("Navigator.doNotTrack")}} プロパティを使用して JavaScript から読み取ることもできます:</p> - -<pre class="brush: js notranslate">navigator.doNotTrack; // "0" or "1"</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td> - <td>{{Spec2("Tracking")}}</td> - <td>初期定義。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<p>{{Compat("http.headers.DNT")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{domxref("Navigator.doNotTrack")}}</li> - <li>{{HTTPHeader("Tk")}} ヘッダー</li> - <li><a href="https://en.wikipedia.org/wiki/Do_Not_Track">Do Not Track on Wikipedia</a></li> - <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li> - <li><a href="http://donottrack.us/">donottrack.us</a></li> - <li>DNT ブラウザー設定のヘルプ: - <ul> - <li><a href="https://www.mozilla.org/ja/firefox/dnt/">Firefox</a></li> - <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li> - </ul> - </li> -</ul> diff --git a/files/ja/web/http/headers/dnt/index.md b/files/ja/web/http/headers/dnt/index.md new file mode 100644 index 0000000000..f961a5e00c --- /dev/null +++ b/files/ja/web/http/headers/dnt/index.md @@ -0,0 +1,74 @@ +--- +title: DNT +slug: Web/HTTP/Headers/DNT +tags: + - DNT + - HTTP + - ヘッダー + - リファレンス +browser-compat: http.headers.DNT +translation_of: Web/HTTP/Headers/DNT +--- +{{HTTPSidebar}}{{Deprecated_header}} + +**`DNT`** (**D**o **N**ot +**T**rack) リクエストヘッダーは、ユーザーのトラッキングの設定を示します。これにより、ユーザーはパーソナライズされたコンテンツではなく、プライバシーを優先するかどうかを指定できます。 + +<table class="properties"> + <tbody> + <tr> + <th scope="row">ヘッダー種別</th> + <td>{{Glossary("Request header", "リクエストヘッダー")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> + <td>はい</td> + </tr> + </tbody> +</table> + +## 構文 + +``` +DNT: 0 +DNT: 1 +DNT: null +``` + +## ディレクティブ + +- 0 + - : ユーザーは対象のサイトでトラッキングを許可している。 +- 1 + - : ユーザーは対象のサイトでトラッキングを拒否している。 +- null + - : ユーザーはトラッキングに関する設定を指定していない。 + +## 例 + +### JavaScript から Do Not Track の状態を読み取る + +ユーザーの DNT 設定は {{domxref("Navigator.doNotTrack")}} プロパティを使用して JavaScript から読み取ることもできます。 + +```js +navigator.doNotTrack; // "0" or "1" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Navigator.doNotTrack")}} +- {{HTTPHeader("Tk")}} ヘッダー +- [Wikipedia の Do Not Track](https://en.wikipedia.org/wiki/Do_Not_Track) +- [What Does the "Track" in "Do Not Track" Mean? – EFF](https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean) +- [donottrack.us](https://donottrack.us/) +- DNT ブラウザー設定のヘルプ: + - [Firefox](https://www.mozilla.org/en-US/firefox/dnt/) + - [Chrome](https://support.google.com/chrome/answer/2790761) diff --git a/files/ja/web/http/headers/expect-ct/index.html b/files/ja/web/http/headers/expect-ct/index.html index e815e30946..d402887ddb 100644 --- a/files/ja/web/http/headers/expect-ct/index.html +++ b/files/ja/web/http/headers/expect-ct/index.html @@ -6,16 +6,33 @@ tags: - Reference - ヘッダー - レスポンスヘッダー +browser-compat: http.headers.Expect-CT translation_of: Web/HTTP/Headers/Expect-CT --- <p>{{HTTPSidebar}}</p> -<p><code>Expect-CT</code> ヘッダーは、サイトが認証透過性の要件の報告や強制に参加して、サイトの不正な認証情報が通知されない状態を防ぐことができます。</p> +<p><code>Expect-CT</code> ヘッダーは、サイトが<a href="/ja/docs/Web/Security/Certificate_Transparency">証明書の透明性</a>の要件の報告や強制に参加して、サイトの不正な認証情報の使用が通知されない状態を防ぐことができます。</p> + +<p>CT の要件は、以下のいずれかの仕組みで満たすことができます。</p> + +<ul> + <li>個々のログで発行された署名付き証明書のタイムスタンプを埋め込めるようにするための X.509v3 証明書の拡張</li> + <li>ハンドシェイク中に送信される <code>signed_certificate_timestamp</code> 型の TLS 拡張</li> + <li>OCSP ステープリング (つまり、 <code>status_request</code> TLS 拡張) に対応し、 <code>SignedCertificateTimestampList</code> を提供すること</li> +</ul> <div class="note"> <p>サイトが <code>Expect-CT</code> ヘッダーを有効にすると、ブラウザーが<strong><a href="https://www.certificate-transparency.org/known-logs">公開 CT ログ</a></strong>に現れるサイトのすべての認証情報をチェックするよう要求します。</p> </div> +<div class="notecard note"> + <p><strong>メモ:</strong> ブラウザーは、 HTTP では <code>Expect-CT</code> ヘッダーを<strong>無視</strong>し、 HTTPS 接続でのみ効果を発揮します。</p> +</div> + +<div class="notecard note"> +<p><strong>メモ:</strong> <code>Expect-CT</code> は 2021 年 6 月に廃止される可能性が高いです。 2018 年 5 月以降、新しい証明書は既定で SCT に対応することが期待されています。 2018 年 3 月以前の証明書は 39 ヶ月の有効期限が認められていましたが、それらが 2021 年 6 月にすべて失効します。</p> +</div> + <table class="properties"> <tbody> <tr> @@ -29,43 +46,48 @@ translation_of: Web/HTTP/Headers/Expect-CT </tbody> </table> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre>Expect-CT: report-uri="<uri>", enforce, max-age=<age></pre> -<h2 id="Directives" name="Directives">ディレクティブ</h2> +<h2 id="Directives">ディレクティブ</h2> <dl> - <dt>max-age</dt> + <dt><code>max-age</code></dt> <dd> <p><code>Expect-CT</code> ヘッダーフィールドを受信した後で、ユーザーエージェントがメッセージを受信したホストを、既知の Expect-CT ホストと見なすべき時間を秒数で指定します。</p> - <p>キャッシュが表現可能な値よりも大きな値を受信した場合や、計算でオーバーフローが発生した場合、キャッシュは値を 2147483648 (2^31) または使用している表現方法で最も大きな整数値とみなします。</p> + <p>キャッシュが表現可能な値よりも大きな値を受信した場合や、計算でオーバーフローが発生した場合、キャッシュは値を 2,147,483,648 (2^31) または使用している表現方法で最も大きな整数値とみなします。</p> </dd> - <dt>report-uri="<uri>" {{optional_inline}}</dt> + <dt><code>report-uri="<uri>"</code> {{optional_inline}}</dt> <dd> - <p>ユーザーエージェントが Expect-CT の失敗を報告する URI を指定します。</p> - <code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに認証透過性ポリシーに従い、違反を報告することを指示します。 - - <p> </p> - </dd> - <dt>enforce {{optional_inline}}</dt> + <p>ユーザーエージェントが <code>Expect-CT</code> の失敗を報告する URI を指定します。</p> + <code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに証明書の透明性ポリシーに従い、違反を報告することを指示します。</dd> + <dt><code>enforce</code> {{optional_inline}}</dt> <dd> - <p>ユーザーエージェントに (報告するだけでなく) 認証透過性ポリシーに従い、ユーザーエージェントが認証透過性ポリシーに違反するコネクションを拒否するよう指示します。</p> + <p>ユーザーエージェントに (報告するだけでなく) 証明書の透明性ポリシーに従い、ユーザーエージェントが証明書の透明性ポリシーに違反するコネクションを拒否するよう指示します。</p> - <p><code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに認証透過性ポリシーに従い、違反を報告することを指示します。</p> + <p><code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに証明書の透明性ポリシーに従い、違反を報告することを指示します。</p> </dd> </dl> -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<p>以下の例は認証透過性を24時間強制し、違反を foo.example に報告することを示します。</p> +<p>以下の例は証明書の透明性を 24 時間強制し、違反を <code>foo.example</code> に報告することを示します。</p> <pre>Expect-CT: max-age=86400, enforce, report-uri="https://foo.example/report"</pre> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Notes">メモ</h2> + +<p>信頼ストアに手動で追加されたルート CA は、 <code>Expect-CT</code> の報告/強制を上書きし、抑制します。</p> + +<p>ブラウザーは、サイトが証明書の透明性要件を満たす証明書を提供できることを「証明」しない限り、 <code>Expect-CT</code> ポリシーを記憶しません。ブラウザーは、どの CT ログが証明書のログとして信頼できるとみなされるかについて、独自の信頼モデルを実装しています。</p> + +<p>Chrome のビルドは、インストールのビルド日から 10 週間後に <code>Expect-CT</code> ポリシーの施行を停止するように設計されています。</p> + +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -76,12 +98,12 @@ translation_of: Web/HTTP/Headers/Expect-CT </thead> <tbody> <tr> - <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-expect-ct-07">Internet Draft</a></td> + <td><a href="https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-expect-ct-08">Internet Draft</a></td> <td>Expect-CT Extension for HTTP</td> </tr> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("http.headers.Expect-CT")}}</p> +<p>{{Compat}}</p> diff --git a/files/ja/web/http/headers/index.html b/files/ja/web/http/headers/index.html deleted file mode 100644 index f1b18ac9db..0000000000 --- a/files/ja/web/http/headers/index.html +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: HTTP ヘッダー -slug: Web/HTTP/Headers -tags: - - HTTP - - HTTP ヘッダー - - Networking - - Reference - - header - - ネットワーク - - ヘッダー - - リファレンス -translation_of: Web/HTTP/Headers ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary"><strong>HTTP ヘッダー</strong>により、クライアントやサーバーが HTTP リクエストやレスポンスで追加情報を渡すことができます。 HTTP ヘッダーは、大文字小文字を区別しないヘッダー名とそれに続くコロン (<code>:</code>)、 値で構成されます。</span>値の前にある{{Glossary("Whitespace", "ホワイトスペース")}}は無視されます。</p> - -<p>独自のヘッダーは、以前は <code>X-</code> 接頭辞を使用していましたが、この慣習は 2012 年 6 月に非推奨になりました。これは、 <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a> で非標準のフィールドが標準になったときに発生した不便さのためです。それ以外のヘッダーは <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA レジストリ</a> に収録されており、その基になったものは <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a> です。また IANA は <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">新たに提案された HTTP ヘッダーのレジストリ</a> も管理しています。</p> - -<p>ヘッダーは、そのコンテキストに応じて分類できます。</p> - -<ul> - <li>{{Glossary("General header", "一般ヘッダー")}}: リクエストとレスポンスの両方に適用されますが、本文で転送されるデータとは関係ないものです。</li> - <li>{{Glossary("Request header", "リクエストヘッダー")}}: 読み込むリソースやリソースをリクエストしているクライアントに関する詳細な情報を持ちます。</li> - <li>{{Glossary("Response header", "レスポンスヘッダー")}}: レスポンスに関する追加情報、例えば場所や提供しているサーバーに関するものを保持します。</li> - <li>{{Glossary("Entity header", "エンティティヘッダー")}}: リソースの本体に関する情報、例えば<a href="/ja/docs/Web/HTTP/Headers/Content-Length">コンテンツの長さ</a>や <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>などを持ちます。</li> -</ul> - -<p>またヘッダーは、{{Glossary("Proxy_server", "プロキシサーバー")}}がどのように処理するかに応じてグループ化されます。</p> - -<ul> - <li>{{ httpheader("Connection") }}</li> - <li>{{ httpheader("Keep-Alive") }}</li> - <li>{{ httpheader("Proxy-Authenticate") }}</li> - <li>{{ httpheader("Proxy-Authorization") }}</li> - <li>{{ httpheader("TE") }}</li> - <li>{{ httpheader("Trailer") }}</li> - <li>{{ httpheader("Transfer-Encoding") }}</li> - <li>{{ httpheader("Upgrade") }}.</li> -</ul> - -<dl> - <dt id="e2e">エンドツーエンドヘッダー</dt> - <dd>これらのヘッダーは、メッセージの最終的な宛先、すなわちリクエストならばサーバー、レスポンスならばクライアントに伝送し<em>なければなりません</em>。中間のプロキシはヘッダーを変更せずに再伝送しなければならず、またキャッシュには保存しなければなりません。</dd> - <dt id="hbh">ホップバイホップヘッダー</dt> - <dd>これらのヘッダーは単一のトランスポート層の接続にのみ意味を持ち、プロキシが再転送したり、キャッシュを行ったりしては<em>いけません</em>。なお、 {{httpheader("Connection")}} 一般ヘッダーを用いて設定する場合があるのはホップバイホップヘッダーのみです。</dd> -</dl> - -<h2 id="Authentication" name="Authentication">認証</h2> - -<dl> - <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> - <dd>リソースへアクセスに使用すべき認証方法を定義します。</dd> - <dt>{{HTTPHeader("Authorization")}}</dt> - <dd>サーバーでユーザーエージェントを認証するための資格情報を持ちます。</dd> - <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> - <dd>プロキシサーバーの背後にあるリソースへアクセスできるようにするために使用すべき認証方法を定義します。</dd> - <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> - <dd>プロキシサーバーでユーザーエージェントを認証するための資格情報を持ちます。</dd> -</dl> - -<h2 id="Caching" name="Caching">キャッシュ</h2> - -<dl> - <dt>{{HTTPHeader("Age")}}</dt> - <dd>オブジェクトがプロキシのキャッシュに存在する時間を秒数で表します。</dd> - <dt>{{HTTPHeader("Cache-Control")}}</dt> - <dd>リクエストおよびレスポンスで、キャッシュ機能に関するディレクティブです。</dd> - <dt>{{HTTPHeader("Clear-Site-Data")}}</dt> - <dd>リクエストしているウェブサイトに関連付けられたブラウズ用のデータ (クッキー、ストレージ、キャッシュ等) を消去します。</dd> - <dt>{{HTTPHeader("Expires")}}</dt> - <dd>レスポンスが陳腐化すると考えられる日時を表します。</dd> - <dt>{{HTTPHeader("Pragma")}}</dt> - <dd>リクエストからレスポンスへの流れの中でさまざまな影響がある、実装依存のヘッダーです。 <code>Cache-Control</code> ヘッダーが未実装である HTTP/1.0 キャッシュとの後方互換性のために使用します。</dd> - <dt>{{HTTPHeader("Warning")}}</dt> - <dd>起こりうる問題に関する一般警告情報です。</dd> -</dl> - -<h2 id="Client_hints" name="Client_hints">クライアントヒント</h2> - -<p>HTTP {{Glossary("Client_hints", "クライアントヒント")}}は策定中です。実際の文書は <a href="https://httpwg.org/http-extensions/client-hints.html">HTTP 作業グループのウェブサイト</a>にあります。</p> - -<dl> - <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt> - <dd>サーバーはクライアントヒントに対応していることを、 <code>Accept-CH</code> ヘッダーフィールドまたは同等の <code>http-equiv</code> 属性が付いた HTML の <code><meta></code> 要素を使用して広報することができます (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>)。</dd> - <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt> - <dd>サーバーは、指定された期間サーバーがサポートする対応する一連のクライアントヒントを記憶するようクライアントに依頼し、そのサーバーのオリジンに対するその後のリクエストでクライアントヒントを配信できるようにすることができます (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>)。</dd> - <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt> - <dd>リクエストが早期データを伝えていることを示します。</dd> - <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt> - <dd>数値で、選択された画像レスポンスの CSS ピクセルに対する物理ピクセルの比を示します。</dd> - <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt> - <dd>数値で、現在のクライアントの端末ピクセル比 (DPR)、すなわち端末のレイアウトビューポート (<a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a> のセクション9.1.1) における、 CSS ピクセルに対する物理ピクセルの比 (<a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a> のセクション5.2) を示します。</dd> - <dt>{{HTTPHeader("Device-Memory")}} {{experimental_inline}}</dt> - <dd>技術的には Device Memory API の一部で、このヘッダーはクライアントが持つおよその RAM の量を表します。</dd> - <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt> - <dd>論理型で、ユーザーエージェントのデータ利用の削減についての設定を示します。</dd> - <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt> - <dd> - <div id="rfc.section.3.3.p.1"> - <p><code>Viewport-Width</code> リクエストヘッダーフィールドは数値で、レイアウトビューポートの幅を CSS ピクセル数で示します。指定されたピクセル数は、それ以上の最小の整数に丸められます (つまり切り上げ)。</p> - </div> - - <div id="rfc.section.3.3.p.2"> - <p><code>Viewport-Width</code> がメッセージ内に二回以上現れた場合、最後の値がそれ以前のすべての値を上書きします。</p> - </div> - </dd> - <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt> - <dd> - <div id="rfc.section.3.2.p.1"> - <p><code>Width</code> リクエストヘッダーフィールドは数値で、要求するリソースの幅 (つまり画像の固有の寸法) を物理ピクセル数で示します。指定されたピクセル数は、それ以上の最小の整数に丸められます (つまり切り上げ)。</p> - </div> - - <div id="rfc.section.3.2.p.2"> - <p>要求するリソースの幅がリクエストの時点で不明である場合や、リソースが表示幅を持たない場合は、 <code>Width</code> ヘッダーフィールドは省略できます。 <code>Width</code> がメッセージ内に二回以上現れた場合、最後の値がそれ以前のすべての値を上書きします。</p> - </div> - </dd> -</dl> - -<h2 id="Conditionals" name="Conditionals">条件付き</h2> - -<dl> - <dt>{{HTTPHeader("Last-Modified")}}</dt> - <dd>リソースが最後に変更された日時であり、同じリソースの複数のバージョンを比較するために使用されます。 {{HTTPHeader("ETag")}} より正確さは低いのですが、環境によっては計算が容易です。{{HTTPHeader("If-Modified-Since")}} や {{HTTPHeader("If-Unmodified-Since")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。</dd> - <dt>{{HTTPHeader("ETag")}}</dt> - <dd>一意な文字列であり、リソースのバージョンを識別します。 {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-None-Match")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。</dd> - <dt>{{HTTPHeader("If-Match")}}</dt> - <dd>リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致する場合に限りメソッドを適用します。</dd> - <dt>{{HTTPHeader("If-None-Match")}}</dt> - <dd>リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致<em>しない</em>場合に限りメソッドを適用します。これはキャッシュを更新する (安全なリクエスト向け)、あるいはすでにリソースが存在する場合に新しいリソースのアップロードを止めるために使用します。</dd> - <dt>{{HTTPHeader("If-Modified-Since")}}</dt> - <dd>リクエストを条件付きにして、エンティティが指定した日時より後に変更されている場合に限り転送するようリクエストします。キャッシュが期限切れである場合に限りデータを転送するために使用します。</dd> - <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> - <dd>リクエストを条件付きにして、エンティティが指定した日時より後に変更されていない場合に限り転送するようリクエストします。これは、特定の範囲の新しい断片と古い断片の一貫性を保証する、あるいは既存の文書を変更するときに楽観的な並行性制御システムを実装するために使用します。</dd> - <dt>{{HTTPHeader("Vary")}}</dt> - <dd>新しいものを元のサーバーにリクエストするのではなく、キャッシュされたレスポンスが使用できるよう決定するために、リクエストヘッダーを一致させる方法を定めます。/dd></dd> -</dl> - -<h2 id="Connection_management" name="Connection_management">接続制御</h2> - -<dl> - <dt>{{HTTPHeader("Connection")}}</dt> - <dd>現在の転送が完了した後も、ネットワークコネクションを維持するかを制御します。</dd> - <dt>{{HTTPHeader("Keep-Alive")}}</dt> - <dd>持続的なコネクションをどれだけの期間維持するかを制御します。</dd> -</dl> - -<h2 id="Content_negotiation" name="Content_negotiation"><a href="/ja/docs/Web/HTTP/Content_negotiation">コンテンツネゴシエーション</a></h2> - -<dl> - <dt>{{HTTPHeader("Accept")}}</dt> - <dd>送り返すことができるデータの{{Glossary("MIME_type", "種類")}}をサーバーに通知します。</dd> - <dt>{{HTTPHeader("Accept-Charset")}}</dt> - <dd>どの{{Glossary("character encodings", "文字集合")}}をクライアントが理解できるかです。</dd> - <dt>{{HTTPHeader("Accept-Encoding")}}</dt> - <dd>送り返すリソースで使用できるエンコードアルゴリズム (一般的には<a href="/ja/docs/Web/HTTP/Compression">圧縮アルゴリズム</a>) をサーバーに通知します。</dd> - <dt>{{HTTPHeader("Accept-Language")}}</dt> - <dd>送り返すリソースで期待する自然言語をサーバーに通知します。これはヒントであり、必ずしもユーザーの完全な制御下にあるものではありません。サーバーはユーザーの選択 (ドロップダウンリストで選ぶ言語など) を明示的に上書きしないように、常に注意を払うべきです。</dd> -</dl> - -<h2 id="Controls" name="Controls">制御</h2> - -<dl> - <dt>{{HTTPHeader("Expect")}}</dt> - <dd>リクエストを適切に扱うためにサーバーが実行しなければならないと期待されていることを示します。</dd> - <dt>{{HTTPHeader("Max-Forwards")}}</dt> -</dl> - -<h2 id="Cookies" name="Cookies">クッキー</h2> - -<dl> - <dt>{{HTTPHeader("Cookie")}}</dt> - <dd>過去に {{HTTPHeader("Set-Cookie")}} ヘッダーでサーバーから送信されて保存している <a href="/ja/docs/Web/HTTP/Cookies">HTTP クッキー</a>を持ちます。</dd> - <dt>{{HTTPHeader("Set-Cookie")}}</dt> - <dd>サーバーからユーザーエージェントにクッキーを送信します。</dd> - <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> - <dd>過去に {{HTTPHeader("Set-Cookie2")}} ヘッダーでサーバーから送信された HTTP クッキーを伝えるために使われていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Cookie")}} を使用してください。</dd> - <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> - <dd>サーバーからユーザーエージェントに Cookie を送信するために使用されていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Set-Cookie")}} を使用してください。</dd> -</dl> - -<h2 id="CORS" name="CORS">オリジン間リソース共有 (CORS)</h2> - -<p><em>CORS についての詳細は、<a href="CORS">こちら</a>を参照してください。</em></p> - -<dl> - <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> - <dd>レスポンスが共有可能かを示します。</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> - <dd>credentials フラグが真であるときに、リクエストへのレスポンスを開示してよいかを示します。</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> - <dd>{{Glossary("Preflight_request", "プリフライトリクエスト")}}へのレスポンスで使用し、実際のリクエストを行うときに使用できる HTTP ヘッダーを指定します。</dd> - <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> - <dd>プリフライトリクエストへのレスポンスで、リソースへアクセスするときに使用できるメソッドを指定します。</dd> - <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> - <dd>ヘッダー名を羅列して、レスポンスの一部として開示できるヘッダーを示します。</dd> - <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> - <dd>プリフライトリクエストの結果をキャッシュしてよい期間を示します。</dd> - <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> - <dd>実際のリクエストを行う際に使用する HTTP ヘッダーをサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。</dd> - <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> - <dd>実際のリクエストを行う際に使用する <a href="/ja/docs/Web/HTTP/Methods">HTTP メソッド</a> をサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。</dd> - <dt>{{HTTPHeader("Origin")}}</dt> - <dd>どこから読み込みが発生したかを示します。</dd> - <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> - <dd><a href="/ja/docs/Web/API/Resource_Timing_API">Resource Timing API</a> の機能を通じて受け取った属性の値を見ることができるオリジンを指定します。そうでなければオリジン間の制約によってゼロとして報告されます。</dd> -</dl> - -<h2 id="Do_Not_Track" name="Do_Not_Track">Do Not Track</h2> - -<dl> - <dt>{{HTTPHeader("DNT")}}</dt> - <dd>ユーザーのトラッキング設定を示します。</dd> - <dt>{{HTTPHeader("Tk")}}</dt> - <dd>対応するレスポンスのトラッキング状態を示します。</dd> -</dl> - -<h2 id="Downloads" name="Downloads">ダウンロード</h2> - -<dl> - <dt>{{HTTPHeader("Content-Disposition")}}</dt> - <dd>転送したリソースをインラインで表示すべきか (ヘッダーが存在しない場合の既定の動作)、またはダウンロードとして扱い、「名前を付けて保存」ウィンドウを表示すべきかを示します。</dd> -</dl> - -<h2 id="Message_body_information" name="Message_body_information">メッセージ本文の情報</h2> - -<dl> - <dt>{{HTTPHeader("Content-Length")}}</dt> - <dd>リソースの大きさを、バイト単位の10進数で示します。</dd> - <dt>{{HTTPHeader("Content-Type")}}</dt> - <dd>リソースのメディアタイプを示します。</dd> - <dt>{{HTTPHeader("Content-Encoding")}}</dt> - <dd>圧縮アルゴリズムを指定するために使用します。</dd> - <dt>{{HTTPHeader("Content-Language")}}</dt> - <dd>読者向けに言語を示すヘッダーであり、ユーザーが自身の好む言語に応じて区別することができます。</dd> - <dt>{{HTTPHeader("Content-Location")}}</dt> - <dd>返すデータの代替データの場所を示します。</dd> -</dl> - -<h2 id="Proxies" name="Proxies">プロキシ</h2> - -<dl> - <dt>{{HTTPHeader("Forwarded")}}</dt> - <dd>リクエストのパスにプロキシが関与したときに変更または遺失した、プロキシサーバーのクライアント側の情報を持ちます。</dd> - <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> - <dd>HTTP プロキシやロードバランサーを経由してウェブサーバーに接続するクライアントの、接続元 IP アドレスを識別します。</dd> - <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> - <dd>プロキシやロードバランサーに接続するクライアントがリクエストした、オリジナルのホストを示します。</dd> - <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> - <dd>クライアントがプロキシやロードバランサーに接続するために使用したプロトコル (HTTP または HTTPS) を識別します。</dd> - <dt>{{HTTPHeader("Via")}}</dt> - <dd>フォワードプロキシとリバースプロキシの両方が追加するヘッダーであり、リクエストヘッダーとレスポンスヘッダーのどちらでも見られます。</dd> -</dl> - -<h2 id="Redirects" name="Redirects">リダイレクト</h2> - -<dl> - <dt>{{HTTPHeader("Location")}}</dt> - <dd>ページのリダイレクト先の URL を示します。</dd> -</dl> - -<h2 id="Request_context" name="Request_context">リクエストコンテキスト</h2> - -<dl> - <dt>{{HTTPHeader("From")}}</dt> - <dd>リクエストを行うユーザーエージェントを操作している人間の、インターネット電子メールアドレスを持ちます。</dd> - <dt>{{HTTPHeader("Host")}}</dt> - <dd>サーバーのドメイン名 (バーチャルホスト向け) およびサーバーが待ち受けている TCP ポート番号 (省略可能) を指定します。</dd> - <dt>{{HTTPHeader("Referer")}}</dt> - <dd>現在リクエストしているページへリンクしていた、前のウェブページのアドレスです。</dd> - <dt>{{HTTPHeader("Referrer-Policy")}}</dt> - <dd>{{HTTPHeader("Referer")}} ヘッダーで送信するどのリファラー情報をリクエストに含めるかを制御します。</dd> - <dt>{{HTTPHeader("User-Agent")}}</dt> - <dd>リクエストを行うユーザーエージェントソフトウェアのアプリケーションタイプ、オペレーティングシステム、ベンダー、バージョンを、ネットワークプロトコルのピアが識別できるようにする文字列を持ちます。 <a href="/ja/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox ユーザーエージェント文字列リファレンス</a>もご覧ください。</dd> -</dl> - -<h2 id="Response_context" name="Response_context">レスポンスコンテキスト</h2> - -<dl> - <dt>{{HTTPHeader("Allow")}}</dt> - <dd>リソースがサポートする HTTP リクエストメソッドを示します。</dd> - <dt>{{HTTPHeader("Server")}}</dt> - <dd>リクエストを扱うサーバーが使用するソフトウェアの情報を持ちます。</dd> -</dl> - -<h2 id="Range_requests" name="Range_requests">範囲付きリクエスト</h2> - -<dl> - <dt>{{HTTPHeader("Accept-Ranges")}}</dt> - <dd>サーバーが範囲付きリクエストに対応するかどうか、対応していれば対応する場合は、範囲を表すことができる単位を示します。</dd> - <dt>{{HTTPHeader("Range")}}</dt> - <dd>サーバーが返すべきである文書の範囲を示します。</dd> - <dt>{{HTTPHeader("If-Range")}}</dt> - <dd>指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き range request を生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。</dd> - <dt>{{HTTPHeader("Content-Range")}}</dt> - <dd>部分的なメッセージが、メッセージ本文全体のどこに位置するかを示します。</dd> -</dl> - -<h2 id="Security" name="Security">セキュリティ</h2> - -<dl> - <dt>{{HTTPHeader("Cross-Origin-Embedder-Policy")}} ({{Glossary("COEP")}})</dt> - <dd>サーバーが指定された文書の埋め込み方針を宣言するために使います。</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Cross-Origin-Opener-Policy")}} ({{Glossary("COOP")}})</dt> - <dd>他のドメインがウィンドウを開いたり制御したりすることを防ぎます。</dd> -</dl> - -<dl> - <dt>{{HTTPHeader("Cross-Origin-Resource-Policy")}} ({{Glossary("CORP")}})</dt> - <dd>このヘッダーが適用されたリソースのレスポンスが他のドメインから読み取られるのを防ぎます。</dd> - <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> - <dd>ユーザーエージェントがページで読み込むことを許可するリソースを制御します。</dd> - <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> - <dd>ウェブの開発者がポリシーの効果を適用せずに監視することで、実験を行うことができます。これらの違反レポートは、 HTTP <code>POST</code> リクエストによって指定した URI へ送信される {{Glossary("JSON")}} 文書で構成されます。</dd> - <dt>{{HTTPHeader("Expect-CT")}}</dt> - <dd>サイトが証明書の透明性要件の報告や実施を選択できるようにします。これにより、そのサイトで不正な証明書の使用に気づかないことを防ぎます。サイトが Expect-CT ヘッダーを有効にした場合、そのサイトの証明書が公開CTログに表示されることを Chrome が確認するようにリクエストしています。</dd> - <dt>{{HTTPHeader("Feature-Policy")}}</dt> - <dd>自身のフレームまたはその中の iframe で、ブラウザーの機能を使用することを許可または拒否する仕組みを提供します。</dd> - <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> - <dd>HTTP の代わりに HTTPS による通信を強制します。</dd> - <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> - <dd>暗号化や認証されたレスポンスについて、クライアントの設定を表す信号をサーバーに送信して、{{CSP("upgrade-insecure-requests")}} ディレクティブを正しく扱うことができます。</dd> - <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> - <dd>ブラウザーで MIME スニッフィングを無効化して、{{HTTPHeader("Content-Type")}} で指定したタイプを強制的に使用させます。</dd> - <dt>{{HTTPHeader("X-Download-Options")}}</dt> - <dd>HTTP の <code><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj542450(v=vs.85)?#the-noopen-directive">X-Download-Options</a></code> ヘッダーは、ブラウザー (Internet Explorer) がアプリケーションからのダウンロードでファイルを「開く」の選択肢を表示しないようにし、アプリケーションのコンテキストで実行するアクセス権を得ることがないようにして、ファイルとすることでフィッシング詐欺を防止します。 (メモ: <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18488178/">MS Edge bug</a> に関連)</dd> - <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> - <dd>ブラウザーがページを {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}} の内部に表示することを許可するかを示します。</dd> - <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt> - <dd>クロスドメインポリシーファイル (<code>crossdomain.xml</code>) を許可するかどうかを指定します。このファイルは、 Adobe の Flash Player、Adobe Acrobat、Microsoft Silverlight、Apache Flex などのクライアントに、<a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a>によって制限されているドメイン間のデータを処理する許可を与えるポリシーを定義することができます。詳細については、 <a href="https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html">Cross-domain Policy File Specification</a> を参照してください。</dd> - <dt>{{HTTPHeader("X-Powered-By")}}</dt> - <dd>ホスティング環境やその他のフレームワークによって設定される可能性があり、アプリケーションや訪問者に有益ではない情報を含みます。潜在的な脆弱性が発現することを防ぐために、このヘッダーは設定しないでください。</dd> - <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> - <dd>クロスサイトスクリプティングのフィルタリングを有効化します。</dd> -</dl> - -<h3 id="HTTP_Public_Key_Pinning_GlossaryHPKP">HTTP Public Key Pinning ({{Glossary("HPKP")}})</h3> - -<p>HTTP Public Key Pinning は非推奨となり、削除されて Certificate Transparency と {{HTTPHeader("Expect-CT")}} に置き換えられました。</p> - -<dl> - <dt>{{HTTPHeader("Public-Key-Pins")}}</dt> - <dd>偽造した証明書による {{Glossary("MITM")}} 攻撃の危険性を軽減するため、特定の暗号公開鍵とウェブサーバーを関連付けます。</dd> - <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> - <dd>ピンニングに違反する場合でも、ヘッダーで指定した report-uri にレポートを送信して、クライアントからサーバーへの接続は許可します。</dd> -</dl> - -<h3 id="Fetch_metadata_request_headers" name="Fetch_metadata_request_headers">メタデータ読み取りリクエストヘッダー</h3> - -<dl> - <dt>{{HTTPHeader("Sec-Fetch-Site")}}</dt> - <dd>リクエスト開始元のオリジンと宛先のオリジンとの関係を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は <code>cross-site</code>, <code>same-origin</code>, <code>same-site</code>, <code>none</code> です。</dd> - <dt>{{HTTPHeader("Sec-Fetch-Mode")}}</dt> - <dd>サーバーへのリクエストモードを示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は <code>cors</code>, <code>navigate</code>, <code>nested-navigate</code>, <code>no-cors</code>, <code>same-origin</code>, <code>websocket</code> です。</dd> - <dt>{{HTTPHeader("Sec-Fetch-User")}}</dt> - <dd>ナビゲーションリクエストがユーザー操作によって起動されたかどうかを示すリクエストヘッダーです。これは構造化ヘッダーであり、論理値で、取りうる値は <code>?0</code> ならば偽、 <code>?1</code> ならば真です。</dd> - <dt>{{HTTPHeader("Sec-Fetch-Dest")}}</dt> - <dd>リクエストの宛先を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は <code>audio</code>, <code>audioworklet</code>, <code>document</code>, <code>embed</code>, <code>empty</code>, <code>font</code>, <code>image</code>, <code>manifest</code>, <code>object</code>, <code>paintworklet</code>, <code>report</code>, <code>script</code>, <code>serviceworker</code>, <code>sharedworker</code>, <code>style</code>, <code>track</code>, <code>video</code>, <code>worker</code>, <code>xslt</code>, <code>nested-document</code> です。</dd> -</dl> - -<h2 id="Server-sent_events" name="Server-sent_events">Server-sent event</h2> - -<dl> - <dt>{{HTTPHeader("Last-Event-ID")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("NEL")}} {{experimental_inline}}</dt> - <dd>開発者がネットワークエラー報告ポリシーを宣言できるようにする仕組みを定義します。</dd> - <dt>{{HTTPHeader("Ping-From")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Ping-To")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Report-To")}}</dt> - <dd>警告やエラーを送信るためのブラウザーに対するサーバーのエンドポイントを指定するために使用します。</dd> -</dl> - -<h2 id="Transfer_coding" name="Transfer_coding">転送エンコーディング</h2> - -<dl> - <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> - <dd>エンティティをユーザーへ問題なく転送できるエンコード形式を指定します。</dd> - <dt>{{HTTPHeader("TE")}}</dt> - <dd>ユーザーエージェントが進んで受け入れる転送エンコーディングを指定します。</dd> - <dt>{{HTTPHeader("Trailer")}}</dt> - <dd>送信者が chunk メッセージの終端に追加フィールドを含めることができます。</dd> -</dl> - -<h2 id="WebSockets" name="WebSockets">WebSocket</h2> - -<dl> - <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> - <dd>...</dd> -</dl> - -<h2 id="Other" name="Other">その他</h2> - -<dl> - <dt>{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}</dt> - <dd>クライアントはリクエストに対して求めるプッシュポリシーを、リクエスト内で <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.1">Accept-Push-Policy</a></code> ヘッダーフィールドを送信することで表現することができます。</dd> - <dt>{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}</dt> - <dd>クライアントは <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7">Accept-Signature</a></code> ヘッダーフィールドを送信して、利用可能な署名を利用する意図を示したり、対応している署名の種類を示したりすることができます。</dd> - <dt>{{HTTPHeader("Alt-Svc")}}</dt> - <dd>このサービスにたどり着く他の方法のリストに使用します。</dd> - <dt>{{HTTPHeader("Date")}}</dt> - <dd>メッセージを生成した日時です。</dd> - <dt>{{HTTPHeader("Large-Allocation")}}</dt> - <dd>読み込み中のページは大量の割り当てが必要であることをブラウザーに伝えます。</dd> - <dt>{{HTTPHeader("Link")}}</dt> - <dd><code><a href="https://tools.ietf.org/html/rfc5988#section-5">Link</a></code> エンティティヘッダーフィールドは、 HTTP ヘッダー内の1つ以上のリンクを記述する方法を提供します。意味的には HTML の {{HTMLElement("link")}} 要素と等価です。</dd> - <dt>{{HTTPHeader("Push-Policy")}} {{experimental_inline}}</dt> - <dd><code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.2">Push-Policy</a></code> はリクエストを処理するときのプッシュ通知に関するサーバーの動作を定義します。</dd> - <dt>{{HTTPHeader("Retry-After")}}</dt> - <dd>後続のリクエストを行う前に、ユーザーエージェントがどれだけの期間待つべきかを示します。</dd> - <dt>{{HTTPHeader("Signature")}} {{experimental_inline}}</dt> - <dd><code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1">Signature</a></code> ヘッダーフィールドは、交換のための署名のリストを伝え、それぞれはその署名の権威を決定して、そして更新する方法についての情報を伴います。</dd> - <dt>{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}</dt> - <dd><code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2">Signed-Headers</a></code> ヘッダーフィールドは、シグネチャに含めるためのレスポンスヘッダーフィールドの順序付きリストを識別します。</dd> - <dt>{{HTTPHeader("Server-Timing")}}</dt> - <dd>指定されたリクエストとレスポンスのサイクルについて、１つ以上のメトリクス又は説明を通信します。</dd> - <dt>{{HTTPHeader("Service-Worker-Allowed")}}</dt> - <dd><a href="https://w3c.github.io/ServiceWorker/#service-worker-script-response">サービスワーカースクリプトのレスポンス</a>にこのヘッダを含めることで、<a href="https://w3c.github.io/ServiceWorker/#path-restriction">パス制限</a>を解除するために使用します。</dd> - <dt>{{HTTPHeader("SourceMap")}}</dt> - <dd>生成されたコードと <a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップ</a> を関連付けます。</dd> - <dt>{{HTTPHeader("Upgrade")}}</dt> - <dd>Upgrade ヘッダーフィールドに関連する RFC 文書は <a href="https://tools.ietf.org/html/rfc7230#section-6.7">RFC 7230, section 6.7</a> です。標準仕様では、現在のクライアント、サーバー、トランスポート層プロトコル接続で別のプロトコルへ更新または変更するための規則を定めています。例えば、このヘッダー標準ではサーバーが Upgrade ヘッダーフィールドを認めて実装すると決める前提で、クライアントが HTTP 1.1 から HTTP 2.0 へ変更することを可能にします。どちらの相手も、 Upgrade ヘッダーフィールドで指定された要件を受け入れる必要はありません。これはクライアントのヘッダーでもサーバーのヘッダーでも使用できます。Upgrade ヘッダーフィールドを指定した場合は、更新オプションを指ヘッダーonnection ヘッダーフィールドも送信者が送信しなければなりません。Connection ヘッダーフィールドについて、詳しくは <a href="https://tools.ietf.org/html/rfc7230#section-6.1">前述の RFC のセクション 6.1</a> をご覧ください。</dd> - <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> - <dd>ユーザーがたどるであろうリンクや、ドキュメントが参照する画像、 CSS、 JavaScript などのリソースのドメイン名解決をブラウザーが事前に行う機能である、 DNS プリフェッチを制御します。</dd> - <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Requested-With")}}</dt> - <dd>...</dd> - <dt>{{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}</dt> - <dd><code><a href="https://developers.google.com/search/reference/robots_meta_tag#xrobotstag">X-Robots-Tag</a></code> ヘッダーは、一般の検索エンジンの結果でウェブページをどのように索引付けをするかを示します。このヘッダーは <code><meta name="robots" content="..."></code> と等価です。</dd> - <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt> - <dd>使用する文書モードを示すために Internet Explorer で使用されています。</dd> -</dl> - -<h2 id="Contributing" name="Contributing">協力</h2> - -<p><a href="/ja/docs/MDN/Contribute/Howto/Document_an_HTTP_header">新しい項目を書いたり</a>、既存のものを改善したりすることにご協力ください。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia の HTTP ヘッダーの一覧のページ</a></li> - <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA レジストリ</a></li> - <li><a href="https://httpwg.org/specs/">HTTP Working Group</a></li> -</ul> diff --git a/files/ja/web/http/headers/index.md b/files/ja/web/http/headers/index.md new file mode 100644 index 0000000000..a2239ea7e0 --- /dev/null +++ b/files/ja/web/http/headers/index.md @@ -0,0 +1,401 @@ +--- +title: HTTP ヘッダー +slug: Web/HTTP/Headers +tags: + - HTTP + - HTTP ヘッダー + - Networking + - Reference + - header + - ネットワーク + - ヘッダー + - リファレンス +translation_of: Web/HTTP/Headers +--- +{{HTTPSidebar}} + +**HTTP ヘッダー**により、 HTTP リクエストやレスポンスでクライアントやサーバーが追加情報を渡すことができます。 HTTP ヘッダーは、大文字小文字を区別しないヘッダー名とそれに続くコロン (`:`)、 値で構成されます。値の前にある{{Glossary("Whitespace", "ホワイトスペース")}}は無視されます。 + +私的な独自のヘッダーは、以前は `X-` 接頭辞を使用していましたが、この慣習は 2012 年 6 月の [RFC 6648](https://datatracker.ietf.org/doc/html/rfc6648) で非推奨になりました。これは、標準外のフィールドが標準になったときに発生する不便さのためです。それ以外のヘッダーは [IANA レジストリー](https://www.iana.org/assignments/message-headers/perm-headers.html)に収録されており、その基になったものは [RFC 4229](https://datatracker.ietf.org/doc/html/rfc4229) です。また IANA は[新たに提案された HTTP ヘッダーのレジストリー](https://www.iana.org/assignments/message-headers/prov-headers.html)も管理しています。 + +ヘッダーは、そのコンテキストに応じて分類できます。 + +- {{Glossary("Request header", "リクエストヘッダー")}}は、読み込むリソースについての情報や、そのリソースをリクエストしているクライアントに関する詳細な情報を持ちます。 +- {{Glossary("Response header", "レスポンスヘッダー")}}は、レスポンスに関する追加情報、例えば場所や提供しているサーバーに関する情報を保持します。 +- {{Glossary("Representation header", "表現ヘッダー")}}は、リソースの本体に関する情報、例えば [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)や適用されるエンコード／圧縮方式などについての情報を持ちます。 +- {{Glossary("Payload header","ペイロードヘッダー")}}は、転送されるデータの表現から独立した情報、例えばコンテンツの長さや転送に使われるエンコード方式などを持ちます。 + +またヘッダーは、{{Glossary("Proxy_server", "プロキシーサーバー")}}がどのように扱うかに応じてグループ化されます。 + +- {{ httpheader("Connection") }} +- {{ httpheader("Keep-Alive") }} +- {{ httpheader("Proxy-Authenticate") }} +- {{ httpheader("Proxy-Authorization") }} +- {{ httpheader("TE") }} +- {{ httpheader("Trailer") }} +- {{ httpheader("Transfer-Encoding") }} +- {{ httpheader("Upgrade") }} ([プロトコルのアップグレードの仕組み](/ja/docs/Web/HTTP/Protocol_upgrade_mechanism)も参照) + +<!----> + +- エンドツーエンドヘッダー + - : これらのヘッダーは、メッセージの最終的な宛先、すなわちリクエストならばサーバー、レスポンスならばクライアントに伝送し*なければなりません*。中間のプロキシーはヘッダーを変更せずに再伝送しなければならず、またキャッシュには保存しなければなりません。 +- ホップバイホップヘッダー + - : これらのヘッダーは単一のトランスポート層の接続にのみ意味を持ち、プロキシーが再転送したり、キャッシュを行ったりしては*いけません*。なお、 {{httpheader("Connection")}} ヘッダーを用いて設定する場合があるのはホップバイホップヘッダーのみです。 + +## 認証 + +- {{HTTPHeader("WWW-Authenticate")}} + - : リソースへアクセスに使用すべき認証方法を定義します。 +- {{HTTPHeader("Authorization")}} + - : サーバーでユーザーエージェントを認証するための資格情報を持ちます。 +- {{HTTPHeader("Proxy-Authenticate")}} + - : プロキシーサーバーの背後にあるリソースへアクセスできるようにするために使用すべき認証方法を定義します。 +- {{HTTPHeader("Proxy-Authorization")}} + - : プロキシーサーバーでユーザーエージェントを認証するための資格情報を持ちます。 + +## キャッシュ + +- {{HTTPHeader("Age")}} + - : オブジェクトがプロキシーのキャッシュに存在する時間を秒数で表します。 +- {{HTTPHeader("Cache-Control")}} + - : リクエストおよびレスポンスで、キャッシュ機能に関するディレクティブです。 +- {{HTTPHeader("Clear-Site-Data")}} + - : リクエストしているウェブサイトに関連付けられた閲覧用のデータ (クッキー、ストレージ、キャッシュなど) を消去します。 +- {{HTTPHeader("Expires")}} + - : レスポンスが古くなると考えられる日時を表します。 +- {{HTTPHeader("Pragma")}} + - : リクエストからレスポンスへの流れの中でさまざまな影響がある、実装依存のヘッダーです。 `Cache-Control` ヘッダーが未実装である HTTP/1.0 キャッシュとの後方互換性のために使用します。 +- {{HTTPHeader("Warning")}} + - : 起こりうる問題に関する一般警告情報です。 + +## クライアントヒント + +HTTP の{{Glossary("Client_hints", "クライアントヒント")}}とは、端末の種類やネットワークの状態など、クライアントに関する有用な情報を提供する一連のリクエストヘッダーのことで、サーバーはこれらの条件に合わせて提供するコンテンツを最適化することができます。 + +サーバーは、 {{HTTPHeader("Accept-CH")}} を使用して、クライアントが関心を持っているクライアントヒントヘッダーを積極的に要求します。クライアントは、要求されたヘッダーを後続のリクエストに含めることがあります。 + +- {{HTTPHeader("Accept-CH")}} {{experimental_inline}} + - : サーバーはクライアントヒントに対応していることを、 `Accept-CH` ヘッダーフィールドまたは HTML の `<meta>` 要素の [`http-equiv`](/en-US/docs/Web/HTML/Element/meta#attr-http-equiv) 属性で同等の指定をすることで広報することができます。 +- {{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}} {{deprecated_inline}} + - : サーバーは、指定された期間サーバーが対応する一連のクライアントヒントを記憶するようクライアントに依頼し、そのサーバーのオリジンに対するその後のリクエストでクライアントヒントを配信できるようにすることができます。 + +クライアントヒントの様々なカテゴリーを以下に示します。 + +### 端末クライアントヒント + +- {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}{{experimental_inline}} + - : 数値で、選択された画像レスポンスの CSS ピクセルに対する物理ピクセルの比を示します。 +- {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}{{experimental_inline}} + - : 技術的には [Device Memory API](/ja/docs/Web/API/Device_Memory_API) の一部で、このヘッダーはクライアントが持つおよその RAM の量を表します。 +- {{HTTPHeader("DPR")}} {{deprecated_inline}}{{experimental_inline}} + - : クライアントの端末ピクセル比 (DPR)、すなわち CSS ピクセルあたりの物理ピクセル数を示します。 +- {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}{{experimental_inline}} + - : 数値で、レイアウトビューポートの幅を CSS ピクセル数で示します。指定されたピクセル数は、それ以上の最小の整数に丸められます (つまり切り上げ)。 +- {{HTTPHeader("Width")}} {{deprecated_inline}}{{experimental_inline}} + - : `Width` リクエストヘッダーフィールドは数値で、要求するリソースの幅 (つまり画像の自身の寸法) を物理ピクセル数で示します。 + +### ネットワーククライアントヒント + +ネットワーククライアントヒントにより、サーバーはネットワークの帯域やレイテンシーに基づいて、どの情報を送るかを選択することができます。 + +- {{HTTPHeader("Downlink")}} + - : サーバーに対するクライアントのコネクションのおよその帯域を、 Mbps で表します。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。 +- {{HTTPHeader("ECT")}} + - : {{Glossary("effective connection type", "有効接続種別")}} (「ネットワークプロファイル」) は、そのコネクションのレイテンシーや帯域に最も近いものです。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。 +- {{HTTPHeader("RTT")}} + - : アプリケーション層のラウンドトリップ時間 (RTT) をミリ秒で表し、これにはサーバーの処理時間も含みます。これは [Network Information API](/ja/docs/Web/API/Network_Information_API) の一部です。 +- {{HTTPHeader("Save-Data")}} {{experimental_inline}} + - : 論理型で、ユーザーエージェントのデータ利用の削減についての設定を示します。 + +## 条件付き + +- {{HTTPHeader("Last-Modified")}} + - : リソースが最後に変更された日時であり、同じリソースの複数のバージョンを比較するために使用されます。 {{HTTPHeader("ETag")}} より正確さは低いのですが、環境によっては計算が容易です。{{HTTPHeader("If-Modified-Since")}} や {{HTTPHeader("If-Unmodified-Since")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。 +- {{HTTPHeader("ETag")}} + - : 一意な文字列であり、リソースのバージョンを識別します。 {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-None-Match")}} を使用する条件付きリクエストでは、リクエストの動作を変更するためにこの値を使用します。 +- {{HTTPHeader("If-Match")}} + - : リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致する場合に限りメソッドを適用します。 +- {{HTTPHeader("If-None-Match")}} + - : リクエストを条件付きにして、保存されたリソースが指定した ETag のいずれかに一致*しない*場合に限りメソッドを適用します。これはキャッシュを更新する (安全なリクエスト向け)、あるいはすでにリソースが存在する場合に新しいリソースのアップロードを止めるために使用します。 +- {{HTTPHeader("If-Modified-Since")}} + - : リクエストを条件付きにして、そのリソースが指定した日時より後に変更されている場合に限り転送するようリクエストします。キャッシュが期限切れである場合に限りデータを転送するために使用します。 +- {{HTTPHeader("If-Unmodified-Since")}} + - : リクエストを条件付きにして、そのリソースが指定した日時より後に変更されていない場合に限り転送するようリクエストします。これは、特定の範囲の新しい断片と古い断片の一貫性を保証する、あるいは既存の文書を変更するときに楽観的な並行性制御システムを実装するために使用します。 +- {{HTTPHeader("Vary")}} + - : 新しいものを元のサーバーにリクエストするのではなく、キャッシュされたレスポンスが使用できるよう決定するために、リクエストヘッダーを一致させる方法を定めます。/dd> + +## 接続制御 + +- {{HTTPHeader("Connection")}} + - : 現在の転送が完了した後も、ネットワークコネクションを維持するかを制御します。 +- {{HTTPHeader("Keep-Alive")}} + - : 持続的なコネクションをどれだけの期間維持するかを制御します。 + +## コンテンツネゴシエーション + +[コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)ヘッダーです。 + +- {{HTTPHeader("Accept")}} + - : 送り返すことができるデータの{{Glossary("MIME_type", "種類")}}をサーバーに通知します。 +- {{HTTPHeader("Accept-Encoding")}} + - : 送り返すリソースで使用できるエンコードアルゴリズム (一般的には<a href="/ja/docs/Web/HTTP/Compression">圧縮アルゴリズム</a>) をサーバーに通知します。 +- {{HTTPHeader("Accept-Language")}} + - : 送り返すリソースで期待する自然言語をサーバーに通知します。これはヒントであり、必ずしもユーザーの完全な制御下にあるものではありません。サーバーはユーザーの選択 (ドロップダウンリストで選ぶ言語など) を明示的に上書きしないように、常に注意を払うべきです。 + +## 制御 + +- {{HTTPHeader("Expect")}} + - : リクエストを適切に扱うためにサーバーが実行しなければならないと期待されていることを示します。 +- {{HTTPHeader("Max-Forwards")}} + - : TBD + +## クッキー + +- {{HTTPHeader("Cookie")}} + - : 過去に {{HTTPHeader("Set-Cookie")}} ヘッダーでサーバーから送信されて保存している [HTTP クッキー](/ja/docs/Web/HTTP/Cookies)を持ちます。 +- {{HTTPHeader("Set-Cookie")}} + - : サーバーからユーザーエージェントにクッキーを送信します。 +- {{HTTPHeader("Cookie2")}} {{deprecated_inline}} + - : 過去に {{HTTPHeader("Set-Cookie2")}} ヘッダーでサーバーから送信された HTTP クッキーを伝えるために使われていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Cookie")}} を使用してください。 +- {{HTTPHeader("Set-Cookie2")}} {{deprecated_inline}} + - : サーバーからユーザーエージェントにクッキーを送信するために使用されていましたが、仕様書から廃止されました。代わりに {{HTTPHeader("Set-Cookie")}} を使用してください。 + +## CORS + +*CORS についての詳細は、[こちら](CORS)を参照してください。* + +- {{HTTPHeader("Access-Control-Allow-Origin")}} + - : レスポンスが共有可能かを示します。 +- {{HTTPHeader("Access-Control-Allow-Credentials")}} + - : credentials フラグが真であるときに、リクエストへのレスポンスを開示してよいかを示します。 +- {{HTTPHeader("Access-Control-Allow-Headers")}} + - : {{Glossary("Preflight_request", "プリフライトリクエスト")}}へのレスポンスで使用し、実際のリクエストを行うときに使用できる HTTP ヘッダーを指定します。 +- {{HTTPHeader("Access-Control-Allow-Methods")}} + - : プリフライトリクエストへのレスポンスで、リソースへアクセスするときに使用できるメソッドを指定します。 +- {{HTTPHeader("Access-Control-Expose-Headers")}} + - : ヘッダー名を羅列して、レスポンスの一部として開示できるヘッダーを示します。 +- {{HTTPHeader("Access-Control-Max-Age")}} + - : プリフライトリクエストの結果をキャッシュしてよい期間を示します。 +- {{HTTPHeader("Access-Control-Request-Headers")}} + - : 実際のリクエストを行う際に使用する HTTP ヘッダーをサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。 +- {{HTTPHeader("Access-Control-Request-Method")}} + - : 実際のリクエストを行う際に使用する [HTTP メソッド](/ja/docs/Web/HTTP/Methods)をサーバーがわかるようにするため、プリフライトリクエストを発信する際に使用します。 +- {{HTTPHeader("Origin")}} + - : どこから読み込みが発生したかを示します。 +- {{HTTPHeader("Timing-Allow-Origin")}} + - : [Resource Timing API](/en-US/docs/Web/API/Resource_Timing_API) の機能を通じて受け取った属性の値を見ることができるオリジンを指定します。そうでなければオリジン間の制約によってゼロとして報告されます。 + +## ダウンロード + +- {{HTTPHeader("Content-Disposition")}} + - : 転送したリソースをインラインで表示すべきか (ヘッダーが存在しない場合の既定の動作)、またはダウンロードとして扱い、「名前を付けて保存」ウィンドウを表示すべきかを示します。 + +## メッセージ本文の情報 + +- {{HTTPHeader("Content-Length")}} + - : リソースの大きさを、バイト単位の10進数で示します。 +- {{HTTPHeader("Content-Type")}} + - : リソースのメディア種別を示します。 +- {{HTTPHeader("Content-Encoding")}} + - : 圧縮アルゴリズムを指定するために使用します。 +- {{HTTPHeader("Content-Language")}} + - : 読者向けに言語を示すヘッダーであり、ユーザーが自身の好む言語に応じて区別することができます。 +- {{HTTPHeader("Content-Location")}} + - : 返すデータの代替データの場所を示します。 + +## プロキシー + +- {{HTTPHeader("Forwarded")}} + - : リクエストのパスにプロキシーが関与したときに変更または遺失した、プロキシーサーバーのクライアント側の情報を持ちます。 +- {{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}} + - : HTTP プロキシーやロードバランサーを経由してウェブサーバーに接続するクライアントの、接続元 IP アドレスを識別します。 +- {{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}} + - : プロキシーやロードバランサーに接続するクライアントがリクエストした、オリジナルのホストを示します。 +- {{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}} + - : クライアントがプロキシーやロードバランサーに接続するために使用したプロトコル (HTTP または HTTPS) を識別します。 +- {{HTTPHeader("Via")}} + - : フォワードプロキシーとリバースプロキシーの両方が追加するヘッダーであり、リクエストヘッダーとレスポンスヘッダーのどちらでも見られます。 + +## リダイレクト + +- {{HTTPHeader("Location")}} + - : ページのリダイレクト先の URL を示します。 + +## リクエストコンテキスト + +- {{HTTPHeader("From")}} + - : リクエストを行うユーザーエージェントを操作している人間の、インターネット電子メールアドレスを持ちます。 +- {{HTTPHeader("Host")}} + - : サーバーのドメイン名 (バーチャルホスト向け) およびサーバーが待ち受けている TCP ポート番号 (省略可能) を指定します。 +- {{HTTPHeader("Referer")}} + - : 現在リクエストしているページへリンクしていた、前のウェブページのアドレスです。 +- {{HTTPHeader("Referrer-Policy")}} + - : {{HTTPHeader("Referer")}} ヘッダーで送信するどのリファラー情報をリクエストに含めるかを制御します。 +- {{HTTPHeader("User-Agent")}} + - : リクエストを行うユーザーエージェントソフトウェアのアプリケーションタイプ、オペレーティングシステム、ベンダー、バージョンを、ネットワークプロトコルのピアが識別できるようにする文字列を持ちます。 [Firefox ユーザーエージェント文字列リファレンス](/ja/docs/Web/HTTP/Headers/User-Agent/Firefox)もご覧ください。 + +## レスポンスコンテキスト + +- {{HTTPHeader("Allow")}} + - : リソースがサポートする HTTP リクエストメソッドを示します。 +- {{HTTPHeader("Server")}} + - : リクエストを扱うサーバーが使用するソフトウェアの情報を持ちます。 + +## 範囲付きリクエスト + +- {{HTTPHeader("Accept-Ranges")}} + - : サーバーが範囲付きリクエストに対応するかどうか、対応していれば対応する場合は、範囲を表すことができる単位を示します。 +- {{HTTPHeader("Range")}} + - : サーバーが返すべきである文書の範囲を示します。 +- {{HTTPHeader("If-Range")}} + - : 指定した ETag または日時がリモートのリソースにマッチする場合に限定した、条件付き range request を生成します。異なるバージョンのリソースから 2 つの範囲をダウンロードすることを防ぎます。 +- {{HTTPHeader("Content-Range")}} + - : 部分的なメッセージが、メッセージ本文全体のどこに位置するかを示します。 + +## セキュリティ + +- {{HTTPHeader("Cross-Origin-Embedder-Policy")}} (COEP) + - : サーバーが指定された文書の埋め込み方針を宣言するために使います。 +- {{HTTPHeader("Cross-Origin-Opener-Policy")}} (COOP) + - : 他のドメインがウィンドウを開いたり制御したりすることを防ぎます。 +- {{HTTPHeader("Cross-Origin-Resource-Policy")}} (CORP) + - : このヘッダーが適用されたリソースのレスポンスが他のドメインから読み取られるのを防ぎます。 +- {{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}}) + - : ユーザーエージェントがページで読み込むことを許可するリソースを制御します。 +- {{HTTPHeader("Content-Security-Policy-Report-Only")}} + - : ウェブの開発者がポリシーの効果を適用せずに監視することで、実験を行うことができます。これらの違反レポートは、 HTTP `POST` リクエストによって指定した URI へ送信される {{Glossary("JSON")}} 文書で構成されます。 +- {{HTTPHeader("Expect-CT")}} + - : サイトが証明書の透明性要件の報告や実施を選択できるようにします。これにより、そのサイトで不正な証明書の使用に気づかないことを防ぎます。サイトが Expect-CT ヘッダーを有効にした場合、そのサイトの証明書が公開CTログに表示されることを Chrome が確認するようにリクエストしています。 +- {{HTTPHeader("Feature-Policy")}} + - : 自身のフレームまたはその中の iframe で、ブラウザーの機能を使用することを許可または拒否する仕組みを提供します。 +- {{HTTPHeader("Origin-Isolation")}} {{experimental_inline}} + - : ウェブアプリケーションをオリジンから独立させるための仕組みを提供します。 +- {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}}) + - : HTTP の代わりに HTTPS による通信を強制します。 +- {{HTTPHeader("Upgrade-Insecure-Requests")}} + - : 暗号化や認証されたレスポンスについて、クライアントの設定を表す信号をサーバーに送信して、{{CSP("upgrade-insecure-requests")}} ディレクティブを正しく扱うことができます。 +- {{HTTPHeader("X-Content-Type-Options")}} + - : ブラウザーで MIME スニッフィングを無効化して、{{HTTPHeader("Content-Type")}} で指定したタイプを強制的に使用させます。 +- {{HTTPHeader("X-Download-Options")}} + - : HTTP の [`X-Download-Options`](<https://docs.microsoft.com/ja-jp/previous-versions/windows/internet-explorer/ie-developer/compatibility/jj542450(v=vs.85)?#the-noopen-directive>) ヘッダーは、ブラウザー (Internet Explorer) がアプリケーションからのダウンロードでファイルを「開く」の選択肢を表示しないようにし、アプリケーションのコンテキストで実行するアクセス権を得ることがないようにして、ファイルとすることでフィッシング詐欺を防止します。 (メモ: [MS Edge bug](https://developer.microsoft.com/ja-jp/microsoft-edge/platform/issues/18488178/) に関連) +- {{HTTPHeader("X-Frame-Options")}} (XFO) + - : ブラウザーがページを {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}} の内部に表示することを許可するかを示します。 +- {{HTTPHeader("X-Permitted-Cross-Domain-Policies")}} + - : クロスドメインポリシーファイル (`crossdomain.xml`) を許可するかどうかを指定します。このファイルは、 Adobe の Flash Player、Adobe Acrobat、Microsoft Silverlight、Apache Flex などのクライアントに、[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy)によって制限されているドメイン間のデータを処理する許可を与えるポリシーを定義することができます。詳細については、 [Cross-domain Policy File Specification](https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html) を参照してください。 +- {{HTTPHeader("X-Powered-By")}} + - : ホスティング環境やその他のフレームワークによって設定される可能性があり、アプリケーションや訪問者に有益ではない情報を含みます。潜在的な脆弱性が発現することを防ぐために、このヘッダーは設定しないでください。 +- {{HTTPHeader("X-XSS-Protection")}} + - : クロスサイトスクリプティングのフィルタリングを有効化します。 + +### HTTP Public Key Pinning (HPKP) + +{{Glossary("HPKP", "HTTP Public Key Pinning")}} は非推奨となり、削除されて Certificate Transparency と {{HTTPHeader("Expect-CT")}} に置き換えられました。 + +- {{HTTPHeader("Public-Key-Pins")}} + - : 偽造した証明書による {{Glossary("MITM")}} 攻撃の危険性を軽減するため、特定の暗号公開鍵とウェブサーバーを関連付けます。 +- {{HTTPHeader("Public-Key-Pins-Report-Only")}} + - : ピンニングに違反する場合でも、ヘッダーで指定した report-uri にレポートを送信して、クライアントからサーバーへの接続は許可します。 + +## メタデータ読み取りリクエストヘッダー + +{{Glossary("Fetch metadata request header", "メタデータ読み取りリクエストヘッダー")}}は、リクエストが発生したときのコンテキストに関する情報を提供します。これによりサーバーは、リクエストがどこから来たのか、リソースがどのように使用されるのかに基づいて、リクエストを許可すべきかどうかを判断することができます。 + +- {{HTTPHeader("Sec-Fetch-Site")}} + - : リクエスト開始元のオリジンと宛先のオリジンとの関係を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cross-site`, `same-origin`, `same-site`, `none` です。 +- {{HTTPHeader("Sec-Fetch-Mode")}} + - : サーバーへのリクエストモードを示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `cors`, `navigate`, `nested-navigate`, `no-cors`, `same-origin`, `websocket` です。 +- {{HTTPHeader("Sec-Fetch-User")}} + - : ナビゲーションリクエストがユーザー操作によって起動されたかどうかを示すリクエストヘッダーです。これは構造化ヘッダーであり、論理値で、取りうる値は `?0` ならば偽、 `?1` ならば真です。 +- {{HTTPHeader("Sec-Fetch-Dest")}} + - : リクエストの宛先を示すリクエストヘッダーです。これは構造化ヘッダーで、値はトークンであり、取りうる値は `audio`, `audioworklet`, `document`, `embed`, `empty`, `font`, `image`, `manifest`, `object`, `paintworklet`, `report`, `script`, `serviceworker`, `sharedworker`, `style`, `track`, `video`, `worker`, `xslt` です。 + +## Server-sent event + +- {{HTTPHeader("Last-Event-ID")}} + - : TBD +- {{HTTPHeader("NEL")}} {{experimental_inline}} + - : 開発者がネットワークエラー報告ポリシーを宣言できるようにする仕組みを定義します。 +- {{HTTPHeader("Ping-From")}} + - : TBD +- {{HTTPHeader("Ping-To")}} + - : TBD +- {{HTTPHeader("Report-To")}} + - : 警告やエラーを送信るためのブラウザーに対するサーバーのエンドポイントを指定するために使用します。 + +## 転送エンコーディング + +- {{HTTPHeader("Transfer-Encoding")}} + - : エンティティをユーザーへ問題なく転送できるエンコード形式を指定します。 +- {{HTTPHeader("TE")}} + - : ユーザーエージェントが進んで受け入れる転送エンコーディングを指定します。 +- {{HTTPHeader("Trailer")}} + - : 送信者が chunk メッセージの終端に追加フィールドを含めることができます。 + +## WebSocket + +- {{HTTPHeader("Sec-WebSocket-Key")}} + - : TBD +- {{HTTPHeader("Sec-WebSocket-Extensions")}} + - : TBD +- {{HTTPHeader("Sec-WebSocket-Accept")}} + - : TBD +- {{HTTPHeader("Sec-WebSocket-Protocol")}} + - : TBD +- {{HTTPHeader("Sec-WebSocket-Version")}} + - : TBD + +## その他 + +- {{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}} + - : クライアントはリクエストに対して求めるプッシュポリシーを、リクエスト内で [`Accept-Push-Policy`](https://datatracker.ietf.org/doc/html/draft-ruellan-http-accept-push-policy-00#section-3.1) ヘッダーフィールドを送信することで表現することができます。 +- {{HTTPHeader("Accept-Signature")}} {{experimental_inline}} + - : クライアントは [`Accept-Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7) ヘッダーフィールドを送信して、利用可能な署名を利用する意図を示したり、対応している署名の種類を示したりすることができます。 +- {{HTTPHeader("Alt-Svc")}} + - : このサービスにたどり着く他の方法のリストに使用します。 +- {{HTTPHeader("Date")}} + - : メッセージを生成した日時です。 +- {{HTTPHeader("Early-Data")}} {{experimental_inline}} + - : このリクエストが TLS early data で送信されたことを示します。 +- {{HTTPHeader("Large-Allocation")}} + - : 読み込み中のページは大量の割り当てが必要であることをブラウザーに伝えます。 +- {{HTTPHeader("Link")}} + - : [`Link`](https://datatracker.ietf.org/doc/html/rfc5988#section-5) エンティティヘッダーフィールドは、 HTTP ヘッダー内の1つ以上のリンクを記述する方法を提供します。意味的には HTML の {{HTMLElement("link")}} 要素と等価です。 +- {{HTTPHeader("Push-Policy")}} {{experimental_inline}} + - : [`Push-Policy`](https://datatracker.ietf.org/doc/html/draft-ruellan-http-accept-push-policy-00#section-3.2)はリクエストを処理するときのプッシュ通知に関するサーバーの動作を定義します。 +- {{HTTPHeader("Retry-After")}} + - : 後続のリクエストを行う前に、ユーザーエージェントがどれだけの期間待つべきかを示します。 +- {{HTTPHeader("Signature")}} {{experimental_inline}} + - : [`Signature`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1) ヘッダーフィールドは、交換のための署名のリストを伝え、それぞれはその署名の権威を決定して、そして更新する方法についての情報を伴います。 +- {{HTTPHeader("Signed-Headers")}} {{experimental_inline}} + - : [`Signed-Headers`](https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2) ヘッダーフィールドは、シグネチャに含めるためのレスポンスヘッダーフィールドの順序付きリストを識別します。 +- {{HTTPHeader("Server-Timing")}} + - : 指定されたリクエストとレスポンスのサイクルについて、１つ以上のメトリクスまたは説明を通信します。 +- {{HTTPHeader("Service-Worker-Allowed")}} + - : [パス正弦](https://w3c.github.io/ServiceWorker/#path-restriction)を解除するために、[サービスワーカースクリプトのレスポンス](https://w3c.github.io/ServiceWorker/#service-worker-script-response)で使用します。 +- {{HTTPHeader("SourceMap")}} + - : 生成されたコードと <a href="/ja/docs/Tools/Debugger/How_to/Use_a_source_map">ソースマップ</a> を関連付けます。 +- {{HTTPHeader("Upgrade")}} + - : Upgrade ヘッダーフィールドに関連する RFC 文書は [RFC 7230, section 6.7](https://datatracker.ietf.org/doc/html/rfc7230#section-6.7) です。標準仕様では、現在のクライアント、サーバー、トランスポート層プロトコル接続で別のプロトコルへ更新または変更するための規則を定めています。例えば、このヘッダー標準ではサーバーが Upgrade ヘッダーフィールドを認めて実装すると決める前提で、クライアントが HTTP 1.1 から HTTP 2.0 へ変更することを可能にします。どちらの相手も、 Upgrade ヘッダーフィールドで指定された要件を受け入れる必要はありません。これはクライアントのヘッダーでもサーバーのヘッダーでも使用できます。Upgrade ヘッダーフィールドを指定した場合は、更新オプションを指ヘッダーonnection ヘッダーフィールドも送信者が送信しなければなりません。Connection ヘッダーフィールドについて、詳しくは[前述の RFC のセクション 6.1](https://datatracker.ietf.org/doc/html/rfc7230#section-6.1) をご覧ください。 +- {{HTTPHeader("X-DNS-Prefetch-Control")}} + - : ユーザーがたどるであろうリンクや、ドキュメントが参照する画像、 CSS、 JavaScript などのリソースのドメイン名解決をブラウザーが事前に行う機能である、 DNS プリフェッチを制御します。 +- {{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}} + - : TBD +- {{HTTPHeader("X-Pingback")}} {{non-standard_inline}} + - : TBD +- {{HTTPHeader("X-Requested-With")}} + - : TBD +- {{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}} + - : [`X-Robots-Tag`](https://developers.google.com/search/reference/robots_meta_tag#xrobotstag) ヘッダーは、一般の検索エンジンの結果でウェブページをどのように索引付けをするかを示します。このヘッダーは `<meta name="robots" content="...">` と等価です。 +- {{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}} + - : 使用する文書モードを示すために Internet Explorer で使用されています。 + +## 協力 + +[新しい記事を書いたり](/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header)、既存のものを改善したりすることにご協力ください。 + +## 関連情報 + +- [Wikipedia の HTTP ヘッダーの一覧のページ](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) +- [IANA レジストリー](https://www.iana.org/assignments/message-headers/perm-headers.html) +- [HTTP Working Group](https://httpwg.org/specs/) diff --git a/files/ja/web/http/headers/x-content-type-options/index.html b/files/ja/web/http/headers/x-content-type-options/index.html deleted file mode 100644 index e62742b226..0000000000 --- a/files/ja/web/http/headers/x-content-type-options/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: X-Content-Type-Options -slug: Web/HTTP/Headers/X-Content-Type-Options -tags: - - HTTP - - HTTP ヘッダー - - Reference - - レスポンスヘッダー -translation_of: Web/HTTP/Headers/X-Content-Type-Options ---- -<div>{{HTTPSidebar}}</div> - -<p><code><strong>X-Content-Type-Options</strong></code> は HTTP のレスポンスヘッダーで、 {{HTTPHeader("Content-Type")}} ヘッダーで示された <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>を変更せずに従うべきであることを示すために、サーバーによって使用されるマーカーです。これにより、<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">MIME タイプのスニッフィング</a>を抑止することができます。すなわち、ウェブマスターが自分が何をしているかを分かっていると言う手段です。</p> - -<p>このヘッダーは、コンテンツのスニッフィングにより、実行不可能な MIME タイプを実行可能な MIME タイプに変換してしまうという事故をウェブマスターが抑止するための方法として、マイクロソフトが IE 8 で導入したものです。それ以来、他のブラウザーは MIME スニッフィングのアルゴリズムがそれほど積極的ではなくても、このヘッダーを導入してきました。</p> - -<p>Firefox 72 から、 {{HTTPHeader("Content-type")}} が提供されている場合、 MIME スニッフィングの抑止が最上位の文書にも適用されるようになりました。これにより、 HTML のウェブページが <code>text/html</code> 以外の MIME タイプで提供されている場合、表示される代わりにダウンロードされることがあります。両方のヘッダーを正しく設定してください。</p> - -<p>サイトのセキュリティテスターは通常、このヘッダーが設定されていることを期待しています。</p> - -<p class="blockIndicator note">注: <code>X-Content-Type-Options</code> は、 <a href="https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?"><code>nosniff</code> によるリクエストブロッキング</a>を<a href="https://fetch.spec.whatwg.org/#concept-request-destination">リクエスト先</a>が "<code>script</code>" と "<code>style</code>" の場合のみ適用します。しかし、 <a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#determining-whether-a-response-is-corb_protected">Cross-Origin Read Blocking (CORB)</a> 保護を HTML, TXT, JSON, XML の各ファイル (SVG <code>image/svg+xml</code> を除く) に対して有効にすることもできます。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">ヘッダー種別</th> - <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> - <td>いいえ</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">X-Content-Type-Options: nosniff -</pre> - -<h2 id="Directives" name="Directives">ディレクティブ</h2> - -<dl> - <dt><code>nosniff</code></dt> - <dd>リクエスト先のタイプが以下の場合、リクエストをブロックします。 - <ul> - <li>"<code>style</code>" で MIME タイプが <code>text/css</code> でない、または</li> - <li>"<code>script</code>" で MIME タイプが <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript の MIME タイプ</a>でない</li> - </ul> - </dd> - <dd>Cross-Origin Read Blocking (CORB) 保護を次の MIME タイプに対して有効にします。 - <ul> - <li><code>text/html</code></li> - <li><code>text/plain</code></li> - <li><code>text/json</code>, <code>application/json</code> またはその他の JSON 拡張を伴うタイプ: <code>*/*+json</code></li> - <li><code>text/xml</code>, <code>application/xml</code> またはその他の XML 拡張を伴うタイプ: <code>*/*+xml</code> (<code>image/svg+xml</code> を除く)</li> - </ul> - </dd> -</dl> - -<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("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("http.headers.X-Content-Type-Options")}}</p> - -<h3 id="Browser_specific_notes" name="Browser_specific_notes">ブラウザー固有の注意事項</h3> - -<ul> - <li>Firefox 72 は最上位文書で <code>X-Content-Type-Options: nosniff</code> を有効にします。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{HTTPHeader("Content-Type")}}</li> - <li>Microsoft による X-Content-Type-Options の <a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">元の定義</a></li> - <li>The <a href="https://observatory.mozilla.org/">Mozilla Observatory</a> tool testing the configuration (including this header) of Web sites for safety and security</li> - <li><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Mitigating MIME Confusion Attacks in Firefox</a></li> - <li><a href="https://fetch.spec.whatwg.org/#corb">Cross-Origin Read Blocking (CORB)</a></li> - <li><a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md">Google Docs CORB explainer</a></li> -</ul> diff --git a/files/ja/web/http/headers/x-content-type-options/index.md b/files/ja/web/http/headers/x-content-type-options/index.md new file mode 100644 index 0000000000..d61b33f893 --- /dev/null +++ b/files/ja/web/http/headers/x-content-type-options/index.md @@ -0,0 +1,67 @@ +--- +title: X-Content-Type-Options +slug: Web/HTTP/Headers/X-Content-Type-Options +tags: + - HTTP + - HTTP ヘッダー + - Reference + - レスポンスヘッダー +browser-compat: http.headers.X-Content-Type-Options +translation_of: Web/HTTP/Headers/X-Content-Type-Options +--- +{{HTTPSidebar}} + +**`X-Content-Type-Options`** は HTTP のレスポンスヘッダーで、 {{HTTPHeader("Content-Type")}} ヘッダーで示された [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)を変更せずに従うべきであることを示すために、サーバーによって使用されるマーカーです。これにより、[MIME タイプのスニッフィング](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing)を抑止することができます。言い替えれば、 MIME タイプを意図的に設定することができます。 + +このヘッダーは、 Microsoft が IE 8 において、コンテンツのスニッフィングにより、実行不可能な MIME タイプを実行可能な MIME タイプに変換してしまうという事故を抑止するためのとして導入したものです。それ以来、他のブラウザーは MIME スニッフィングのアルゴリズムにそれほど積極的ではなくても、このヘッダーを導入してきました。 + +Firefox 72 から、 {{HTTPHeader("Content-type")}} が提供されている場合、 MIME スニッフィングの抑止が最上位の文書にも適用されるようになりました。これにより、 HTML のウェブページが `text/html` 以外の MIME タイプで提供された場合、表示されるのではなくダウンロードされることがあります。両方のヘッダーを正しく設定してください。 + +サイトのセキュリティテスターは通常、このヘッダーが設定されていることを期待しています。 + +> **Note:** `X-Content-Type-Options` は、 [`nosniff` によるリクエストブロッキング](https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?)を[リクエスト先](https://fetch.spec.whatwg.org/#concept-request-destination)が "`script`" と "`style`" の場合のみ適用します。しかし、 [Cross-Origin Read Blocking (CORB)](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#determining-whether-a-response-is-corb_protected) 保護を HTML, TXT, JSON, XML の各ファイル (SVG `image/svg+xml` を除く) に対して有効にすることもできます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">ヘッダー種別</th> + <td>{{Glossary("Response header", "レスポンスヘッダー")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name", "禁止ヘッダー名")}}</th> + <td>いいえ</td> + </tr> + </tbody> +</table> + +## 構文 + +``` +X-Content-Type-Options: nosniff +``` + +# ディレクティブ + +- `nosniff` + - : リクエスト先のタイプが `style` でありその MIME タイプが `text/css` ではない場合、または、タイプが `script` で MIME タイプが [JavaScript の MIME タイプ](https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type)ではない場合にリクエストをブロックします。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +### ブラウザー固有の注意事項 + +- Firefox 72 は最上位の文書で `X-Content-Type-Options: nosniff` を有効にします。 + +## 関連情報 + +- {{HTTPHeader("Content-Type")}} +- Microsoft による X-Content-Type-Options の [元の定義](https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/) +- [Mozilla Observatory](https://observatory.mozilla.org/) ツールによるウェブサイトの設定 (このヘッダーを含む) の安全性とセキュリティのテスト +- [Firefox における MIME 混同攻撃の緩和](https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/) +- [Cross-Origin Read Blocking (CORB)](https://fetch.spec.whatwg.org/#corb) +- [Google Docs CORB 解説書](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md) diff --git a/files/ja/web/http/network_error_logging/index.html b/files/ja/web/http/network_error_logging/index.html new file mode 100644 index 0000000000..9ddd3ff8ff --- /dev/null +++ b/files/ja/web/http/network_error_logging/index.html @@ -0,0 +1,155 @@ +--- +title: Network Error Logging +slug: Web/HTTP/Network_Error_Logging +tags: + - Guide + - HTTP + - Network Error Logging + - Reference +translation_of: Web/HTTP/Network_Error_Logging +--- +<div>{{HTTPSidebar}}{{SeeCompatTable}}</div> + +<p>ネットワークエラーロギングは、HTTP の {{HTTPHeader("NEL")}} <em><a href="/ja/docs/Glossary/Response_header">レスポンスヘッダー</a></em>を使って設定できるメカニズムです。この実験的なヘッダーにより、ウェブサイトやアプリケーションは、対応しているブラウザーから、失敗した (必要であれば成功した) ネットワーク読み取りに関するレポートを受け取ることを選択することができます。</p> + +<p>レポートは、 {{HTTPHeader("Report-To")}} ヘッダーで定義された報告グループに送信されます。</p> + +<h2 id="Usage">使用方法</h2> + +<p>ウェブアプリケーションは、 <em><a href="/ja/docs/Glossary/Response_header">JSON エンコード</a></em>されたオブジェクトである NEL ヘッダーを使って、この動作を選択します。</p> + +<pre><a href="https://www.w3.org/TR/network-error-logging/#nel-response-header">NEL</a>: { "<a href="https://www.w3.org/TR/network-error-logging/#the-report_to-member">report_to</a>": "nel", + "<a href="https://www.w3.org/TR/network-error-logging/#the-max_age-member">max_age</a>": 31556952 } +</pre> + +<p>ブラウザーから安全と認識されたオリジンが必要です。</p> + +<p>以下のオブジェクトキーが NEL ヘッダーで指定されています。</p> + +<dl> + <dt>report_to</dt> + <dd> + <p>ネットワークエラーレポートの送信先となる <a href="/ja/docs/Web/API/Reporting_API">Reporting API</a> グループです。</p> + </dd> + <dt>max_age</dt> + <dd>ポリシーの有効期間を秒単位で指定します (HSTS ポリシーが時間制限されているのと同様の方法です)。参照される報告グループは、少なくとも NEL ポリシーと同程度の有効期間を持つ必要があります。</dd> + <dt>include_subdomains</dt> + <dd>true の場合、ポリシーは、ポリシーヘッダーが設定されているオリジンの下のすべてのサブドメインに適用されます。このオプションを有効にする場合は、サブドメインを含めるように報告グループを設定する必要があります。</dd> + <dt>success_fraction</dt> + <dd>0 と 1 の間の浮動小数点値で、報告するネットワーク要求が成功した割合を指定します。既定値は 0 で、JSON ペイロードにキーが存在しない場合、成功したネットワークリクエストは報告されません。</dd> + <dt>failure_fraction</dt> + <dd>0 と 1 の間の浮動小数点値で、報告する<strong>失敗した</strong>ネットワークリクエストの割合を指定します。既定値は 1 で、JSON ペイロードにキーが存在しない場合、失敗したすべてのネットワークリクエストが報告されます。</dd> +</dl> + +<p>上記のレポートグループは、 {{HTTPHeader("Report-To")}} ヘッダー内で通常の方法で定義されます。例えば下記のようになります。</p> + +<pre><a href="https://wicg.github.io/reporting/#report-to" id="ref-for-report-to①">Report-To</a>: { "<a href="https://wicg.github.io/reporting/#group" id="ref-for-group①">group</a>": "nel", + "<a href="https://wicg.github.io/reporting/#max-age" id="ref-for-max-age①">max_age</a>": 31556952, + "<a href="https://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints②">endpoints</a>": [ + { "<a href="https://wicg.github.io/reporting/#url" id="ref-for-url②">url</a>": "https://example.com/csp-reports" } + ] } +</pre> + +<h2 id="Error_reports">エラーレポート</h2> + +<p>これらの例では、Reporting API のペイロード全体を示しています。最上位の <strong><code>"body"</code></strong> キーには、ネットワークエラーレポートが含まれています。</p> + +<h3 id="HTTP_400_Bad_Request_response">HTTP 400 (Bad Request) response</h3> + +<pre class="brush: js">{ + "age": 20, + "type": "network-error", + "url": "https://example.com/previous-page", + "body": { + "elapsed_time": 338, + "method": "POST", + "phase": "application", + "protocol": "http/1.1", + "referrer": "https://example.com/previous-page", + "sampling_fraction": 1, + "server_ip": "137.205.28.66", + "status_code": 400, + "type": "http.error", + "url": "https://example.com/bad-request" + } +} +</pre> + +<h3 id="DNS_name_not_resolved">DNS 名が未解決</h3> + +<p>なお、このレポートではフェーズが <code>dns</code> に設定されており、含めることのできる <code>server_ip</code> はありません。</p> + +<pre class="brush: js">{ + "age": 20, + "type": "network-error", + "url": "https://example.com/previous-page", + "body": { + "elapsed_time": 18, + "method": "POST", + "phase": "dns", + "protocol": "http/1.1", + "referrer": "https://example.com/previous-page", + "sampling_fraction": 1, + "server_ip": "", + "status_code": 0, + "type": "dns.name_not_resolved", + "url": "https://example-host.com/" + } +} +</pre> + +<p>ネットワークエラーの種類は、仕様で定義された以下の値のいずれかですが、ブラウザは独自のエラー種別を追加して送信することができます。</p> + +<dl> + <dt><code>dns.unreachable</code></dt> + <dd>ユーザーの DNS サーバーに到達できない</dd> + <dt><code>dns.name_not_resolved</code></dt> + <dd>ユーザーの DNS サーバーは応答したが、リクエストされた URI の IP アドレスに解決できなかった。</dd> + <dt><code>dns.failed</code></dt> + <dd>DNS サーバーへのリクエストが、以前のエラー (SERVFAIL など) でカバーされない理由で失敗した</dd> + <dt><code>dns.address_changed</code></dt> + <dd>セキュリティ上の理由から、オリジナルのレポートを配信したサーバーの IP アドレスが、エラー発生時の現在のサーバーの IP アドレスと異なる場合、レポートデータはこの問題に関する情報のみを含むようにダウングレードされ、タイプは <code>dns.address_changed</code> に設定されます。</dd> + <dt><code>tcp.timed_out</code></dt> + <dd>サーバーへの TCP コネクションがタイムアウトした</dd> + <dt><code>tcp.closed</code></dt> + <dd>TCP コネクションがサーバーから閉じられた</dd> + <dt><code>tcp.reset</code></dt> + <dd>TCP コネクションがリセットされた</dd> + <dt><code>tcp.refused</code></dt> + <dd>TCP コネクションがサーバーから拒否された</dd> + <dt><code>tcp.aborted</code></dt> + <dd>TCP コネクションが中止された</dd> + <dt><code>tcp.address_invalid</code></dt> + <dd>IP アドレスが無効である</dd> + <dt><code>tcp.address_unreachable</code></dt> + <dd>IP アドレスに到達できない</dd> + <dt><code>tcp.failed</code></dt> + <dd>TCP コネクションが直前のエラーによってカバーできない原因で失敗した</dd> + <dt><code>http.error</code></dt> + <dd>ユーザーエージェントがレスポンスの受信に成功したが、 <a href="https://datatracker.ietf.org/doc/html/rfc7231#section-6.5">4xx</a> または <a href="https://datatracker.ietf.org/doc/html/rfc7231#section-6.6">5xx</a> のステータスコードであった</dd> + <dt><code>http.protocol.error</code></dt> + <dd>コネクションが HTTP プロトコルエラーのために中止された</dd> + <dt><code>http.response.invalid</code></dt> + <dd>レスポンスが空であるか、 content-length が合っていないか、エンコーディングが正しくないか、その他の状況でユーザーエージェントがレスポンスを処理できなかった</dd> + <dt><code>http.response.redirect_loop</code></dt> + <dd>リクエストはリダイレクトループが検出されたため中止された</dd> + <dt><code>http.failed</code></dt> + <dd>コネクションは直前のエラーでカバーされなかった HTTP プロトコルのエラーで失敗した</dd> +</dl> + +<h2 id="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + </tr> + <tr> + <td><a href="https://w3c.github.io/network-error-logging/#introduction">Network Error Logging</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("http.headers.NEL")}}</p> diff --git a/files/ja/web/http/status/202/index.html b/files/ja/web/http/status/202/index.html deleted file mode 100644 index f4f6916f78..0000000000 --- a/files/ja/web/http/status/202/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 202 Accepted -slug: Web/HTTP/Status/202 -tags: - - HTTP - - HTTP ステータスコード - - リファレンス -translation_of: Web/HTTP/Status/202 ---- -<div>{{HTTPSidebar}}</div> - -<p>HTTP <code><strong>202 Accepted</strong></code> レスポンスはリクエストを受け取ったが処理はされていない、ということを表すステータスコードです。これはコミットされていない、リクエストを処理した結果を示すレスポンスを、非同期で送信する方法がHTTPに存在しないことを意味しています。別のプロセスまたはサーバーがリクエストを処理する場合、またはバッチ処理の場合を想定しています。</p> - -<h2 id="ステータス">ステータス</h2> - -<pre class="syntaxbox">202 Accepted</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">タイトル</th> - </tr> - <tr> - <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="参照">参照</h2> - -<ul> - <li>{{HTTPHeader("Accept")}}</li> -</ul> diff --git a/files/ja/web/http/status/202/index.md b/files/ja/web/http/status/202/index.md new file mode 100644 index 0000000000..863f9b6fe8 --- /dev/null +++ b/files/ja/web/http/status/202/index.md @@ -0,0 +1,31 @@ +--- +title: 202 Accepted +slug: Web/HTTP/Status/202 +tags: + - HTTP + - リファレンス + - ステータスコード + - 成功レスポンス +translation_of: Web/HTTP/Status/202 +--- +{{HTTPSidebar}} + +HTTP (HyperText Transfer Protocol) の **`202 Accepted`** レスポンスステータスコードは、リクエストを受け取ったが、処理が完了していないことを表します。実際には、処理はまだ始まっていない可能性もあります。そのリクエストは、実際に処理が行われたときに拒否される可能性があるため、最終的に処理されるかどうかはわかりません。処理が実際に行われたときに許可されないかもしれないからです。 + +202 はコミットするものではありません。つまり、 HTTP にはリクエストの処理結果を示す非同期レスポンスを後で送信する方法がありません。別のプロセスやサーバーがリクエストを処理する場合や、バッチ処理のためのものです。 + +## ステータス + +``` +202 Accepted +``` + +## 仕様書 + +| 仕様書 | 題名 | +| -------------------------------------------------------- | ------------------------------------------------------------- | +| {{RFC("7231", "202 Accepted" , "6.3.3")}} | Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content | + +## 関連情報 + +- {{HTTPHeader("Accept")}} diff --git a/files/ja/web/javascript/about_javascript/index.html b/files/ja/web/javascript/about_javascript/index.html index 072f271b5c..ab4cb35741 100644 --- a/files/ja/web/javascript/about_javascript/index.html +++ b/files/ja/web/javascript/about_javascript/index.html @@ -49,10 +49,10 @@ translation_of: Web/JavaScript/About_JavaScript <dd>C/C++エンジンでMozillaが実装したJavaScript (SpiderMonkey と呼ばれている) について、アプリケーションへの組込方法を含む詳細情報。</dd> <dt><a href="/ja/docs/Rhino">Rhino</a></dt> <dd>Javaで記述されたJavaScript実装(Rhino と呼ばれている) についての詳細情報</dd> - <dt><a href="/ja/docs/JavaScript_Language_Resources" title="ja/JavaScript_Language_Resources">言語リソース</a></dt> + <dt><a href="/ja/docs/JavaScript_Language_Resources">言語リソース</a></dt> <dd>公布されている JavaScript の標準を指します。</dd> - <dt><a href="/ja/docs/JavaScript/A_re-introduction_to_JavaScript" title="ja/A_re-introduction_to_JavaScript">JavaScript「再」入門</a></dt> - <dd><a href="/ja/docs/JavaScript/Guide" title="ja/JavaScript/Guide">JavaScript ガイド</a> および <a href="/ja/docs/JavaScript/Reference" title="ja/JavaScript/Reference">JavaScript リファレンス</a></dd> + <dt><a href="/ja/docs/JavaScript/A_re-introduction_to_JavaScript">JavaScript「再」入門</a></dt> + <dd><a href="/ja/docs/JavaScript/Guide">JavaScript ガイド</a> および <a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a></dd> </dl> <p>JavaScript® は、米国およびその他の国における、Oracle の商標または登録商標です。</p> diff --git a/files/ja/web/javascript/guide/working_with_objects/index.html b/files/ja/web/javascript/guide/working_with_objects/index.html index 6200e1aa36..bf382dd5c7 100644 --- a/files/ja/web/javascript/guide/working_with_objects/index.html +++ b/files/ja/web/javascript/guide/working_with_objects/index.html @@ -109,10 +109,10 @@ myCar.year = 1969</pre> <h2 id="Enumerate_the_properties_of_an_object" name="Enumerate_the_properties_of_an_object">オブジェクトの全プロパティの列挙</h2> -<p><a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="ja/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> 以降では、オブジェクトのプロパティをリストアップ/トラバース (横断走査) する言語特有の方法が 3 つあります。</p> +<p><a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5</a> 以降では、オブジェクトのプロパティをリストアップ/トラバース (横断走査) する言語特有の方法が 3 つあります。</p> <ul> - <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in" title="ja/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> ループ<br> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> ループ<br> この方法は、オブジェクトとそのプロトタイプチェーンにある列挙可能なプロパティをすべて横断します</li> <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> このメソッドは、そのオブジェクト独自の (プロトタイプチェーンを除く) 列挙可能なすべてのプロパティ名 ("keys") を配列で返します</li> @@ -288,7 +288,7 @@ fish.displayType(); // 出力 : Fishes</pre> car1.color = 'black'; </pre> -<p>詳しくは、<a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a>内にある、<code>Function</code> オブジェクトの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="ja/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> プロパティ</a>を参照してください。</p> +<p>詳しくは、<a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a>内にある、<code>Function</code> オブジェクトの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype"><code>prototype</code> プロパティ</a>を参照してください。</p> <h2 id="Defining_methods" name="Defining_methods">メソッドの定義</h2> diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.html b/files/ja/web/javascript/reference/global_objects/array/tostring/index.html deleted file mode 100644 index c5f260f82e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/tostring/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Array.prototype.toString() -slug: Web/JavaScript/Reference/Global_Objects/Array/toString -tags: - - Array - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString ---- -<div>{{JSRef}}</div> - -<p><code><strong>toString()</strong></code> メソッドは、指定された配列とその要素を表す文字列を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>arr</var>.toString()</pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>配列の要素を表す文字列です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の <code>toString</code> メソッドを上書きしています。Array オブジェクトでは、<code>toString</code> メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。</p> - -<p>配列が文字列値として表される必要がある場合や、配列が文字列の結合として参照される時、JavaScript は <code>toString</code> メソッドを自動的に呼び出します。</p> - -<h3 id="ECMAScript_5_semantics" name="ECMAScript_5_semantics">ECMAScript 5 でのセマンティック</h3> - -<p>JavaScript 1.8.5 （Firefox 4）以降、および ECMAScript 第 5 版では、<code>toString()</code> メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_toString" name="Using_toString">toString を使用する</h3> - -<pre class="brush: js notranslate">const array1 = [1, 2, 'a', '1a']; - -console.log(array1.toString()); -// expected output: "1,2,a,1a" -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Array.toString")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Array.prototype.join()")}}</li> - <li>{{jsxref("Object.prototype.toSource()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.md b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md new file mode 100644 index 0000000000..17807b4e04 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md @@ -0,0 +1,60 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - JavaScript + - Method + - Prototype +browser-compat: javascript.builtins.Array.toString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +{{JSRef}} + +**`toString()`** メソッドは、指定された配列とその要素を表す文字列を返します。 + +{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}} + +## 構文 + +```js +toString() +``` + +### 返値 + +配列の要素の文字列表現です。 + +## 解説 + +{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の `toString` メソッドをオーバーライドしています。Array オブジェクトでは、`toString` メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。 + +配列を文字列値として表す必要がある場合や、配列が文字列の結合として参照されるとき、JavaScript は `toString` メソッドを自動的に呼び出します。 + +### ECMAScript 5 でのセマンティック + +JavaScript 1.8.5 (Firefox 4) 以降、および ECMAScript 第 5 版では、`toString()` メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。 + +## 例 + +### toString の使用 + +```js +const array1 = [1, 2, 'a', '1a']; + +console.log(array1.toString()); +// 期待される出力: "1,2,a,1a" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Array.prototype.join()")}} +- {{jsxref("Object.prototype.toSource()")}} diff --git a/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html index bc4359a60b..eaf1f2c2e9 100644 --- a/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html +++ b/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction <div class="note"> <p><strong>注:</strong> {{jsxref("Statements/async_function", "非同期関数", "", 1)}}が <code>AsyncFunction</code> コンストラクターによって生成された場合、生成コンテキストのクロージャは生成されません。常にグローバルスコープに生成されます。</p> -<p>実行すると、ローカル変数とグローバルグローバル変数にのみアクセスでき、 <code>AsyncFunction</code> コンストラクターが呼び出されたスコープの変数にはアクセスできません。</p> +<p>実行すると、ローカル変数とグローバル変数にのみアクセスでき、 <code>AsyncFunction</code> コンストラクターが呼び出されたスコープの変数にはアクセスできません。</p> <p>これは、非同期関数式のコードで {{jsxref("Global_Objects/eval", "eval")}} を使用した場合とは異なります。</p> </div> diff --git a/files/ja/web/javascript/reference/global_objects/date/parse/index.html b/files/ja/web/javascript/reference/global_objects/date/parse/index.html index ec4a46ca35..b666075816 100644 --- a/files/ja/web/javascript/reference/global_objects/date/parse/index.html +++ b/files/ja/web/javascript/reference/global_objects/date/parse/index.html @@ -107,7 +107,7 @@ Date.parse('foo-bar 2014'); <h2 id="Examples" name="Examples">例</h2> -<h3 id="Using_Date.parse" name="Using_Date.parse">Using <code>Date.parse()</code> の使用</h3> +<h3 id="Using_Date.parse" name="Using_Date.parse"><code>Date.parse()</code> の使用</h3> <p>以下の呼び出しはすべて <code>1546300800000</code> を返します。最初のものは ES5 によれば UTC 時刻を意味し、それ以外は ISO 日付仕様 (<code>Z</code> および <code>+00:00</code>) に従って UTC をタイムゾーンを指定しています。</p> diff --git a/files/ja/web/javascript/reference/global_objects/index.html b/files/ja/web/javascript/reference/global_objects/index.html deleted file mode 100644 index 44c08eeb57..0000000000 --- a/files/ja/web/javascript/reference/global_objects/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: 標準組込みオブジェクト -slug: Web/JavaScript/Reference/Global_Objects -tags: - - JavaScript - - Landing page - - Overview - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects ---- -<p>{{JSSidebar("Objects")}}</p> - -<p><span class="seoSummary">本章では JavaScript の標準組込みオブジェクトについて、それらのメソッドやプロパティと共にすべて文書化しています。</span></p> - -<p>ここでいう「<ruby>グローバルオブジェクト<rp> (</rp><rt>global objects</rt><rp>)</rp></ruby>」 (または標準組込みオブジェクト) という用語を<ruby><strong>グローバルオブジェクト</strong><rp> (</rp><rt>the global object</rt><rp>) </rp></ruby>と混同しないでください。ここで、『グローバルオブジェクト』は<strong>グローバルスコープにあるオブジェクト</strong>を指します。 (訳注: 日本語では複数形や the による区別ができないため、ここでは後者の <strong>the global object</strong> を『グローバルオブジェクト』と表記して区別します。)</p> - -<p>後者の『グローバルオブジェクト』自体は、グローバルスコープ中で {{JSxRef("Operators/this", "this")}} 演算子を使ってアクセスすることができます。実際、グローバルスコープは『グローバルオブジェクト』 (継承されたプロパティがあればそれらも含む) のプロパティから<strong>構成されています</strong>。</p> - -<p>グローバルスコープ内のその他のオブジェクトは、<a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">ユーザースクリプトによって作られる</a>か、あるいはホストアプリによって提供されます。ブラウザー上で提供されている利用可能なオブジェクトについては、<a href="/ja/docs/Web/API/Reference">API リファレンス</a> で文書化されています。</p> - - - -<p><a href="/ja/docs/DOM/DOM_Reference">DOM</a> と中核の <a href="/ja/docs/Web/JavaScript">JavaScript</a> との違いについての詳しい情報は、<a href="/ja/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript 技術概説</a>をご覧ください。</p> - -<h2 id="Standard_objects_by_category" name="Standard_objects_by_category">標準オブジェクト (カテゴリ別)</h2> - -<h3 id="Value_properties" name="Value_properties">値プロパティ</h3> - -<p>これらのグローバルプロパティは、単なる値を返します。これらはプロパティもメソッドも持ちません。</p> - -<ul> - <li>{{JSxRef("Infinity")}}</li> - <li>{{JSxRef("NaN")}}</li> - <li>{{JSxRef("undefined")}}</li> - <li>{{JSxRef("globalThis")}}</li> -</ul> - -<h3 id="Function_properties" name="Function_properties">関数プロパティ</h3> - -<p>これらのグローバル関数 (オブジェクト上ではなくグローバルに呼ばれる関数) は、呼び出し元に直接結果を返します。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li> - <li>{{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}} </li> - <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li> - <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li> - <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li> - <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li> - <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li> - <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> - <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li> - <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> - <li><strong>Deprecated</strong> - <ul> - <li>{{deprecated_inline}} {{JSxRef("Global_Objects/escape", "escape()")}}</li> - <li>{{deprecated_inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}}</li> - </ul> - </li> -</ul> -</div> - -<h3 id="Fundamental_objects" name="Fundamental_objects">基本オブジェクト</h3> - -<p>これらは、他のすべてのオブジェクトの基礎となる、主要な基本オブジェクトです。これらには、一般的なオブジェクト、関数、そしてエラーを表すオブジェクトが含まれます。</p> - -<ul> - <li>{{JSxRef("Object")}}</li> - <li>{{JSxRef("Function")}}</li> - <li>{{JSxRef("Boolean")}}</li> - <li>{{JSxRef("Symbol")}}</li> -</ul> - -<h3 id="Error_objects" name="Error_objects">エラーオブジェクト</h3> - -<p>エラーオブジェクトは基本オブジェクトの特殊型です。これらのオブジェクトには、基本的な {{JSxRef("Error")}} 型の他に、いくつかの特殊なエラー型があります。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Error")}}</li> - <li>{{Experimental_Inline}} {{JSxRef("AggregateError")}} </li> - <li>{{JSxRef("EvalError")}}</li> - <li>{{JSxRef("InternalError")}}</li> - <li>{{JSxRef("RangeError")}}</li> - <li>{{JSxRef("ReferenceError")}}</li> - <li>{{JSxRef("SyntaxError")}}</li> - <li>{{JSxRef("TypeError")}}</li> - <li>{{JSxRef("URIError")}}</li> -</ul> -</div> - -<h3 id="Numbers_and_dates" name="Numbers_and_dates">数と日付</h3> - -<p>これらは数、日付、数学計算を表す基本的なオブジェクトです。</p> - -<ul> - <li>{{JSxRef("Number")}}</li> - <li>{{JSxRef("BigInt")}}</li> - <li>{{JSxRef("Math")}}</li> - <li>{{JSxRef("Date")}}</li> -</ul> - -<h3 id="Text_processing" name="Text_processing">テキスト処理</h3> - -<p>これらのオブジェクトは、文字列表現および文字列操作をサポートします。</p> - -<ul> - <li>{{JSxRef("String")}}</li> - <li>{{JSxRef("RegExp")}}</li> -</ul> - -<h3 id="Indexed_collections" name="Indexed_collections">索引付きコレクション</h3> - -<p>これらのオブジェクトは、インデックス値で順序付けされたデータのコレクションを表します。これには、(型付けされた) 配列や配列に似た構造体も含まれます。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Array")}}</li> - <li>{{JSxRef("Int8Array")}}</li> - <li>{{JSxRef("Uint8Array")}}</li> - <li>{{JSxRef("Uint8ClampedArray")}}</li> - <li>{{JSxRef("Int16Array")}}</li> - <li>{{JSxRef("Uint16Array")}}</li> - <li>{{JSxRef("Int32Array")}}</li> - <li>{{JSxRef("Uint32Array")}}</li> - <li>{{JSxRef("Float32Array")}}</li> - <li>{{JSxRef("Float64Array")}}</li> - <li>{{JSxRef("BigInt64Array")}}</li> - <li>{{JSxRef("BigUint64Array")}}</li> -</ul> -</div> - -<h3 id="Keyed_collections" name="Keyed_collections">キー付きコレクション</h3> - -<p>これらのオブジェクトは、キーを使ったコレクションを表します。これらは、挿入順に反復可能な要素で構成されています。</p> - -<ul> - <li>{{JSxRef("Map")}}</li> - <li>{{JSxRef("Set")}}</li> - <li>{{JSxRef("WeakMap")}}</li> - <li>{{JSxRef("WeakSet")}}</li> -</ul> - -<h3 id="Structured_data" name="Structured_data">構造化データ</h3> - -<p>これらのオブジェクトは、構造化データバッファおよび JavaScript Object Notation (JSON) を用いて書かれたデータを表現、操作します。</p> - -<ul> - <li>{{JSxRef("ArrayBuffer")}}</li> - <li>{{JSxRef("SharedArrayBuffer")}}</li> - <li>{{JSxRef("Atomics")}}</li> - <li>{{JSxRef("DataView")}}</li> - <li>{{JSxRef("JSON")}}</li> -</ul> - -<h3 id="Control_abstraction_objects" name="Control_abstraction_objects">制御抽象化オブジェクト</h3> - -<p>制御抽象化オブジェクトは、特に非同期のコードを構造化するために役立ちます (例えば深く入り組んだコールバックを使用しないなど)。</p> - -<ul> - <li>{{JSxRef("Promise")}}</li> - <li>{{JSxRef("Generator")}}</li> - <li>{{JSxRef("GeneratorFunction")}}</li> - <li>{{JSxRef("AsyncFunction")}}</li> -</ul> - -<h3 id="Reflection" name="Reflection">リフレクション</h3> - -<ul> - <li>{{JSxRef("Reflect")}}</li> - <li>{{JSxRef("Proxy")}}</li> -</ul> - -<h3 id="Internationalization" name="Internationalization">国際化</h3> - -<p>ECMAScript コアに追加された言語の扱いに影響する機能です。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Intl")}}</li> - <li>{{JSxRef("Global_Objects/Collator", "Intl.Collator")}}</li> - <li>{{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> - <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li> - <li>{{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> - <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li> - <li>{{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> - <li>{{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</li> -</ul> -</div> - -<h3 id="WebAssembly" name="WebAssembly">WebAssembly</h3> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("WebAssembly")}}</li> - <li>{{JSxRef("WebAssembly.Module")}}</li> - <li>{{JSxRef("WebAssembly.Instance")}}</li> - <li>{{JSxRef("WebAssembly.Memory")}}</li> - <li>{{JSxRef("WebAssembly.Table")}}</li> - <li>{{JSxRef("WebAssembly.CompileError")}}</li> - <li>{{JSxRef("WebAssembly.LinkError")}}</li> - <li>{{JSxRef("WebAssembly.RuntimeError")}}</li> -</ul> -</div> - -<h3 id="Other" name="Other">その他</h3> - -<ul> - <li>{{JSxRef("Functions/arguments", "arguments")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/index.md b/files/ja/web/javascript/reference/global_objects/index.md new file mode 100644 index 0000000000..196e993730 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/index.md @@ -0,0 +1,170 @@ +--- +title: 標準組み込みオブジェクト +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Landing page + - Overview + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects +--- +{{JSSidebar("Objects")}} + +本章では JavaScript の標準組み込みオブジェクトについて、それらのメソッドやプロパティと共にすべて文書化しています。 + +ここでいう「グローバルオブジェクト (global objects)」 (または標準組み込みオブジェクト) という用語を**グローバルオブジェクト** (the global object) と混同しないでください。ここで、『グローバルオブジェクト』は**グローバルスコープにあるオブジェクト**を指します。 (訳注: 日本語では複数形や the による区別ができないため、ここでは後者の **the global object** を『グローバルオブジェクト』と表記して区別します。) + +後者の『グローバルオブジェクト』自体は、グローバルスコープ中で {{JSxRef("Operators/this", "this")}} 演算子を使ってアクセスすることができます。実際、グローバルスコープは『グローバルオブジェクト』のプロパティと、もしあれば継承されたプロパティから**構成されています**。 + +グローバルスコープ内のその他のオブジェクトは、[ユーザースクリプトによって作られたり](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects)、ホストアプリケーションによって提供されたりします。ブラウザー上で提供されている利用可能なオブジェクトについては、[API リファレンス](/ja/docs/Web/API)で文書化されています。 + +[DOM](/en-US/docs/Web/API/Document_Object_Model) と中核の [JavaScript](/en-US/docs/Web/JavaScript) との違いについての詳しい情報は、[JavaScript 技術概説](/en-US/docs/Web/JavaScript/JavaScript_technologies_overview)をご覧ください。 + +## 標準オブジェクト (カテゴリー別) + +### 値プロパティ + +これらのグローバルプロパティは、単なる値を返します。プロパティもメソッドも持ちません。 + +- {{JSxRef("Infinity")}} +- {{JSxRef("NaN")}} +- {{JSxRef("undefined")}} +- {{JSxRef("globalThis")}} + +### 関数プロパティ + +これらのグローバル関数 (オブジェクト上ではなくグローバルに呼ばれる関数) は、呼び出し元に直接結果を返します。 + +- {{JSxRef("Global_Objects/eval", "eval()")}} +- {{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}} +- {{JSxRef("Global_Objects/isFinite", "isFinite()")}} +- {{JSxRef("Global_Objects/isNaN", "isNaN()")}} +- {{JSxRef("Global_Objects/parseFloat", "parseFloat()")}} +- {{JSxRef("Global_Objects/parseInt", "parseInt()")}} +- {{JSxRef("Global_Objects/encodeURI", "encodeURI()")}} +- {{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} +- {{JSxRef("Global_Objects/decodeURI", "decodeURI()")}} +- {{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}} +- **非推奨** + + - {{Deprecated_Inline}} {{JSxRef("Global_Objects/escape", "escape()")}} + - {{Deprecated_Inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}} + +### 基本オブジェクト + +他のすべてのオブジェクトの基礎となる、主要な基本オブジェクトです。一般的なオブジェクト、関数、そしてエラーを表すオブジェクトが含まれます。 + +- {{JSxRef("Object")}} +- {{JSxRef("Function")}} +- {{JSxRef("Boolean")}} +- {{JSxRef("Symbol")}} + +### エラーオブジェクト + +エラーオブジェクトは基本オブジェクトの特殊型です。これらのオブジェクトには、基本的な {{JSxRef("Error")}} 型の他に、いくつかの特殊なエラー型があります。 + +- {{JSxRef("Error")}} +- {{JSxRef("AggregateError")}} +- {{JSxRef("EvalError")}} +- {{JSxRef("InternalError")}} +- {{JSxRef("RangeError")}} +- {{JSxRef("ReferenceError")}} +- {{JSxRef("SyntaxError")}} +- {{JSxRef("TypeError")}} +- {{JSxRef("URIError")}} + +### 数値と日付 + +数値、日付、数学計算を表す基本的なオブジェクトです。 + +- {{JSxRef("Number")}} +- {{JSxRef("BigInt")}} +- {{JSxRef("Math")}} +- {{JSxRef("Date")}} + +### テキスト処理 + +これらのオブジェクトは、文字列を表したりその操作をサポートしたりします。 + +- {{JSxRef("String")}} +- {{JSxRef("RegExp")}} + +<h3 id="Indexed_collections" name="Indexed_collections">索引付きコレクション</h3> + +これらのオブジェクトは、インデックス値で順序付けされたデータのコレクションを表します。これには、(型付けされた) 配列や配列に似た構造体も含まれます。 + +- {{JSxRef("Array")}} +- {{JSxRef("Int8Array")}} +- {{JSxRef("Uint8Array")}} +- {{JSxRef("Uint8ClampedArray")}} +- {{JSxRef("Int16Array")}} +- {{JSxRef("Uint16Array")}} +- {{JSxRef("Int32Array")}} +- {{JSxRef("Uint32Array")}} +- {{JSxRef("Float32Array")}} +- {{JSxRef("Float64Array")}} +- {{JSxRef("BigInt64Array")}} +- {{JSxRef("BigUint64Array")}} + +### キー付きコレクション + +これらのオブジェクトは、キーを使ったコレクションを表します。反復可能なコレクション ({{JSxRef("Map")}} と {{JSxRef("Set")}}) は挿入順に容易に反復処理することができます。 + +- {{JSxRef("Map")}} +- {{JSxRef("Set")}} +- {{JSxRef("WeakMap")}} +- {{JSxRef("WeakSet")}} + +### 構造化データ + +これらのオブジェクトは、構造化データバッファおよび JavaScript Object Notation (JSON) を用いて書かれたデータを表現、操作します。 + +- {{JSxRef("ArrayBuffer")}} +- {{JSxRef("SharedArrayBuffer")}} +- {{JSxRef("Atomics")}} +- {{JSxRef("DataView")}} +- {{JSxRef("JSON")}} + +### 制御抽象化オブジェクト + +制御抽象化オブジェクトは、特に非同期のコードを (例えば深く入り組んだコールバックを使用せずに) 構造化するのに役立ちます。 + +- {{JSxRef("Promise")}} +- {{JSxRef("Generator")}} +- {{JSxRef("GeneratorFunction")}} +- {{JSxRef("AsyncFunction")}} +- {{JSxRef("Global_Objects/AsyncGenerator", "AsyncGenerator")}} +- {{JSxRef("Global_Objects/AsyncGeneratorFunction", "AsyncGeneratorFunction")}} + +### リフレクション + +- {{JSxRef("Reflect")}} +- {{JSxRef("Proxy")}} + +### 国際化 + +中核の ECMAScript に言語に固有の機能を追加するものです。 + +- {{JSxRef("Intl")}} +- {{JSxRef("Global_Objects/Intl/Collator", "Intl.Collator")}} +- {{JSxRef("Global_Objects/Intl/DateTimeFormat", "Intl.DateTimeFormat")}} +- {{JSxRef("Global_Objects/Intl/ListFormat", "Intl.ListFormat")}} +- {{JSxRef("Global_Objects/Intl/NumberFormat", "Intl.NumberFormat")}} +- {{JSxRef("Global_Objects/Intl/PluralRules", "Intl.PluralRules")}} +- {{JSxRef("Global_Objects/Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}} +- {{JSxRef("Global_Objects/Intl/Locale", "Intl.Locale")}} + +### WebAssembly + +- {{JSxRef("WebAssembly")}} +- {{JSxRef("WebAssembly.Module")}} +- {{JSxRef("WebAssembly.Instance")}} +- {{JSxRef("WebAssembly.Memory")}} +- {{JSxRef("WebAssembly.Table")}} +- {{JSxRef("WebAssembly.CompileError")}} +- {{JSxRef("WebAssembly.LinkError")}} +- {{JSxRef("WebAssembly.RuntimeError")}} + +### その他 + +- {{JSxRef("Functions/arguments", "arguments")}} diff --git a/files/ja/web/javascript/reference/global_objects/infinity/index.html b/files/ja/web/javascript/reference/global_objects/infinity/index.html deleted file mode 100644 index bbd61bc49e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/infinity/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Infinity -slug: Web/JavaScript/Reference/Global_Objects/Infinity -tags: - - JavaScript - - Property - - Reference - - プロパティ -translation_of: Web/JavaScript/Reference/Global_Objects/Infinity ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>グローバルプロパティ <code><strong>Infinity</strong></code> は無限大を表す数値です。</p> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Infinity</code> は<em>グローバルオブジェクト</em>のプロパティです。言い換えればグローバルスコープ内の変数です。</p> - -<p><code>Infinity</code> の初期値は {{jsxref("Number.POSITIVE_INFINITY")}} です。<code>Infinity</code> という値 (正の無限大) は他のあらゆる数より大きい数です。</p> - -<p>この値は数学的に無限大のように振る舞います。詳しくは {{jsxref("Number.POSITIVE_INFINITY")}} を参照してください。</p> - -<p>ECMAScript 5 の仕様では、<code>Infinity</code> は読み取り専用です (JavaScript 1.8.5 / Firefox 4 にて実装)。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Infinity" name="Using_Infinity">Infinity を使う</h3> - -<pre class="brush: js notranslate">console.log(Infinity ); /* Infinity */ -console.log(Infinity + 1 ); /* Infinity */ -console.log(Math.pow(10, 1000)); /* Infinity */ -console.log(Math.log(0) ); /* -Infinity */ -console.log(1 / Infinity ); /* 0 */ -console.log(1 / 0 ); /* Infinity */ -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.parseInt")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> - <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> - <li>{{jsxref("Number.isFinite")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/infinity/index.md b/files/ja/web/javascript/reference/global_objects/infinity/index.md new file mode 100644 index 0000000000..85a48243b1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/infinity/index.md @@ -0,0 +1,54 @@ +--- +title: Infinity +slug: Web/JavaScript/Reference/Global_Objects/Infinity +tags: + - JavaScript + - プロパティ + - リファレンス +browser-compat: javascript.builtins.Infinity +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +{{jsSidebar("Objects")}} + +グローバルプロパティ **`Infinity`** は無限大を表す数値です。 + +{{js_property_attributes(0,0,0)}} + +{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}} + +## 解説 + +`Infinity` は*グローバルオブジェクト*のプロパティです。言い換えればグローバルスコープ内の変数です。 + +`Infinity` の初期値は {{jsxref("Number.POSITIVE_INFINITY")}} です。`Infinity` という値 (正の無限大) は他のあらゆる数より大きい数です。 + +この値は数学的に無限大のように振る舞います。詳しくは {{jsxref("Number.POSITIVE_INFINITY")}} を参照してください。 + +ECMAScript 5 の仕様では、`Infinity` は読み取り専用です (JavaScript 1.8.5 / Firefox 4 にて実装)。 + +## 例 + +### Infinity の使用 + +```js +console.log(Infinity ); /* Infinity */ +console.log(Infinity + 1 ); /* Infinity */ +console.log(Math.pow(10, 1000)); /* Infinity */ +console.log(Math.log(0) ); /* -Infinity */ +console.log(1 / Infinity ); /* 0 */ +console.log(1 / 0 ); /* Infinity */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Number.NEGATIVE_INFINITY")}} +- {{jsxref("Number.POSITIVE_INFINITY")}} +- {{jsxref("Number.isFinite")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html deleted file mode 100644 index 7a98ab57cf..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Intl.DateTimeFormat() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat -tags: - - Constructor - - DateTimeFormat - - Intl - - JavaScript - - Reference - - コンストラクター -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.DateTimeFormat()</code></strong> コンストラクターは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのものです。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.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="syntaxbox notranslate">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>locales</var></code> {{optional_inline}}</dt> - <dd> - <p>BCP47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 Unicode 拡張に対応しています (例えば "<code>en-US-u-ca-buddhist</code>" など)。 <code>locales</code> 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。</p> - - <dl> - <dt><code>nu</code></dt> - <dd>番号方式。使用できる値は次のとおりです。 "<code>arab</code>", "<code>arabext</code>", "<code>bali</code>", "<code>beng</code>", "<code>deva</code>", "<code>fullwide</code>", "<code>gujr</code>", "<code>guru</code>", "<code>hanidec</code>", "<code>khmr</code>", "<code>knda</code>", "<code>laoo</code>", "<code>latn</code>", "<code>limb</code>", "<code>mlym</code>", "<code>mong</code>", "<code>mymr</code>", "<code>orya</code>", "<code>tamldec</code>", "<code>telu</code>", "<code>thai</code>", "<code>tibt</code>"</dd> - <dt><code>ca</code></dt> - <dd>カレンダー。使用できる値は次のとおりです。 "<code>buddhist</code>", "<code>chinese</code>", "<code>coptic</code>", "<code>ethiopia</code>", "<code>ethiopic</code>", "<code>gregory</code>", "<code>hebrew</code>", "<code>indian</code>", "<code>islamic</code>", "<code>iso8601</code>", "<code>japanese</code>", "<code>persian</code>", "<code>roc</code>"</dd> - <dt><code>hc</code></dt> - <dd>時制。使用できる値は次の通りです。 "<code>h11</code>", "<code>h12</code>", "<code>h23</code>", "<code>h24</code>".</dd> - </dl> - </dd> - <dt><code><var>options</var></code> {{optional_inline}}</dt> - <dd> - <p>以下のプロパティの一部またはすべてを持つオブジェクトです。</p> - - <dl> - <dt><code>dateStyle</code></dt> - <dd><code>format()</code> が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。 - <ul> - <li>"<code>full</code>"</li> - <li>"<code>long</code>"</li> - <li>"<code>medium</code>"</li> - <li>"<code>short</code>"</li> - </ul> - - <div class="blockIndicator note"> - <p><code>dateStyle</code> は <code>timeStyle</code> と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば <code>weekday</code>, <code>hour</code>, <code>month</code>, など)。</p> - </div> - </dd> - <dt><code>timeStyle</code></dt> - <dd><code>format()</code> が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。 - <ul> - <li>"<code>full</code>"</li> - <li>"<code>long</code>"</li> - <li>"<code>medium</code>"</li> - <li>"<code>short</code>"</li> - </ul> - </dd> - <dd> - <div class="blockIndicator note"> - <p><code>timeStyle</code> は <code>dateStyle</code> と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば <code>weekday</code>, <code>hour</code>, <code>month</code>, など)。</p> - </div> - </dd> - <dt><code>calendar</code></dt> - <dd>暦です。有効な値は、 "<code>buddhist</code>", "<code>chinese</code>", " <code>coptic</code>", "<code>ethiopia</code>", "<code>ethiopic</code>", "<code>gregory</code>", " <code>hebrew</code>", "<code>indian</code>", "<code>islamic</code>", "<code>iso8601</code>", " <code>japanese</code>", "<code>persian</code>", "<code>roc</code>" です。</dd> - <dt><code>dayPeriod</code></dt> - <dd>日単位の期間の表現の仕方です。有効な値は、 "<code>narrow</code>", "<code>short</code>", " <code>long</code>" です。</dd> - <dt><code>numberingSystem</code></dt> - <dd>命数法です。有効な値は、 "<code>arab</code>", "<code>arabext</code>", " <code>bali</code>", "<code>beng</code>", "<code>deva</code>", "<code>fullwide</code>", " <code>gujr</code>", "<code>guru</code>", "<code>hanidec</code>", "<code>khmr</code>", " <code>knda</code>", "<code>laoo</code>", "<code>latn</code>", "<code>limb</code>", "<code>mlym</code>", " <code>mong</code>", "<code>mymr</code>", "<code>orya</code>", "<code>tamldec</code>", " <code>telu</code>", "<code>thai</code>", "<code>tibt</code>" です。</dd> - <dt><code>localeMatcher</code></dt> - <dd>使用するロケール一致アルゴリズム。利用可能な値は "<code>lookup</code>" と "<code>best fit</code>" です。既定値は "<code>best fit</code>" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。</dd> - <dt><code>timeZone</code></dt> - <dd>使用するタイムゾーン。実装が認識しなければならない唯一の値は "<code>UTC</code>" です。既定値は、実行時の既定のタイムゾーンです。実装は、 <a href="https://www.iana.org/time-zones">IANA タイムゾーンデータベース</a>のタイムゾーン名、例えば "<code>Asia/Shanghai</code>", "<code>Asia/Kolkata</code>", "<code>America/New_York</code>" なども認識できる場合があります。</dd> - <dt><code>hour12</code></dt> - <dd>12時制を使用するかどうか (24時制に対して)。可能な値は <code>true</code> と <code>false</code> です。既定ではロケールに依存します。このオプションは <code>hc</code> 言語タグや <code>hourCycle</code> オプションと一緒に使用された場合、これらを上書きします。</dd> - <dt><code>hourCycle</code></dt> - <dd>使用する時の周期です。利用可能な値は "<code>h11</code>", "<code>h12</code>", "<code>h23</code>", "<code>h24</code>" です。このオプションは <code>hc</code> 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は <code>hour12</code> オプションが優先されます。</dd> - <dt><code>formatMatcher</code></dt> - <dd>使用する書式一致アルゴリズム。可能な値は "<code>basic</code>" と "<code>best fit</code>" です。既定値は "<code>best fit</code>" です。このプロパティの使用方法については、以下の項を参照してください。</dd> - </dl> - - <p>以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。</p> - - <ul> - <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code></li> - <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code></li> - <li><code>year</code>, <code>month</code>, <code>day</code></li> - <li><code>year</code>, <code>month</code></li> - <li><code>month</code>, <code>day</code></li> - <li><code>hour</code>, <code>minute</code>, <code>second</code></li> - <li><code>hour</code>, <code>minute</code></li> - </ul> - - <p>実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 <code>formatMatcher</code> プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。<a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">完全に定義された "<code>basic</code>" アルゴリズム</a>と、実装に依存した"<code>best fit</code>" アルゴリズムです。</p> - - <dl> - <dt><code>weekday</code></dt> - <dd>曜日の表現です。利用可能な値は以下の通りです。 - <ul> - <li>"<code>long</code>" (例 <code>Thursday</code>)</li> - <li>"<code>short</code>" (例 <code>Thu</code>)</li> - <li>"<code>narrow</code>" (例 <code>T</code>)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 <code>Tuesday</code> の narrow 形式も <code>T</code> です)。</li> - </ul> - </dd> - <dt><code>era</code></dt> - <dd>時代の表現です。利用可能な値は以下の通りです。 - <ul> - <li>"<code>long</code>" (例 <code>Anno Domini</code>, 紀元)</li> - <li>"<code>short</code>" (例 <code>AD</code>)</li> - <li>"<code>narrow</code>" (例 <code>A</code>)</li> - </ul> - </dd> - <dt><code>year</code></dt> - <dd>年の表現です。利用可能な値は以下の通りです。 - <ul> - <li>"<code>numeric</code>" (例 <code>2012</code>)</li> - <li>"<code>2-digit</code>" (例 <code>12</code>)</li> - </ul> - </dd> - <dt><code>month</code></dt> - <dd>月の表現です。利用可能な値は以下の通りです。 - <ul> - <li>"<code>numeric</code>" (例 <code>2</code>)</li> - <li>"<code>2-digit</code>" (例 <code>02</code>)</li> - <li>"<code>long</code>" (例 <code>March</code>)</li> - <li>"<code>short</code>" (例 <code>Mar</code>)</li> - <li>"<code>narrow</code>" (例 <code>M</code>)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 <code>May</code> の narrow 形式も <code>M</code> です)。</li> - </ul> - </dd> - <dt><code>day</code></dt> - <dd>日の表現です。利用可能な値は以下の通りです。 - <ul> - <li>"<code>numeric</code>" (例 <code>1</code>)</li> - <li>"<code>2-digit</code>" (例 <code>01</code>)</li> - </ul> - </dd> - <dt><code>hour</code></dt> - <dd>時の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd> - <dt><code>minute</code></dt> - <dd>分の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd> - <dt><code>second</code></dt> - <dd>秒の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd> - <dt><code>fractionalSecondDigits</code></dt> - <dd> - <div class="blockIndicator note"> - <p class="noinclude">Firefox 84, Chrome 84, などで追加されました。詳しくは互換性一覧表を参照してください。</p> - </div> - 秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。 - - <ul> - <li><code>0</code> (小数点以下は切り捨て)</li> - <li><code>1</code> (小数点以下は1桁で表される。例えば、 736 は <code>7</code> と書式化される。)</li> - <li><code>2</code> (小数点以下は2桁で表される。例えば、 736 は <code>73</code> と書式化される。)</li> - <li><code>3</code> (小数点以下は2桁で表される。例えば、 736 は <code>736</code> と書式化される。)</li> - </ul> - </dd> - <dt><code>timeZoneName</code></dt> - <dd>タイムゾーン名の表現です。利用可能な値は以下の通りです。 - <ul> - <li>"<code>long</code>" (例 <code>British Summer Time</code>)</li> - <li>"<code>short</code>" (例 <code>GMT+1</code>)</li> - </ul> - </dd> - </dl> - - <p class="noinclude">日付・時間コンポーネントプロパティの既定値は {{jsxref("undefined")}} ですが、すべてのコンポーネントプロパティが {{jsxref("undefined")}} であった場合、 <code>year</code>, <code>month</code>, <code>day</code> は "<code>numeric</code>" であると仮定されます。</p> - </dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_DateTimeFormat" name="Using_DateTimeFormat">DateTimeFormat の使用</h3> - -<p>ロケールを指定しない基本的な使用方法では、 <code>DateTimeFormat</code> は既定のロケールとオプションを使用します。</p> - -<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); - -// toLocaleString without arguments depends on the implementation, -// the default locale, and the default time zone -console.log(new Intl.DateTimeFormat().format(date)); -// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)</pre> - -<h3 id="Using_timeStyle_and_dateStyle" name="Using_timeStyle_and_dateStyle">timeStyle と dateStyle の使用</h3> - -<pre class="brush: js notranslate">let o = new Intl.DateTimeFormat("en" , { - timeStyle: "short" -}); -console.log(o.format(Date.now())); // "13:31 AM" - -let o = new Intl.DateTimeFormat("en" , { - dateStyle: "short" -}); -console.log(o.format(Date.now())); // "07/07/20" - -let o = new Intl.DateTimeFormat("en" , { - timeStyle: "medium", - dateStyle: "short" -}); -console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-intl-datetimeformat-constructor', 'Intl.DateTimeFormat')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.DateTimeFormat")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl</a></code></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md new file mode 100644 index 0000000000..9dd69a4d94 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md @@ -0,0 +1,261 @@ +--- +title: Intl.DateTimeFormat() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +tags: + - Constructor + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.DateTimeFormat +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +--- +{{JSRef}} + +**`Intl.DateTimeFormat()`** コンストラクターは、言語に応じた日付と時刻の書式化を可能にする +{{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトを生成します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html", "taller")}} + + +## 構文 + +```js +new Intl.DateTimeFormat() +new Intl.DateTimeFormat(locales) +new Intl.DateTimeFormat(locales, options) +``` + +### 引数 + +- `locales` {{optional_inline}} + - : BCP 47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 Unicode 拡張に対応しています (例えば "`en-US-u-ca-buddhist`" など)。 `locales` 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。 + + - `nu` + - : 番号方式。使用できる値は "`arab`", "`arabext`", "`bali`", "`beng`", "`deva`", "`fullwide`", "`gujr`", "`guru`", "`hanidec`", "`khmr`", "`knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", "`mong`", "`mymr`", "`orya`", "`tamldec`", "`telu`", "`thai`", "`tibt`" です。 + - `ca` + - : カレンダー。使用できる値は "`buddhist`", "`chinese`", "`coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", "`hebrew`", "`indian`", "`islamic`", "`iso8601`", "`japanese`", "`persian`", "`roc`" です。 + - `hc` + - : 時制。使用できる値は "`h11`", "`h12`", "`h23`", "`h24`" です。 + +- `options` {{optional_inline}} + + - : 以下のプロパティの一部またはすべてを持つオブジェクトです。 + + - `dateStyle` + + - : `format()` が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。 + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **Note:** `dateStyle` は `timeStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。 + + - `timeStyle` + - : `format()` が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。 + + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **Note:** `timeStyle` は `dateStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。 + - `calendar` + - : 暦です。有効な値は、 "`buddhist`", "`chinese`", " `coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", " `hebrew`", "`indian`", "`islamic`", "`iso8601`", " `japanese`", "`persian`", "`roc`" です。 + - `dayPeriod` + + - : 日単位の期間の表現の仕方です。有効な値は、 "`narrow`", "`short`", " `long`" です。 + + > **Note:** + > + > - このオプションは12時間制を使用したときのみ効果があります。 + > - 多くのロケールでは幅の指定を無視して同じ文字列を使用します。 + + - `numberingSystem` + - : 命数法です。有効な値は、 "`arab`", "`arabext`", " `bali`", "`beng`", "`deva`", "`fullwide`", " `gujr`", "`guru`", "`hanidec`", "`khmr`", " `knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", " `mong`", "`mymr`", "`orya`", "`tamldec`", " `telu`", "`thai`", "`tibt`" です。 + - `localeMatcher` + - : 使用するロケール一致アルゴリズム。利用可能な値は "`lookup`" と "`best fit`" です。既定値は "`best fit`" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_negotiation", 1)}} のページをご覧ください。 + - `timeZone` + - : 使用するタイムゾーン。実装が認識しなければならない唯一の値は "`UTC`" です。既定値は、実行時の既定のタイムゾーンです。実装は、 [IANA タイムゾーンデータベース](https://www.iana.org/time-zones)のタイムゾーン名、例えば "`Asia/Shanghai`", "`Asia/Kolkata`", "`America/New_York`" なども認識できる場合があります。 + - `hour12` + - : (24 時制に対して) 12 時制を使用するかどうか。可能な値は `true` と `false` です。既定ではロケールに依存します。このオプションは `hc` 言語タグや `hourCycle` オプションと一緒に使用された場合、これらを上書きします。 + - `hourCycle` + - : 使用する時の周期です。利用可能な値は "`h11`", "`h12`", "`h23`", "`h24`" です。このオプションは `hc` 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は `hour12` オプションが優先されます。 + - `formatMatcher` + - : 使用する書式一致アルゴリズム。可能な値は "`basic`" と "`best fit`" です。既定値は "`best fit`" です。このプロパティの使用方法については、以下の項を参照してください。 + + 以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。 + + - `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second` + - `weekday`, `year`, `month`, `day` + - `year`, `month`, `day` + - `year`, `month` + - `month`, `day` + - `hour`, `minute`, `second` + - `hour`, `minute` + + 実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 `formatMatcher` プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。[完全に定義された "`basic`" アルゴリズム](https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher)と、実装に依存した "`best fit`" アルゴリズムです。 + + - `weekday` + + - : 曜日の表現です。利用可能な値は以下の通りです。 + - "`long`" (例 `Thursday`) + - "`short`" (例 `Thu`) + - "`narrow`" (例 `T`)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 `Tuesday` の narrow 形式も `T` です)。 + + - `era` + + - : 時代の表現です。利用可能な値は以下の通りです。 + + - "`long`" (例 `Anno Domini`, 紀元) + - "`short`" (例 `AD`) + - "`narrow`" (例 `A`) + + - `year` + + - : 年の表現です。利用可能な値は以下の通りです。 + + - "`numeric`" (例 `2012`) + - "`2-digit`" (例 `12`) + + - `month` + + - : 月の表現です。利用可能な値は以下の通りです。 + - "`numeric`" (例 `2`) + - "`2-digit`" (例 `02`) + - "`long`" (例 `March`) + - "`short`" (例 `Mar`) + - "`narrow`" (例 `M`)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 `May` の narrow 形式も `M` です)。 + + - `day` + + - : 日の表現です。利用可能な値は以下の通りです。 + + - "`numeric`" (例 `1`) + - "`2-digit`" (例 `01`) + + - `hour` + - : 時の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `minute` + - : 分の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `second` + - : 秒の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `fractionalSecondDigits` + - : 秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。 + + - `0` (小数点以下は切り捨て) + - `1` (小数点以下は1桁で表される。例えば、 736 は `7` と書式化される。) + - `2` (小数点以下は2桁で表される。例えば、 736 は `73` と書式化される。) + - `3` (小数点以下は2桁で表される。例えば、 736 は `736` と書式化される。) + + - `timeZoneName` + + - : タイムゾーン名の表現です。利用可能な値は以下の通りです。 + + - "`long`" ローカライズされた長い形式 (例 `Pacific Standard Time`, `Nordamerikanische Westküsten-Normalzeit`) + - "`short`" ローカライズされた短い形式 (例 `PST`, `GMT-8`) + - "`shortOffset`" ローカライズされた短い GMT 形式 (例 `GMT-8`) + - "`longOffset`" ローカライズされた長い GMT 形式 (例 `GMT-0800`) + - "`shortGeneric`" 一般的な場所を指定しない短い形式 (例 `PT`, `Los Angeles Zeit`). + - "`longGeneric`" 一般的な場所を指定しない長い形式 (例 `Pacific Time`, `Nordamerikanische Westküstenzeit`) + + > **Note:** タイムゾーンの表示は、必要な文字列が利用できない場合、別の形式にフォールバックすることがあります。例えば、場所を指定しない形式では、 "Pacific Time" のように特定の国や都市の場所を指定せずにタイムゾーンを表示する必要がありますが、 "Los Angeles Time" のようなタイムゾーンにフォールバックする場合があります。 + + それぞれの日付や時刻の部分のプロパティの既定値は {{jsxref("undefined")}} ですが、すべての部分のプロパティが {{jsxref("undefined")}} であった場合、 `year`, `month`, `day` は "`numeric`" であると想定されます。 + +## 例 + +### DateTimeFormat の使用 + +ロケールを指定しない基本的な使用方法では、 `DateTimeFormat` は既定のロケールとオプションを使用します。 + +```js +let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// toLocaleString without arguments depends on the implementation, +// the default locale, and the default time zone +console.log(new Intl.DateTimeFormat().format(date)); +// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800) +``` + +### timeStyle と dateStyle の使用 + +```js +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "short" +}); +console.log(o.format(Date.now())); // "13:31 AM" + +let o = new Intl.DateTimeFormat("en" , { + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20" + +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "medium", + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM" +``` + +### dayPeriod の使用 + +`dayPeriod` オプションを使用して、1日の時間帯 (「朝」、「夜」、「正午」など) を表す文字列を出力します。なお、これは 12 時間制の書式でのみ有効であり、 (`hourCycle: 'h12'`)、多くのロケールでは `dayPeriod` の値に関係なく同じ文字列が出力されます。 + +```js +let date = Date.UTC(2012, 11, 17, 4, 0, 42); + +console.log(new Intl.DateTimeFormat('en-GB', { hour: 'numeric', hourCycle: 'h12', +dayPeriod: 'short', timeZone: 'UTC' }).format(date)); +// > 4 at night" (same formatting in en-GB for all dayPeriod values) + +console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', + dayPeriod: 'narrow', timeZone: 'UTC' }).format(date)); +// > "4 mat." (same output in French for both narrow/short dayPeriod) + +console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', + dayPeriod: 'long', timeZone: 'UTC' }).format(date)); +// > "4 du matin" +``` + +### timeZoneName の使用 + +`timeZoneName` を使用して、タイムゾーンの文字列 ("GMT", "Pacific Time", など) を出力します。 + +```js +var date = Date.UTC(2021, 11, 17, 3, 0, 42); +const timezoneNames = ['short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', 'longGeneric'] + +for (const zoneName of timezoneNames) { + // Do something with currentValue + var formatter = new Intl.DateTimeFormat('en-US', { + timeZone: 'America/Los_Angeles', + timeZoneName: zoneName, + }); + console.log(zoneName + ": " + formatter.format(date) ); +} + +// expected output: +// > "short: 12/16/2021, PST" +// > "long: 12/16/2021, Pacific Standard Time" +// > "shortOffset: 12/16/2021, GMT-8" +// > "longOffset: 12/16/2021, GMT-08:00" +// > "shortGeneric: 12/16/2021, PT" +// > "longGeneric: 12/16/2021, Pacific Time" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Global_Objects/Intl", "Intl")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html deleted file mode 100644 index a7606b00f0..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.format() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.NumberFormat.prototype.format()</code></strong> メソッドは、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}}</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="syntaxbox notranslate"><var>dateTimeFormat</var>.format(<var>date</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>date</var></code></dt> - <dd>整形する日付や時刻です。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>format</code> ゲッター関数は、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_format" name="Using_format">format の使用</h3> - -<p><code>format</code> ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。</p> - -<pre class="brush: js notranslate">var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; -var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options); -console.log(dateTimeFormat.format(new Date())); -// → "недеља, 7. април 2013." -</pre> - -<h3 id="Using_format_with_map" name="Using_format_with_map">format と map の使用</h3> - -<p><code>format</code> ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。</p> - -<pre class="brush: js notranslate">var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)]; -var options = { year: 'numeric', month: 'long' }; -var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options); -var formatted = a.map(dateTimeFormat.format); -console.log(formatted.join('; ')); -// → "setembro de 2012; dezembro de 2012; abril de 2012" -</pre> - -<h3 id="書式化された日付値を固定値と比較することは避ける">書式化された日付値を固定値と比較することは避ける</h3> - -<p>ほとんどの場合、 <code>format()</code> が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。</p> - -<p>このことから、 <code>format()</code> の結果と固定値を比較することができると期待してはいけません。</p> - -<pre class="brush: js; example-bad notranslate">let d = new Date("2019-01-01T00:00:00.000000Z"); -let formattedDate = Intl.DateTimeFormat(undefined, { - year: 'numeric', - month: 'numeric', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric' -}).format(d); - -"1.1.2019, 01:00:00" === formattedDate; -// true in Firefox and others -// false in IE and Edge -</pre> - -<div class="blockIndicator note"> -<p><strong>注</strong>: この <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow のスレッド</a>に詳細や例があります。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.format', 'Intl.DateTimeFormat.format')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> - <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> - <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> - <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md new file mode 100644 index 0000000000..2cd8c9fae8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md @@ -0,0 +1,101 @@ +--- +title: Intl.DateTimeFormat.prototype.format() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.format +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format +--- +{{JSRef}} + +The **`Intl.DateTimeFormat.prototype.format()`** メソッドは、この {{jsxref("Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}} + + +## 構文 + +```js +format(date) +``` + +### 引数 + +- `date` + - : 整形する日付です。 + +## 解説 + +`format` ゲッター関数は、この {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。 + +## 例 + +### format の使用 + +`format` ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。 + +```js +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options); +console.log(dateTimeFormat.format(new Date())); +// → "недеља, 7. април 2013." +``` + +### format と map の使用 + +`format` ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。 + +```js +var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)]; +var options = { year: 'numeric', month: 'long' }; +var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options); +var formatted = a.map(dateTimeFormat.format); +console.log(formatted.join('; ')); +// → "setembro de 2012; dezembro de 2012; abril de 2012" +``` + +### 書式化された日付値を固定値と比較することは避ける + +ほとんどの場合、 `format()` が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。 + +このことから、 `format()` の結果と固定値を比較することができると期待してはいけません。 + +```js example-bad +let d = new Date("2019-01-01T00:00:00.000000Z"); +let formattedDate = Intl.DateTimeFormat(undefined, { + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric' +}).format(d); + +"1.1.2019, 01:00:00" === formattedDate; +// true in Firefox and others +// false in IE and Edge +``` + +> **Note:** この [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)に詳細や例があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html deleted file mode 100644 index 1722354d9e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.formatRange() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange -tags: - - JavaScript - - Method - - Reference - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat.prototype.formatRange()</code></strong> は、日付の範囲をもっとも簡明な方法で、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された <strong><code>locale</code></strong> と <strong><code>options</code></strong> に基づいて書式化します。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html", "taller")}}</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="notranslate"><code>Intl.DateTimeFormat.prototype.formatRange(<var>startDate, endDate</var>)</code></pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_formatRange_usage" name="Basic_formatRange_usage">基本的な formatRange の使用</h3> - -<p>このメソッドは2つの {{jsxref("Date")}} を受け取り、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された <code>locale</code> と <code>options</code> に基づいて日付の範囲を書式化します。</p> - -<pre class="brush: js notranslate">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); -let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); -let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0)); -// > 'Wed, 10 Jan 2007 10:00:00 GMT' -// > 'Wed, 10 Jan 2007 11:00:00 GMT' -// > 'Sat, 20 Jan 2007 10:00:00 GMT' - -let fmt1 = new Intl.DateTimeFormat("en", { - year: '2-digit', - month: 'numeric', - day: 'numeric', - hour: 'numeric', - minute: 'numeric' -}); -console.log(fmt1.format(date1)); -console.log(fmt1.formatRange(date1, date2)); -console.log(fmt1.formatRange(date1, date3)); -// > '1/10/07, 10:00 AM' -// > '1/10/07, 10:00 – 11:00 AM' -// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM' - -let fmt2 = new Intl.DateTimeFormat("en", { - year: 'numeric', - month: 'short', - day: 'numeric' -}); -console.log(fmt2.format(date1)); -console.log(fmt2.formatRange(date1, date2)); -console.log(fmt2.formatRange(date1, date3)); -// > 'Jan 10, 2007' -// > 'Jan 10, 2007' -// > 'Jan 10 – 20, 2007' -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Intl.DateTimeFormat.formatRange', '#sec-intl.datetimeformat.prototype.formatRange', 'formatRange()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRange")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md new file mode 100644 index 0000000000..0c14478615 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md @@ -0,0 +1,81 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRange() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRange +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatRange()`** は、 {{jsxref("Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された **`locale`** と **`options`** に基づいて、もっとも簡明な方法で日付の範囲を書式化します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html", + "taller")}} + + +## 構文 + +```js +formatRange(startDate, endDate) +``` + +## 例 + +### 基本的な formatRange の使用 + +このメソッドは 2 つの {{jsxref("Date")}} を受け取り、 {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された `locale` と `options` に基づいて日付の範囲を書式化します。 + +```js +let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); +let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); +let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0)); +// > 'Wed, 10 Jan 2007 10:00:00 GMT' +// > 'Wed, 10 Jan 2007 11:00:00 GMT' +// > 'Sat, 20 Jan 2007 10:00:00 GMT' + +let fmt1 = new Intl.DateTimeFormat("en", { + year: '2-digit', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric' +}); +console.log(fmt1.format(date1)); +console.log(fmt1.formatRange(date1, date2)); +console.log(fmt1.formatRange(date1, date3)); +// > '1/10/07, 10:00 AM' +// > '1/10/07, 10:00 – 11:00 AM' +// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM' + +let fmt2 = new Intl.DateTimeFormat("en", { + year: 'numeric', + month: 'short', + day: 'numeric' +}); +console.log(fmt2.format(date1)); +console.log(fmt2.formatRange(date1, date2)); +console.log(fmt2.formatRange(date1, date3)); +// > 'Jan 10, 2007' +// > 'Jan 10, 2007' +// > 'Jan 10 – 20, 2007' +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html deleted file mode 100644 index be4d8a0bc4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.formatRangeToParts() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts -tags: - - Internationalization - - JavaScript - - Localization - - Method - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts ---- -<p>{{JSRef}}</p> - -<p><strong><code>Intl.DateTimeFormat.prototype.formatRangeToParts()</code></strong> メソッドは、 <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype">DateTimeFormat</a></code> フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", "taller")}}</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="notranslate"><code>Intl.DateTimeFormat.prototype.formatRangeToParts(<var>startDate</var>, <var>endDate</var>)</code></pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_formatRange_usage" name="Basic_formatRange_usage">基本的な formatRangeToParts の使い方</h3> - -<p>このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表すロケール特有のトークンを含む {{jsxref("Array")}} オブジェクトを返します。</p> - -<pre class="brush: js notranslate">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); -let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); -// > 'Wed, 10 Jan 2007 10:00:00 GMT' -// > 'Wed, 10 Jan 2007 11:00:00 GMT' - -let fmt = new Intl.DateTimeFormat("en", { - hour: 'numeric', - minute: 'numeric' -}); - -console.log(fmt.formatRange(date1, date2)); -// > '10:00 – 11:00 AM' - -fmt.formatRangeToParts(date1, date2); -// return value: -// [ -// { type: 'hour', value: '10', source: "startRange" }, -// { type: 'literal', value: ':', source: "startRange" }, -// { type: 'minute', value: '00', source: "startRange" }, -// { type: 'literal', value: ' – ', source: "shared" }, -// { type: 'hour', value: '11', source: "endRange" }, -// { type: 'literal', value: ':', source: "endRange" }, -// { type: 'minute', value: '00', source: "endRange" }, -// { type: 'literal', value: ' ', source: "shared" }, -// { type: 'dayPeriod', value: 'AM', source: "shared" } -// ]</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Intl.DateTimeFormat.formatRange', '#sec-Intl.DateTimeFormat.prototype.formatRangeToParts', 'formatRangeToParts()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Intl.DateTimeFormat.prototype.formatRange()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md new file mode 100644 index 0000000000..034909ed3c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md @@ -0,0 +1,78 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRangeToParts() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRangeToParts +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatRangeToParts()`** メソッドは、 {{jsxref("Intl.DateTimeFormat")}} フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", + "taller")}} + + +## 構文 + +```js +formatRangeToParts(startDate, endDate) +``` + +## 例 + +### 基本的な formatRangeToParts の使い方 + +このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表す*ロケール特有*のトークンを含む {{jsxref("Array")}} オブジェクトを返します。 + +> **Note:** 返値は現在のロケールで表示されるので、以下のものとは異なる可能性があります。 + +```js +let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); +let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); +// > 'Wed, 10 Jan 2007 10:00:00 GMT' +// > 'Wed, 10 Jan 2007 11:00:00 GMT' + +let fmt = new Intl.DateTimeFormat("en", { + hour: 'numeric', + minute: 'numeric' +}); + +console.log(fmt.formatRange(date1, date2)); +// > '10:00 – 11:00 AM' + +fmt.formatRangeToParts(date1, date2); +// return value: +// [ +// { type: 'hour', value: '10', source: "startRange" }, +// { type: 'literal', value: ':', source: "startRange" }, +// { type: 'minute', value: '00', source: "startRange" }, +// { type: 'literal', value: ' – ', source: "shared" }, +// { type: 'hour', value: '11', source: "endRange" }, +// { type: 'literal', value: ':', source: "endRange" }, +// { type: 'minute', value: '00', source: "endRange" }, +// { type: 'literal', value: ' ', source: "shared" }, +// { type: 'dayPeriod', value: 'AM', source: "shared" } +// ] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html deleted file mode 100644 index 04e140d0e8..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: DateTimeFormat.prototype.formatToParts() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat.prototype.formatToParts()</code></strong> メソッドは、ロケールを意識した <code>DateTimeFormat</code> フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>dateTimeFormat</var>.formatToParts(<var>date</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>date</code> {{optional_inline}}</dt> - <dd>書式化する日付。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>書式化された日付のパーツを含むオブジェクトの {{jsxref("Array")}} です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>formatToParts()</code> メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの {{jsxref("Array")}} を返します。<code>formatToParts()</code> メソッドが返却する構造は、このようになります。</p> - -<pre class="brush: js notranslate">[ - { type: 'day', value: '17' }, - { type: 'weekday', value: 'Monday' } -]</pre> - -<p>渡される可能性がある type は以下のとおりです。</p> - -<dl> - <dt>day</dt> - <dd>日付として使用される文字列。たとえば、 "<code>17</code>"。</dd> - <dt>dayPeriod</dt> - <dd>日付期間として使用される文字列。たとえば、 "<code>AM</code>", "<code>PM</code>", "<code>in the morning</code>", "<code>noon</code>" など。</dd> - <dt>era</dt> - <dd>時代として使用される文字列。たとえば、"<code>BC</code>" や "<code>AD</code>"。</dd> - <dt>fractionalSecond</dt> - <dd>小数点以下の秒として使用される文字列です。例えば "<code>0</code>" や "<code>00</code>" や "<code>000</code>" です。</dd> - <dt>hour</dt> - <dd>時刻として使用される文字列。たとえば "<code>3</code>" や "<code>03</code>"。</dd> - <dt>literal</dt> - <dd>日付や時刻の区切りとして使用される文字列。たとえば "<code>/</code>"、"<code>,</code>"、"<code>o'clock</code>"、"<code>de</code>"。</dd> - <dt>minute</dt> - <dd>分として使用される文字列。たとえば、"<code>00</code>"。</dd> - <dt>month</dt> - <dd>月として使用される文字列。たとえば、"<code>12</code>"。</dd> - <dt>relatedYear</dt> - <dd>カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "<code>2019</code>" です。</dd> - <dt>second</dt> - <dd>秒として使用される文字列。たとえば、"<code>07</code>" や "<code>42</code>"。</dd> - <dt>timeZoneName</dt> - <dd>タイムゾーン名として使用される文字列。たとえば、"<code>UTC</code>"。</dd> - <dt>weekday</dt> - <dd>曜日として使用される文字列。たとえば、"<code>M</code>" や "<code>Monday</code>"、"<code>Montag</code>"。</dd> - <dt>year</dt> - <dd>年として使用される文字列。たとえば、"<code>2012</code>" や "<code>96</code>"。</dd> - <dt>yearName</dt> - <dd>関連するコンテキストで yearName に使用される文字列、例えば "<code>geng-zi</code>" など。</dd> -</dl> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>この機能のポリフィルは、<a href="https://github.com/zbraniecki/proposal-intl-formatToParts">提案リポジトリ</a>から利用できます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p><code>DateTimeFormat</code> は、直接操作できないローカライズされた透過的でない文字列を出力します。</p> - -<pre class="brush: js notranslate">var date = Date.UTC(2012, 11, 17, 3, 0, 42); - -var formatter = new Intl.DateTimeFormat('en-us', { - weekday: 'long', - year: 'numeric', - month: 'numeric', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric', - fractionalSecondDigits: 3, - hour12: true, - timeZone: 'UTC' -}); - -formatter.format(date); -// "Monday, 12/17/2012, 3:00:42.000 AM" -</pre> - -<p>しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 <code>formatToParts</code> メソッドは、文字列を部品単位で提供することで、 <code>DateTimeFormat</code> フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。</p> - -<pre class="brush: js notranslate">formatter.formatToParts(date); - -// return value: -[ - { type: 'weekday', value: 'Monday' }, - { type: 'literal', value: ', ' }, - { type: 'month', value: '12' }, - { type: 'literal', value: '/' }, - { type: 'day', value: '17' }, - { type: 'literal', value: '/' }, - { type: 'year', value: '2012' }, - { type: 'literal', value: ', ' }, - { type: 'hour', value: '3' }, - { type: 'literal', value: ':' }, - { type: 'minute', value: '00' }, - { type: 'literal', value: ':' }, - { type: 'second', value: '42' }, - { type: 'fractionalSecond', value: '000' }, - { type: 'literal', value: ' ' }, - { type: 'dayPeriod', value: 'AM' } -] -</pre> - -<p>これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{jsxref("Array.prototype.map()")}}、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>、 <a href="/ja/docs/Web/JavaScript/Reference/Statements/switch">switch 文</a>、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>、 {{jsxref("Array.prototype.reduce()")}} などを使用しています。</p> - -<pre class="brush: js notranslate">var dateString = formatter.formatToParts(date).map(({type, value}) => { - switch (type) { - case 'dayPeriod': return `<b>${value}</b>`; - default : return value; - } -}).reduce((string, part) => string + part); -</pre> - -<p>これにより、 <code>formatToParts()</code> メソッドを使用する際に、日の部分が太字になります。</p> - -<pre class="brush: js notranslate">console.log(formatter.format(date)); -// "Monday, 12/17/2012, 3:00:42.000 AM" - -console.log(dateString); -// "Monday, 12/17/2012, 3:00:42.000 <b>AM</b>"</pre> - -<h3 id="Named_Years_and_Mixed_calendars" name="Named_Years_and_Mixed_calendars">名前付きの年と混合カレンダー</h3> - -<p>いくつかのケースでは、暦は名前付きの年を使用しています。 例えば、中国やチベットの暦では、60年周期の<a href="https://ja.wikipedia.org/wiki/%E5%B9%B2%E6%94%AF">干支</a>を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 <code>formatToParts()</code> の結果は、通常は年が存在するはずなのに、年の項目ではなく、4桁のグレゴリオ暦の年を含む relatedYear のエントリを含むことになります。バッグの中の項目を (任意の値で) <code>year</code> に設定すると、年と <code>yearName</code> グレゴリオ暦の <code>relatedYear</code> の両方が得られます。</p> - -<pre class="brush: js notranslate">let opts = { year: "numeric", month: "numeric", day: "numeric" }; -let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts); -df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42)); - -// return value -[ - { type: 'relatedYear', value: '2012' }, - { type: 'literal', value: '年' }, - { type: 'month', value: '十一月' }, - { type: 'day', value: '4' } -] -</pre> - -<p><code>year</code> オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には <code>relatedYear</code> のみが含まれます。</p> - -<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("zh-u-ca-chinese"); -df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42)); - -// 返値 -[ - { type: 'relatedYear', value: '2012' }, - { type: 'literal', value: '年' }, - { type: 'month', value: '十一月' }, - { type: 'day', value: '4' } -] -</pre> - -<p><code>year</code> を出力したい場合は、 <code>.format()</code> は一般的にこれらを並べて表示することができます。</p> - -<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"}); -df.format(Date.UTC(2012, 11, 17, 3, 0, 42)); - -// 返値 -2012壬辰年</pre> - -<p>これにより、ロケールとカレンダーを両方の <code>format</code> で混在させることも可能になります。</p> - -<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"}); -let date = Date.UTC(2012, 11, 17, 3, 0, 42); -df.format(date); - -// 返値 -2012(ren-chen) -</pre> - -<p>および <code>formatToParts</code> の場合</p> - -<pre class="brush: js notranslate">let opts = {month: 'numeric', day: 'numeric', year: "numeric"}; -let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts); -let date = Date.UTC(2012, 11, 17, 3); -df.formatToParts(date) - -// 返値 -[ - { type: 'month', value: '11' }, - { type: 'literal', value: '/' }, - { type: 'day', value: '4' }, - { type: 'literal', value: '/' }, - { type: 'relatedYear', value: '2012' } -] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> - <li>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</li> - <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> - <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> - <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md new file mode 100644 index 0000000000..cbe6256671 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md @@ -0,0 +1,238 @@ +--- +title: Intl.DateTimeFormat.prototype.formatToParts() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatToParts +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatToParts()`** メソッドは、ロケールを考慮した {{jsxref("Intl.DateTimeFormat")}} フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。 + +## 構文 + +```js +formatToParts(date) +``` + +### 引数 + +- `date` {{optional_inline}} + - : 書式化する日付。 + +### 返値 + +{{jsxref("Array")}} で、書式化された日付のパーツを含むオブジェクトの配列です。 + +## 解説 + +`formatToParts()` メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの {{jsxref("Array")}} を返します。`formatToParts()` メソッドが返却する構造は、このようになります。 + +```js +[ + { type: 'day', value: '17' }, + { type: 'weekday', value: 'Monday' } +] +``` + +渡される可能性がある type は以下のとおりです。 + +- day + - : 日付として使用される文字列。たとえば、 "`17`"。 +- dayPeriod + - : 日付期間として使用される文字列。たとえば、 "`AM`", "`PM`", "`in the morning`", "`noon`" など。 +- era + - : 時代として使用される文字列。たとえば、"`BC`" や "`AD`"。 +- fractionalSecond + - : 小数点以下の秒として使用される文字列です。例えば "`0`" や "`00`" や "`000`" です。 +- hour + - : 時刻として使用される文字列。たとえば "`3`" や "`03`"。 +- literal + - : 日付や時刻の区切りとして使用される文字列。たとえば "`/`"、"`,`"、"`o'clock`"、"`de`"。 +- minute + - : 分として使用される文字列。たとえば、"`00`"。 +- month + - : 月として使用される文字列。たとえば、"`12`"。 +- relatedYear + - : カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "`2019`" です。 +- second + - : 秒として使用される文字列。たとえば、"`07`" や "`42`"。 +- timeZoneName + - : タイムゾーン名として使用される文字列。たとえば、"`UTC`"。 +- weekday + - : 曜日として使用される文字列。たとえば、"`M`" や "`Monday`"、"`Montag`"。 +- year + - : 年として使用される文字列。たとえば、"`2012`" や "`96`"。 +- yearName + - : 関連するコンテキストで yearName に使用される文字列、例えば "`geng-zi`" など。 + +## ポリフィル + +この機能のポリフィルは、[提案リポジトリー](https://github.com/zbraniecki/proposal-intl-formatToParts)から利用できます。 + +## 例 + +`DateTimeFormat` は、直接操作できないローカライズされた透過的でない文字列を出力します。 + +```js +var date = Date.UTC(2012, 11, 17, 3, 0, 42); + +var formatter = new Intl.DateTimeFormat('en-us', { + weekday: 'long', + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + fractionalSecondDigits: 3, + hour12: true, + timeZone: 'UTC' +}); + +formatter.format(date); +// "Monday, 12/17/2012, 3:00:42.000 AM" +``` + +しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 `formatToParts` メソッドは、文字列を部品単位で提供することで、 `DateTimeFormat` フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。 + +```js +formatter.formatToParts(date); + +// return value: +[ + { type: 'weekday', value: 'Monday' }, + { type: 'literal', value: ', ' }, + { type: 'month', value: '12' }, + { type: 'literal', value: '/' }, + { type: 'day', value: '17' }, + { type: 'literal', value: '/' }, + { type: 'year', value: '2012' }, + { type: 'literal', value: ', ' }, + { type: 'hour', value: '3' }, + { type: 'literal', value: ':' }, + { type: 'minute', value: '00' }, + { type: 'literal', value: ':' }, + { type: 'second', value: '42' }, + { type: 'fractionalSecond', value: '000' }, + { type: 'literal', value: ' ' }, + { type: 'dayPeriod', value: 'AM' } +] +``` + +これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{jsxref("Array.prototype.map()")}}、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>、 <a href="/ja/docs/Web/JavaScript/Reference/Statements/switch">switch 文</a>、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>、 {{jsxref("Array.prototype.join()")}} などを使用しています。 + +```js +var dateString = formatter.formatToParts(date).map(({type, value}) => { + switch (type) { + case 'dayPeriod': return `<b>${value}</b>`; + default : return value; + } +}).join(''); +``` + +これにより、 `formatToParts()` メソッドを使用する際に、日の部分が太字になります。 + +```js +console.log(formatter.format(date)); +// "Monday, 12/17/2012, 3:00:42.000 AM" + +console.log(dateString); +// "Monday, 12/17/2012, 3:00:42.000 <b>AM</b>" +``` + +### 名前付きの年と混合カレンダー + +名前付きの年を使用している暦もあります。例えば、中国やチベットの暦では、 60 年周期の[干支](https://ja.wikipedia.org/wiki/%E5%B9%B2%E6%94%AF)を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 `formatToParts()` の結果は、通常は年が存在するはずなのに、年の項目ではなく、 4 桁のグレゴリオ暦の年を含む `relatedYear` の項目を含むことになります。バッグの中の項目を (任意の値で) `year` に設定すると、年と `yearName` グレゴリオ暦の `relatedYear` の両方が得られます。 + +```js +let opts = { year: "numeric", month: "numeric", day: "numeric" }; +let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts); +df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42)); + +// return value +[ + { type: 'relatedYear', value: '2012' }, + { type: 'literal', value: '年' }, + { type: 'month', value: '十一月' }, + { type: 'day', value: '4' } +] +``` + +`year` オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には `relatedYear` のみが含まれます。 + +```js +let df = new Intl.DateTimeFormat("zh-u-ca-chinese"); +df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42)); + +// 返値 +[ + { type: 'relatedYear', value: '2012' }, + { type: 'literal', value: '年' }, + { type: 'month', value: '十一月' }, + { type: 'day', value: '4' } +] +``` + +`year` を出力したい場合は、 `.format()` は一般的にこれらを並べて表示することができます。 + +```js +let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"}); +df.format(Date.UTC(2012, 11, 17, 3, 0, 42)); + +// 返値 +2012壬辰年 +``` + +これにより、ロケールとカレンダーを両方の `format` で混在させることも可能になります。 + +```js +let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"}); +let date = Date.UTC(2012, 11, 17, 3, 0, 42); +df.format(date); + +// 返値 +2012(ren-chen) +``` + +および `formatToParts` の場合 + +```js +let opts = {month: 'numeric', day: 'numeric', year: "numeric"}; +let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts); +let date = Date.UTC(2012, 11, 17, 3); +df.formatToParts(date) + +// 返値 +[ + { type: 'month', value: '11' }, + { type: 'literal', value: '/' }, + { type: 'day', value: '4' }, + { type: 'literal', value: '/' }, + { type: 'relatedYear', value: '2012' } +] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html deleted file mode 100644 index 9b18a60a81..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Intl.DateTimeFormat -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -tags: - - Class - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Localization - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -browser-compat: javascript.builtins.Intl.DateTimeFormat ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat</code></strong> オブジェクトは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのコンストラクターです。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div> - -<h2 id="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}</dt> - <dd>新しい <code>DateTimeFormat</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt> - <dd>指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。</dd> -</dl> - -<h2 id="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}</dt> - <dd>ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。</dd> - <dt>{{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> - <dd>オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。</dd> - <dt>{{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。</dd> - <dt>{{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}</dt> - <dd>このメソッドは 2 つの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。</dd> - <dt>{{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}</dt> - <dd>このメソッドは 2 つの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。</dd> -</dl> - -<h2 id="Examples">例</h2> - -<h3 id="Using_DateTimeFormat">DateTimeFormat の使用</h3> - -<p>基本的に、ロケールを指定せずに使用すると、 <code>DateTimeFormat</code> は既定のロケールとオプションを使用します。</p> - -<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); - -// toLocaleString without arguments depends on the implementation, -// the default locale, and the default time zone -console.log(new Intl.DateTimeFormat().format(date)); -// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800) -</pre> - -<h3 id="Using_locales">locales の使用</h3> - -<p>この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 <code>locales</code> 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。</p> - -<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); - -// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time) - -// US English uses month-day-year order -console.log(new Intl.DateTimeFormat('en-US').format(date)); -// → "12/19/2012" - -// British English uses day-month-year order -console.log(new Intl.DateTimeFormat('en-GB').format(date)); -// → "19/12/2012" - -// Korean uses year-month-day order -console.log(new Intl.DateTimeFormat('ko-KR').format(date)); -// → "2012. 12. 19." - -// Arabic in most Arabic speaking countries uses real Arabic digits -console.log(new Intl.DateTimeFormat('ar-EG').format(date)); -// → "١٩<span dir="rtl">/١٢/٢٠١٢</span>" - -// for Japanese, applications may want to use the Japanese calendar, -// where 2012 was the year 24 of the Heisei era -console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date)); -// → "24/12/19" - -// when requesting a language that may not be supported, such as -// Balinese, include a fallback language, in this case Indonesian -console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date)); -// → "19/12/2012" -</pre> - -<h3 id="Using_options">options の使用</h3> - -<p>日付と時刻の書式は <code>options</code> 引数を使用してカスタマイズできます。</p> - -<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)); - -// request a weekday along with a long date -var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; -console.log(new Intl.DateTimeFormat('de-DE', options).format(date)); -// → "Donnerstag, 20. Dezember 2012" - -// an application may want to use UTC and make that visible -options.timeZone = 'UTC'; -options.timeZoneName = 'short'; -console.log(new Intl.DateTimeFormat('en-US', options).format(date)); -// → "Thursday, December 20, 2012, GMT" - -// sometimes you want to be more precise -options = { - hour: 'numeric', minute: 'numeric', second: 'numeric', - timeZone: 'Australia/Sydney', - timeZoneName: 'short' -}; -console.log(new Intl.DateTimeFormat('en-AU', options).format(date)); -// → "2:00:00 pm AEDT" - -// sometimes you want to be very precise -options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds -console.log(new Intl.DateTimeFormat('en-AU', options).format(date)); -// → "2:00:00.200 pm AEDT" - -// sometimes even the US needs 24-hour time -options = { - year: 'numeric', month: 'numeric', day: 'numeric', - hour: 'numeric', minute: 'numeric', second: 'numeric', - hour12: false, - timeZone: 'America/Los_Angeles' -}; -console.log(new Intl.DateTimeFormat('en-US', options).format(date)); -// → "12/19/2012, 19:00:00" - -// to specify options but use the browser's default locale, use 'default' -console.log(new Intl.DateTimeFormat('default', options).format(date)); -// → "12/19/2012, 19:00:00" - -// sometimes it's helpful to include the period of the day -options = {hour: "numeric", dayPeriod: "short"}; -console.log(new Intl.DateTimeFormat('en-US', options).format(date)); -// → 10 at night -</pre> - -<p>The used calendar and numbering formats can also be set independently via <code>options</code> arguments:</p> - -<pre class="brush: js">var options = {calendar: 'chinese', numberingSystem: 'arab'}; -var dateFormat = new Intl.DateTimeFormat('default', options); -var usedOptions = dateFormat.resolvedOptions(); - -console.log(usedOptions.calendar); -// → "chinese" - -console.log(usedOptions.numberingSystem); -// → "arab" - -console.log(usedOptions.timeZone); -// → "America/New_York" (the users default timezone) -</pre> - -<h2 id="Polyfill">ポリフィル</h2> - -<p><a href="https://formatjs.io/docs/polyfills/intl-datetimeformat">formatjs Intl.DateTimeFormat polyfill</a></p> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat}}</div> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Intl")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md new file mode 100644 index 0000000000..95faa9574f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md @@ -0,0 +1,179 @@ +--- +title: Intl.DateTimeFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +tags: + - Class + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +browser-compat: javascript.builtins.Intl.DateTimeFormat +--- +{{JSRef}} + +**`Intl.DateTimeFormat`** オブジェクトは、言語に応じた日付と時刻の書式化を可能にします。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}} + + +## コンストラクター + +- {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}} + - : 新しい `DateTimeFormat` オブジェクトを生成します。 + +## 静的メソッド + +- {{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}} + - : 指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。 + +## インスタンスメソッド + +- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}} + - : ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。 +- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}} + - : オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。 +- {{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}} + - : ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。 +- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} + - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。 +- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}} + - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。 + +## 例 + +### DateTimeFormat の使用 + +基本的に、ロケールを指定せずに使用すると、 `DateTimeFormat` は既定のロケールとオプションを使用します。 + +```js +var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// toLocaleString without arguments depends on the implementation, +// the default locale, and the default time zone +console.log(new Intl.DateTimeFormat().format(date)); +// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800) +``` + +### locales の使用 + +この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 `locales` 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。 + +```js +var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time) + +// US English uses month-day-year order +console.log(new Intl.DateTimeFormat('en-US').format(date)); +// → "12/19/2012" + +// British English uses day-month-year order +console.log(new Intl.DateTimeFormat('en-GB').format(date)); +// → "19/12/2012" + +// Korean uses year-month-day order +console.log(new Intl.DateTimeFormat('ko-KR').format(date)); +// → "2012. 12. 19." + +// Arabic in most Arabic speaking countries uses real Arabic digits +console.log(new Intl.DateTimeFormat('ar-EG').format(date)); +// → "١٩/١٢/٢٠١٢" + +// for Japanese, applications may want to use the Japanese calendar, +// where 2012 was the year 24 of the Heisei era +console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date)); +// → "24/12/19" + +// when requesting a language that may not be supported, such as +// Balinese, include a fallback language, in this case Indonesian +console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date)); +// → "19/12/2012" +``` + +### options の使用 + +日付と時刻の書式は `options` 引数を使用してカスタマイズできます。 + +```js +var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)); + +// request a weekday along with a long date +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +console.log(new Intl.DateTimeFormat('de-DE', options).format(date)); +// → "Donnerstag, 20. Dezember 2012" + +// an application may want to use UTC and make that visible +options.timeZone = 'UTC'; +options.timeZoneName = 'short'; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → "Thursday, December 20, 2012, GMT" + +// sometimes you want to be more precise +options = { + hour: 'numeric', minute: 'numeric', second: 'numeric', + timeZone: 'Australia/Sydney', + timeZoneName: 'short' +}; +console.log(new Intl.DateTimeFormat('en-AU', options).format(date)); +// → "2:00:00 pm AEDT" + +// sometimes you want to be very precise +options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds +console.log(new Intl.DateTimeFormat('en-AU', options).format(date)); +// → "2:00:00.200 pm AEDT" + +// sometimes even the US needs 24-hour time +options = { + year: 'numeric', month: 'numeric', day: 'numeric', + hour: 'numeric', minute: 'numeric', second: 'numeric', + hour12: false, + timeZone: 'America/Los_Angeles' +}; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → "12/19/2012, 19:00:00" + +// to specify options but use the browser's default locale, use 'default' +console.log(new Intl.DateTimeFormat('default', options).format(date)); +// → "12/19/2012, 19:00:00" + +// sometimes it's helpful to include the period of the day +options = {hour: "numeric", dayPeriod: "short"}; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → 10 at night +``` + +The used calendar and numbering formats can also be set independently via `options` arguments: + +```js +var options = {calendar: 'chinese', numberingSystem: 'arab'}; +var dateFormat = new Intl.DateTimeFormat('default', options); +var usedOptions = dateFormat.resolvedOptions(); + +console.log(usedOptions.calendar); +// → "chinese" + +console.log(usedOptions.numberingSystem); +// → "arab" + +console.log(usedOptions.timeZone); +// → "America/New_York" (the users default timezone) +``` + +## ポリフィル + +[formatjs Intl.DateTimeFormat polyfill](https://formatjs.io/docs/polyfills/intl-datetimeformat) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html deleted file mode 100644 index c59e62e79c..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.resolvedOptions() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.Collator.prototype.resolvedOptions()</code></strong> メソッドは、この {{jsxref("Collator")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトを返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.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="syntaxbox notranslate"><var>dateTimeFormat</var>.resolvedOptions()</pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>この {{jsxref("DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>返されるオブジェクトには以下のプロパティがあります。</p> - -<dl> - <dt><code>locale</code></dt> - <dd>実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが <code>locale</code> に含まれます。</dd> - <dt><code>calendar</code></dt> - <dd>例: "gregory"</dd> - <dt><code>numberingSystem</code></dt> - <dd>Unicode 拡張キーの <code>"ca"</code> および <code>"nu"</code> で要求された値、または既定値が入ります。</dd> - <dt><code>timeZone</code></dt> - <dd><code>options</code> 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。</dd> - <dt><code>hour12</code></dt> - <dd><code>options</code> 引数の同名のプロパティで要求された値、または既定値が入ります。</dd> - <dt><code>weekday</code></dt> - <dt><code>era</code></dt> - <dt><code>year</code></dt> - <dt><code>month</code></dt> - <dt><code>day</code></dt> - <dt><code>hour</code></dt> - <dt><code>minute</code></dt> - <dt><code>second</code></dt> - <dt><code>timeZoneName</code></dt> - <dd><code>options</code> 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_the_resolvedOptions_method" name="Using_the_resolvedOptions_method">resolvedOptions メソッドの使用</h3> - -<pre class="brush: js notranslate">var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' }); -var usedOptions = germanFakeRegion.resolvedOptions(); - -usedOptions.locale; // "de" -usedOptions.calendar; // "gregory" -usedOptions.numberingSystem; // "latn" -usedOptions.timeZone; // "UTC" -usedOptions.month; // "numeric" -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.resolvedoptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md new file mode 100644 index 0000000000..6ceb4c773f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md @@ -0,0 +1,75 @@ +--- +title: Intl.DateTimeFormat.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.resolvedOptions +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.resolvedOptions()`** メソッドは、この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールや日付と時刻の整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}} + + +## 構文 + +```js +resolvedOptions() +``` + +### 返値 + +この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。 + +## 解説 + +返されるオブジェクトには以下のプロパティがあります。 + +- `locale` + - : 実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが `locale` に含まれます。 +- `calendar` + - : 例: "gregory" +- `numberingSystem` + - : Unicode 拡張キーの `"ca"` および `"nu"` で要求された値、または既定値が入ります。 +- `timeZone` + - : `options` 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。 +- `hour12` + - : `options` 引数の同名のプロパティで要求された値、または既定値が入ります。 +- `weekday`, `era`, `year`, `month`, `day`, `hour`, `minute`, `second`, `timeZoneName` + - : `options` 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。 + +## 例 + +### resolvedOptions メソッドの使用 + +```js +var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' }); +var usedOptions = germanFakeRegion.resolvedOptions(); + +usedOptions.locale; // "de" +usedOptions.calendar; // "gregory" +usedOptions.numberingSystem; // "latn" +usedOptions.timeZone; // "UTC" +usedOptions.month; // "numeric" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html deleted file mode 100644 index 0108a95679..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Intl.DateTimeFormat.supportedLocalesOf() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf -tags: - - DateTimeFormat - - Internationalization - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat.supportedLocalesOf()</code></strong> メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}}</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="syntaxbox notranslate">Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>locales</var></code></dt> - <dd>BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 <code>locales</code> 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。</dd> - <dt><code><var>options</var></code></dt> - <dd> - <p>省略可能です。以下のプロパティを持つことがあるオブジェクトです。</p> - - <dl> - <dt><code>localeMatcher</code></dt> - <dd>使用するロケールの一致アルゴリズムです。指定可能な値は <code>lookup</code> および <code>best fit</code> で、既定値は <code>best fit</code> です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。</dd> - </dl> - </dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_supportedLocalesOf" name="Using_supportedLocalesOf">supportedLocalesOf() の使用</h3> - -<p>日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 <code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの <code>lookup</code> アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 <code>best fit</code> のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。</p> - -<pre class="brush: js notranslate">var locales = ['ban', 'id-u-co-pinyin', 'de-ID']; -var options = { localeMatcher: 'lookup' }; -console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', ')); -// → "id-u-co-pinyin, de-ID" -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.supportedlocalesof', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md new file mode 100644 index 0000000000..4c5e19d610 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md @@ -0,0 +1,71 @@ +--- +title: Intl.DateTimeFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +--- +{{JSRef}} + +**`Intl.DateTimeFormat.supportedLocalesOf()`** メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}} + + +## 構文 + +```js +Intl.DateTimeFormat.supportedLocalesOf(locales) +Intl.DateTimeFormat.supportedLocalesOf(locales, options) +``` + +### 引数 + +- `locales` + - : BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 `locales` 引数の一般的な形式については、 {{jsxref("Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページを参照してください。 +- `options` {{optional_inline}} + + - : 省略可能です。以下のプロパティを持つことがあるオブジェクトです。 + + - `localeMatcher` + - : 使用するロケールの一致アルゴリズムです。指定可能な値は `lookup` および `best fit` で、既定値は `best fit` です。このオプションの詳細は、 {{jsxref("Intl", "Intl", "#Locale_negotiation", 1)}} のページを参照してください。 + +### 返値 + +指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。 + +## 解説 + +`locales` で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。 + +## 例 + +### supportedLocalesOf() の使用 + +日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 `supportedLocalesOf` はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの `lookup` アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 `best fit` のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。 + +```js +const locales = ['ban', 'id-u-co-pinyin', 'de-ID']; +const options = { localeMatcher: 'lookup' }; +console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', ')); +// → "id-u-co-pinyin, de-ID" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md new file mode 100644 index 0000000000..1e52948607 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md @@ -0,0 +1,71 @@ +--- +title: Intl.ListFormat.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions +tags: + - Internationalization + - Intl + - JavaScript + - ListFormat + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.ListFormat.resolvedOptions +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions +--- +{{JSRef}} + +**`Intl.ListFormat.prototype.resolvedOptions()`** メソッドは、現在の {{jsxref("Intl.ListFormat")}} オブジェクトの構築時に計算されたロケールとスタイル整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。 + +## 構文 + +```js +listFormat.resolvedOptions() +``` + +### 返値 + +指定された {{jsxref("Intl.ListFormat")}} オブジェクトの構築時に計算されたロケールと整形オプションを反映したプロパティを持つオブジェクトです。 + +## 解説 + +`resolvedOptions()` から返されるオブジェクトには、以下のプロパティがあります。 + +- `locale` + - : 実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが `locale` に含まれます。 +- `style` + - : コンストラクターの `options` 引数の中でこのプロパティに指定された値、または既定値 ("`long`") がです。この値は、"`long`"、"`short`"、"`narrow`" のいずれかです。 +- `type` + - : コンストラクターの `options` 引数の中でこのプロパティに指定された値、または既定値 ("`conjunction`") がです。この値は、"`conjunction`"、"`disjunction`"、"`unit`" のいずれかです。 + +## 例 + +## resolvedOptions の使用 + +```js +const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" }); + +const usedOptions = de.resolvedOptions(); +console.log(usedOptions.locale); // "de-DE" +console.log(usedOptions.style); // "short" +console.log(usedOptions.type); // "conjunction" (the default value) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.ListFormat")}} +- {{jsxref("Intl/NumberFormat/resolvedOptions", + "Intl.NumberFormat.prototype.resolvedOptions()")}} +- {{jsxref("Intl/Collator/resolvedOptions", + "Intl.Collator.prototype.resolvedOptions()")}} +- {{jsxref("Intl/DateTimeFormat/resolvedOptions", + "Intl.DateTimeFormat.prototype.resolvedOptions()")}} +- {{jsxref("Intl/PluralRules/resolvedOptions", + "Intl.PluralRules.prototype.resolvedOptions()")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html deleted file mode 100644 index 1d7cad466a..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Intl.Locale.prototype.maximize() -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize -tags: - - Internationaliztion - - Intl - - JavaScript - - Method - - Prototype - - Reference - - メソッド - - 国際化 -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.maximize()</code></strong> メソッドは、既存の値に基づいてロケールの言語、表記法、地域の最も可能性の近い値を取得します。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.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="syntaxbox"><code><em>locale</em>.maximize()</code></pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>{{jsxref("Locale", "Locale")}} インスタンスで、 <code>baseName</code> プロパティが、 <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Add Likely Subtags</a> アルゴリズムが <em>{{jsxref("Locale/baseName", "locale.baseName")}}</em> に対して実行された結果になったものを返します。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 <code>maximize()</code> メソッドを介して JavaScript プログラマーに提供されています。 <code>maximize()</code> は、<a href="https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions" rel="noopener">言語識別子</a>を構成する主要なサブタグのうち言語サブ、表記法、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 <code>maximize()</code> メソッドの影響を受けません。これらのサブタグの例としては、 {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}}, {{jsxref("Locale/numeric", "Locale.numeric")}} などがあります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">let myLocale = new Intl.Locale("ja", {hourCycle: "h24", calendar: "gregory"}); -console.log(myLocale.baseName); // "ja" と表示 -console.log(myLocale.toString()); // "ja-u-ca-gregory-hc-h24" と表示 -let myLocMaximized = myLocale.maximize(); - -// "ja-Jpan-JP"。 "Jpan" と "JP" タグが追加されます。 -// これは、日本語が主に漢字かな交じり文 (Jpan) で書かれ、また主に日本 (JP) で話されているためです。 -console.log(myLocMaximized.baseName); - -// "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示します。 -// なお、拡張タグ ("-u" 以降) はそのまま残ります。 -console.log(myLocMaximized.toString()); </pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.Locale.prototype.maximize')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale.maximize")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> - <li>{{jsxref("Locale/baseName", "Locale.baseName")}}</li> - <li><a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Unicode's Likely Subtags spec</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md new file mode 100644 index 0000000000..aae9be3eca --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md @@ -0,0 +1,68 @@ +--- +title: Intl.Locale.prototype.maximize() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize +tags: + - 国際化 + - Intl + - JavaScript + - Locale + - メソッド + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.Locale.maximize +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize +--- +{{JSRef}} + +**`Intl.Locale.prototype.maximize()`** メソッドは、既存の値に基づいてロケールの言語、表記法、地域の最も可能性の近い値を取得します。 + +{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}} + + +## 構文 + +```js +maximize() +``` + +### 返値 + +{{jsxref("Intl/Locale", "Locale")}} インスタンスのうち、 `baseName` プロパティが [Add Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) アルゴリズムを _{{jsxref("Intl/Locale/baseName", "locale.baseName")}}_.に対して実行した結果になっているものを返します。 + +## 解説 + +不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 `maximize()` メソッドを介して JavaScript プログラマーに提供されています。 `maximize()` は、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグのうち言語サブ、表記法、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `maximize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。</p> + +## 例 + +### maximize の使用 + +```js +let myLocale = new Intl.Locale("ja", {hourCycle: "h24", calendar: "gregory"}); +console.log(myLocale.baseName); // "ja" と表示 +console.log(myLocale.toString()); // "ja-u-ca-gregory-hc-h24" と表示 +let myLocMaximized = myLocale.maximize(); + +// "ja-Jpan-JP"。 "Jpan" と "JP" タグが追加されます。 +// これは、日本語が主に漢字かな交じり文 (Jpan) で書かれ、また主に日本 (JP) で話されているためです。 +console.log(myLocMaximized.baseName); + +// "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示します。 +// なお、拡張タグ ("-u" 以降) はそのまま残ります。 +console.log(myLocMaximized.toString()); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.Locale")}} +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}} +- [Unicode's Likely + Subtags spec](https://www.unicode.org/reports/tr35/#Likely_Subtags) diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html deleted file mode 100644 index b83e495348..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Intl.Locale.prototype.minimize() -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize -tags: - - Internationalization - - Intl - - JavaScript - - Method - - Prototype - - Reference - - 国際化 -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.minimize()</code></strong> メソッドは、 {{jsxref("Locale/maximize", "Locale.maximize()")}} を呼び出したことで追加されるロケールに関する情報を削除しようとします。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html", "taller")}}</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="syntaxbox"><code><em>locale</em>.minimize()</code></pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>{{jsxref("Locale", "Locale")}} インスタンスで、 <code>baseName</code> プロパティが、 <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Remove Likely Subtags</a> アルゴリズムが <code><em>locale.baseName</em></code> に対して実行された結果になったものを返します。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>このメソッドは {{jsxref("Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には <code>baseName</code> の内容) から言語、文字体系、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の文字体系だからです。 <code>minimize()</code> が影響を与えるのは、<a href="https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions">言語識別子</a>を構成する主要なサブタグである言語、文字体系、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 <code>minimize()</code> メソッドの影響を受けません。これらのサブタグの例としては、 {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}}, {{jsxref("Locale/numeric", "Locale.numeric")}} などがあります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); -console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 -console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 - -let myLocMinimized = myLocale.minimize(); - -// "ja" のみを表示します。日本語は主に漢字かな交じり文 (Jpan) で -// 表記され、またほとんど日本で話されているためです。 -console.log(myLocMinimized.baseName); - -// "ja-u-ca-gregory-hc-h24" と表示します。 -// なお、拡張タグ ("-u" 以降) はそのまま残ります。 -console.log(myLocMinimized.toString());</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.Locale.prototype.minimize')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale.minimize")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> - <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md new file mode 100644 index 0000000000..db7cd28fd1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md @@ -0,0 +1,66 @@ +--- +title: Intl.Locale.prototype.minimize() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize +tags: + - 国際化 + - Intl + - JavaScript + - メソッド + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.Locale.minimize +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize +--- +{{JSRef}} + +**`Intl.Locale.prototype.minimize()`** メソッドは、 {{jsxref("Intl/Locale/maximize", "Locale.maximize()")}} を呼び出したことで追加されるロケールに関する情報を削除しようとします。 + +{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html", "taller")}} + + +## 構文 + +```js +minimize() +``` + +### 返値 + +{{jsxref("Intl/Locale", "Locale")}} インスタンスで、 `baseName` プロパティが、 [Remove Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) アルゴリズムを _{{jsxref("Intl/Locale/baseName", "locale.baseName")}}_ に対して実行された結果になったものを返します。 + +## 解説 + +このメソッドは {{jsxref("Intl/Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には `baseName` の内容) から言語、表記法、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の表記法だからです。 `minimize()` が影響を与えるのは、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグである言語、表記法、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `minimize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。 + +## 例 + +### minimize の使用 + +```js +let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); +console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 +console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 + +let myLocMinimized = myLocale.minimize(); + +// "ja" のみを表示します。日本語は主に漢字かな交じり文 (Jpan) で +// 表記され、またほとんど日本で話されているためです。 +console.log(myLocMinimized.baseName); + +// "ja-u-ca-gregory-hc-h24" と表示します。 +// なお、拡張タグ ("-u" 以降) はそのまま残ります。 +console.log(myLocMinimized.toString()); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.Locale")}} +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html deleted file mode 100644 index 4fdc4acec8..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Intl.Locale.prototype.toString() -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString -tags: - - Intl - - JavaScript - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.toString()</code></strong> は、このロケールの完全な<a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">ロケール識別子文字列</a>を返します。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.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="syntaxbox"><code><em>locale</em>.toString()</code></pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>この<em>ロケール</em>の Unicode ロケール識別子文字列です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Locale</code> オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、文字体系、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 <code>Locale</code> オブジェクトが JavaScript に導入されました。 Locale オブジェクトの <code>toString</code> メソッドをコールすると、そのロケールの識別子文字列を返します。 <code>toString</code> メソッドを使用すると、 <code>Locale</code> のインスタンスが既存の <code>Intl</code> のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); -console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 -console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.Locale.prototype.toString')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale.toString")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> - <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md new file mode 100644 index 0000000000..f62794a64c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md @@ -0,0 +1,58 @@ +--- +title: Intl.Locale.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString +tags: + - Internationalization + - Intl + - JavaScript + - Locale + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.Locale.toString +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString +--- +{{JSRef}} + +**`Intl.Locale.prototype.toString()`** は、このロケールの完全な[ロケール識別子文字列](https://www.unicode.org/reports/tr35/#Unicode_locale_identifier)を返します。 + +{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}} + +<!-- The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. --> + +## 構文 + +```js +toString() +``` + +### 返値 + +この*ロケール*の Unicode ロケール識別子文字列です。 + +## 解説 + +`Locale` オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、表記法、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 `Locale` オブジェクトが JavaScript に導入されました。 Locale オブジェクトの `toString` メソッドをコールすると、そのロケールの識別子文字列を返します。 `toString` メソッドを使用すると、 `Locale` のインスタンスが既存の `Intl` のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。 + +## 例 + +### toString の使用 + +```js +let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); +console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 +console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.Locale")}} +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}} diff --git a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html deleted file mode 100644 index d2d7ba68e7..0000000000 --- a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Object.prototype.propertyIsEnumerable() -slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable -tags: - - JavaScript - - Method - - Object - - Prototype - - プロトタイプ - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable ---- -<div>{{JSRef}}</div> - -<p> <code><strong>propertyIsEnumerable()</strong></code> メソッドは、指定されたプロパティが列挙可能で、オブジェクト自身のプロパティであることを示す Boolean を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html", "taller")}}</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="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>prop</code></dt> - <dd>調べたいプロパティの名前。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定されたプロパティが列挙可能であり、かつオブジェクト自体のプロパティであるかどうかを示す {{jsxref("Boolean")}} 。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>すべてのオブジェクトは <code>propertyIsEnumerable</code> メソッドを持っています。このメソッドはあるオブジェクトのプロパティが、プロトタイプチェーンを通じて継承されたプロパティを除いて {{jsxref("Statements/for...in", "for...in")}} ループで列挙可能かどうかを特定することができます。もしオブジェクトが指定されたプロパティを持っていない場合、このメソッドは <code>false</code> を返します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="A_basic_use_of_propertyIsEnumerable" name="A_basic_use_of_propertyIsEnumerable"><code>propertyIsEnumerable</code> の基本的な使い方</h3> - -<p>以下の例はオブジェクトと配列での <code>propertyIsEnumerable</code> の使い方を示しています。</p> - -<pre class="brush: js">var o = {}; -var a = []; -o.prop = 'is enumerable'; -a[0] = 'is enumerable'; - -o.propertyIsEnumerable('prop'); // true を返す -a.propertyIsEnumerable(0); // true を返す -</pre> - -<h3 id="User-defined_vs._built-in_objects" name="User-defined_vs._built-in_objects">ユーザー定義オブジェクトと組み込みオブジェクト</h3> - -<p>以下の例はユーザー定義プロパティと組み込みプロパティの列挙可能性を実証しています。</p> - -<pre class="brush: js">var a = ['is enumerable']; - -a.propertyIsEnumerable(0); // true を返す -a.propertyIsEnumerable('length'); // false を返す - -Math.propertyIsEnumerable('random'); // false を返す -this.propertyIsEnumerable('Math'); // false を返す -</pre> - -<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3> - -<pre class="brush: js">var a = []; -a.propertyIsEnumerable('constructor'); // false を返す - -function firstConstructor() { - this.property = 'is not enumerable'; -} - -firstConstructor.prototype.firstMethod = function() {}; - -function secondConstructor() { - this.method = function method() { return 'is enumerable'; }; -} - -secondConstructor.prototype = new firstConstructor; -secondConstructor.prototype.constructor = secondConstructor; - -var o = new secondConstructor(); -o.arbitraryProperty = 'is enumerable'; - -o.propertyIsEnumerable('arbitraryProperty'); // true を返す -o.propertyIsEnumerable('method'); // true を返す -o.propertyIsEnumerable('property'); // false を返す - -o.property = 'is enumerable'; - -o.propertyIsEnumerable('property'); // true を返す - -// これらはすべて false を返します。これは、 (最後の2つは for-in で -// 反復処理可能であるにもかかわらず) propertyIsEnumerable が考慮しない -// プロトタイプであるためです。 -o.propertyIsEnumerable('prototype'); // false を返す (as of JS 1.8.1/FF3.6) -o.propertyIsEnumerable('constructor'); // false を返す -o.propertyIsEnumerable('firstMethod'); // false を返す -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">列挙可能性とプロパティの所有権</a></li> - <li>{{jsxref("Statements/for...in", "for...in")}}</li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.defineProperty()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md new file mode 100644 index 0000000000..c2b09a9921 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md @@ -0,0 +1,120 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +tags: + - JavaScript + - メソッド + - Object + - プロトタイプ +browser-compat: javascript.builtins.Object.propertyIsEnumerable +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +{{JSRef}} + +**`propertyIsEnumerable()`** メソッドは、指定されたプロパティが列挙可能で、かつオブジェクト自身のプロパティであるかどうかを示す論理値を返します。 + +{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html", "taller")}} + +## 構文 + +```js +propertyIsEnumerable(prop) +``` + +### 引数 + +- `prop` + - : 調べたいプロパティの名前です。 + +### 返値 + +`true` または `false` の値で、指定されたプロパティが列挙可能であり、かつオブジェクト自身のプロパティであるかどうかを示します。 + +## 解説 + +すべてのオブジェクトは `propertyIsEnumerable` メソッドを持っています。このメソッドはあるオブジェクトのプロパティが、プロトタイプチェーンを通じて継承されたプロパティを除いて {{jsxref("Statements/for...in", "for...in")}} ループで列挙可能かどうかを特定することができます。もしオブジェクトが指定されたプロパティを持っていない場合、このメソッドは `false` を返します。 + +> **Note:** 列挙可能なプロパティは {{jsxref("Statements/for...in", "for...in")}} ループで反復処理されますが、 {{jsxref("Global_Objects/Symbol", "Symbol")}} は含まれないことに留意してください。 + +## 例 + +### `propertyIsEnumerable` の基本的な使い方 + +以下の例はオブジェクトと配列での `propertyIsEnumerable` の使い方を示しています。 + +```js +var o = {}; +var a = []; +o.prop = 'is enumerable'; +a[0] = 'is enumerable'; + +o.propertyIsEnumerable('prop'); // true を返す +a.propertyIsEnumerable(0); // true を返す +``` + +### ユーザー定義オブジェクトと組み込みオブジェクト + +以下の例は、ユーザー定義プロパティと組み込みプロパティの列挙可能性を実証しています。 + +```js +var a = ['is enumerable']; + +a.propertyIsEnumerable(0); // true を返す +a.propertyIsEnumerable('length'); // false を返す + +Math.propertyIsEnumerable('random'); // false を返す +this.propertyIsEnumerable('Math'); // false を返す +``` + +<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3> + +```js +var a = []; +a.propertyIsEnumerable('constructor'); // false を返す + +function firstConstructor() { + this.property = 'is not enumerable'; +} + +firstConstructor.prototype.firstMethod = function() {}; + +function secondConstructor() { + this.method = function() { return 'is enumerable'; }; +} + +secondConstructor.prototype = new firstConstructor; +secondConstructor.prototype.constructor = secondConstructor; + +var o = new secondConstructor(); +o.arbitraryProperty = 'is enumerable'; + +o.propertyIsEnumerable('arbitraryProperty'); // true を返す +o.propertyIsEnumerable('method'); // true を返す +o.propertyIsEnumerable('property'); // false を返す + +o.property = 'is enumerable'; + +o.propertyIsEnumerable('property'); // true を返す + +// これらはすべて false を返します。これは、 (最後の 2 つは for-in で +// 反復処理可能であるにもかかわらず) propertyIsEnumerable が考慮しない +// プロトタイプであるためです。 +o.propertyIsEnumerable('prototype'); // false を返す (as of JS 1.8.1/FF3.6) +o.propertyIsEnumerable('constructor'); // false を返す +o.propertyIsEnumerable('firstMethod'); // false を返す +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [列挙可能性とプロパティの所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) +- {{jsxref("Statements/for...in", "for...in")}} +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.defineProperty()")}} diff --git a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html deleted file mode 100644 index 117abc02c9..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Promise.allSettled() -slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled -tags: - - JavaScript - - Method - - Promise - - Reference - - allSettled - - asynchronous - - プロミス - - メソッド - - 非同期 -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled ---- -<div>{{JSRef}}</div> - -<p><code><strong>Promise.allSettled()</strong></code> メソッドは、与えられたすべてのプロミスが満足したか拒否された後に、それぞれのプロミスの結果を記述した配列オブジェクトで解決されるプロミスを返します。</p> - -<p>一般的には、複数の非同期タスクがあり、お互いに依存せずに正常に完了する場合や、各プロミスの結果を常に知りたい場合に使用されます。</p> - -<p>これと比較して、 {{jsxref("Promise.all()")}} で返されるプロミスは、タスクがお互いに依存している場合や、タスクのいずれかが拒否されたときにすぐに拒否したい場合にはより適切かもしれません。</p> - -<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>Promise</var>.allSettled(<var>iterable</var>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>iterable</var></code></dt> - <dd>{{jsxref("Array")}} などの<a href="/ja/docs/Web/JavaScript/Guide/iterable">反復可能</a>オブジェクトで、それぞれの要素が <code>Promise</code> であるものです。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p><strong>待ち状態</strong>の {{jsxref("Promise")}} で、指定されたプロミスの集合に含まれるすべてのプロミスが、正常に解決されるか拒否されるかのどちらかで完了すると、<strong>非同期に</strong>解決されます。その際、返されたプロミスのハンドラーには、元のプロミスの集合に含まれるの各プロミスの結果を含む配列が入力として渡されます。</p> - -<p>ただし、空の反復可能オブジェクトが引数として渡された<strong>場合に限り</strong>、 <code>Promise.allSettled()</code> は空の配列として<strong>解決済みの</strong> <code>Promise</code> オブジェクトを返します。</p> - -<p>出力されるそれぞれのオブジェクトには、 <code>status</code> の文字列が存在します。 status が <code>fulfilled</code> であれば、 <code>value</code> が存在します。 status が <code>rejected</code> であれば、 <code>reason</code> が存在します。 value (または reason) はそれぞれのプロミスがどの値で解決 (または拒否) されたかを反映します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Promise.allSettled" name="Using_Promise.allSettled">Promise.allSettled の使用</h3> - -<pre class="brush: js notranslate">Promise.allSettled([ - Promise.resolve(33), - new Promise(resolve => setTimeout(() => resolve(66), 0)), - 99, - Promise.reject(new Error('an error')) -]) -.then(values => console.log(values)); - -// [ -// {status: "fulfilled", value: 33}, -// {status: "fulfilled", value: 66}, -// {status: "fulfilled", value: 99}, -// {status: "rejected", reason: Error: an error} -// ] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.allsettled', 'Promise.allSettled')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Archive/Add-ons/Techniques/Promises">プロミス</a></li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Using_promises">プロミスの使用</a></li> - <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">プロミスを使った行儀のよい非同期のプログラミング</a></li> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Promise.all()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md new file mode 100644 index 0000000000..e96b5fe08e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md @@ -0,0 +1,99 @@ +--- +title: Promise.allSettled() +slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +tags: + - JavaScript + - メソッド + - プロミス + - Reference + - allSettled + - 非同期 + - Polyfill +browser-compat: javascript.builtins.Promise.allSettled +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +--- +{{JSRef}} + +**`Promise.allSettled()`** メソッドは、与えられたすべてのプロミスが履行されたか拒否された後に、それぞれのプロミスの結果を記述した配列オブジェクトで解決されるプロミスを返します。 + +一般的には、複数の非同期タスクがあり、お互いに依存せずに正常に完了する場合や、各プロミスの結果を常に知りたい場合に使用されます。 + +これに対して、 {{jsxref("Promise.all()")}} で返されるプロミスは、タスクがお互いに依存している場合や、タスクのいずれかが拒否されたときにすぐに拒否したい場合にはより適切かもしれません。 + +{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}} + +## 構文 + +```js +Promise.allSettled(iterable); +``` + +### 引数 + +- `iterable` + - : {{jsxref("Array")}} などの[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)オブジェクトで、それぞれの要素が `Promise` であるものです。 + +### 返値 + +**待ち状態**の {{jsxref("Promise")}} で、指定されたプロミスの集合に含まれるすべてのプロミスが、正常に履行されるか拒否されるかのどちらかで完了すると、**非同期に**解決されます。その際、返されたプロミスのハンドラーには、元のプロミスの集合に含まれるの各プロミスの結果を含む配列が入力として渡されます。 + +ただし、空の反復可能オブジェクトが引数として渡された**場合に限り**、 `Promise.allSettled()` は空の配列として**解決済みの** `Promise` オブジェクトを返します。 + +出力されるそれぞれのオブジェクトには、 `status` の文字列が存在します。 status が `fulfilled` (履行) であれば、 `value` が存在します。 status が `rejected` (拒否) であれば、 `reason` が存在します。 value (または reason) はそれぞれのプロミスがどの値で履行 (または拒否) されたかを反映します。 + +## 例 + +### Promise.allSettled の使用 + +#### {{JSxRef("Promise.then", "Promise.prototype.then()")}} +```js +Promise.allSettled([ + Promise.resolve(33), + new Promise(resolve => setTimeout(() => resolve(66), 0)), + 99, + Promise.reject(new Error('an error')) +]) +.then(values => console.log(values)); + +// [ +// {status: "fulfilled", value: 33}, +// {status: "fulfilled", value: 66}, +// {status: "fulfilled", value: 99}, +// {status: "rejected", reason: Error: an error} +// ] +``` + +#### {{jsxref("Operators/await", "await")}} +```js +const values = await Promise.allSettled([ + Promise.resolve(33), + new Promise(resolve => setTimeout(() => resolve(66), 0)), + 99, + Promise.reject(new Error('an error')) +]) +console.log(values) + +// [ +// {status: "fulfilled", value: 33}, +// {status: "fulfilled", value: 66}, +// {status: "fulfilled", value: 99}, +// {status: "rejected", reason: Error: an error} +// ] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Promise.allSettled` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-promise) で利用できます +- [Promises](/ja/docs/Archive/Add-ons/Techniques/Promises) +- [プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises) +- [プロミスを使った行儀のよい非同期のプログラミング](/ja/docs/Learn/JavaScript/Asynchronous/Promises) +- {{jsxref("Promise")}} +- {{jsxref("Promise.all()")}} diff --git a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html deleted file mode 100644 index 9bfefa49e2..0000000000 --- a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Reflect.construct() -slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Reference - - Reflect - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct ---- -<div>{{JSRef}}</div> - -<p>静的な <code><strong>Reflect.construct()</strong></code> メソッドは {{jsxref("Operators/new", "new")}} 演算子のように、ただし関数として動作します。これは <code>new target(...args)</code> の呼び出しと同等です。このメソッドはオプションを追加することで、別なプロトタイプを指定することができます。</p> - -<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html", "taller")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">Reflect.construct(<var>target</var>, <var>argumentsList</var>[, <var>newTarget</var>]) -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>target</var></code></dt> - <dd>呼び出し対象の関数。</dd> - <dt><code><var>argumentsList</var></code></dt> - <dd>配列風オブジェクトで、 <code><var>target</var></code> の呼び出しの引数を指定する。</dd> - <dt><code><var>newTarget</var></code> {{optional_inline}}</dt> - <dd>プロトタイプを使用するコンストラクター。 <a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a> も参照してください。 <code><var>newTarget</var></code> が存在しない場合は、既定値は <code><var>target</var></code> になります。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p><code><var>target</var></code> (または、もしあれば <code><var>newTarget</var></code>) の新しいインスタンスで、 <code><var>target</var></code> に <code><var>argumentsList</var></code> を渡してコンストラクターとして呼び出すことで初期化します。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<p>{{jsxref("TypeError")}}: <code><var>target</var></code> または <code><var>newTarget</var></code> がコンストラクターではない場合。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Reflect.construct()</code> によって、可変長引数を指定してコンストラクターを呼び出すことができます。 (これは <a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax">スプレッド構文と<a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 演算子</a> を組み合わせて使用することでも可能です。)</p> - -<pre class="brush: js">let obj = new Foo(...<var>args</var>) -let obj = Reflect.construct(Foo, <var>args</var>) -</pre> - -<h3 id="Reflect.construct_vs_Object.create" name="Reflect.construct_vs_Object.create"><code>Reflect.construct()</code> と <code>Object.create()</code></h3> - -<p><code>Reflect</code> が導入される前は、オブジェクトを構築するのにコンストラクターとプロトタイプの任意の組み合わせで {{jsxref("Object.create()")}} を使用して構築することができました。</p> - -<pre class="brush: js">function OneClass() { - this.name = 'one' -} - -function OtherClass() { - this.name = 'other' -} - -// この呼び出しは、 -let obj1 = Reflect.construct(OneClass, <var>args</var>, OtherClass) - -// ...これと同じ結果をもたらします。 -let obj2 = Object.create(OtherClass.prototype) -OneClass.apply(obj2, <var>args</var>) - -console.log(obj1.name) // 'one' -console.log(obj2.name) // 'one' - -console.log(obj1 instanceof OneClass) // false -console.log(obj2 instanceof OneClass) // false - -console.log(obj1 instanceof OtherClass) // true -console.log(obj2 instanceof OtherClass) // true -</pre> - -<p>この2つの手法の最終結果は同じですが、その過程に重要な違いがあります。 <code>Object.create()</code> と {{jsxref("Function.prototype.apply()")}} を使用する場合、 <code>new.target</code> 演算子はコンストラクター内で <code>undefined</code> を返します。これは、 <code>new</code> 演算子を用いないためです。</p> - -<p>一方、 <code>Reflect.construct()</code> を呼び出す場合は、 <code>new.target</code> 演算子は、提供されていれば <code><var>newTarget</var></code> を指し、そうでなければ <code>target</code> を指します。</p> - -<pre class="brush: js">function OneClass() { - console.log('OneClass') - console.log(new.target) -} -function OtherClass() { - console.log('OtherClass') - console.log(new.target) -} - -let obj1 = Reflect.construct(OneClass, <var>args</var>) -// Output: -// OneClass -// function OneClass { ... } - -let obj2 = Reflect.construct(OneClass, <var>args</var>, OtherClass) -// Output: -// OneClass -// function OtherClass { ... } - -let obj3 = Object.create(OtherClass.prototype); -OneClass.apply(obj3, <var>args</var>) -// Output: -// OneClass -// undefined -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Reflect.construct" name="Using_Reflect.construct"><code>Reflect.construct()</code> の使用</h3> - -<pre class="brush: js">let d = Reflect.construct(Date, [1776, 6, 4]) -d instanceof Date // true -d.getFullYear() // 1776 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Reflect.construct")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Reflect")}}</li> - <li>{{jsxref("Operators/new", "new")}}</li> - <li><code><a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md new file mode 100644 index 0000000000..5cc425fa6d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md @@ -0,0 +1,148 @@ +--- +title: Reflect.construct() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect + - Polyfill +browser-compat: javascript.builtins.Reflect.construct +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct +--- +{{JSRef}} + +静的な **`Reflect.construct()`** メソッドは {{jsxref("Operators/new", "new")}} 演算子のように、ただし関数として動作します。これは `new target(...args)` の呼び出しと同等です。このメソッドはオプションを追加することで、別なプロトタイプを指定することができます。 + +{{EmbedInteractiveExample("pages/js/reflect-construct.html", "taller")}} + +## 構文 + +```js +Reflect.construct(target, argumentsList) +Reflect.construct(target, argumentsList, newTarget) +``` + +### 引数 + +- `target` + - : 呼び出し対象の関数。 +- `argumentsList` + - : 配列風オブジェクトで、 `target` の呼び出しの引数を指定する。 +- `newTarget` {{optional_inline}} + - : プロトタイプを使用するコンストラクター。 [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) も参照してください。 `newTarget` が存在しない場合は、既定値は `target` になります。 + +### 返値 + +`target` (または、もしあれば `newTarget`) の新しいインスタンスで、 `target` に `argumentsList` を渡してコンストラクターとして呼び出すことで初期化します。 + +### 例外 + +{{jsxref("TypeError")}}: `target` または `newTarget` がコンストラクターではない場合。 + +## 解説 + +`Reflect.construct()` によって、可変長引数を指定してコンストラクターを呼び出すことができます。 (これは[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)と[`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)を組み合わせて使用することでも可能です。) + +```js +let obj = new Foo(...args) +let obj = Reflect.construct(Foo, args) +``` + +### `Reflect.construct()` と `Object.create()` + +`Reflect` が導入される前は、オブジェクトを構築するのにコンストラクターとプロトタイプの任意の組み合わせで {{jsxref("Object.create()")}} を使用して構築することができました。 + + function OneClass() { + this.name = 'one' + } + + function OtherClass() { + this.name = 'other' + } + + // Calling this: + let obj1 = Reflect.construct(OneClass, args, OtherClass) + + // ...has the same result as this: + let obj2 = Object.create(OtherClass.prototype) + OneClass.apply(obj2, args) + + console.log(obj1.name) // 'one' + console.log(obj2.name) // 'one' + + console.log(obj1 instanceof OneClass) // false + console.log(obj2 instanceof OneClass) // false + + console.log(obj1 instanceof OtherClass) // true + console.log(obj2 instanceof OtherClass) // true + + //Another example to demonstrate below: + + function func1(a, b, c, d) { + console.log(arguments[3]); + } + + function func2(d, e, f, g) { + console.log(arguments[3]); + } + + let obj1 = Reflect.construct(func1, ['I', 'Love', 'my', 'India']) + obj1 + +この 2 つの手法の最終結果は同じですが、その過程に重要な違いがあります。 `Object.create()` と {{jsxref("Function.prototype.apply()")}} を使用する場合、 `new.target` 演算子はコンストラクター内で `undefined` を返します。これは、 `new` 演算子を用いないためです。 + +一方、 `Reflect.construct()` を呼び出す場合は、 `new.target` 演算子は、提供されていれば `newTarget` を指し、そうでなければ `target` を指します。 + +```js +function OneClass() { + console.log('OneClass') + console.log(new.target) +} +function OtherClass() { + console.log('OtherClass') + console.log(new.target) +} + +let obj1 = Reflect.construct(OneClass, args) +// Output: +// OneClass +// function OneClass { ... } + +let obj2 = Reflect.construct(OneClass, args, OtherClass) +// Output: +// OneClass +// function OtherClass { ... } + +let obj3 = Object.create(OtherClass.prototype); +OneClass.apply(obj3, args) +// Output: +// OneClass +// undefined +``` + +## 例 + +### `Reflect.construct()` の使用 + +```js +let d = Reflect.construct(Date, [1776, 6, 4]) +d instanceof Date // true +d.getFullYear() // 1776 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Reflect.construct` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-reflect) にあります +- {{jsxref("Reflect")}} +- {{jsxref("Operators/new", "new")}} +- [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) diff --git a/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md b/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md new file mode 100644 index 0000000000..6b8788a480 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md @@ -0,0 +1,70 @@ +--- +title: RegExp.prototype.hasIndices +slug: Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices +tags: + - Draft + - JavaScript + - Property + - Prototype + - Reference + - RegExp + - Regular Expressions +browser-compat: javascript.builtins.RegExp.hasIndices +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices +--- +{{JSRef}} + +**`hasIndices`** プロパティは、その正規表現で "`d`" フラグが使用されたかどうかを示します。 `hasIndices` はそれぞれの正規表現インスタンスの読み取り専用プロパティです。 + +{{EmbedInteractiveExample("pages/js/regexp-prototype-hasindices.html")}} + +{{JS_Property_Attributes(0, 0, 1)}} + +## 解説 + +`hasIndices` の値は論理型であり、 "`d`" フラグが使用された場合は `true` になります。それ以外の場合は `false` になります。 "`d`" フラグは正規表現による一致の結果に、各キャプチャグループの部分文字列の開始と終了の位置を含めることを示します。 + +このプロパティを直接変更することはできません。 + +## 例 + +### `hasIndices` の使用 + +```js +const str1 = 'foo bar foo'; + +const regex1 = new RegExp('foo', 'gd'); + +console.log(regex1.hasIndices); // 出力: true + +console.log(regex1.exec(str1).indices[0]); // 出力: Array [0, 3] +console.log(regex1.exec(str1).indices[0]); // 出力: Array [8, 11] + +const str2 = 'foo bar foo'; + +const regex2 = new RegExp('foo'); + +console.log(regex2.hasIndices); // 出力: false + +console.log(regex2.exec(str2).indices); // 出力: undefined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{JSxRef("RegExp.lastIndex")}} +- {{JSxRef("RegExp.prototype.exec()")}} +- {{JSxRef("RegExp.prototype.dotAll")}} +- {{JSxRef("RegExp.prototype.global")}} +- {{JSxRef("RegExp.prototype.ignoreCase")}} +- {{JSxRef("RegExp.prototype.multiline")}} +- {{JSxRef("RegExp.prototype.source")}} +- {{JSxRef("RegExp.prototype.sticky")}} +- {{JSxRef("RegExp.prototype.unicode")}} diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html deleted file mode 100644 index ce94abd766..0000000000 --- a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: RegExp.lastIndex -slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -tags: - - JavaScript - - Property - - Reference - - RegExp - - Regular Expression -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex ---- -<div>{{JSRef}}</div> - -<p><strong><code>lastIndex</code></strong> は正規表現インスタンスの読み書き可能なプロパティで、次の一致を開始する位置を指定します。</p> - -<div>{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}</div> - -<div>{{js_property_attributes(1, 0, 0)}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><code><var>regExpObj</var>.lastIndex</code></pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>このプロパティは、正規表現インスタンスがグローバル検索を示すために <code>g</code> フラグを使用した場合、または粘着的検索を示すために <code>y</code> フラグを使用した場合にのみ設定されます。以下の規則が適用されます。</p> - -<ul> - <li><code>lastIndex</code> が文字列の長さよりも大きければ、 {{jsxref("RegExp.prototype.test()", "test()")}} および {{jsxref("RegExp.prototype.exec()", "exec()")}} は失敗し、<code>lastIndex</code> は 0 にセットされます。</li> - <li><code>lastIndex</code> が文字列の長さ以下で、かつ正規表現が空文字列に一致する場合には、正規表現は <code>lastIndex</code> から始まる入力に一致します。</li> - <li><code>lastIndex</code> が文字列の長さと等しく、かつ、正規表現が空文字列に一致しない場合、正規表現は入力に一致せず、 <code>lastIndex</code> は 0 にリセットされます。</li> - <li>それ以外の場合は、 <code>lastIndex</code> は直近の一致に続く次の位置に設定されます。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="lastIndex_の使用">lastIndex の使用</h3> - -<p>例えば、以下の連続した処理を考えてみてください。:</p> - -<pre class="brush: js">var re = /(hi)?/g; -</pre> - -<p>空文字列に一致します。</p> - -<pre class="brush: js">console.log(re.exec('hi')); -console.log(re.lastIndex); -</pre> - -<p><code>lastIndex</code> が 2 になり<code>["hi", "hi"]</code> が返ります。</p> - -<pre class="brush: js">console.log(re.exec('hi')); -console.log(re.lastIndex); -</pre> - -<p>ゼロ番目の要素が一致した文字列なので、 <code>["", undefined]</code> という空配列が返ります。この場合、 <code>lastIndex</code> が 2 であったときに (そして 2 のままである)、 <code>hi</code> の長さが 2 であるので、空文字列になります。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.RegExp.lastIndex")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li> - <li>{{jsxref("RegExp.prototype.global")}}</li> - <li>{{jsxref("RegExp.prototype.multiline")}}</li> - <li>{{jsxref("RegExp.prototype.source")}}</li> - <li>{{jsxref("RegExp.prototype.sticky")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md new file mode 100644 index 0000000000..5416149a87 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md @@ -0,0 +1,74 @@ +--- +title: 'RegExp: lastIndex' +slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex +tags: + - JavaScript + - Property + - Reference + - RegExp + - 正規表現 +browser-compat: javascript.builtins.RegExp.lastIndex +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex +--- +{{JSRef}} + +**`lastIndex`** は {{jsXref("RegExp")}} インスタンスの読み書き可能なプロパティで、次の一致を開始する位置を指定します。 + +なお、 `lastIndex` は {{jsXref("RegExp")}} プロトタイプのプロパティではありませんが、 {{jsXref("RegExp")}} インスタンスからのみ公開されます。 + +{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}{{js_property_attributes(1, 0, 0)}} + +## 解説 + +このプロパティは、正規表現インスタンスがグローバル検索を示すために `g` フラグを使用した場合、または粘着的検索を示すために `y` フラグを使用した場合にのみ設定されます。 {{jsxref("RegExp.prototype.test()", "test()")}} および {{jsxref("RegExp.prototype.exec()", "exec()")}} が指定された入力に対して呼び出されたとき、以下の規則が適用されます。 + +- `lastIndex` が入力の長さよりも大きい場合、 `exec()` または `test()` は一致するものを見つけられず、 `lastIndex` は 0 に設定されます。 +- `lastIndex` が入力の長さ以下であった場合、 `exec()` または `test()` は `lastIndex` から一致するものを探そうとします。 + + - `exec()` または `test()` が一致するものを見つけた場合 `lastIndex` は入力の中の一致する文字列の末尾の位置に設定されます。 + - `exec()` または `test()` が一致するものを見つけられなかった場合、 `lastIndex` は 0 に設定されます。 + +## 例 + +### lastIndex の使用 + +例えば、以下の一連の処理を考えてみてください。 + +```js +var re = /(hi)?/g; +``` + +空文字列に一致します。 + +```js +console.log(re.exec('hi')); +console.log(re.lastIndex); +``` + +`["hi", "hi"]` を返し、 `lastIndex` は 2 になります。 + +```js +console.log(re.exec('hi')); +console.log(re.lastIndex); +``` + +返値は `["", undefined]` で、 0 番目の要素が一致文字列となる空の配列です。この場合、 `lastIndex` が 2 (現在も 2) であり、`hi` の長さが 2 であるため、空の文字列となります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{JSxRef("RegExp.prototype.dotAll")}} +- {{JSxRef("RegExp.prototype.global")}} +- {{JSxRef("RegExp.prototype.hasIndices")}} +- {{JSxRef("RegExp.prototype.ignoreCase")}} +- {{JSxRef("RegExp.prototype.multiline")}} +- {{JSxRef("RegExp.prototype.source")}} +- {{JSxRef("RegExp.prototype.sticky")}} +- {{JSxRef("RegExp.prototype.unicode")}} diff --git a/files/ja/web/javascript/reference/global_objects/string/substr/index.html b/files/ja/web/javascript/reference/global_objects/string/substr/index.html deleted file mode 100644 index 725bc665df..0000000000 --- a/files/ja/web/javascript/reference/global_objects/string/substr/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: String.prototype.substr() -slug: Web/JavaScript/Reference/Global_Objects/String/substr -tags: - - Deprecated - - JavaScript - - Method - - Prototype - - Reference - - String - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/String/substr ---- -<div>{{JSRef}}</div> - -<p class="seoSummary"><strong><code>substr()</code></strong> メソッドは、文字列の一部を、指定した位置から後方向指定した文字数だけ返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/string-substr.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="syntaxbox notranslate"><var>str</var>.substr(<var>start</var>[, <var>length</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>start</var></code></dt> - <dd>返却する部分文字列に含まれる最初の文字の位置です。</dd> - <dt><code><var>length</var></code></dt> - <dd>任意です。取り出す文字の数です。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定された文字列の指定された部分が入った新しい文字列です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>substr()</code> は、 <code><var>str</var></code> のうち <code><var>length</var></code> 文字分を、 <code><var>start</var></code> の位置から数えて抽出します。</p> - -<ul> - <li><code><var>start</var></code> が正の数である場合、文字列の先頭から数えた位置になります。この値は <code><var>str</var>.length</code> が上限になります。</li> - <li><code><var>start</var></code> が負の数である場合、文字列の末尾から数えた位置になります。この値は <code>-<var>str</var>.length</code> が下限になります。</li> - <li>注: Microsoft の JScript では、 <code><var>start</var></code> の引数が負の数であっても文字列の末尾からの位置にはなりません。</li> - <li><code><var>length</var></code> が省略された場合、 <code>substr()</code> は文字列の末尾までの文字を抽出します。</li> - <li><code><var>length</var></code> が {{jsxref("undefined")}} である場合、 <code>substr()</code> は文字列の末尾までの文字を抽出します。</li> - <li><code><var>length</var></code> が負の数である場合、 <code>0</code> として扱われます。</li> - <li><code><var>start</var></code> および <code><var>length</var></code> において、 {{jsxref("NaN")}} は <code>0</code> として扱われます。</li> -</ul> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>Microsoft の JScript は start の位置として負の数に対応していません。この機能を使用したい場合は、このバグを回避するために、次の互換コードを使用することができます。</p> - -<pre class="brush: js notranslate">// only run when the substr() function is broken -if ('ab'.substr(-1) != 'b') { - /** - * Get the substring of a string - * @param {integer} start where to start the substring - * @param {integer} length how many characters to return - * @return {string} - */ - String.prototype.substr = function(substr) { - return function(start, length) { - // call the original method - return substr.call(this, - // did we get a negative start, calculate how much it is from the beginning of the string - // adjust the start parameter for negative value - start < 0 ? this.length + start : start, - length) - } - }(String.prototype.substr); -} -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_substr" name="Using_substr">substr() の使用</h3> - -<pre class="brush: js notranslate">var aString = 'Mozilla'; - -console.log(aString.substr(0, 1)); // 'M' -console.log(aString.substr(1, 0)); // '' -console.log(aString.substr(-1, 1)); // 'a' -console.log(aString.substr(1, -1)); // '' -console.log(aString.substr(-3)); // 'lla' -console.log(aString.substr(1)); // 'ozilla' -console.log(aString.substr(-20, 2)); // 'Mo' -console.log(aString.substr(20, 2)); // '' -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.String.substr")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("String.prototype.slice()")}}</li> - <li>{{jsxref("String.prototype.substring()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/string/substr/index.md b/files/ja/web/javascript/reference/global_objects/string/substr/index.md new file mode 100644 index 0000000000..a7d7dcc40f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/string/substr/index.md @@ -0,0 +1,105 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Reference/Global_Objects/String/substr +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - Reference + - String + - メソッド +browser-compat: javascript.builtins.String.substr +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +{{JSRef}} + +**`substr()`** メソッドは、文字列の一部を、指定した位置から後方向に指定した文字数だけ返します。 + +{{EmbedInteractiveExample("pages/js/string-substr.html")}} + +## 構文 + +```js +substr(start) +substr(start, length) +``` + +### 引数 + +- `start` + - : 返却する部分文字列に含まれる最初の文字の位置です。 +- `length` + - : オプションです。取り出す文字の数です。 + +### 返値 + +指定された文字列の指定された部分が入った新しい文字列です。 + +## 解説 + +`substr()` は、 `str` のうち `start` の位置から `length` 文字分を数えて抽出します。 + +- `start` が正の数である場合、文字列の先頭から数えた位置になります。この値は `str.length` が上限になります。 +- `start` が負の数である場合、文字列の末尾から数えた位置になります。この値は `-str.length` が下限になります。 +- メモ: Microsoft の JScript では、 `start` の引数が負の数であっても文字列の末尾からの位置にはなりません。 +- `length` が省略された場合、 `substr()` は文字列の末尾までの文字を抽出します。 +- `length` が {{jsxref("undefined")}} である場合、 `substr()` は文字列の末尾までの文字を抽出します。 +- `length` が負の数である場合、 `0` として扱われます。 +- `start` および `length` において、 {{jsxref("NaN")}} は `0` として扱われます。 + +## ポリフィル + +Microsoft の JScript は start の位置として負の数に対応していません。この機能を JScript で使用する場合は、以下のコードを使用することができます。 + +```js +// only run when the substr() function is broken +if ('ab'.substr(-1) != 'b') { + /** + * Get the substring of a string + * @param {integer} start where to start the substring + * @param {integer} length how many characters to return + * @return {string} + */ + String.prototype.substr = function(substr) { + return function(start, length) { + // call the original method + return substr.call(this, + // did we get a negative start, calculate how much it is from the beginning of the string + // adjust the start parameter for negative value + start < 0 ? this.length + start : start, + length) + } + }(String.prototype.substr); +} +``` + +## 例 + +### substr() の使用 + +```js +var aString = 'Mozilla'; + +console.log(aString.substr(0, 1)); // 'M' +console.log(aString.substr(1, 0)); // '' +console.log(aString.substr(-1, 1)); // 'a' +console.log(aString.substr(1, -1)); // '' +console.log(aString.substr(-3)); // 'lla' +console.log(aString.substr(1)); // 'ozilla' +console.log(aString.substr(-20, 2)); // 'Mo' +console.log(aString.substr(20, 2)); // '' +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("String.prototype.slice()")}} +- {{jsxref("String.prototype.substring()")}} diff --git a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html deleted file mode 100644 index b538566db1..0000000000 --- a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: WeakMap.prototype.clear() -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear -tags: - - JavaScript - - Method - - Obsolete - - Prototype - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear ---- -<div>{{JSRef}} {{obsolete_header}}</div> - -<p><code><strong>clear()</strong></code> メソッドは、<code>WeakMap</code> オブジェクトからすべての要素を削除するために使用されていましたが、もはや ECMAScript とその実装に含まれていません。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox"><code><em>wm</em>.clear();</code></pre> - -<h2 id="例">例</h2> - -<h3 id="clear_メソッドを使う"><code>clear</code> メソッドを使う</h3> - -<pre class="brush: js;highlight:[10] example-bad">var wm = new WeakMap(); -var obj = {}; - -wm.set(obj, "foo"); -wm.set(window, "bar"); - -wm.has(obj); // true -wm.has(window); // true - -wm.clear(); - -wm.has(obj) // false -wm.has(window) // false -</pre> - -<h2 id="仕様">仕様</h2> - -<p>すべての現在の仕様やドラフトでサポートされていません。このメソッドは、リビジョン 28 (October 14, 2014 のバージョン)まで ECMAScript 第 6 版ドラフトでサポートされていました。しかし、最新バージョンのドラフトで削除されました。最終仕様では、サポートされていません。</p> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<p>{{Compat("javascript.builtins.WeakMap.clear")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WeakMap")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md new file mode 100644 index 0000000000..18f7ab622b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md @@ -0,0 +1,53 @@ +--- +title: WeakMap.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear +tags: + - JavaScript + - Method + - Deprecated + - Prototype + - WeakMap +browser-compat: javascript.builtins.WeakMap.clear +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear +--- +{{JSRef}} {{deprecated_header}} + +**`clear()`** メソッドは、 `WeakMap` オブジェクトからすべての要素を削除するために使用されていましたが、もはや ECMAScript とその実装に含まれていません。 + +## 構文 + +```js +clear() +``` + +## 例 + +### `clear` メソッドの使用 + +```js example-bad +var wm = new WeakMap(); +var obj = {}; + +wm.set(obj, 'foo'); +wm.set(window, 'bar'); + +wm.has(obj); // true +wm.has(window); // true + +wm.clear(); + +wm.has(obj) // false +wm.has(window) // false +``` + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("WeakMap")}} diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html deleted file mode 100644 index fb3ba701c1..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: WebAssembly.instantiateStreaming() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.instantiateStreaming()</code></strong> 関数はソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">Promise<ResultObject> WebAssembly.instantiateStreaming(<em>source</em>, <em>importObject</em>);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>source</em></dt> - <dd>コンパイルしてインスタンス化する .wasm モジュールのソースを表す {{domxref("Response")}} オブジェクトか、それをfulfillするプロミス。</dd> - <dt><em>importObject</em> {{optional_inline}}</dt> - <dd>関数や {{jsxref("WebAssembly.Module")}} オブジェクトなどの新しく生成される <code>Instance</code> にインポートされる値を持つオブジェクト。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、{{jsxref("WebAssembly.LinkError")}} がスローされます。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>解決時に次の2つのフィールドを持つ <code>ResultObject</code> を渡す <code>Promise</code>:</p> - -<ul> - <li><code>module</code>: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この <code>Module</code> は再度インスタンス化することや、<a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a> 経由で共有したり、<a href="/en-US/docs/WebAssembly/Caching_modules">IndexedDBにキャッシュ</a>することができます。</li> - <li><code>instance</code>: 全ての <a href="/en-US/docs/WebAssembly/Exported_functions">エクスポートされたWebAssembly関数</a> を含む {{jsxref("WebAssembly.Instance")}} オブジェクト。</li> -</ul> - -<h3 id="例外">例外</h3> - -<ul> - <li>いずれかのパラメータが正しい型、または構造でない場合、{{jsxref("TypeError")}} がスローされます。</li> - <li>失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}、{{jsxref("WebAssembly.LinkError")}} または {{jsxref("WebAssembly.RuntimeError")}} を持って棄却されます。</li> -</ul> - -<h2 id="例">例</h2> - -<p>次の例 (Github上のデモ <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> と、 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">動作例</a> を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。プロミスは <code>ResultObject</code> で fulfill されます。<code>instantiateStreaming()</code> 関数は {{domxref("Response")}} オブジェクトを渡すプロミスを受け取るので、直接 {{domxref("WindowOrWorkerGlobalScope.fetch()")}} 呼び出し結果を渡すことができます。</p> - -<pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } }; - -WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) -.then(obj => obj.instance.exports.exported_func());</pre> - -<p>最後に <code>ResultObject</code> が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。</p> - -<h2 id="仕様">仕様</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('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}</td> - <td>{{Spec2('WebAssembly Embedding')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md new file mode 100644 index 0000000000..d157a5c651 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md @@ -0,0 +1,73 @@ +--- +title: WebAssembly.instantiateStreaming() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming +tags: + - API + - JavaScript + - Method + - Object + - Reference + - WebAssembly + - instantiate + - instantiateStreaming + - streaming +browser-compat: javascript.builtins.WebAssembly.instantiateStreaming +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming +--- +{{JSRef}} + +**`WebAssembly.instantiateStreaming()`** 関数は、ソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。これは、 wasm コードをロードするための最も効率的で最適な方法です。 + +```js +WebAssembly.instantiateStreaming(source, importObject) +``` + +### 引数 + +- _source_ + - : [`Response`](/ja/docs/Web/API/Response "Response は Fetch API のインターフェースで、リクエストに対するレスポンスを表します。") オブジェクト、またはそれで解決するプロミスで、コンパイルしてインスタンス化する .wasm モジュールのソースを表します。 +- _importObject_ {{optional_inline}} + - : 関数や {{jsxref("WebAssembly.Memory")}} オブジェクトなど、新しく生成される `Instance` にインポートされる値を持つオブジェクト。コンパイルされたモジュールの宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、[`WebAssembly.LinkError`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError) が発生します。 + +### 返値 + +`Promise` で、次の 2 つのフィールドを持つ `ResultObject` で解決します。 + +- `module`: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この `Module` は再度インスタンス化することや、[postMessage()](/ja/docs/Web/API/Worker/postMessage) 経由で共有することができます。 +- `instance`: {{jsxref("WebAssembly.Instance")}} オブジェクトで、すべての[エクスポートされた WebAssembly 関数](/ja/docs/WebAssembly/Exported_functions)を含みます。 + +### 例外 + +- いずれかの引数が正しい型または構造でない場合、{{jsxref("TypeError")}} が発生します。 +- 失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}、{{jsxref("WebAssembly.LinkError")}}、{{jsxref("WebAssembly.RuntimeError")}} をもって拒否されます。 + +## 例 + +### ストリーミングのインスタンス化 + +次の例 (Github上のデモ [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。プロミスは `ResultObject` で充足されます。`instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response "Response は Fetch API のインターフェースで、リクエストに対するレスポンスを表します。") オブジェクトを渡すプロミスを受け取るので、直接 [`WindowOrWorkerGlobalScope.fetch()`](/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch "WindowOrWorkerGlobalScope ミックスインの fetch() メソッドは、ネットワークからリソースをフェッチするプロセスを開始し、レスポンスが利用可能になると履行される約束を返します。") 呼び出し結果を渡すことができます。 + +```js +var importObject = { imports: { imported_func: arg => console.log(arg) } }; + +WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func()); +``` + +最後に `ResultObject` が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。 + +> **Note:** これを動作するようにするには、サーバが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html index 9c93cf21cc..4064df7666 100644 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html +++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory <dt><code>Memory.prototype.constructor</code></dt> <dd>このオブジェクトのインスタンスを生成した関数を返します。既定では {{jsxref("WebAssembly.Memory()")}} コンストラクターです。</dd> <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> - <dd>メモリに格納されているバッファーを返すアクセサープロパティです。/dd></dd> + <dd>メモリに格納されているバッファーを返すアクセサープロパティです。</dd> </dl> <h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html deleted file mode 100644 index 14a9631831..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WebAssembly.validate() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.validate()</code></strong> 関数は WebAssembly バイナリコードを含む <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> をバリデーションし、バイト列が有効な wasm モジュール (<code>true</code>) か、そうでないか (<code>false</code>) を返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntax">WebAssembly.validate(bufferSource);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>bufferSource</em></dt> - <dd>バリデーションする WebAssembly バイナリコードを含む <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> か <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> 。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>有効な wasm モジュール (<code>true</code>) か、そうでないか (<code>false</code>) を示す boolean 値。</p> - -<h3 id="例外">例外</h3> - -<p><code>bufferSource</code> が <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> か <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> でない場合、{{jsxref("TypeError")}} がスローされます。</p> - -<h2 id="例">例</h2> - -<p>以下の例 (validate.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/validate.html">動作例</a> をご確認ください) は .wasm モジュールをフェッチして型付き配列に変換します。次に、 <code>validate()</code> メソッドを使用してモジュールが有効かどうかをチェックします。</p> - -<pre class="brush: js">fetch('simple.wasm').then(response => - response.arrayBuffer() -).then(function(bytes) { - var valid = WebAssembly.validate(bytes); - console.log("The given bytes are " - + (valid ? "" : "not ") + "a valid wasm module"); -}); -</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.validate")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md new file mode 100644 index 0000000000..5f979a4411 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md @@ -0,0 +1,66 @@ +--- +title: WebAssembly.validate() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate +tags: + - API + - JavaScript + - Method + - Object + - Reference + - WebAssembly + - validate +browser-compat: javascript.builtins.WebAssembly.validate +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate +--- +{{JSRef}} + +**`WebAssembly.validate()`** 関数は WebAssembly バイナリーコードの[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)を検証し、そのバイト列が有効な wasm モジュールか (`true`)、そうでないか (`false`) を返します。 + +## 構文 + +```js +WebAssembly.validate(bufferSource) +``` + +### 引数 + +- `bufferSource` + - : 検証する WebAssembly バイナリーコードを含む[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)または [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)。 + +### 返値 + +有効な wasm モジュールであるか (`true`)、そうでないか (`false`) を示す論理値です。 + +### 例外 + +`bufferSource` が[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)または [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) でない場合、{{jsxref("TypeError")}} が発生します。 + +## 例 + +### validate の使用 + +以下の例 (`validate.html` の[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html)と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/validate.html) をご確認ください) は .wasm モジュールを読み取って型付き配列に変換します。次に、 `validate()` メソッドを使用してモジュールが有効かどうかをチェックします。</p> + +```js +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(function(bytes) { + var valid = WebAssembly.validate(bytes); + console.log("The given bytes are " + + (valid ? "" : "not ") + "a valid wasm module"); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/operators/function_star_/index.html b/files/ja/web/javascript/reference/operators/function_star_/index.html deleted file mode 100644 index 3518adf63b..0000000000 --- a/files/ja/web/javascript/reference/operators/function_star_/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: function* 式 -slug: Web/JavaScript/Reference/Operators/function* -tags: - - ECMAScript6 - - Function - - Iterator - - JavaScript - - Operator - - Primary Expression - - 演算子 - - 関数 -translation_of: Web/JavaScript/Reference/Operators/function* ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong><code>function*</code></strong> キーワードは、式の中でジェネレーター関数を定義するために使用することができます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html", "taller")}}</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="syntaxbox notranslate">function* [<var>name</var>]([<var>param1</var>[, <var>param2[</var>, ..., <var>paramN</var>]]]) { - <var>statements</var> -}</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>name</var></code> {{optional_inline}}</dt> - <dd>関数名。省略可。省略した場合、関数は<em>無名関数</em>として認識されます。名前は関数本体のみにローカルです。</dd> - <dt><code><var>paramN</var></code><var> </var> {{optional_inline}}</dt> - <dd>関数に渡される引数の名前。関数は最大 255 の引数を持ち得ます。</dd> - <dt><code><var>statements</var></code></dt> - <dd>関数の本体を構成するステートメント。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>function*</code> 式は {{jsxref('Statements/function*', 'function* 文', "", 1)}}ととてもよく似ており、構文もほとんど同じです。<code>function*</code> 式と <code>function*</code> 文の主な違いは、<code>function*</code> 式で<em>無名</em>ジェネレーター関数を生成するには<em>関数名</em>が省略できる点です。詳細は {{jsxref("Functions", "functions")}} をご覧ください。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_function*" name="Using_function*">function* を使用する</h3> - -<p>次の例では、無名ジェネレーター関数を定義し、<code>x</code> に割り当てます。関数は引数の二乗をもたらします:</p> - -<pre class="brush: js notranslate">let x = function*(y) { - yield y * y; -}; -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.function_star")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Statements/function*", "function*")}} 文</li> - <li>{{jsxref("GeneratorFunction")}} オブジェクト</li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">Iterator プロトコル</a></li> - <li>{{jsxref("Operators/yield", "yield")}}</li> - <li>{{jsxref("Operators/yield*", "yield*")}}</li> - <li>{{jsxref("Function")}} オブジェクト</li> - <li>{{jsxref("Statements/function", "function")}} 文</li> - <li>{{jsxref("Operators/function", "function")}} 式</li> - <li>{{jsxref("Functions_and_function_scope", "関数と関数スコープ", "", 1)}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/function_star_/index.md b/files/ja/web/javascript/reference/operators/function_star_/index.md new file mode 100644 index 0000000000..19a8d1404b --- /dev/null +++ b/files/ja/web/javascript/reference/operators/function_star_/index.md @@ -0,0 +1,73 @@ +--- +title: function* 式 +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript 2015 + - Function + - Iterator + - JavaScript + - Language feature + - Operator + - Primary Expression +browser-compat: javascript.operators.generator_function +translation_of: Web/JavaScript/Reference/Operators/function* +--- +{{jsSidebar("Operators")}}</div> + +**`function*`** キーワードは、式の中でジェネレーター関数を定義するために使用することができます。 + +{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html", + "taller")}} + +## 構文 + +```js +function* [name]([param1[, param2[, ..., paramN]]]) { + statements +} +``` + +### 引数 + +- `name` {{optional_inline}} + - : 関数名。省略可。省略した場合、関数は*無名関数*として認識されます。名前は関数本体のみにローカルです。 +- `paramN` {{optional_inline}} + - : 関数に渡される引数の名前。関数は最大 255 個の引数を持つことができます。 +- `statements` + - : 関数の本体を構成する文。 + +## 解説 + +`function*` 式は {{jsxref('Statements/function*', 'function* 文', "", 1)}}ととてもよく似ており、構文もほとんど同じです。`function*` 式と `function*` 文の主な違いは、`function*` 式で*無名*ジェネレーター関数を生成する場合は*関数名*が省略できる点です。詳細は {{jsxref("Functions", "functions")}} をご覧ください。 + +## 例 + +### function* の使用 + +次の例では、無名ジェネレーター関数を定義し、`x` に代入します。関数は引数の二乗を生成します。 + +```js +let x = function*(y) { + yield y * y; +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Statements/function*", "function*")}} 文 +- {{jsxref("GeneratorFunction")}} オブジェクト +- [反復プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols) +- {{jsxref("Operators/yield", "yield")}} +- {{jsxref("Operators/yield*", "yield*")}} +- {{jsxref("Function")}} オブジェクト +- {{jsxref("Statements/function", "function")}} 文 +- {{jsxref("Operators/function", "function")}} 式 +- {{jsxref("Functions_and_function_scope", "関数と関数スコープ", "", 1)}} diff --git a/files/ja/web/javascript/reference/operators/optional_chaining/index.html b/files/ja/web/javascript/reference/operators/optional_chaining/index.html deleted file mode 100644 index b3eee3eb1f..0000000000 --- a/files/ja/web/javascript/reference/operators/optional_chaining/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: Optional chaining (?.) -slug: Web/JavaScript/Reference/Operators/Optional_chaining -tags: - - Chaining - - JavaScript - - Language feature - - Operator - - Optional chaining - - Reference -translation_of: Web/JavaScript/Reference/Operators/Optional_chaining ---- -<div>{{JSSidebar("Operators")}}</div> - -<p><ruby><strong>オプショナルチェイニング</strong><rp> (</rp><rt>optional chaining</rt><rp>) </rp></ruby>演算子 <strong><code>?.</code></strong> は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。 <span class="seoSummary"><code>?.</code> 演算子の機能は <code>.</code> チェーン演算子と似ていますが、参照が {{glossary("nullish")}} ({{JSxRef("null")}} または {{JSxRef("undefined")}}) の場合にエラーとなるのではなく、式が短絡され <code>undefined</code> が返されるところが異なります。</span> 関数呼び出しで使用すると、与えられた関数が存在しない場合、 <code>undefined</code> を返します。</p> - -<p>これは、参照が失われた可能性のある連結されたプロパティにアクセスする時、結果的に短く単純な式になります。また、必要なプロパティの存在が保証されていない場合にオブジェクトのコンテンツを探索するのにも役立ちます。</p> - -<p>オプショナルチェイニングは、存在しないルートオブジェクトでは使用できません。<code>if (typeof a == "undefined")</code> のようなチェックを置き換えるものではありません。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</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="syntaxbox notranslate"><var>obj</var>?.<var>prop</var> -<var>obj</var>?.[<var>expr</var>] -<em>arr</em>?.[<var>index</var>] -<var>func</var>?.(<var>args</var>) -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オプショナルチェイニング演算子は、参照や関数が <code>undefined</code> または <code>null</code> である可能性がある場合でも、接続されたオブジェクトの値に簡単にアクセスする手段を提供します。</p> - -<p>たとえば、入れ子構造を持つオブジェクト <code>obj</code> を考えましょう。オプショナルチェイニング演算子なしで深い入れ子になったサブプロパティにアクセスするには、次のように、各プロパティ間の参照を確認する必要があります:</p> - -<pre class="brush: js notranslate">let nestedProp = obj.first && obj.first.second;</pre> - -<p><code>obj.first.second</code> の値にアクセスする前に、 <code>obj.first</code> の値が <code>null</code> または <code>undefined</code> でないことを確認します。これにより、 <code>obj.first</code> をテストせずに直接 <code>obj.first.second</code> にアクセスしたときに起きるエラーを防ぐことができます。</p> - -<p>しかし、オプショナルチェイニング演算子 (<code>?.</code>) を使えば、<code>obj.first.second</code> にアクセスしようとする前に <code>obj.first</code> の状態を明示的にテストする必要がなくなります:</p> - -<pre class="brush: js notranslate">let nestedProp = obj.first?.second;</pre> - -<p><code>?.</code> を <code>.</code> の代わりに用いることで、 JavaScript が <code>obj.first.second</code> にアクセスしようとする前に <code>obj.first</code> が <code>null</code> または <code>undefined</code> でないことを暗黙的に確かめるようになります。<code>obj.first</code> が <code>null</code> または <code>undefined</code> であった場合、式が自動的に短絡され、 <code>undefined</code> が返ります。</p> - -<p>これは、一時的な変数が作成されないことを除き、次の式と等価です。</p> - -<pre class="brush: js notranslate">let temp = obj.first; -let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); -</pre> - -<h3 id="Optional_chaining_with_function_calls" name="Optional_chaining_with_function_calls">関数呼び出しでオプショナルチェイニング演算子を使う</h3> - -<p>存在しない可能性がある関数の呼び出しを試行するときに、オプショナルチェイニングを使うことができます。これはたとえば、ユーザーのデバイス上で使えなかったり、実装が古かったりするために使えなかったりする可能性がある API を使うときに役立ちます。</p> - -<p>関数呼び出しでオプショナルチェイニング演算子を用いた場合、メソッドが見つからないときは自動的に <code>undefined</code> が返ります。例外はスローされません。</p> - -<pre class="brush: js notranslate">let result = someInterface.customMethod?.();</pre> - -<div class="blockIndicator note"> -<p><strong>注意:</strong> 上記のようなプロパティの関数がない場合に、<code>?.</code> を使用すると {{JSxRef("TypeError")}} 例外が発生します (<code>someInterface.customMethod is not a function</code>)。</p> -</div> - -<div class="blockIndicator note"> -<p><strong>注意:</strong> <code>someInterface</code> 自体が <code>null</code> または <code>undefined</code> の場合にも、{{JSxRef("TypeError")}} 例外が発生します (<code>someInterface is null</code>)。<code>someInterface</code> 自体が <code>null</code> または <code>undefined</code> の可能性がある場合は、次の位置にも <code>?.</code> を使用しなければなりません。<code>someInterface?.customMethod?.()</code></p> -</div> - -<h4 id="Dealing_with_optional_callbacks_or_event_handlers" name="Dealing_with_optional_callbacks_or_event_handlers">省略可能なコールバックやイベントハンドラを扱う</h4> - -<p>コールバックを使う場合や、オブジェクトからメソッドを<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>を利用して取り出す場合に、存在しない値がある可能性があり、その存在を検証するまで関数として呼び出せません。その場合 <code>?.</code> を利用することで、検証の必要性を回避できます。</p> - -<pre class="brush: js notranslate">// Written as of ES2019 -function doSomething(onContent, onError) { - try { - // ... do something with the data - } - catch (err) { - if (onError) { // Testing if onError really exists - onError(err.message); - } - } -} -</pre> - -<pre class="brush: js notranslate">// Using optional chaining with function calls -function doSomething(onContent, onError) { - try { - // ... do something with the data - } - catch (err) { - onError?.(err.message); // no exception if onError is undefined - } -} -</pre> - -<h3 id="Optional_chaining_with_expressions" name="Optional_chaining_with_expressions">オプショナルチェイニング演算子を式と組み合わせて使う</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">ブラケット表記法</a>とオプショナルチェイニング演算子を組み合わせることもできます。</p> - -<pre class="brush: js notranslate">let nestedProp = obj?.['prop' + 'Name']; -</pre> - -<h3 id="Optional_chaining_not_valid_on_the_left-hand_side_of_an_assignment" name="Optional_chaining_not_valid_on_the_left-hand_side_of_an_assignment">オプショナルチェイニング演算子は代入の左辺値では有効にならない</h3> - -<pre class="brush: js notranslate"><code>let object = {}; -object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre> - -<h3 id="オプショナルチェイニングにより配列の要素にアクセス">オプショナルチェイニングにより配列の要素にアクセス</h3> - -<pre class="brush: js notranslate">let arrayItem = arr?.[42];</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> - -<p>次の例では、マップに存在しない <code>bar</code> メンバの <code>name</code> プロパティを取得しようとしています。したがって、結果は <code>undefined</code> になります。</p> - -<pre class="brush: js notranslate">let myMap = new Map(); -myMap.set("foo", {name: "baz", desc: "inga"}); - -let nameBar = myMap.get("bar")?.name;</pre> - -<h3 id="Short-circuiting_evaluation" name="Short-circuiting_evaluation">短絡評価</h3> - -<p>式と一緒にオプショナルチェイニング演算子を用いたとき、左側のオペランドが <code>null</code> または <code>undefined</code> である場合にその式は評価されなくなります。</p> - -<pre class="brush: js notranslate">let potentiallyNullObj = null; -let x = 0; -let prop = potentiallyNullObj?.[x++]; - -console.log(x); // 0 as x was not incremented -</pre> - -<h3 id="Stacking_the_optional_chaining_operator" name="Stacking_the_optional_chaining_operator">オプショナルチェイニングをつなげて使う</h3> - -<p>入れ子になったオブジェクトでは、オプショナルチェイニング演算子を何度でも使えます。</p> - -<pre class="brush: js notranslate">let customer = { - name: "Carl", - details: { - age: 82, - location: "Paradise Falls" // detailed address is unknown - } -}; -let customerCity = customer.details?.address?.city; - -// … this also works with optional chaining function call -let duration = vacations.trip?.getTime?.(); -</pre> - -<h3 id="Combining_with_the_nullish_coalescing_operator" name="Combining_with_the_nullish_coalescing_operator">Null 合体演算子と共に使う</h3> - -<p>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}}はオプショナルチェイニングの後につけることで、存在しない値があった時、既定値をかわりに使うために利用できます。</p> - -<pre class="brush: js notranslate">let customer = { - name: "Carl", - details: { age: 82 } -}; -const customerCity = customer?.city ?? "Unknown city"; -console.log(customerCity); // Unknown city</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><a href="https://tc39.es/proposal-optional-chaining/#sec-scope">"オプショナルチェイニング" 演算子の提案</a></td> - <td>Stage 4</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.operators.optional_chaining")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}}</li> - <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/optional_chaining/index.md b/files/ja/web/javascript/reference/operators/optional_chaining/index.md new file mode 100644 index 0000000000..644624bfbb --- /dev/null +++ b/files/ja/web/javascript/reference/operators/optional_chaining/index.md @@ -0,0 +1,195 @@ +--- +title: オプショナルチェーン (?.) +slug: Web/JavaScript/Reference/Operators/Optional_chaining +tags: + - Chaining + - JavaScript + - Language feature + - Operator + - Optional chaining + - Reference +browser-compat: javascript.operators.optional_chaining +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +{{JSSidebar("Operators")}} + +**オプショナルチェーン** (optional chaining) 演算子 (**`?.`**) は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。 + + `?.` 演算子の機能は `.` チェーン演算子と似ていますが、参照が [nullish](/ja/docs/Glossary/Nullish) ({{JSxRef("null")}} または {{JSxRef("undefined")}}) の場合にエラーとなるのではなく、式が短絡され `undefined` が返されるところが異なります。関数呼び出しで使用すると、与えられた関数が存在しない場合、 `undefined` を返します。 + +これは、参照が失われた可能性のある連結されたプロパティにアクセスする時、結果的に短く単純な式になります。また、必要なプロパティの存在が保証されていない場合にオブジェクトのコンテンツを探索するのにも役立ちます。 + +オプショナルチェーンは、宣言されていないルートオブジェクトでは使用できませんが、未定義のルートオブジェクトで使用できます。 + +{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", + "taller")}} + +## 構文 + +```js +obj.val?.prop +obj.val?.[expr] +obj.arr?.[index] +obj.func?.(args) +``` + +## 解説 + +オプショナルチェーン演算子は、参照や関数が `undefined` または `null` である可能性がある場合でも、接続されたオブジェクトの値に簡単にアクセスする手段を提供します。 + +たとえば、入れ子構造を持つオブジェクト `obj` を考えましょう。オプショナルチェーン演算子なしで深い入れ子になったサブプロパティにアクセスするには、次のように、各プロパティ間の参照を確認する必要があります。 + +```js +let nestedProp = obj.first && obj.first.second; +``` + +`obj.first.second` の値にアクセスする前に、 `obj.first` の値が `null` または `undefined` でないことを確認します。これにより、 `obj.first` をテストせず `obj.first.second` にアクセスしたときに起きるエラーを防ぐことができます。 + +しかし、オプショナルチェーン演算子 (`?.`) を使えば、`obj.first.second` にアクセスしようとする前に `obj.first` の状態を明示的にテストする必要がなくなります。</p> + +```js +let nestedProp = obj.first?.second; +``` + +`?.` を `.` の代わりに用いることで、 JavaScript が `obj.first.second` にアクセスしようとする前に `obj.first` が `null` または `undefined` でないことを暗黙的に確かめるようになります。`obj.first` が `null` または `undefined` であった場合、式が自動的に短絡され、 `undefined` が返ります。 + +これは、一時的な変数が作成されないことを除き、次の式と等価です。 + +```js +let temp = obj.first; +let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); +``` + +### 関数呼び出しにおけるオプショナルチェーン演算子 + +存在しない可能性がある関数の呼び出しを試行するときに、オプショナルチェーンを使うことができます。これはたとえば、ユーザーの端末上で使えなかったり、実装が古かったりするために使えなかったりする可能性がある API を使うときに役立ちます。 + +関数呼び出しでオプショナルチェーン演算子を用いた場合、メソッドが見つからないときは自動的に `undefined` が返り、例外は発生しません。 + +```js +let result = someInterface.customMethod?.(); +``` + +> **Note:** 関数ではない名前のプロパティがあった場合、 `?.` を使用すると {{JSxRef("TypeError")}} 例外が発生します +> (`someInterface.customMethod is not a function`)。 + +> **Note:** `someInterface` 自体が `null` または `undefined` である場合にも、 {{JSxRef("TypeError")}} 例外が発生します (`someInterface is null`)。 `someInterface` 自体が `null` または `undefined` である可能性がある場合は、この位置にも `?.` を使用して `someInterface?.customMethod?.()` のようにする必要があります。 + +#### 省略可能なコールバックやイベントハンドラーの扱い + +<p>コールバックを使う場合や、オブジェクトからメソッドを<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>を利用して取り出す場合に、存在しない値がある可能性があり、その存在を検証するまで関数として呼び出せません。その場合 `?.` を利用することで、検証の必要性を回避できます。 + +```js +// Written as of ES2019 +function doSomething(onContent, onError) { + try { + // ... do something with the data + } + catch (err) { + if (onError) { // Testing if onError really exists + onError(err.message); + } + } +} +``` + +```js +// Using optional chaining with function calls +function doSomething(onContent, onError) { + try { + // ... do something with the data + } + catch (err) { + onError?.(err.message); // no exception if onError is undefined + } +} +``` + +### オプショナルチェーン演算子と式の組み合わせ + +[プロパティアクセサーのブラケット表記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors#bracket_notation)を使用している式のプロパティにアクセスする際にも、オプショナルチェーン演算子を使用することができます。 + +```js +let nestedProp = obj?.['prop' + 'Name']; +``` + +### オプショナルチェーン演算子は代入の左辺値では使用できない + +```js +let object = {}; +object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment +``` + +### オプショナルチェーンによる配列要素へのアクセス + +```js +let arrayItem = arr?.[42]; +``` + +## 例 + +### 基本的な例 + +次の例では、マップに存在しない `bar` メンバの `name` プロパティを取得しようとしています。したがって、結果は `undefined` になります。 + +```js +let myMap = new Map(); +myMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = myMap.get("bar")?.name; +``` + +### 短絡評価 + +式と一緒にオプショナルチェーン演算子を用いたとき、左側のオペランドが `null` または `undefined` である場合、その式は評価されなくなります。 + +```js +let potentiallyNullObj = null; +let x = 0; +let prop = potentiallyNullObj?.[x++]; + +console.log(x); // 0 となる。 x は加算されていない +``` + +### オプショナルチェーンをつなげて使う + +入れ子になったオブジェクトでは、オプショナルチェーン演算子を何度でも使うことができます。 + +```js +let customer = { + name: "Carl", + details: { + age: 82, + location: "Paradise Falls" // 詳細な住所は不明 + } +}; +let customerCity = customer.details?.address?.city; + +// … これはオプショナルチェーンの関数呼び出しでも動作します +let customerName = customer.name?.getName?.(); // メソッドが存在しないので、 customerName は undefined +``` + +### Null 合体演算子と共に使う + +{{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}}はオプショナルチェーンの後につけることで、値が存在しなかったときの既定値を指定することができます。 + +```js +let customer = { + name: "Carl", + details: { age: 82 } +}; +const customerCity = customer?.city ?? "Unknown city"; +console.log(customerCity); // Unknown city +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{JSxRef("Operators/Nullish_Coalescing_Operator", "Null 合体演算子", '', 1)}} diff --git a/files/ja/web/javascript/reference/statements/const/index.html b/files/ja/web/javascript/reference/statements/const/index.html deleted file mode 100644 index 46906df6db..0000000000 --- a/files/ja/web/javascript/reference/statements/const/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: const -slug: Web/JavaScript/Reference/Statements/const -tags: - - ECMAScript 2015 - - JavaScript - - Language feature - - Reference - - Statement - - constants -translation_of: Web/JavaScript/Reference/Statements/const ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>定数 (const) は、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> キーワードを使って定義する変数と同じ、ブロックスコープを持ちます。定数の値は、再代入による変更はできず、再宣言もできません。</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-const.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="syntaxbox notranslate">const <var>name1</var> = <var>value1</var> [, <var>name2</var> = <var>value2</var> [, ... [, <var>nameN</var> = <var>valueN</var>]]];</pre> - -<dl> - <dt><code><var>nameN</var></code></dt> - <dd>定数名。正当な{{Glossary("identifier", "識別子")}}ならは、どんなものでもかまいません。</dd> - <dt><code><var>valueN</var></code></dt> - <dd>定数の値。正当な<a href="/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">式</a>ならば、どんなものでもかまいません。</dd> -</dl> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>構文は、変数の宣言にも使用できます。</p> - -<pre class="syntaxbox notranslate">const <var>{ bar }</var> = <em>foo</em>; // where foo = { bar:10, baz:12 }; -/* これは、値が 10 の 'bar' という名前の変数を作成します。*/</pre> - -<dl> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>この宣言は、宣言された場所に応じて、グローバルまたはブロック内にローカルなスコープを持った定数を作成します。グローバルな定数は {{jsxref("Statements/var", "var")}} 変数とは異なり、{{domxref("window")}} オブジェクトのプロパティには<strong>なりません</strong>。</p> - -<p>定数には初期化子が必要です。その値は、宣言されたのと同じ文の中で指定しなければなりません。(後から変更できないことを考えると、これは理にかなっています)</p> - -<p><strong><code>const</code> 宣言</strong>は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は<strong>不変ではなく</strong>、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能です。</p> - -<p>「<a href="/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone">一時的なデッドゾーン</a>」に関する考慮事項はすべて、{{jsxref("Statements/let", "let")}} と <code>const</code> の両方に適用されます。</p> - -<p>定数は、同じスコープ内の関数や変数と同じ名前にすることはできません。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_const_usage" name="Basic_const_usage">基本的な定数の使い方</h3> - -<p>定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。</p> - -<pre class="brush: js; notranslate">// MY_FAV を定数として定義して、その値を 7 にします。 -const MY_FAV = 7; - -// これはエラーを投げます。 -// Uncaught TypeError: Assignment to constant variable. -MY_FAV = 20; - -// MY_FAV は 7 です。 -console.log('my favorite number is: ' + MY_FAV); - -// 定数を再宣言しようとするとエラーを投げます。 -// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared -const MY_FAV = 20; - -// MY_FAV という名前は上記の定数のために予約されているので、これも失敗します。 -var MY_FAV = 20; - -// これもエラーを投げます。 -let MY_FAV = 20; - -</pre> - -<h3 id="Block_scoping" name="Block_scoping">ブロックスコープ</h3> - -<p>ブロックスコープの性質に注意することが重要です。</p> - -<pre class="brush: js notranslate">if (MY_FAV === 7) { - // これは問題なく、ブロックスコープの MY_FAV 変数を作成します。 - // （ブロックスコープの変数を宣言する let も問題なく機能します） - let MY_FAV = 20; - - // MY_FAV は現在 20 です。 - console.log('my favorite number is ' + MY_FAV); - - // これはグローバルコンテキストに巻き上げられ、エラーを投げます。 - var MY_FAV = 20; -} - -// MY_FAV は 7 のままです。 -console.log('my favorite number is ' + MY_FAV); -</pre> - -<h3 id="const_needs_to_be_initialized" name="const_needs_to_be_initialized">定数は初期化が必要です。</h3> - -<pre class="brush: js notranslate">// エラーが投げられます。 -// Uncaught SyntaxError: Missing initializer in const declaration - -const FOO; -</pre> - -<h3 id="const_in_objects_and_arrays" name="const_in_objects_and_arrays">オブジェクトと配列の定数</h3> - -<p>定数はオブジェクトや配列に対しても動作します。</p> - -<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'}; - -// オブジェクトの上書きはエラーを投げます。 -// Uncaught TypeError: Assignment to constant variable. -MY_OBJECT = {'OTHER_KEY': 'value'}; - -// しかしながら、オブジェクトのキーは保護されていないので、 -// 次の文は問題なく実行されます。 -MY_OBJECT.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。 - -// 配列も同じです。 -const MY_ARRAY = []; -// 配列にアイテムをプッシュすることができます。 -MY_ARRAY.push('A'); // ["A"] -// しかしながら、新しい配列を変数に代入するとエラーを投げます。 -// Uncaught TypeError: Assignment to constant variable. -MY_ARRAY = ['B'];</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.statements.const")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Statements/var", "var")}}</li> - <li>{{jsxref("Statements/let", "let")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Constants">JavaScript ガイド - 『値、変数、リテラル』 - 定数</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/statements/const/index.md b/files/ja/web/javascript/reference/statements/const/index.md new file mode 100644 index 0000000000..2f1f4dbac9 --- /dev/null +++ b/files/ja/web/javascript/reference/statements/const/index.md @@ -0,0 +1,143 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - ECMAScript 2015 + - JavaScript + - Language feature + - Reference + - Statement + - constants +browser-compat: javascript.statements.const +translation_of: Web/JavaScript/Reference/Statements/const +--- +{{jsSidebar("Statements")}} + +定数は、[`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) キーワードを使って定義する変数と同様にブロックスコープを持ちます。定数の値は、再代入による変更ができず、再宣言もできません。 + +{{EmbedInteractiveExample("pages/js/statement-const.html")}} + +## 構文 + +```js +const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]]; +``` + +- `nameN` + - : 定数名。正当な{{Glossary("identifier", "識別子")}}ならば、何でもかまいません。 +- `valueN` + - : 定数の値。正当な[式](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)ならば、関数式を含め、何でもかまいません。 + +[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)構文を使用して、定数を宣言することもできます。 + +```js +const { bar } = foo; // where foo = { bar:10, baz:12 }; +/* これは、値が 10 の 'bar' という名前の変数を作成します。*/ +``` + +## 解説 + +この宣言は、宣言された場所に応じて、グローバルまたはブロック内にローカルなスコープを持った定数を作成します。グローバルな定数は {{jsxref("Statements/var", "var")}} 変数とは異なり、{{domxref("window")}} オブジェクトのプロパティには**なりません**。 + +定数には初期化子が必要です。その値は、宣言されたのと同じ文の中で指定しなければなりません。(後から変更できないことを考えると、これは理にかなっています。) + +**`const` 宣言**は、値への読み取り専用の参照を作ります。これは、定数に保持されている値は**不変ではなく**、その変数の識別子が再代入できないということです。たとえば、定数の中身がオブジェクトの場合、オブジェクトの内容（プロパティなど）は変更可能です。</p> + +「[一時的なデッドゾーン](/ja/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone)」に関する考慮事項はすべて、{{jsxref("Statements/let", "let")}} と `const` の両方に適用されます。 + +定数は、同じスコープ内の関数や変数と同じ名前にすることはできません。 + +## 例 + +### 基本的な定数の使い方 + +定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。 + +```js +// MY_FAV を定数として定義して、その値を 7 にします +const MY_FAV = 7; + +// これはエラーが発生します - Uncaught TypeError: Assignment to constant variable. +MY_FAV = 20; + +// MY_FAV は 7 です +console.log('my favorite number is: ' + MY_FAV); + +// 定数を再宣言しようとするとエラーが発生します +// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared +const MY_FAV = 20; + +// MY_FAV という名前は上記の定数のために予約されているので、これも失敗します +var MY_FAV = 20; + +// これもエラーが発生します +let MY_FAV = 20; +``` + +### ブロックスコープ + +ブロックスコープの性質に注意することが重要です。 + +```js +if (MY_FAV === 7) { + // これは問題なく、ブロックスコープの MY_FAV 変数を作成します + // (ブロックスコープの変数を宣言する let も問題なく機能します) + let MY_FAV = 20; + + // MY_FAV は現在 20 です。 + console.log('my favorite number is ' + MY_FAV); + + // これはグローバルコンテキストに巻き上げられ、エラーが発生します + var MY_FAV = 20; +} + +// MY_FAV は 7 のままです +console.log('my favorite number is ' + MY_FAV); +``` + +### 定数は初期化が必要 + +```js +// エラーが発生します +// Uncaught SyntaxError: Missing initializer in const declaration + +const FOO; +``` + +### オブジェクトと配列の定数 + +定数はオブジェクトや配列に対しても動作します。 + +```js +const MY_OBJECT = {'key': 'value'}; + +// オブジェクトの上書きはエラーを投げます。 +// Uncaught TypeError: Assignment to constant variable. +MY_OBJECT = {'OTHER_KEY': 'value'}; + +// しかしながら、オブジェクトのキーは保護されていないので、 +// 次の文は問題なく実行されます。 +MY_OBJECT.key = 'otherValue'; // Object.freeze() を使用すればオブジェクトを不変にできます。 + +// 配列も同じです。 +const MY_ARRAY = []; +// 配列に要素をプッシュすることができます。 +MY_ARRAY.push('A'); // ["A"] +// しかしながら、新しい配列を変数に代入するとエラーを投げます。 +// Uncaught TypeError: Assignment to constant variable. +MY_ARRAY = ['B']; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Statements/var", "var")}} +- {{jsxref("Statements/let", "let")}} +- [JavaScript ガイドの定数](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#Constants) diff --git a/files/ja/web/javascript/reference/strict_mode/index.html b/files/ja/web/javascript/reference/strict_mode/index.html index c24a489769..5ef5aaf11e 100644 --- a/files/ja/web/javascript/reference/strict_mode/index.html +++ b/files/ja/web/javascript/reference/strict_mode/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode <h2 id="Invoking_strict_mode" name="Invoking_strict_mode">Strict モードの呼び出し</h2> -<p>Strict モードは<em>スクリプト全体</em>または<em>個別の関数</em>に適用できます。括弧 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/block">{}</a></code> で括られるブロック構文には適用できません。そのような場所に適用しようとしても何も起きません。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code> コード、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/function">Function</a></code> コード、イベントハンドラ属性、<a href="/ja/DOM/window.setTimeout" title="ja/DOM/window.setTimeout"><code>setTimeout</code></a> コードに渡す文字列、およびこれらに似たものはスクリプト全体であり、Strict モードを呼び出すと期待どおりに動作します。</p> +<p>Strict モードは<em>スクリプト全体</em>または<em>個別の関数</em>に適用できます。括弧 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/block">{}</a></code> で括られるブロック構文には適用できません。そのような場所に適用しようとしても何も起きません。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code> コード、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/function">Function</a></code> コード、イベントハンドラ属性、<a href="/ja/DOM/window.setTimeout"><code>setTimeout</code></a> コードに渡す文字列、およびこれらに似たものはスクリプト全体であり、Strict モードを呼び出すと期待どおりに動作します。</p> <h3 id="Strict_mode_for_scripts" name="Strict_mode_for_scripts">スクリプトでの Strict モード</h3> @@ -79,7 +79,7 @@ export default strict; mistypeVariable = 17; // この行は変数のスペルミスによる参照エラーを投げます。 </pre> -<p>第二に、Strict モードでは、代入文で暗黙的に失敗せずに例外が発生するようにします。例えば、<code>NaN</code> は書き込み不可のグローバル変数です。通常のコードでは <code>NaN</code> に代入しても何も起きません。つまり、開発者は失敗したという通知を受けません。Strict モードでは <code>NaN</code> に代入すると例外が発生します。通常のコードで暗黙的に失敗する代入 (書き込み不可のプロパティへの代入、getter のみのプロパティへの代入、<a href="/ja/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="ja/JavaScript/Reference/Global Objects/Object/preventExtensions">拡張不可</a> オブジェクトへの新規プロパティ割り当て) について、Strict モードでは例外が発生します:</p> +<p>第二に、Strict モードでは、代入文で暗黙的に失敗せずに例外が発生するようにします。例えば、<code>NaN</code> は書き込み不可のグローバル変数です。通常のコードでは <code>NaN</code> に代入しても何も起きません。つまり、開発者は失敗したという通知を受けません。Strict モードでは <code>NaN</code> に代入すると例外が発生します。通常のコードで暗黙的に失敗する代入 (書き込み不可のプロパティへの代入、getter のみのプロパティへの代入、<a href="/ja/JavaScript/Reference/Global_Objects/Object/preventExtensions">拡張不可</a> オブジェクトへの新規プロパティ割り当て) について、Strict モードでは例外が発生します:</p> <pre class="brush: js notranslate">'use strict'; @@ -257,7 +257,7 @@ f(); // TypeError が投げられます <p>Strict モードにより"セキュアな" JavaScript の記述がより簡単になります。現在、一部の Web サイトではユーザー向に対し、Web サイトの<em>他のユーザーが</em>実行することができる JavaScript を記述する方法を提供しています。ブラウザー上の JavaScript はユーザーの個人的な情報にアクセスできることから、そのような JavaScript は禁じられた機能へのアクセスを削除するよう、実行前に部分的に変換する必要があります。JavaScript の柔軟性は、ランタイムによる多くのチェックなしにこれを行うことを事実上不可能にします。ある言語機能は、ランタイムのチェック実行にかなりパフォーマンスのコストがかかるとして広まっています。Strict モードのいくつかの調整、そしてユーザーが投稿した JavaScript が Strict モードのコードであることや信頼できる方法で呼び出されることの要求により、ランタイムのチェックの必要性をかなり減らします。</p> -<p>第一に、Strict モードでは、<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として関数に渡された値をオブジェクトへボクシングしません。非ストリクトモードでの関数にとって <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> は常にオブジェクトになります。this の値は、実行時に this オブジェクト値として提供されたオブジェクトであったり、真偽値・文字列・数値などのプリミティブな値が <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として呼び出した時はオブジェクトへボクシングした値、<code>{{Glossary("Undefined", "undefined")}}</code> または <code>{{Glossary("Null", "null")}}</code> の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> で呼び出された時はグローバルオブジェクトとなります。(特定の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を指定するために <a href="/ja/JavaScript/Reference/Global_Objects/Function/call" title="ja/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/apply" title="ja/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/bind" title="ja/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> を使用してください)。自動的なボクシングはパフォーマンス上のコストがあり、しかしブラウザーでグローバルオブジェクトを公開することは、"セキュアな" JavaScript 環境へのアクセスを提供するグローバルオブジェクトを制限する必要があるためにセキュリティ上の危険性があります。従って Strict モードの関数では、指定された <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を変更せずに使用します:</p> +<p>第一に、Strict モードでは、<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として関数に渡された値をオブジェクトへボクシングしません。非ストリクトモードでの関数にとって <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> は常にオブジェクトになります。this の値は、実行時に this オブジェクト値として提供されたオブジェクトであったり、真偽値・文字列・数値などのプリミティブな値が <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として呼び出した時はオブジェクトへボクシングした値、<code>{{Glossary("Undefined", "undefined")}}</code> または <code>{{Glossary("Null", "null")}}</code> の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> で呼び出された時はグローバルオブジェクトとなります。(特定の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を指定するために <a href="/ja/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> を使用してください)。自動的なボクシングはパフォーマンス上のコストがあり、しかしブラウザーでグローバルオブジェクトを公開することは、"セキュアな" JavaScript 環境へのアクセスを提供するグローバルオブジェクトを制限する必要があるためにセキュリティ上の危険性があります。従って Strict モードの関数では、指定された <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を変更せずに使用します:</p> <pre class="brush: js notranslate">'use strict'; function fun() { return this; } diff --git a/files/ja/web/javascript/reference/trailing_commas/index.html b/files/ja/web/javascript/reference/trailing_commas/index.html deleted file mode 100644 index 124dd12c22..0000000000 --- a/files/ja/web/javascript/reference/trailing_commas/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: 末尾のカンマ -slug: Web/JavaScript/Reference/Trailing_commas -tags: - - Comma - - ECMAScript2017 - - ECMAScript5 - - JavaScript - - Language feature - - Syntax - - Trailing comma -translation_of: Web/JavaScript/Reference/Trailing_commas ---- -<div>{{JsSidebar("More")}}</div> - -<p><strong>末尾のカンマ</strong> ("最後のカンマ" と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。</p> - -<p>JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。そして、ECMAScript 5 でオブジェクトリテラルの、ECMAScript 2017 で関数の引数の末尾のカンマが使用できるようになりました。</p> - -<p>しかし、<a href="/ja/docs/Glossary/JSON">JSON</a> では末尾のカンマを使用できません。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">,</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Trailing_commas_in_literals" name="Trailing_commas_in_literals">リテラルの末尾のカンマ</h3> - -<h4 id="Arrays" name="Arrays">配列</h4> - -<p>JavaScript は配列の末尾のカンマを無視します。</p> - -<pre class="brush: js notranslate">var arr = [ - 1, - 2, - 3, -]; - -arr; // [1, 2, 3] -arr.length; // 3</pre> - -<p>1 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は<em>希薄な</em> (<em>密集した</em>配列は穴がありません) 配列と呼ばれます。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列をイテレートするとき、穴はスキップされます。</p> - -<pre class="brush: js notranslate">var arr = [1, 2, 3,,,]; -arr.length; // 5 -</pre> - -<h4 id="Objects" name="Objects">オブジェクト</h4> - -<p>ECMAScript 5 から、オブジェクトリテラルの末尾のカンマも使用できるようになりました:</p> - -<pre class="brush: js notranslate">var object = { - foo: "bar", - baz: "qwerty", - age: 42, -};</pre> - -<h3 id="Trailing_commas_in_functions" name="Trailing_commas_in_functions">関数の末尾のカンマ</h3> - -<p>ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。</p> - -<h4 id="Parameter_definitions" name="Parameter_definitions">引数定義</h4> - -<p>次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の <code>length</code> プロパティや <code>arguments</code> オブジェクトに影響を与えません。</p> - -<pre class="brush: js notranslate">function f(p) {} -function f(p,) {} - -(p) => {}; -(p,) => {}; -</pre> - -<p>末尾のカンマは 、クラスやオブジェクトの<a href="/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions">メソッド定義</a>でも使用できます。</p> - -<pre class="brush: js notranslate">class C { - one(a,) {} - two(a, b,) {} -} - -var obj = { - one(a,) {}, - two(a, b,) {}, -}; -</pre> - -<h4 id="Function_calls" name="Function_calls">関数呼び出し</h4> - -<p>次の 2 つの関数呼び出しはともに有効で等しいものです。</p> - -<pre class="brush: js notranslate">f(p); -f(p,); - -Math.max(10, 20); -Math.max(10, 20,); -</pre> - -<h4 id="Illegal_trailing_commas" name="Illegal_trailing_commas">不正な末尾のカンマ</h4> - -<p>カンマしか含まない関数の引数定義や関数呼び出しは、{{Jsxref("SyntaxError")}} を投げます。さらに、<a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> を使用しているときは、末尾のカンマは許可されません。</p> - -<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter -(,) => {}; // SyntaxError: expected expression, got ',' -f(,) // SyntaxError: expected expression, got ',' - -function f(...p,) {} // SyntaxError: parameter after rest parameter -(...p,) => {} // SyntaxError: expected closing parenthesis, got ',' -</pre> - -<h3 id="Trailing_commas_in_destructuring" name="Trailing_commas_in_destructuring">分割代入での末尾のカンマ</h3> - -<p>末尾のカンマは、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>の左辺でも使用できます。</p> - -<pre class="brush: js notranslate">// array destructuring with trailing comma -[a, b,] = [1, 2]; - -// object destructuring with trailing comma -var o = { - p: 42, - q: true, -}; -var {p, q,} = o; -</pre> - -<p>また、rest element で使用すると、{{jsxref("SyntaxError")}} を投げます。</p> - -<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3]; -// SyntaxError: rest element may not have a trailing comma</pre> - -<h3 id="Trailing_commas_in_JSON" name="Trailing_commas_in_JSON">JSON の末尾のカンマ</h3> - -<p>オブジェクトリテラルの末尾のカンマは、ECMAScript 5 でのみ導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、<strong>末尾のカンマを使用できません</strong>。</p> - -<p>次の行は <code>SyntaxError</code> を投げます。</p> - -<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]'); -JSON.parse('{"foo" : 1, }'); -// SyntaxError JSON.parse: unexpected character -// at line 1 column 14 of the JSON data -</pre> - -<p>正しく JSON をパースするには、カンマを省略します。</p> - -<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]'); -JSON.parse('{"foo" : 1 }');</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div> - - -<p>{{Compat("javascript.grammar.trailing_commas")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li> -</ul> diff --git a/files/ja/web/javascript/reference/trailing_commas/index.md b/files/ja/web/javascript/reference/trailing_commas/index.md new file mode 100644 index 0000000000..53f8b40afe --- /dev/null +++ b/files/ja/web/javascript/reference/trailing_commas/index.md @@ -0,0 +1,216 @@ +--- +title: 末尾のカンマ +slug: Web/JavaScript/Reference/Trailing_commas +tags: + - Comma + - ECMAScript2017 + - ECMAScript5 + - JavaScript + - Language feature + - Syntax + - Trailing comma +browser-compat: javascript.grammar.trailing_commas +translation_of: Web/JavaScript/Reference/Trailing_commas +--- +{{JsSidebar("More")}} + +**末尾のカンマ** (「最後のカンマ」と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。 + +JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。その後でオブジェクトリテラルで、さらに最近では、関数の引数の末尾のカンマが使用できるようになりました。 + +しかし、[JSON](/ja/docs/Glossary/JSON) では末尾のカンマを許容していません。 + +## 構文 + +```js +, +``` + +## 例 + +### リテラルの末尾のカンマ + +#### 配列 + +JavaScript は配列の末尾のカンマを無視します。 + +```js +var arr = [ + 1, + 2, + 3, +]; + +arr; // [1, 2, 3] +arr.length; // 3 +``` + +2 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は*疎らな*配列と呼ばれます (*密集した*配列は穴がありません)。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列を反復処理するとき、穴はスキップされます。 + +```js +var arr = [1, 2, 3,,,]; +arr.length; // 5 +``` + +#### オブジェクト + +ECMAScript 5 から、オブジェクトリテラルでも末尾のカンマを使用できるようになりました。 + +```js +var object = { + foo: "bar", + baz: "qwerty", + age: 42, +}; +``` + +### 関数の末尾のカンマ + +ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。 + +#### 引数定義 + +次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の `length` プロパティや `arguments` オブジェクトに影響を与えません。 + +```js +function f(p) {} +function f(p,) {} + +(p) => {}; +(p,) => {}; +``` + +末尾のカンマは、クラスやオブジェクトの[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)でも使用できます。</p> + +```js +class C { + one(a,) {} + two(a, b,) {} +} + +var obj = { + one(a,) {}, + two(a, b,) {}, +}; +``` + +#### 関数呼び出し + +次の 2 つの関数呼び出しはともに有効で等しいものです。 + +```js +f(p); +f(p,); + +Math.max(10, 20); +Math.max(10, 20,); +``` + +#### 不正な末尾のカンマ + +関数の定義や呼び出しにおいて引数がカンマしかないと、{{Jsxref("SyntaxError")}} が発生します。さらに、[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)を使用しているときは、末尾のカンマは許可されません。 + +```js example-bad +function f(,) {} // SyntaxError: missing formal parameter +(,) => {}; // SyntaxError: expected expression, got ',' +f(,) // SyntaxError: expected expression, got ',' + +function f(...p,) {} // SyntaxError: parameter after rest parameter +(...p,) => {} // SyntaxError: expected closing parenthesis, got ',' +``` + +### 分割代入での末尾のカンマ + +末尾のカンマは、[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)の左辺でも使用できます。 + +```js +// 末尾のカンマ付きで配列を分割代入 +[a, b,] = [1, 2]; + +// 末尾のカンマ付きでオブジェクトを分割代入 +var o = { + p: 42, + q: true, +}; +var {p, q,} = o; +``` + +また、残余要素で使用すると、{{jsxref("SyntaxError")}} が発生します。 + +```js example-bad +var [a, ...b,] = [1, 2, 3]; +// SyntaxError: rest element may not have a trailing comma +``` + +### JSON の末尾のカンマ + +オブジェクトリテラルの末尾のカンマは、ECMAScript 5 から導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、**末尾のカンマを使用できません**。 + +どちらの行も `SyntaxError` が発生します。 + +```js example-bad +JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +// SyntaxError JSON.parse: unexpected character +// at line 1 column 14 of the JSON data +``` + +正しく JSON を解釈するには、カンマを省略してください。 + +```js example-good +JSON.parse('[1, 2, 3, 4 ]'); +JSON.parse('{"foo" : 1 }'); +``` + +### 名前付きインポートおよび名前付きエクスポートの末尾のカンマ + +末尾のカンマは名前付きインポートや名前付きエクスポートでも有効です。 + +#### 名前付きインポート + +```js + import { + A, + B, + C, + } from 'D' + + import { X, Y, Z } from 'W' + + import { A as B, C as D, E as F } from 'Z'; // インポートの名前を変更 +``` + +#### 名前付きエクスポート + +```js + export { + A, + B, + C + } + + export { A, B, C }; + + export { A as B, C as D, E as F }; // エクスポートの名前を変更 +``` + +### 数量接頭辞 + +```js + //{ DecimalDigits[~Sep], DecimalDigits[~Sep] } + x{n,} + x{n,m} + x{n,m}? +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 初期の ECMAScript の提案: [trailing function commas](https://github.com/tc39/proposal-trailing-function-commas) by Jeff Morrison diff --git a/files/ja/web/mathml/element/mfenced/index.html b/files/ja/web/mathml/element/mfenced/index.html index e931d5dc22..210ce30041 100644 --- a/files/ja/web/mathml/element/mfenced/index.html +++ b/files/ja/web/mathml/element/mfenced/index.html @@ -49,7 +49,7 @@ translation_of: Web/MathML/Element/mfenced <h3 id="余分な区切り記号（）は無視される">余分な区切り記号（<code>,</code>）は無視される</h3> -<p>サンプルレンダリング: <img alt="[a|b|c|d|e]" src="https://wiki.developer.mozilla.org/files/3195/mfenced02.png"></p> +<p>サンプルレンダリング: <img alt="[a|b|c|d|e]" src="/files/3195/mfenced02.png"></p> <p>ブラウザーでのレンダリング: <math> <mfenced close="]" open="[" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p> diff --git a/files/ja/web/security/securing_your_site/index.html b/files/ja/web/security/securing_your_site/index.html index 8d375d18b7..915c555d8c 100644 --- a/files/ja/web/security/securing_your_site/index.html +++ b/files/ja/web/security/securing_your_site/index.html @@ -19,7 +19,7 @@ translation_of: Web/Security/Securing_your_site <dl> <dt><a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion">フォームオートコンプリートを無効にするには</a></dt> <dd>Geckoではフォームのオートコンプリートがサポートされています。つまり、ユーザがフォームに入力した値を記憶し、次回訪問時には自動的にその値が入力されることになります。ある特定のデータに関しては、この機能を無効にしたほうが適切かもしれません。</dd> - <dt><a href="/ja/CSS/Privacy_and_the_:visited_selector" title="ja/CSS/Privacy and the :visited selector">プライバシーと :visited セレクター</a></dt> + <dt><a href="/ja/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a></dt> <dd>この記事では悪質なサイトがユーザーの閲覧履歴を取得できないようにするために <code>getComputedStyle()</code> メソッドに加えられた変更について議論しています。</dd> <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">安全なアルゴリズムを使用したパスワードのハッシュ</a> (OWASP)</dt> <dd>プレーンテキストでパスワードを格納すると、攻撃者がサイトのユーザーの正確なパスワードを知り、漏洩させることにつながり、ユーザーを危険にさらすことになります。古く安全ではないハッシュアルゴリズム (md5 など) を使用すると、同じ問題が浮上します。メッセージダイジェストアルゴリズム (md5 や sha) ではなくパスワード専用のハッシュアルゴリズム (Argon2, PBKDF2, scrypt, bcrypt など) を使用するようにしてください。この記事はパスワードを格納するときに使用することができるベストプラクティスのショーケースです。</dd> @@ -28,10 +28,10 @@ translation_of: Web/Security/Securing_your_site <h2 id="コンテンツセキュリティ">コンテンツセキュリティ</h2> <dl> - <dt><a href="/ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types" title="ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">サーバーの MIME タイプを正しく設定する</a></dt> + <dt><a href="/ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">サーバーの MIME タイプを正しく設定する</a></dt> <dd>MIME タイプを正しく設定しないと、幾つかの潜在的なセキュリティ上の問題が発生します。この記事ではそのうちのいくつかを紹介し、サーバーで MIME タイプを正しく設定する方法を示します。</dd> <dt><a href="/ja/docs/Web/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></dt> - <dd><code>Strict-Transport-Security:</code> <a href="/ja/HTTP" title="ja/HTTP">HTTP</a> ヘッダーを使うと、そのサイトが HTTPS でのみアクセスされるべきであるということを示すことができます。</dd> + <dd><code>Strict-Transport-Security:</code> <a href="/ja/HTTP">HTTP</a> ヘッダーを使うと、そのサイトが HTTPS でのみアクセスされるべきであるということを示すことができます。</dd> <dt><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御</a></dt> <dd>Cross-Origin Resource Sharing 標準はどのコンテンツが他のドメインから読み込まれるかを示す方法を提供します。この仕組みによりあなたのサイトが意図せず使われることを防いだり、明示的に使用を許可できます。</dd> <dt><a href="/ja/docs/Web/Security/CSP">Content Security Policy</a></dt> diff --git a/files/ja/web/svg/attribute/stroke-linecap/index.html b/files/ja/web/svg/attribute/stroke-linecap/index.html index f6aeccd337..f35c5842e7 100644 --- a/files/ja/web/svg/attribute/stroke-linecap/index.html +++ b/files/ja/web/svg/attribute/stroke-linecap/index.html @@ -7,7 +7,7 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-linecap --- -<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p> +<p>« <a href="/ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p> <p><code>stroke-linecap</code> 要素は線を引いた時の開いている部分パスの終端の形状を指定します。</p> @@ -68,6 +68,6 @@ translation_of: Web/SVG/Attribute/stroke-linecap <p>以下の要素で <code>stroke-linecap</code> を使うことができます</p> <ul> - <li><a href="/ja/docs/Web/SVG/Element#Shape" title="ja/docs/Web/SVG/Element#Shape">Shape 要素</a> »</li> - <li><a href="/ja/docs/Web/SVG/Element#TextContent" title="ja/docs/Web/SVG/Element#TextContent">Text content 要素</a> »</li> + <li><a href="/ja/docs/Web/SVG/Element#Shape">Shape 要素</a> »</li> + <li><a href="/ja/docs/Web/SVG/Element#TextContent">Text content 要素</a> »</li> </ul> diff --git a/files/ja/web/svg/attribute/stroke-linejoin/index.html b/files/ja/web/svg/attribute/stroke-linejoin/index.html index 3f72274f37..9c11e91b5e 100644 --- a/files/ja/web/svg/attribute/stroke-linejoin/index.html +++ b/files/ja/web/svg/attribute/stroke-linejoin/index.html @@ -7,7 +7,7 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-linejoin --- -<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/SVG/Attribute">SVG 属性リファレンスホーム</a></p> +<p>« <a href="/ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p> <p><code>stroke-linejoin</code> 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。</p> @@ -73,8 +73,8 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <p>以下の要素で <code>stroke-linejoin</code> 属性を使うことができます</p> <ul> - <li><a href="/ja/SVG/Element#Shape" title="ja/SVG/Element#Shape">Shape 要素</a> »</li> - <li><a href="/ja/SVG/Element#TextContent" title="ja/SVG/Element#TextContent">Text content 要素</a> »</li> + <li><a href="/ja/SVG/Element#Shape">Shape 要素</a> »</li> + <li><a href="/ja/SVG/Element#TextContent">Text content 要素</a> »</li> </ul> <p> </p> diff --git a/files/ja/web/svg/compatibility_sources/index.html b/files/ja/web/svg/compatibility_sources/index.html index 062a2f701d..f8f78b7a30 100644 --- a/files/ja/web/svg/compatibility_sources/index.html +++ b/files/ja/web/svg/compatibility_sources/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Compatibility_sources <p>以下の情報源が SVG 要素と属性の互換性の確認に活用できます。</p> <ul> - <li><a href="/ja/docs/SVG_in_Firefox" title="ja/docs/SVG_in_Firefox">https://wiki.developer.mozilla.org/ja/docs/SVG_in_Firefox</a> Firefoxに対する改編履歴あり</li> + <li><a href="/ja/docs/SVG_in_Firefox">https://developer.mozilla.org/ja/docs/SVG_in_Firefox</a> Firefoxに対する改編履歴あり</li> <li><a class="external" href="http://www.webkit.org/projects/svg/status.xml">http://www.webkit.org/projects/svg/status.xml</a> WebKit, Safari, Chrome 向けの<a class="external" href="http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml">記録書庫</a></li> <li>Opera 9 以降向けの追加情報は <a class="external" href="http://www.opera.com/docs/specs/opera9/svg/">http://www.opera.com/docs/specs/opera9/svg/</a> 、 Opera 8向けは <a class="external" href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a></li> <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx">http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx</a> IE9 向けの対応状況へのヒント</li> diff --git a/files/ja/web/svg/element/animatecolor/index.html b/files/ja/web/svg/element/animatecolor/index.html index 8c5927ffe4..1fbecd53f6 100644 --- a/files/ja/web/svg/element/animatecolor/index.html +++ b/files/ja/web/svg/element/animatecolor/index.html @@ -31,14 +31,14 @@ translation_of: Web/SVG/Element/animateColor <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> </ul> diff --git a/files/ja/web/svg/element/animatetransform/index.html b/files/ja/web/svg/element/animatetransform/index.html index 0113d15dbf..5cef265bb3 100644 --- a/files/ja/web/svg/element/animatetransform/index.html +++ b/files/ja/web/svg/element/animatetransform/index.html @@ -42,14 +42,14 @@ translation_of: Web/SVG/Element/animateTransform <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProccessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> </ul> diff --git a/files/ja/web/svg/element/lineargradient/index.html b/files/ja/web/svg/element/lineargradient/index.html index 123c6809c3..41aac08a01 100644 --- a/files/ja/web/svg/element/lineargradient/index.html +++ b/files/ja/web/svg/element/lineargradient/index.html @@ -26,9 +26,9 @@ translation_of: Web/SVG/Element/linearGradient <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> diff --git a/files/ja/web/svg/element/metadata/index.html b/files/ja/web/svg/element/metadata/index.html index 8925ae75ed..10d943d20b 100644 --- a/files/ja/web/svg/element/metadata/index.html +++ b/files/ja/web/svg/element/metadata/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Element/metadata <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> </ul> <h3 id="専用属性">専用属性</h3> diff --git a/files/ja/web/svg/element/radialgradient/index.html b/files/ja/web/svg/element/radialgradient/index.html index b617afb4fb..d948931e6c 100644 --- a/files/ja/web/svg/element/radialgradient/index.html +++ b/files/ja/web/svg/element/radialgradient/index.html @@ -20,9 +20,9 @@ translation_of: Web/SVG/Element/radialGradient <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> diff --git a/files/ja/web/svg/element/rect/index.html b/files/ja/web/svg/element/rect/index.html index 2a6e95ee9e..c4ad070e21 100644 --- a/files/ja/web/svg/element/rect/index.html +++ b/files/ja/web/svg/element/rect/index.html @@ -29,10 +29,10 @@ translation_of: Web/SVG/Element/rect <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#GraphicalEvent" title="ja/Web/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> diff --git a/files/ja/web/svg/element/set/index.html b/files/ja/web/svg/element/set/index.html index 0f2373d15b..ff85e944c3 100644 --- a/files/ja/web/svg/element/set/index.html +++ b/files/ja/web/svg/element/set/index.html @@ -25,12 +25,12 @@ translation_of: Web/SVG/Element/set <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> </ul> diff --git a/files/ja/web/svg/svg_animation_with_smil/index.html b/files/ja/web/svg/svg_animation_with_smil/index.html index 4961bed4e2..0d70f03fe8 100644 --- a/files/ja/web/svg/svg_animation_with_smil/index.html +++ b/files/ja/web/svg/svg_animation_with_smil/index.html @@ -3,7 +3,7 @@ title: SVG animation with SMIL slug: Web/SVG/SVG_animation_with_SMIL translation_of: Web/SVG/SVG_animation_with_SMIL --- -<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG" title="ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p> +<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p> <ul> <li>要素の数値属性 (x, y など) のアニメーション</li> diff --git a/files/ja/web/svg/tutorial/basic_shapes/index.html b/files/ja/web/svg/tutorial/basic_shapes/index.html index 2b87124f8a..9ad6201924 100644 --- a/files/ja/web/svg/tutorial/basic_shapes/index.html +++ b/files/ja/web/svg/tutorial/basic_shapes/index.html @@ -29,47 +29,47 @@ translation_of: Web/SVG/Tutorial/Basic_Shapes </pre> <div class="note"><strong>注意:</strong> <code>stroke</code>、<code>stroke-width</code> および <code>fill</code> の各属性は後のチュートリアルで説明します。</div> <h3 id="Rectangles" name="Rectangles">長方形</h3> -<p><a href="/ja/SVG/Element/rect" title="ja/SVG/Element/rect">rect</a> 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。</p> +<p><a href="/ja/SVG/Element/rect">rect</a> 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。</p> <pre class="eval"> <rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> </pre> <dl> <dt>x</dt> <dd>長方形の左上の角の位置を示す、X 座標です。</dd> <dt>y</dt> <dd>長方形の左上の角の位置を示す、Y 座標です。</dd> <dt>width</dt> <dd>長方形の幅です。</dd> <dt>height</dt> <dd>長方形の高さです。</dd> <dt>rx</dt> <dd>長方形の角の、X 軸方向の半径です。</dd> <dt>ry</dt> <dd>長方形の角の、Y 軸方向の半径です。</dd> </dl> <h3 id="Circle" name="Circle">円</h3> -<p>おそらくあなたの推測どおりで、<a href="/ja/SVG/Element/circle" title="ja/SVG/Element/circle">circle</a> 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。</p> +<p>おそらくあなたの推測どおりで、<a href="/ja/SVG/Element/circle">circle</a> 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。</p> <pre class="eval"> <circle cx="25" cy="75" r="20"/> </pre> <dl> <dt>r</dt> <dd>円の半径です。</dd> <dt>cx</dt> <dd>円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>円の中心の位置を示す、Y 座標です。</dd> </dl> <h3 id="Ellipse" name="Ellipse">楕円</h3> -<p><a href="/ja/SVG/Element/ellipse" title="ja/SVG/Element/ellipse">ellipse</a> は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。</p> +<p><a href="/ja/SVG/Element/ellipse">ellipse</a> は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。</p> <pre class="eval"> <ellipse cx="75" cy="75" rx="20" ry="5"/> </pre> <dl> <dt>rx</dt> <dd>楕円の X 軸方向の半径です。</dd> <dt>ry</dt> <dd>楕円の Y 軸方向の半径です。</dd> <dt>cx</dt> <dd>楕円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>楕円の中心の座標を示す、Y 座標です。</dd> </dl> <h3 id="Line" name="Line">直線</h3> -<p><a href="/ja/SVG/Element/line" title="ja/SVG/Element/line">line</a> は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。</p> +<p><a href="/ja/SVG/Element/line">line</a> は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。</p> <pre class="eval"> <line x1="10" x2="50" y1="110" y2="150"/> </pre> <dl> <dt>x1</dt> <dd>点 1 の X 座標です。</dd> <dt>y1</dt> <dd>点 1 の Y 座標です。</dd> <dt>x2</dt> <dd>点 2 の X 座標です。</dd> <dt>y2</dt> <dd>点 2 の Y 座標です。</dd> </dl> <h3 id="Polyline" name="Polyline">ポリライン</h3> -<p><a href="/ja/SVG/Element/polyline" title="ja/SVG/Element/polyline">polyline</a> は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:</p> +<p><a href="/ja/SVG/Element/polyline">polyline</a> は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:</p> <pre class="eval"> <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> </pre> <dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。</dd> </dl> <h3 id="Polygon" name="Polygon">多角形</h3> -<p><a href="/ja/SVG/Element/polygon" title="ja/SVG/Element/polygon">polygon</a> は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <code><rect/></code> 要素を作成するために polygon を用いることができることに留意してください。</p> +<p><a href="/ja/SVG/Element/polygon">polygon</a> は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <code><rect/></code> 要素を作成するために polygon を用いることができることに留意してください。</p> <pre class="eval"> <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> </pre> <dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。パスを閉じるように描画するため、最後の直線は (2,2) から (0,0) に描画されます。</dd> </dl> <h3 id="Path" name="Path">パス</h3> -<p><a href="/ja/SVG/Element/path" title="ja/SVG/Element/path">path</a> は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの<a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">次のセクション</a>に独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。</p> +<p><a href="/ja/SVG/Element/path">path</a> は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの<a href="/ja/SVG/Tutorial/Paths">次のセクション</a>に独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。</p> <pre class="eval"> <path d="M 20 230 Q 40 205, 50 230 T 90230"/> </pre> -<dl> <dt>d</dt> <dd>点のリストと、パスの描画方法に関する情報です。詳しくは <a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">Paths</a> をご覧ください。</dd> +<dl> <dt>d</dt> <dd>点のリストと、パスの描画方法に関する情報です。詳しくは <a href="/ja/SVG/Tutorial/Paths">Paths</a> をご覧ください。</dd> </dl> <p>{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}</p> <p><span class="comment">Interwiki Languages Links</span></p> diff --git a/files/ja/web/svg/tutorial/patterns/index.html b/files/ja/web/svg/tutorial/patterns/index.html index e0b7fcd4fb..a79fe98e90 100644 --- a/files/ja/web/svg/tutorial/patterns/index.html +++ b/files/ja/web/svg/tutorial/patterns/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Tutorial/Patterns --- <p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p> -<p>私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<a href="/ja/SVG/Element/pattern" title="ja/SVG/Element/pattern"><code><pattern></code></a> 要素は SVG ファイルの <code><defs></code> セクションに置かなければなりません。</p> +<p>私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<a href="/ja/SVG/Element/pattern"><code><pattern></code></a> 要素は SVG ファイルの <code><defs></code> セクションに置かなければなりません。</p> <p><img alt="" class="internal" src="/@api/deki/files/350/=SVG_Pattern_Example.png" style="float: right;"></p> |
/linear-gradient.png?h=dependabot/github_actions/actions/labeler-4&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}
/radial_gradient.png?h=dependabot/github_actions/actions/labeler-4&id=fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f){kind=link}
