diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-14 12:18:12 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-14 12:18:12 -0500 |
commit | 869dd2069c695ee7040cd3261713212155819f42 (patch) | |
tree | 320a95de75a89686a9df006b90d923aa7fa0d551 /files/ja/web | |
parent | a5fcfafb665e96cae5d04dfba927db8dcdfd7f14 (diff) | |
download | translated-content-869dd2069c695ee7040cd3261713212155819f42.tar.gz translated-content-869dd2069c695ee7040cd3261713212155819f42.tar.bz2 translated-content-869dd2069c695ee7040cd3261713212155819f42.zip |
final dump 2020-12-14
Diffstat (limited to 'files/ja/web')
10 files changed, 190 insertions, 126 deletions
diff --git a/files/ja/web/css/_colon_-moz-drag-over/index.html b/files/ja/web/css/_colon_-moz-drag-over/index.html index f52d2475d1..7415097af4 100644 --- a/files/ja/web/css/_colon_-moz-drag-over/index.html +++ b/files/ja/web/css/_colon_-moz-drag-over/index.html @@ -3,10 +3,14 @@ title: ':-moz-drag-over' slug: 'Web/CSS/:-moz-drag-over' tags: - CSS - - Mozilla 拡張 + - 'CSS:Mozilla Extensions' + - Firefox + - Mozilla + - NeedsCompatTable - Non-standard + - Pseudo-class - Reference - - 疑似クラス + - Selector translation_of: 'Web/CSS/:-moz-drag-over' --- <div>{{CSSRef}}{{Non-standard_header}}</div> @@ -15,14 +19,14 @@ translation_of: 'Web/CSS/:-moz-drag-over' <h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">:-moz-drag-over +<pre class="syntaxbox notranslate">:-moz-drag-over </pre> -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples" name="Examples">例</h2> <h3 id="HTML">HTML</h3> -<pre class="brush:html"><table border="1"> +<pre class="brush:html notranslate"><table border="1"> <tr> <td width="100px" height="100px">Drag Over</td> </tr> @@ -31,7 +35,7 @@ translation_of: 'Web/CSS/:-moz-drag-over' <h3 id="CSS">CSS</h3> -<pre class="brush:css">td:-moz-drag-over { +<pre class="brush:css notranslate">td:-moz-drag-over { color: red; } </pre> @@ -39,3 +43,20 @@ translation_of: 'Web/CSS/:-moz-drag-over' <h3 id="Result" name="Result">結果</h3> <p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>いずれの標準にも含まれていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.selectors:-moz-drag-over")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla の CSS 拡張</a></li> + <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML ドラッグ&ドロップ</a></li> +</ul> diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html index c5816dd2ca..1bc44e63ed 100644 --- a/files/ja/web/css/_colon_focus-within/index.html +++ b/files/ja/web/css/_colon_focus-within/index.html @@ -2,21 +2,21 @@ title: ':focus-within' slug: 'Web/CSS/:focus-within' tags: + - ':focus' + - ':focus-within' - CSS - Layout + - Pseudo-class - Reference + - Selector - Web - - ウェブ - - セレクター - - レイアウト - - 疑似クラス translation_of: 'Web/CSS/:focus-within' --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:focus-within</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は、フォーカスを持っているか、フォーカスを持った要素を<em>含む</em>要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 疑似クラスに該当するか、子孫に <code>:focus</code> に該当する要素がある要素を表します。 (これは<a href="/ja/docs/Web/Web_Components/Shadow_DOM">シャドウツリー</a>における子孫も含みます。)</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:focus-within</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">擬似クラス</a>は、フォーカスを持っているか、フォーカスを持った要素を<em>含む</em>要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に <code>:focus</code> に該当する要素がある要素を表します。 (これは<a href="/ja/docs/Web/Web_Components/Shadow_DOM">シャドウツリー</a>における子孫も含みます。)</p> -<pre class="brush: css no-line-numbers">/* 子孫要素の一つにフォーカスがある <div> を選択 */ +<pre class="brush: css no-line-numbers notranslate">/* 子孫要素の一つにフォーカスがある <div> を選択 */ div:focus-within { background: cyan; }</pre> @@ -25,15 +25,15 @@ div:focus-within { <h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">{{CSSSyntax}}</pre> +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples" name="Examples">例</h2> <p>この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。</p> <h3 id="HTML">HTML</h3> -<pre class="brush: html"><p>このフォームに入力してみてください。</p> +<pre class="brush: html notranslate"><p>このフォームに入力してみてください。</p> <form> <label for="given_name">名前:</label> @@ -45,7 +45,7 @@ div:focus-within { <h3 id="CSS">CSS</h3> -<pre class="brush: css highlight[7]">form { +<pre class="brush: css highlight[7] notranslate">form { border: 1px solid; color: gray; padding: 4px; @@ -63,7 +63,7 @@ input { <h3 id="Result" name="Result">結果</h3> -<p>{{EmbedLiveSample("Example", 500, 150)}}</p> +<p>{{EmbedLiveSample("Examples", 500, 150)}}</p> <h2 id="Specifications" name="Specifications">仕様書</h2> @@ -84,7 +84,7 @@ input { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> @@ -95,4 +95,5 @@ input { <ul> <li>{{CSSxRef(":focus")}}</li> <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li><a href="https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4">Grab your user's attention with the focus-within selector</a></li> </ul> diff --git a/files/ja/web/css/_colon_lang/index.html b/files/ja/web/css/_colon_lang/index.html index 85c6321ad1..ea0bb496a5 100644 --- a/files/ja/web/css/_colon_lang/index.html +++ b/files/ja/web/css/_colon_lang/index.html @@ -3,60 +3,60 @@ title: ':lang' slug: 'Web/CSS/:lang' tags: - CSS - - ウェブ - - セレクター - - リファレンス - - レイアウト - - 疑似クラス + - Layout + - Pseudo-class + - Reference + - Selector + - Web translation_of: 'Web/CSS/:lang' --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:lang()</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a> は、要素を定義された言語に基づいて選択します。</p> +<p><strong><code>:lang()</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、指定された言語に基づいて要素に一致させます。</p> -<pre class="brush: css no-line-numbers">/* 英語 (en) の <p> をすべて選択 */ +<pre class="brush: css no-line-numbers notranslate">/* <p> のうち English (en) のものをすべて選択 */ p:lang(en) { quotes: '\201C' '\201D' '\2018' '\2019'; }</pre> <div class="note"> -<p><strong>メモ:</strong> HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報(HTTP ヘッダーなど)の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。</p> +<p><strong>メモ:</strong> HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。</p> </div> <h2 id="Syntax" name="Syntax">構文</h2> <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> -<pre class="syntaxbox">{{csssyntax}}</pre> +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> <h3 id="Parameter" name="Parameter">引数</h3> <dl> <dt><code><language-code></code></dt> - <dd>対象としたい言語を表す {{cssxref("<string>")}} です。利用可能な値は <a href="/ja/docs/Web/HTML">HTML</a> の仕様書で定義されています。</dd> + <dd>{{cssxref("<string>")}} で、ターゲットにしたい言語を表します。受付可能な値は <a href="/ja/docs/Web/HTML">HTML</a> 仕様書で定義されています。</dd> </dl> <h2 id="Example" name="Example">例</h2> -<p>この例では、 <a href="/en-US/docs/Web/CSS/Child_selectors">子結合子</a> を使用して引用要素 ({{htmlElement("q")}}) の親を選択するために <code>:lang()</code> 疑似クラスを使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。</p> +<p>この例では、 <code>:lang()</code> 疑似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために <a href="/ja/docs/Web/CSS/Child_selectors">子結合子</a> を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。</p> <h3 id="HTML">HTML</h3> -<pre class="brush: html"><div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div> +<pre class="brush: html notranslate"><div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div> </pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css">:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; } +<pre class="brush: css notranslate">:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; } :lang(fr) > q { quotes: '« ' ' »'; } :lang(de) > q { quotes: '»' '«' '\2039' '\203A'; } </pre> <h3 id="Result" name="Result">結果</h3> -<p>{{EmbedLiveSample('Example', 350)}}</p> +<p>{{EmbedLiveSample('Examples', 350)}}</p> <h2 id="Specifications" name="Specifications">仕様書</h2> @@ -64,8 +64,8 @@ p:lang(en) { <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> @@ -87,10 +87,10 @@ p:lang(en) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> <div> -<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> <p>{{Compat("css.selectors.lang")}}</p> </div> @@ -98,7 +98,8 @@ p:lang(en) { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li>言語に関する疑似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> - <li>HTML の {{htmlattrxref("lang")}} attribute</li> - <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - 言語を識別するタグ</a></li> + <li>原語に関する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> + <li>HTML の {{htmlattrxref("lang")}} 属性</li> + <li>HTML の {{htmlattrxref("translate")}} 属性</li> + <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Tags for Identifying Languages</a></li> </ul> diff --git a/files/ja/web/css/contain-intrinsic-size/index.html b/files/ja/web/css/contain-intrinsic-size/index.html new file mode 100644 index 0000000000..a62a3a121a --- /dev/null +++ b/files/ja/web/css/contain-intrinsic-size/index.html @@ -0,0 +1,49 @@ +--- +title: contain-intrinsic-size +slug: Web/CSS/contain-intrinsic-size +translation_of: Web/CSS/contain-intrinsic-size +--- +<p>{{CSSRef}}</p> + +<p><code>contains-intrinsic-size</code> CSSプロパティは、<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/content-visibility"><code>content-visibility</code></a>で指定された要素の自然なサイズを制御します。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <length> values */ +contain-intrinsic-size: 1000px; +contain-intrinsic-size: 10rem; + +/* <percentage> value */ +contain-intrinsic-size: 10%; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Sizing', '#propdef-contain-intrinsic-size')}}</td> + <td>{{Spec2('CSS4 Sizing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.contain-intrinsic-size")}}</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="https://web.dev/content-visibility/">content-visibility: the new CSS property that boosts your rendering performance</a> (web.dev)</li> +</ul> diff --git a/files/ja/web/css/content-visibility/index.html b/files/ja/web/css/content-visibility/index.html index d480c67fed..ac51db4435 100644 --- a/files/ja/web/css/content-visibility/index.html +++ b/files/ja/web/css/content-visibility/index.html @@ -5,12 +5,10 @@ translation_of: Web/CSS/content-visibility --- <p>{{CSSRef}}</p> -<p><span style="">content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。</span></p> +<p><span>content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。</span></p> <p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>文法</strong></span></font></p> - - <pre class="brush: css no-line-numbers notranslate">/* Keyword values */ content-visibility: visible; content-visibility: hidden; @@ -21,22 +19,16 @@ content-visibility: initial; content-visibility: unset; </pre> - - <h3 id="値">値</h3> <dl> <dt><code>visible</code></dt> <dd> <p dir="ltr" id="tw-target-text">無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。</p> - - </dd> <dt><code>hidden</code></dt> <dd> <p dir="ltr" id="tw-target-text">要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、<code>display: none</code>をコンテンツに与えるのと似ています。</p> - - </dd> <dt><code>auto</code></dt> <dd> 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 2ca01d4bc6..764104469a 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 @@ -62,7 +62,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); - gap: 10px; + grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" @@ -96,7 +96,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p> </div> -<p><code>align-self: start</code> を設定すると、それぞれの子 <code><div></code> の高さは <code><div> </code>の中身によって決定されることを覚えておいてください。対照的に、<code><a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-self">align-items</a></code> を完全に省略すると、それぞれの子 <code><div></code> の高さはグリッドエリアを満たすように広がります。</p> +<p><code>align-self: start</code> を設定すると、それぞれの子 <code><div></code> の高さはコンテンツの <code><div></code> によって決定されることを覚えておいてください。また、<code><a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-self">align-self</a></code> を完全に省略すると、それぞれの子 <code><div></code> の高さはグリッドエリアを満たすように広がります。</p> <p>{{cssxref("align-items")}} プロパティはすべての子グリッドアイテムに {{cssxref("align-self")}} プロパティを設定します。これは、グリッドアイテム上で <code>align-self</code> を使えばプロパティを個別に設定できるということです。</p> @@ -125,7 +125,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); - gap: 10px; + grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" @@ -161,11 +161,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p> </div> -<h3 id="固有のアスペクト比を持つアイテム">固有のアスペクト比を持つアイテム</h3> +<h3 id="アイテムと固有のアスペクト比">アイテムと固有のアスペクト比</h3> <p>デフォルトでは、{{cssxref("align-self")}} の振る舞いはアイテムを広げます。しかし、固有のアスペクト比を持つアイテムの振る舞いは <code>start</code> になります。固有のアスペクト比を持つアイテムにデフォルトで <code>stretch</code> を設定するとアイテムを歪めるからです。</p> -<p>この振る舞いは現在、仕様で明確になっていますが、ブラウザーへの実装はまだ途上です。それまでの間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を <code>start</code> に設定することによって、グリッドの直接の子である画像などのアイテムが、デフォルトで広がらないことを保証できます。これは正しい動作を模倣します。</p> +<p>この振る舞いは現在、仕様で明確になっていますが、ブラウザーはまだ正しく実装していません。その間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を <code>start</code> に設定することによって、画像などのアイテムがグリッドの直接の子のようにデフォルトで広がらないことを保証できます。これは正しい動作を模倣します。</p> <h2 id="インライン軸上のアイテムの位置揃え">インライン軸上のアイテムの位置揃え</h2> @@ -210,7 +210,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); - gap: 10px; + grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" @@ -248,11 +248,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>{{cssxref("align-self")}} と {{cssxref("align-items")}} と同様に、グリッドコンテナに {{cssxref("justify-items")}} を適用することで、すべてのアイテムに {{cssxref("justify-self")}} の値を設定できます。</p> -<p>{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティは<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>に実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを両端揃えすることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。</p> +<p>{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティは<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>に実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを揃えることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。</p> <h3 id="ショートハンドプロパティ">ショートハンドプロパティ</h3> -<p>{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-self")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。</p> +<p>{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-item")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。</p> <h2 id="エリア内のアイテムを中央に揃える">エリア内のアイテムを中央に揃える</h2> @@ -281,7 +281,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <pre class="brush: css notranslate">.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 10px; + grid-gap: 10px; grid-auto-rows: 200px; grid-template-areas: ". a a ." @@ -304,7 +304,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <h2 id="ブロック軸上のグリッドトラックの配置">ブロック軸上のグリッドトラックの配置</h2> -<p>グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸上のトラックを配置し、{{cssxref("justify-content")}} はインライン軸上の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。</p> +<p>グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸方向でトラックを配置し、{{cssxref("justify-content")}} はインライン軸方向の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。</p> <ul> <li><code>normal</code></li> @@ -320,9 +320,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <li><code>last baseline</code></li> </ul> -<p>以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも空間があることを意味します。</p> +<p>以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも隙間があることを意味します。</p> -<p><code>align-content</code> プロパティはグリッド全体のグリッドコンテナに適用されます。グリッドレイアウトでのデフォルトの振る舞いは <code>start</code> で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドラインの始まりに対して整列しています。</p> +<p><code>align-content</code> プロパティはグリッドコンテナに、すなわちすべてのグリッドに適用されます。グリッドレイアウトでのデフォルトの振る舞いは <code>start</code> で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドが始まるラインに合わせて整列しています。</p> <div id="alignment_5"> <div class="hidden"> @@ -350,7 +350,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; - gap: 10px; + grid-gap: 10px; grid-template-areas: "a a b" "a a b" @@ -409,7 +409,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; - gap: 10px; + grid-gap: 10px; grid-template-areas: "a a b" "a a b" @@ -503,7 +503,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>スペース配分の値を使用すると、グリッド上のアイテムが大きくなる可能性があることに注意してください。アイテムが複数のグリッドトラックにまたがる場合、トラック間にさらにスペースを追加すると、アイテムはその分大きくなる必要があります。グリッドは常に厳密です。したがって、これらの値を使用する場合は、トラックの内容が追加のスペースに対応できるようにするか、整列プロパティを使用して引き伸ばさず始点に置くようにします。</p> -<p>下の図では、<code>align-content</code> と <code>start</code> で配置したグリッドの隣に、<code>align-content</code> を <code>space-between</code> に設定して配置したグリッドがあります。2 つのトラックの間にスペースを取るとき、2 つの行トラックにまたがる Item 1 と 2 が どのように余分な高さを確保しているか見てください。</p> +<p>下の図では、<code>align-content</code> を <code>start</code> にして配置したグリッドの隣に、<code>align-content</code> を <code>space-between</code> に設定して配置したグリッドがあります。2 つのトラックの間にスペースを取るとき、2 つの行トラックにまたがる Item 1 と 2 が どのように余分な高さを確保しているか見てください。</p> <p><img alt="space-between を使用したときアイテムがどのように大きくなるかのデモ。" src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> @@ -539,7 +539,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; - gap: 10px; + grid-gap: 10px; grid-template-areas: "a a b" "a a b" @@ -604,7 +604,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; - gap: 10px; + grid-gap: 10px; grid-template-areas: "a a b" "a a b" diff --git a/files/ja/web/html/element/main/index.html b/files/ja/web/html/element/main/index.html index 8c3e730415..275070480d 100644 --- a/files/ja/web/html/element/main/index.html +++ b/files/ja/web/html/element/main/index.html @@ -2,13 +2,11 @@ title: <main> slug: Web/HTML/Element/main tags: + - Element - HTML - - HTML コンテンツグループ化 - - 'HTML:フローコンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML sections - Reference - main - - 要素 translation_of: Web/HTML/Element/main --- <div>{{HTMLRef}}</div> @@ -24,12 +22,12 @@ translation_of: Web/HTML/Element/main <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#Flow_content">フローコンテンツ</a></td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> </tr> <tr> <th scope="row">タグの省略</th> @@ -37,11 +35,15 @@ translation_of: Web/HTML/Element/main </tr> <tr> <th scope="row">許可されている親要素</th> - <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れる場所、但し<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">階層的に正しい <code>main</code> 要素であること</a>。</td> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れる場所、但し<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">階層的に正しい <code>main</code> 要素であること</a>。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code></td> </tr> <tr> <th scope="row">許可されている ARIA ロール</th> - <td>既定で <code><main></code> 要素に <code>main</code> ロールを適用します。また、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> ロールも許可されます。</td> + <td>許可されている <code>role</code> なし</td> </tr> <tr> <th scope="row">DOM インターフェイス</th> @@ -62,7 +64,7 @@ translation_of: Web/HTML/Element/main <h2 id="Example" name="Example">例</h2> -<pre class="brush: html"><!-- 他のコンテンツ --> +<pre class="brush: html notranslate"><!-- 他のコンテンツ --> <main> <h1>Apples</h1> @@ -87,7 +89,7 @@ translation_of: Web/HTML/Element/main <!-- 他のコンテンツ --></pre> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> <h3 id="Landmark" name="Landmark">ランドマーク</h3> @@ -99,7 +101,7 @@ translation_of: Web/HTML/Element/main <p>{{htmlattrxref("id")}} 属性を追加することで、 <code><main></code> 要素がスキップナビゲーションリンクのターゲットになることができます。</p> -<pre><span class="tag"><body</span><span class="tag">> +<pre class="brush: html notranslate"><body> <a href="#main-content">Skip to main content</a> <!-- navigation and header content --> @@ -107,7 +109,7 @@ translation_of: Web/HTML/Element/main <main id="main-content"> <!-- main page content --> </main> -</body></span> +</body> </pre> <ul> @@ -153,9 +155,9 @@ translation_of: Web/HTML/Element/main <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p><code><main></code> は広く対応されています。 Internet Explorer 11 およびそれ以前については、アクセシビリティにするために <code><main></code> 要素に ARIA の <code>"main"</code> ロールを追加することが提案されています (JAWS のような、古い Internet Explorer との組み合わせで使用する読み上げソフトは、 <code>role</code> 属性を含めれば <code><main></code> 要素の意味論的な意味を理解できるでしょう)。</p> +<p><code><main></code> は広く対応されています。 Internet Explorer 11 およびそれ以前については、アクセシビリティのために {{glossary("ARIA")}} の <code>"main"</code> ロールを <code><main></code> 要素に追加することが提案されています (JAWS のような、古い Internet Explorer との組み合わせで使用する読み上げソフトは、 <code><main></code> 要素の意味論的な意味を <code>role</code> 属性を含めることで理解できるでしょう)。</p> -<pre class="brush: html"><main role="main"> +<pre class="brush: html notranslate"><main role="main"> ... </main> </pre> diff --git a/files/ja/web/html/index.html b/files/ja/web/html/index.html index 7a9889c191..12d6268117 100644 --- a/files/ja/web/html/index.html +++ b/files/ja/web/html/index.html @@ -21,19 +21,16 @@ translation_of: Web/HTML <p>以下の記事が HTML についてもっと学ぶのに役立ちます。</p> -<section class="cleared" id="sect1"> -<ul class="card-grid"> - <li><span>HTML 入門</span> - - <p>ウェブ開発が初めてであれば、 HTML とは何か、 HTML の使用方法を説明する<a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTMLの基本</a>をご覧ください。</p> - </li> - <li><span>HTML チュートリアル</span> - <p>チュートリアルや例を含む HTML の使用方法に関する記事は、<a href="/ja/docs/Learn/HTML">HTML 学習エリア</a>を確認してください。</p> - </li> - <li><span>HTML リファレンス</span> - <p>広範な <a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a>の章で、 HTML のすべての要素と属性についての詳細が分かります。</p> - </li> -</ul> +<h2 id="中心的なリソース">中心的なリソース</h2> + +<dl> + <dt><span>HTML 入門</span></dt> + <dd>ウェブ開発が初めてであれば、 HTML とは何か、 HTML の使用方法を説明する<a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTMLの基本</a>をご覧ください。</dd> + <dt><span>HTML チュートリアル</span></dt> + <dd>チュートリアルや例を含む HTML の使用方法に関する記事は、<a href="/ja/docs/Learn/HTML">HTML 学習エリア</a>を確認してください。</dd> + <dt><span>HTML リファレンス</span></dt> + <dd>広範な <a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a>の章で、 HTML のすべての要素と属性についての詳細が分かります。</dd> +</dl> <div class="in-page-callout webdev"> <h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために</h3> @@ -106,4 +103,5 @@ translation_of: Web/HTML </dl> </div> </div> -<span class="alllinks"><a href="/ja/docs/tag/HTML">すべて表示...</a></span></section> + +<p><span class="alllinks"><a href="/ja/docs/tag/HTML">すべて表示...</a></span></p> diff --git a/files/ja/web/html/preloading_content/index.html b/files/ja/web/html/preloading_content/index.html index 71b388638b..2ad6f0ceab 100644 --- a/files/ja/web/html/preloading_content/index.html +++ b/files/ja/web/html/preloading_content/index.html @@ -114,11 +114,11 @@ translation_of: Web/HTML/Preloading_content <h2 id="Cross-origin_fetches" name="Cross-origin_fetches">オリジンをまたいだフェッチ</h2> -<p>If you've got your sites' <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <code><link></code> element.</p> +<p>CORSを有効にしてフェッチ(例えば、<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> or <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@font-face">fonts</a>)されたリソースをプリロードするとき、<code><link></code>要素に{{htmlattrxref( "crossorigin"、 "link")}}属性を設定する場合には特別な注意が必要です。</p> -<p>One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>).</p> +<p dir="ltr" id="tw-target-text">上記のように、これが当てはまる興味深いケースの1つは、フォントファイルです。さまざまな理由により、これらは匿名モードのCORSを使用してフェッチする必要があります(<a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>参照)。</p> -<p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> +<p>このケースを例として使用してみましょう。完全なサンプルソースコードは <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> <pre class="brush: html notranslate"><head> <meta charset="utf-8"> @@ -133,7 +133,7 @@ translation_of: Web/HTML/Preloading_content … </body></pre> -<p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to handle the CORS issue.</p> +<p dir="ltr" id="tw-target-text"><code>type</code>属性にMIMEタイプヒントを提供するだけでなく、プリロードのCORSモードが最終的なフォントリソースリクエストと一致することを確認するために、<code>crossorigin</code>属性も提供しています。</p> <h2 id="Including_media" name="Including_media">media を含める</h2> diff --git a/files/ja/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.html index 2a1932a00b..c424b35d1d 100644 --- a/files/ja/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.html +++ b/files/ja/web/javascript/reference/global_objects/intl/numberformat/numberformat/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/Number --- <div>{{JSRef}}</div> -<p><strong><code>Intl.NumberFormat()</code></strong> コンストラクターは、言語に依存した数値の書式を有効にするオブジェクトを生成します。</p> +<p><strong><code>Intl.NumberFormat()</code></strong> コンストラクターは、言語に依存した数値の整形ができるオブジェクトを生成します。</p> <div>{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}</div> @@ -60,30 +60,30 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/Number <dt><code>notation</code></dt> <dd>数値を表示するための書式です。既定値は "<code>standard</code>" です。 <ul> - <li>"<code>standard</code>" 通常の数値の書式です。</li> - <li>"<code>scientific</code>" return the order-of-magnitude for formatted number.</li> - <li>"<code>engineering</code>" return the exponent of ten when divisible by three</li> - <li>"<code>compact</code>" string representing exponent, defaults is using the "short" form.</li> + <li>"<code>standard</code>" は、通常の数値の書式です。</li> + <li>"<code>scientific</code>" は、整形された数値の次数をを返します。</li> + <li>"<code>engineering</code>" は、3で割ることができる場合に10のべき乗を返します。</li> + <li>"<code>compact</code>" は、指数表記を表す文字列で、既定値は "short" の形式を使用したものです。</li> </ul> </dd> <dt><code>numberingSystem</code></dt> - <dd>Numbering System. Possible values include: "<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> + <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>signDisplay</code></dt> - <dd>When to display the sign for the number; defaults to "<code>auto</code>" + <dd>数値の符号を表示するときです。既定値は "<code>auto</code>" です。 <ul> - <li>"<code>auto</code>" sign display for negative numbers only</li> - <li>"<code>never</code>" never display sign</li> - <li>"<code>always</code>" always display sign</li> - <li>"<code>exceptZero</code>" sign display for positive and negative numbers, but not zero</li> + <li>"<code>auto</code>" は、負の数のみ符号を表示します。</li> + <li>"<code>never</code>" は、符号を表示しません。</li> + <li>"<code>always</code>" は、常に符号を表示します。</li> + <li>"<code>exceptZero</code>" は正の数と負の数には符号を表示しますが、ゼロには表示しません。</li> </ul> </dd> <dt><code>style</code></dt> - <dd>The formatting style to use , the default is "<code>decimal</code>". + <dd>使用する整形スタイルで、既定値は "<code>decimal</code>" です。 <ul> - <li>"<code>decimal</code>" for plain number formatting.</li> - <li>"<code>currency</code>" for currency formatting.</li> - <li>"<code>percent</code>" for percent formatting</li> - <li>"<code>unit</code>" for unit formatting</li> + <li>"<code>decimal</code>" は、ふつうの数値の整形に使用します。</li> + <li>"<code>currency</code>" は、通貨の整形に使用します。</li> + <li>"<code>percent</code>" は、パーセントの整形に使用します。</li> + <li>"<code>unit</code>" は単位の整形に使用します。</li> </ul> </dd> <dt><code>unit</code></dt> @@ -120,16 +120,16 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/Number <h2 id="Examples" name="Examples">例</h2> -<h3 id="Basic_usage">Basic usage</h3> +<h3 id="Basic_usage" name="Basic_usage">基本的な使用</h3> -<p>In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.</p> +<p>特定のロケールなしで使用すると、既定のロケール、既定のオプションで整形された文字列が返されます。</p> <pre class="brush: js notranslate">let amount = 3500; console.log(new Intl.NumberFormat().format(amount)); // → '3,500' if in US English locale</pre> -<h3 id="Decimal_and_percent_formatting">Decimal and percent formatting</h3> +<h3 id="Decimal_and_percent_formatting" name="Decimal_and_percent_formatting">十進数とパーセントの整形</h3> <pre class="brush: js notranslate">let amount = 3500; @@ -139,9 +139,9 @@ new Intl.NumberFormat('en-US', {style: 'percent'}).format(amount); // → '350,000%' </pre> -<h3 id="Unit_formatting">Unit formatting</h3> +<h3 id="Unit_formatting" name="Unit_formatting">単位の整形</h3> -<p>If the <code>style</code> is <code>'unit'</code>, a <code>unit</code> property must be provided. Optionally, <code>unitDisplay</code> controls the unit formatting.</p> +<p><code>style</code> が <code>'unit'</code> である場合、 <code>unit</code> プロパティを提供する必要があります。オプションで、 <code>unitDisplay</code> が単位の整形を制御します。</p> <pre class="brush: js notranslate">let amount = 3500; @@ -152,9 +152,9 @@ new Intl.NumberFormat('en-US', {style: 'unit', unit: 'liter', unitDisplay: 'long // → '3,500 liters' </pre> -<h3 id="Currency_formatting">Currency formatting</h3> +<h3 id="Currency_formatting" name="Currency_formatting">通貨の整形</h3> -<p>If the <code>style</code> is <code>'currency'</code>, a <code>currency</code> property must be provided. Optionally, <code>currencyDisplay</code> and <code>currencySign</code> control the unit formatting.</p> +<p><code>style</code> が <code>'currency'</code> であった場合、 <code>currency</code> プロパティを提供する必要があります。オプションで、 <code>currencyDisplay</code> および <code>currencySign</code> が単位の整形を制御します。</p> <pre class="brush: js notranslate">let amount = -3500; new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(amount); @@ -175,9 +175,9 @@ new Intl.NumberFormat('bn', { // → '($3,500.00)' </pre> -<h3 id="Scientific_engineering_or_compact_notations">Scientific, engineering or compact notations</h3> +<h3 id="Scientific_engineering_or_compact_notations" name="Scientific_engineering_or_compact_notations">科学、工学、短縮表記</h3> -<p>Scientific and compact notation are represented by the <code>notation</code> option and can be formatted like this:</p> +<p>科学の短縮表記は <code>notation</code> オプションで表すことができ、以下のようになります。</p> <pre class="brush: js notranslate">new Intl.NumberFormat('en-US', { notation: "scientific" }).format(987654321); // → 9.877E8 @@ -206,9 +206,9 @@ new Intl.NumberFormat('en-GB', { }).format(987654321); // → 988M</pre> -<h3 id="Displaying_signs">Displaying signs</h3> +<h3 id="Displaying_signs" name="Displaying_signs">符号の表示</h3> -<p>Display a sign for positive and negative numbers, but not zero:</p> +<p>正の数と負の数に符号を表示し、ゼロには表示しない場合は次のようにします。</p> <pre class="brush: js notranslate">new Intl.NumberFormat("en-US", { style: "percent", @@ -216,7 +216,7 @@ new Intl.NumberFormat('en-GB', { }).format(0.55); // → '+55%'</pre> -<p>Note that when the currency sign is "accounting", parentheses might be used instead of a minus sign:</p> +<p>なお、通貨の符号が "accounting" である場合、負号の代わりに括弧が使用されることがあります。</p> <pre class="brush: js notranslate">new Intl.NumberFormat('bn', { style: 'currency', |