diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-14 23:03:58 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-14 23:03:58 +0900 |
| commit | 57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02 (patch) | |
| tree | 1474a1556c2a424b38813183bab570529ff39c90 /files | |
| parent | 192e9f4e82a2ad89ac985e715d63b70be9bf5996 (diff) | |
| download | translated-content-57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02.tar.gz translated-content-57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02.tar.bz2 translated-content-57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02.zip | |
Web/CSS以下の文書内のリンクURLを正規化 (#2368)
- /en-US へのリンクを /ja へのリンクに修正
- /ja が付いていないものに /ja を付加
- MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正
Diffstat (limited to 'files')
66 files changed, 83 insertions, 83 deletions
diff --git a/files/ja/web/css/@font-face/font-weight/index.html b/files/ja/web/css/@font-face/font-weight/index.html index c077cc8d9c..16eba4cfbd 100644 --- a/files/ja/web/css/@font-face/font-weight/index.html +++ b/files/ja/web/css/@font-face/font-weight/index.html @@ -106,7 +106,7 @@ font-weight: 300 500; <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> -<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> +<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> <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 "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> diff --git a/files/ja/web/css/@media/prefers-contrast/index.html b/files/ja/web/css/@media/prefers-contrast/index.html index d99b0b1779..fb3d42ecf9 100644 --- a/files/ja/web/css/@media/prefers-contrast/index.html +++ b/files/ja/web/css/@media/prefers-contrast/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/@media/prefers-contrast <p><strong>注:</strong>この機能はどのユーザーエージェントも対応しておらず、仕様が変更されることがあります。</p> </div> -<p><strong><code>prefers-contrast</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。</p> +<p><strong><code>prefers-contrast</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。</p> <h2 id="Syntax" name="Syntax">構文</h2> 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 44f582413f..3549db6248 100644 --- a/files/ja/web/css/_colon_-moz-drag-over/index.html +++ b/files/ja/web/css/_colon_-moz-drag-over/index.html @@ -15,7 +15,7 @@ translation_of: 'Web/CSS/:-moz-drag-over' --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-drag-over</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>で、 {{event("dragover")}} イベントが呼び出される時に要素に一致します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-drag-over</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>で、 {{event("dragover")}} イベントが呼び出される時に要素に一致します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html index e5c25e95ba..44f602cd30 100644 --- a/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html +++ b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' --- <div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.2")}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>:-moz-locale-dir(ltr)</code></strong> <a href="/en-US/docs/Web/CSS/pseudo-classes">疑似クラス</a>は <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の <code>intl.uidirection.<em>locale</em></code> (<code><em>locale</em></code> は現在のロケール) が "rtl" に設定されていることで特定されます。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-locale-dir(ltr)</code></strong> <a href="/ja/docs/Web/CSS/pseudo-classes">疑似クラス</a>は <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の <code>intl.uidirection.<em>locale</em></code> (<code><em>locale</em></code> は現在のロケール) が "rtl" に設定されていることで特定されます。</p> <div class="note"> <p><strong>メモ:</strong> 擬似クラスは、主に拡張機能及びテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。</p> diff --git a/files/ja/web/css/_colon_autofill/index.html b/files/ja/web/css/_colon_autofill/index.html index 80bf6c54b4..733b9665b2 100644 --- a/files/ja/web/css/_colon_autofill/index.html +++ b/files/ja/web/css/_colon_autofill/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/:-webkit-autofill --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p>CSS の <strong><code>:-webkit-autofill</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。</p> +<p>CSS の <strong><code>:-webkit-autofill</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。</p> <p class="note"><strong>メモ:</strong> 多くのブラウザーのユーザーエージェントスタイルシートでは、 <code>:-webkit-autofill</code> スタイル定義に <code>!important</code> を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。</p> diff --git a/files/ja/web/css/_colon_host-context()/index.html b/files/ja/web/css/_colon_host-context()/index.html index 95dd31f58e..cd6c5f9b94 100644 --- a/files/ja/web/css/_colon_host-context()/index.html +++ b/files/ja/web/css/_colon_host-context()/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/:host-context()' --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>:host-context()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/Pseudo-classes">擬似クラス</a>関数で、内部で使用される CSS を含む<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。</span></p> +<p><span class="seoSummary"><strong><code>:host-context()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>関数で、内部で使用される CSS を含む<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。</span></p> <p><span class="seoSummary">言い換えれば、これによってカスタム要素やそのカスタム要素のシャドウ DOM 内のものは、外部 DOM 内の位置や、祖先要素に適用されたクラスや属性に基づいて、異なるスタイルを適用することができます。</span></p> diff --git a/files/ja/web/css/_colon_in-range/index.html b/files/ja/web/css/_colon_in-range/index.html index 6c80a57e43..c2be314e50 100644 --- a/files/ja/web/css/_colon_in-range/index.html +++ b/files/ja/web/css/_colon_in-range/index.html @@ -110,5 +110,5 @@ input:out-of-range + label::after { <ul> <li>{{cssxref(":out-of-range")}}</li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> </ul> diff --git a/files/ja/web/css/_doublecolon_-moz-range-track/index.html b/files/ja/web/css/_doublecolon_-moz-range-track/index.html index f5225e7e87..3675cfc890 100644 --- a/files/ja/web/css/_doublecolon_-moz-range-track/index.html +++ b/files/ja/web/css/_doublecolon_-moz-range-track/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/::-moz-range-track' --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><strong><code>::-moz-range-track</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">疑似要素</a>は、 <code>type="range"</code> の {{HTMLElement("input")}} でインジケーターがスライドする <em>track</em> (例, 溝) を表す <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張機能</a> です。</p> +<p><strong><code>::-moz-range-track</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">疑似要素</a>は、 <code>type="range"</code> の {{HTMLElement("input")}} でインジケーターがスライドする <em>track</em> (例, 溝) を表す <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張機能</a> です。</p> <div class="note"> <p><strong>Note:</strong> <code>::-moz-range-track</code> を <code><input type="range"></code> 以外で使用すると、何にも一致せず、効果がありません。</p> diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html index b74c075dd6..01545f5204 100644 --- a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html +++ b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::-webkit-progress-value' --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><strong><code>::-webkit-progress-value</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a> は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。</p> +<p><strong><code>::-webkit-progress-value</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。</p> <div class="note"> <p><strong>Note:</strong> <code>::-webkit-progress-value</code> を有効にするには {{cssxref("-webkit-appearance")}} を <code><progress></code> 要素で <code>none</code> に設定する必要があります。</p> diff --git a/files/ja/web/css/_doublecolon_after/index.html b/files/ja/web/css/_doublecolon_after/index.html index 9d4adae746..74e3639749 100644 --- a/files/ja/web/css/_doublecolon_after/index.html +++ b/files/ja/web/css/_doublecolon_after/index.html @@ -27,7 +27,7 @@ translation_of: 'Web/CSS/::after' {{csssyntax}} <div class="note"> -<p><strong>メモ:</strong> CSS3 では<a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p> +<p><strong>メモ:</strong> CSS3 では<a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p> </div> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/css/_doublecolon_placeholder/index.html b/files/ja/web/css/_doublecolon_placeholder/index.html index 9b94ae2639..fd01d7c703 100644 --- a/files/ja/web/css/_doublecolon_placeholder/index.html +++ b/files/ja/web/css/_doublecolon_placeholder/index.html @@ -87,7 +87,7 @@ translation_of: 'Web/CSS/::placeholder' <p>プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させのに困難を伴う可能性があります。</p> -<p>プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。</p> +<p>プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。</p> <p>この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は <code>aria-describedby</code> を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。</p> @@ -113,7 +113,7 @@ translation_of: 'Web/CSS/::placeholder' <p>プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 {{htmlattrxref("for", "label")}} 及び {{htmlattrxref("id")}} 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。</p> <ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> </ul> diff --git a/files/ja/web/css/_doublecolon_selection/index.html b/files/ja/web/css/_doublecolon_selection/index.html index b7cec8afc3..08e101b907 100644 --- a/files/ja/web/css/_doublecolon_selection/index.html +++ b/files/ja/web/css/_doublecolon_selection/index.html @@ -87,7 +87,7 @@ p::selection { <p>上書きする場合は、選択部分のテキストと背景の色の<strong>コントラスト比</strong>が、弱視の人でも読める程度に高いことを確認することが重要です。</p> -<p>色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで <strong>4.5:1</strong> 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、<a href="/en-US/docs/Web/CSS/font-weight">太字</a>ならば <code>18.66px</code> 以上、または <code>24px</code> 以上と定義しています。)</p> +<p>色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで <strong>4.5:1</strong> 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、<a href="/ja/docs/Web/CSS/font-weight">太字</a>ならば <code>18.66px</code> 以上、または <code>24px</code> 以上と定義しています。)</p> <ul> <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.html b/files/ja/web/css/adjacent_sibling_combinator/index.html index 312654c160..003333d6df 100644 --- a/files/ja/web/css/adjacent_sibling_combinator/index.html +++ b/files/ja/web/css/adjacent_sibling_combinator/index.html @@ -79,5 +79,5 @@ img + p { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></li> + <li><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></li> </ul> diff --git a/files/ja/web/css/animation-fill-mode/index.html b/files/ja/web/css/animation-fill-mode/index.html index ad11a24b28..a5fc4e219d 100644 --- a/files/ja/web/css/animation-fill-mode/index.html +++ b/files/ja/web/css/animation-fill-mode/index.html @@ -37,7 +37,7 @@ animation-fill-mode: both, forwards, none; <dt><code>none</code></dt> <dd>アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。</dd> <dt><code>forwards</code></dt> - <dd>対象は実行の最後の<a href="/en-US/docs/Web/CSS/@keyframes">キーフレーム</a>で設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。 + <dd>対象は実行の最後の<a href="/ja/docs/Web/CSS/@keyframes">キーフレーム</a>で設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。 <table class="standard-table"> <thead> <tr> @@ -81,7 +81,7 @@ animation-fill-mode: both, forwards, none; </table> </dd> <dt><code>backwards</code></dt> - <dd>アニメーションは最初の適切な<a href="/en-US/docs/Web/CSS/@keyframes">キーフレーム</a>で定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。 + <dd>アニメーションは最初の適切な<a href="/ja/docs/Web/CSS/@keyframes">キーフレーム</a>で定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。 <table class="standard-table"> <thead> <tr> diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html index 50dde1024a..5126230136 100644 --- a/files/ja/web/css/background-color/index.html +++ b/files/ja/web/css/background-color/index.html @@ -105,7 +105,7 @@ background-color: unset;</pre> <ul> <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="https://developer.mozilla.org/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="/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> diff --git a/files/ja/web/css/background-position-y/index.html b/files/ja/web/css/background-position-y/index.html index 4cb5b80072..440effe3b7 100644 --- a/files/ja/web/css/background-position-y/index.html +++ b/files/ja/web/css/background-position-y/index.html @@ -101,5 +101,5 @@ background-position-y: unset; <li>{{cssxref("background-position-x")}}</li> <li>{{cssxref("background-position-inline")}}</li> <li>{{cssxref("background-position-block")}}</li> - <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li> + <li><a href="/ja/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li> </ul> diff --git a/files/ja/web/css/bottom/index.html b/files/ja/web/css/bottom/index.html index e88d42b260..92349fd4eb 100644 --- a/files/ja/web/css/bottom/index.html +++ b/files/ja/web/css/bottom/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/bottom --- <div>{{CSSRef}}</div> -<p><strong><code>bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/en-US/docs/Web/CSS/position"><ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby></a>の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。</p> +<p><strong><code>bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/ja/docs/Web/CSS/position"><ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby></a>の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。</p> <div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div> diff --git a/files/ja/web/css/box-orient/index.html b/files/ja/web/css/box-orient/index.html index 34e64ad19f..95889a906c 100644 --- a/files/ja/web/css/box-orient/index.html +++ b/files/ja/web/css/box-orient/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/box-orient <p class="blockIndicator warning">これはもともと CSS Flexible Box Layout Module の草稿でしたが、より新しい標準に置き換えられました。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p> </div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>box-orient</code></strong> プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>box-orient</code></strong> プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。</p> <pre class="brush:css">/* キーワード値 */ box-orient: horizontal; diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html index d28db18a1e..c33f487fb6 100644 --- a/files/ja/web/css/box-shadow/index.html +++ b/files/ja/web/css/box-shadow/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/box-shadow --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>box-shadow</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。</span>ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。</p> +<p><span class="seoSummary"><strong><code>box-shadow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。</span>ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。</p> <div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div> diff --git a/files/ja/web/css/color/index.html b/files/ja/web/css/color/index.html index b6bb694d66..a97a3e0f78 100644 --- a/files/ja/web/css/color/index.html +++ b/files/ja/web/css/color/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/color --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">CSS の <strong><code>color</code></strong> プロパティは、要素のテキストや<a href="/ja/docs/Web/CSS/text-decoration">テキスト装飾</a>における前景色の<a href="/en-US/docs/Web/CSS/color_value">色の値</a>を設定し、 {{cssxref("currentcolor")}} の値を設定します。</span> <code>currentcolor</code> は<em>他の</em>プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。</p> +<p><span class="seoSummary">CSS の <strong><code>color</code></strong> プロパティは、要素のテキストや<a href="/ja/docs/Web/CSS/text-decoration">テキスト装飾</a>における前景色の<a href="/ja/docs/Web/CSS/color_value">色の値</a>を設定し、 {{cssxref("currentcolor")}} の値を設定します。</span> <code>currentcolor</code> は<em>他の</em>プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。</p> <div>{{EmbedInteractiveExample("pages/css/color.html")}}</div> diff --git a/files/ja/web/css/contain-intrinsic-size/index.html b/files/ja/web/css/contain-intrinsic-size/index.html index 9b91b2f9dc..603f038987 100644 --- a/files/ja/web/css/contain-intrinsic-size/index.html +++ b/files/ja/web/css/contain-intrinsic-size/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/contain-intrinsic-size --- <p>{{CSSRef}}</p> -<p><code>contains-intrinsic-size</code> CSSプロパティは、<a href="/en-US/docs/Web/CSS/content-visibility"><code>content-visibility</code></a>で指定された要素の自然なサイズを制御します。</p> +<p><code>contains-intrinsic-size</code> CSSプロパティは、<a href="/ja/docs/Web/CSS/content-visibility"><code>content-visibility</code></a>で指定された要素の自然なサイズを制御します。</p> <h2 id="Syntax" name="Syntax">Syntax</h2> diff --git a/files/ja/web/css/cross-fade()/index.html b/files/ja/web/css/cross-fade()/index.html index f29ec46d8b..5cf8359073 100644 --- a/files/ja/web/css/cross-fade()/index.html +++ b/files/ja/web/css/cross-fade()/index.html @@ -62,7 +62,7 @@ cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);< <pre class="syntaxbox notranslate">cross-fade( <image, <image>, <percentage> )</pre> -<p>The specification for the <code>cross-fade()</code> function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The <a href="/en-US/docs/">original syntax</a>, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the <code>-webkit-</code> prefix in Chrome, Opera, and other blink-based browsers.</p> +<p>The specification for the <code>cross-fade()</code> function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The <a href="/ja/docs/">original syntax</a>, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the <code>-webkit-</code> prefix in Chrome, Opera, and other blink-based browsers.</p> <pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%); /* fully black */ cross-fade(url(white.png), url(black.png), 25%); /* 25% white, 75% black */ diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html index 958178331b..5fb090a903 100644 --- a/files/ja/web/css/css_colors/color_picker_tool/index.html +++ b/files/ja/web/css/css_colors/color_picker_tool/index.html @@ -3218,11 +3218,11 @@ var ColorPickerTool = (function ColorPickerTool() { <p>{{CSSRef}}</p> -<p><span class="seoSummary">このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。</span> HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 <a href="/en-US/docs/Web/CSS">CSS</a> で対応している様々な<a href="/en-US/docs/Web/CSS/color_value">色形式</a>に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。</p> +<p><span class="seoSummary">このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。</span> HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 <a href="/ja/docs/Web/CSS">CSS</a> で対応している様々な<a href="/ja/docs/Web/CSS/color_value">色形式</a>に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。</p> <p>色を定義するパラメーターを調整すると、３つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。</p> -<p>このツールは <a href="/en-US/docs/Web/HTML">HTML</a> に適用する完全な CSS 色を識別するのに役立ちます。</p> +<p>このツールは <a href="/ja/docs/Web/HTML">HTML</a> に適用する完全な CSS 色を識別するのに役立ちます。</p> <div>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</div> diff --git a/files/ja/web/css/css_containment/index.html b/files/ja/web/css/css_containment/index.html index f06dce4200..38ea507e3e 100644 --- a/files/ja/web/css/css_containment/index.html +++ b/files/ja/web/css/css_containment/index.html @@ -83,7 +83,7 @@ translation_of: Web/CSS/CSS_Containment contain: style; }</pre> -<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p> +<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p> <p>Using <code>contain: style</code> would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.</p> diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 7e8574e143..725f3b0e12 100644 --- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -126,7 +126,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain <p><strong>注</strong>: <code>space-evenly</code> はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。</p> </div> -<p>上述の値についての詳細とブラウザー対応状況については <a href="/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p> +<p>上述の値についての詳細とブラウザー対応状況については <a href="/ja/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p> <h2 id="Aligning_content_on_the_main_axis" name="Aligning_content_on_the_main_axis">主軸上での位置合わせ</h2> @@ -210,9 +210,9 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain <p>この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 <code>align-content</code> と <code>justify-content</code> プロパティに <code>space-evenly</code> が導入されていることも紹介しました。</p> -<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p> +<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p> -<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="https://developer.mozilla.org/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p> +<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p> <h2 id="See_Also" name="See_Also">関連情報</h2> diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index ef3f6ed3d9..6841280981 100644 --- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -3,7 +3,7 @@ title: フレックスアイテムの折り返しのマスター slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items --- -<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p> +<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p> <h2 id="Making_things_wrap" name="Making_things_wrap">折り返しを行う</h2> diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html index 1eeaa99bbb..7ec4dbc572 100644 --- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -66,7 +66,7 @@ translation_of: >- <p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p> -<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p> +<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/ja/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p> <p>CSS の <code>writing-mode</code> プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で <code>html</code> 要素に <code>dir</code> 属性と <code>lang</code> 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。</p> @@ -84,7 +84,7 @@ translation_of: >- <h2 id="Flexbox_and_Grid_Layout" name="Flexbox_and_Grid_Layout">フレックスボックとグリッドレイアウト</h2> -<p><a href="/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p> +<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p> <p>ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。</p> @@ -106,7 +106,7 @@ translation_of: >- <p>経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。</p> -<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p> +<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p> <h2 id="Flexbox_and_display_contents" name="Flexbox_and_display_contents">フレックスボックスと display: contents</h2> diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html index bdc63c3739..27d674de65 100644 --- a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html +++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html @@ -154,7 +154,7 @@ translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide <h2 id="フォント機能の設定">フォント機能の設定</h2> -<p>{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS custom properties</a> to set the values). Because of this, it's best to use the standard properties shown above wherever possible.</p> +<p>{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS custom properties</a> to set the values). Because of this, it's best to use the standard properties shown above wherever possible.</p> <p>There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.</p> 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 3f83a21dbd..003be5dc4e 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 @@ -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-self</a></code> を完全に省略すると、それぞれの子 <code><div></code> の高さはグリッドエリアを満たすように広がります。</p> +<p><code>align-self: start</code> を設定すると、それぞれの子 <code><div></code> の高さはコンテンツの <code><div></code> によって決定されることを覚えておいてください。また、<code><a href="/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> diff --git a/files/ja/web/css/css_images/using_css_gradients/index.html b/files/ja/web/css/css_images/using_css_gradients/index.html index 1136b5077b..bb810f605e 100644 --- a/files/ja/web/css/css_images/using_css_gradients/index.html +++ b/files/ja/web/css/css_images/using_css_gradients/index.html @@ -602,7 +602,7 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients <div> <h3 id="Multiple_repeating_linear_gradients" name="Multiple_repeating_linear_gradients">複数の反復線形グラデーション</h3> -<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> +<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/ja/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/ja/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> <p>In this case the gradient lines are 300px, 230px, and 300px long.</p> diff --git a/files/ja/web/css/css_ruby/index.html b/files/ja/web/css/css_ruby/index.html index f206b619af..4e0f0119c1 100644 --- a/files/ja/web/css/css_ruby/index.html +++ b/files/ja/web/css/css_ruby/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Ruby --- <div>{{CSSRef}}</div> -<p><ruby><strong>CSS ルビレイアウト</strong><rp> (</rp><rt>CSS Ruby Layout</rt><rp>) </rp></ruby>は <a href="/en-US/docs/Web/CSS">CSS</a> のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。</p> +<p><ruby><strong>CSS ルビレイアウト</strong><rp> (</rp><rt>CSS Ruby Layout</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。</p> <h2 id="Reference" name="Reference">リファレンス</h2> diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.html b/files/ja/web/css/css_transitions/using_css_transitions/index.html index e1fcbc6e7e..aaeebd27ee 100644 --- a/files/ja/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ja/web/css/css_transitions/using_css_transitions/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p>それぞれのトランジションコンポーネントに対しては以下のサブプロパティを用いてコントロールできます。</p> -<p><strong>(なお、以下のトランジションは、サンプルをお見せするために無限ループさせています。 CSS のトランジションは、プロパティの変更を始点から終点まで視覚化するだけです。ループさせる必要がある場合は、 CSS の <code><a href="/en-US/docs/CSS/animation">animation</a></code> プロパティを参照してください。)</strong></p> +<p><strong>(なお、以下のトランジションは、サンプルをお見せするために無限ループさせています。 CSS のトランジションは、プロパティの変更を始点から終点まで視覚化するだけです。ループさせる必要がある場合は、 CSS の <code><a href="/ja/docs/CSS/animation">animation</a></code> プロパティを参照してください。)</strong></p> <dl> <dt>{{cssxref("transition-property")}}</dt> diff --git a/files/ja/web/css/cssom_view/index.html b/files/ja/web/css/cssom_view/index.html index 4fca46e3e7..e3739fefa8 100644 --- a/files/ja/web/css/cssom_view/index.html +++ b/files/ja/web/css/cssom_view/index.html @@ -27,7 +27,7 @@ translation_of: Web/CSS/CSSOM_View <h2 id="Guides" name="Guides">ガイド</h2> <dl> - <dt><a href="/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems">座標系</a></dt> + <dt><a href="/ja/docs/Web/CSS/CSSOM_View/Coordinate_systems">座標系</a></dt> <dd>モニター上のウィンドウ、モバイル機器のビューポート、印刷時の紙上の位置などのディスプレイコンテキストにおける位置を特定するために使われる座標系についてのガイドです。</dd> </dl> diff --git a/files/ja/web/css/filter-function/saturate()/index.html b/files/ja/web/css/filter-function/saturate()/index.html index 47e0226594..e3261f1d8f 100644 --- a/files/ja/web/css/filter-function/saturate()/index.html +++ b/files/ja/web/css/filter-function/saturate()/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/filter-function/saturate() --- <div>{{cssref}}</div> -<p><strong><code>saturate()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。</p> +<p><strong><code>saturate()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。</p> <div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div> diff --git a/files/ja/web/css/font-weight/index.html b/files/ja/web/css/font-weight/index.html index 9954ffbd9b..66b685f51b 100644 --- a/files/ja/web/css/font-weight/index.html +++ b/files/ja/web/css/font-weight/index.html @@ -298,7 +298,7 @@ update(); <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> -<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> +<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p> <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 "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> diff --git a/files/ja/web/css/ident/index.html b/files/ja/web/css/ident/index.html index 805dbe3e25..49117a5758 100644 --- a/files/ja/web/css/ident/index.html +++ b/files/ja/web/css/ident/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/ident --- <p>{{CSSRef}}{{Draft}}</p> -<p><span class="seoSummary"><strong><code><ident></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a> は、 {{glossary("identifier")}} として使用される任意の文字列を意味します。</span></p> +<p><span class="seoSummary"><strong><code><ident></code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a> は、 {{glossary("identifier")}} として使用される任意の文字列を意味します。</span></p> <h2 id="構文">構文</h2> diff --git a/files/ja/web/css/image-rendering/index.html b/files/ja/web/css/image-rendering/index.html index d83dd914e3..c158a3d034 100644 --- a/files/ja/web/css/image-rendering/index.html +++ b/files/ja/web/css/image-rendering/index.html @@ -86,7 +86,7 @@ image-rendering: unset;</pre> <p>{{EmbedLiveSample('Examples')}}</p> <div class="blockIndicator note"> -<p><strong>メモ:</strong> 実際の仕様では、 <code>pixelated</code> と <code>crisp-edges</code> の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は手動の画像データ操作または <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code> によって <a href="http://phrogz.net/tmp/canvas_image_zoom.html"><code>pixelated</code> の代替ソリューション</a> を提供することができます。</p> +<p><strong>メモ:</strong> 実際の仕様では、 <code>pixelated</code> と <code>crisp-edges</code> の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は手動の画像データ操作または <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code> によって <a href="http://phrogz.net/tmp/canvas_image_zoom.html"><code>pixelated</code> の代替ソリューション</a> を提供することができます。</p> </div> <h2 id="Specifications" name="Specifications">仕様書</h2> diff --git a/files/ja/web/css/list-style/index.html b/files/ja/web/css/list-style/index.html index eed88a0dda..72fbb70159 100644 --- a/files/ja/web/css/list-style/index.html +++ b/files/ja/web/css/list-style/index.html @@ -104,7 +104,7 @@ List 2 <h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> -<p>Safari は順序なしリストで <code>list-style</code> の値に <code>none</code> が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">擬似コンテンツ</a>として追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。</p> +<p>Safari は順序なしリストで <code>list-style</code> の値に <code>none</code> が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。</p> <pre class="brush: css">ul { list-style: none; diff --git a/files/ja/web/css/mask-border-repeat/index.html b/files/ja/web/css/mask-border-repeat/index.html index 8fe78e0f1d..80d6fefd38 100644 --- a/files/ja/web/css/mask-border-repeat/index.html +++ b/files/ja/web/css/mask-border-repeat/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/mask-border-repeat --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-repeat</code></strong> プロパティは、どのように元の画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を要素の<a href="/en-US/docs/Web/CSS/mask-border">マスク境界</a>の寸法に合うように調整するかを設定します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-repeat</code></strong> プロパティは、どのように元の画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>の寸法に合うように調整するかを設定します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/max-inline-size/index.html b/files/ja/web/css/max-inline-size/index.html index 78aaacf99d..05189f14c3 100644 --- a/files/ja/web/css/max-inline-size/index.html +++ b/files/ja/web/css/max-inline-size/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/max-inline-size --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>max-inline-size</code></strong> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> +<p><span class="seoSummary"><strong><code>max-inline-size</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> <p>書字方向が垂直方向であった場合、 <code>max-inline-size</code> の値は要素の最大の高さに対応します。そうでなければ、要素の最大幅に対応します。関連プロパティとして、 {{cssxref("max-block-size")}} が要素のもう一方の寸法を定義します。</p> diff --git a/files/ja/web/css/max-width/index.html b/files/ja/web/css/max-width/index.html index a36a420c39..89feb27342 100644 --- a/files/ja/web/css/max-width/index.html +++ b/files/ja/web/css/max-width/index.html @@ -135,6 +135,6 @@ max-width: unset; <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li> <li>{{cssxref("width")}}, {{cssxref("min-width")}}</li> </ul> diff --git a/files/ja/web/css/media_queries/using_media_queries/index.html b/files/ja/web/css/media_queries/using_media_queries/index.html index a24ffa4734..779ab8f669 100644 --- a/files/ja/web/css/media_queries/using_media_queries/index.html +++ b/files/ja/web/css/media_queries/using_media_queries/index.html @@ -342,7 +342,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <p>Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリを作れるよう構文が拡張されました。 Level 4 はこのようなクエリを書くために<em>範囲コンテキスト</em>を追加しています。例えば、幅について <code>max-</code> の特性を使用する場合は、以下のように書くことができます。</p> <div class="note"> -<p><strong>注:</strong> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は <a href="/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> ブラウザー互換性一覧表</a>を参照してください。</p> +<p><strong>注:</strong> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は <a href="/ja/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> ブラウザー互換性一覧表</a>を参照してください。</p> </div> <pre class="brush: css">@media (max-width: 30em) { ... }</pre> diff --git a/files/ja/web/css/microsoft_extensions/index.html b/files/ja/web/css/microsoft_extensions/index.html index 31be6de5ef..57fb8e09fa 100644 --- a/files/ja/web/css/microsoft_extensions/index.html +++ b/files/ja/web/css/microsoft_extensions/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Microsoft_Extensions --- <div>{{CSSRef}}</div> -<p>Edge や Internet Explorer のような Microsoft のアプリケーションは、いくつもの特殊な <strong> <a href="/en-US/docs/Web/CSS">CSS</a> の Microsoft 拡張</strong>に対応しています。これらの拡張には接頭辞に <code>-ms-</code> が付きます。</p> +<p>Edge や Internet Explorer のような Microsoft のアプリケーションは、いくつもの特殊な <strong> <a href="/ja/docs/Web/CSS">CSS</a> の Microsoft 拡張</strong>に対応しています。これらの拡張には接頭辞に <code>-ms-</code> が付きます。</p> <h2 id="Microsoft-only_properties_(avoid_using_on_websites)" name="Microsoft-only_properties_(avoid_using_on_websites)">Microsoft 独自プロパティ (ウェブサイトでの使用は避けてください)</h2> diff --git a/files/ja/web/css/min()/index.html b/files/ja/web/css/min()/index.html index 92631860d9..c696ddf104 100644 --- a/files/ja/web/css/min()/index.html +++ b/files/ja/web/css/min()/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/min() --- <div>{{CSSRef}}</div> -<p><strong><code>min()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 <code>min()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。</p> +<p><strong><code>min()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 <code>min()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。</p> <pre class="brush: css; no-line-numbers">/* プロパティ: min(式 [, 式]) */ width: min(10vw, 4em, 80px); diff --git a/files/ja/web/css/min-block-size/index.html b/files/ja/web/css/min-block-size/index.html index 764f47a68b..5e27a77b8b 100644 --- a/files/ja/web/css/min-block-size/index.html +++ b/files/ja/web/css/min-block-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/min-block-size --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><code>min-block-size</code> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> +<p><span class="seoSummary"><code>min-block-size</code> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> <p>書字方向が垂直方向であった場合、 <code>min-block-size</code> の値は要素の最小幅に対応します。そうでなければ、要素の最小の高さに対応します。関連プロパティの {{cssxref("min-inline-size")}} が要素のもう一方の寸法を定義します。</p> diff --git a/files/ja/web/css/min-inline-size/index.html b/files/ja/web/css/min-inline-size/index.html index ebe1bb72db..d14c3fef6d 100644 --- a/files/ja/web/css/min-inline-size/index.html +++ b/files/ja/web/css/min-inline-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/min-inline-size --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><strong><code>min-inline-size</code></strong> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> +<p><span class="seoSummary"><strong><code>min-inline-size</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p> <p>書字方向が垂直方向であった場合、 <code>min-inline-size</code> の値は要素の最小の高さに対応します。そうでなければ、要素の最小幅に対応します。関連プロパティの {{cssxref("min-block-size")}} が要素のもう一方の寸法を定義します。</p> diff --git a/files/ja/web/css/opacity/index.html b/files/ja/web/css/opacity/index.html index c084127fe7..48781e619b 100644 --- a/files/ja/web/css/opacity/index.html +++ b/files/ja/web/css/opacity/index.html @@ -96,7 +96,7 @@ img.opacity:hover { zoom: 1; }</pre> -<pre class="brush: html notranslate"><img src="<a href="https://developer.mozilla.org/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>" +<pre class="brush: html notranslate"><img src="<a href="/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>" alt="MDN ロゴ" width="128" height="146" class="opacity"> </pre> diff --git a/files/ja/web/css/outline-offset/index.html b/files/ja/web/css/outline-offset/index.html index 083fff585d..5995f59e76 100644 --- a/files/ja/web/css/outline-offset/index.html +++ b/files/ja/web/css/outline-offset/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/outline-offset --- <div>{{CSSRef}}</div> -<p>CSS の <strong><code>outline-offset</code></strong> プロパティは、要素の辺や境界線と<a href="/docs/Web/CSS/outline">輪郭線</a>との空間の量を設定します。</p> +<p>CSS の <strong><code>outline-offset</code></strong> プロパティは、要素の辺や境界線と<a href="/ja/docs/Web/CSS/outline">輪郭線</a>との空間の量を設定します。</p> <div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div> diff --git a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html index 58c2e91cee..2a71ff016a 100644 --- a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html +++ b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -89,6 +89,6 @@ translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p>ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、<a href="/en-US/docs/Web/CSS/@supports">特性クエリ</a>を使用して <code>overflow-anchor</code> プロパティに対応しているかどうかを検査してください。</p> +<p>ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、<a href="/ja/docs/Web/CSS/@supports">特性クエリ</a>を使用して <code>overflow-anchor</code> プロパティに対応しているかどうかを検査してください。</p> <p>{{Compat("css.properties.overflow-anchor")}}</p> diff --git a/files/ja/web/css/ratio/index.html b/files/ja/web/css/ratio/index.html index f89fd4acdf..63446d71b4 100644 --- a/files/ja/web/css/ratio/index.html +++ b/files/ja/web/css/ratio/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/ratio --- <p>{{CSSRef}}</p> -<p><strong><code><ratio></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、<a href="/en-US/docs/Web/CSS/@media/aspect-ratio">アスペクト比</a>を<a href="/en-US/docs/Web/CSS/Media_Queries">メディアクエリ</a>内で記述するために使用し、2つの単位のない値で比率を記述します。</p> +<p><strong><code><ratio></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、<a href="/ja/docs/Web/CSS/@media/aspect-ratio">アスペクト比</a>を<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>内で記述するために使用し、2つの単位のない値で比率を記述します。</p> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/scroll-snap-coordinate/index.html b/files/ja/web/css/scroll-snap-coordinate/index.html index 1a8c9a49d8..1a9e185a3b 100644 --- a/files/ja/web/css/scroll-snap-coordinate/index.html +++ b/files/ja/web/css/scroll-snap-coordinate/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/scroll-snap-coordinate --- <div>{{CSSRef}}{{deprecated_header}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p> +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p> <pre class="brush:css no-line-numbers">/* キーワード値 */ scroll-snap-coordinate: none; diff --git a/files/ja/web/css/shape/index.html b/files/ja/web/css/shape/index.html index 5691317b29..c4cc8fcae2 100644 --- a/files/ja/web/css/shape/index.html +++ b/files/ja/web/css/shape/index.html @@ -77,5 +77,5 @@ translation_of: Web/CSS/shape <ul> <li>関連 CSS プロパティ: {{Cssxref("clip")}}</li> - <li><a href="/en-US/CSS/-moz-image-rect" title="CSS/-moz-image-rect"><code>-moz-image-rect()</code></a> 関数は <code>rect()</code>と似た座標を使います</li> + <li><a href="/ja/CSS/-moz-image-rect" title="CSS/-moz-image-rect"><code>-moz-image-rect()</code></a> 関数は <code>rect()</code>と似た座標を使います</li> </ul> diff --git a/files/ja/web/css/specificity/index.html b/files/ja/web/css/specificity/index.html index 0432121930..88b4080d96 100644 --- a/files/ja/web/css/specificity/index.html +++ b/files/ja/web/css/specificity/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/Specificity <ol> <li><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a> (例えば <code>h1</code>) と 擬似要素 (例えば <code>::before</code>)</li> <li><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> (例えば <code>.example</code>)、属性セレクター (例えば <code>[type="radio"]</code>)、擬似クラス (例えば <code>:hover</code>)</li> - <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID セレクター</a> (例えば <code>#example</code>)</li> + <li><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a> (例えば <code>#example</code>)</li> </ol> <p>全称セレクター ({{CSSxRef("Universal_selectors", "*")}}), 結合子 ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="/ja/docs/Web/CSS/Descendant_combinator" style="white-space: nowrap;">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}), 否定擬似クラス ({{CSSxRef(":not", ":not()")}}) は詳細度に影響を与えません。 (但し、 <code>:not()</code> の<em>中で</em>宣言されたセレクターは影響を与えます。)</p> @@ -40,7 +40,7 @@ translation_of: Web/CSS/Specificity <h3 id="The_!important_exception" name="The_!important_exception">!important の例外</h3> -<p><code>!important</code> 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には <code>!important</code> は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然の<a href="/en-US/docs/Web/CSS/Cascade">カスケード</a>を破壊するためデバッグが難しくなるので、 <code>!important</code> を使用することは<strong>悪い習慣</strong>であり、使用を避けるべきです。同じ要素に二つの競合する宣言が <code>!important</code> 規則付きで適用された場合、より高い詳細度の宣言が適用されます。</p> +<p><code>!important</code> 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には <code>!important</code> は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然の<a href="/ja/docs/Web/CSS/Cascade">カスケード</a>を破壊するためデバッグが難しくなるので、 <code>!important</code> を使用することは<strong>悪い習慣</strong>であり、使用を避けるべきです。同じ要素に二つの競合する宣言が <code>!important</code> 規則付きで適用された場合、より高い詳細度の宣言が適用されます。</p> <p><strong>いくつかの経験則</strong></p> diff --git a/files/ja/web/css/syntax/index.html b/files/ja/web/css/syntax/index.html index 12a2ce4efd..30b41c6dda 100644 --- a/files/ja/web/css/syntax/index.html +++ b/files/ja/web/css/syntax/index.html @@ -68,7 +68,7 @@ translation_of: Web/CSS/Syntax <p>文には二種類があります。</p> <ul> - <li><strong>規則セット</strong> (または<em>規則</em>)。ここまで見てきたように、 CSS の宣言の集合を、<a href="/en-US/docs/Web/CSS/CSS_Selectors">セレクター</a>によって表現された状態に関連付けています。</li> + <li><strong>規則セット</strong> (または<em>規則</em>)。ここまで見てきたように、 CSS の宣言の集合を、<a href="/ja/docs/Web/CSS/CSS_Selectors">セレクター</a>によって表現された状態に関連付けています。</li> <li><strong>アット規則</strong>。アットマーク '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) で始まり、識別子が後続し、ブロックの外のセミコロンまたは次のブロックの終わりに至るまで続きます。それぞれの種類の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>は、識別子によって定義され、当然ながら独自の内部構文や意味を持つことがあります。アット規則はメタデータ情報 ({{ cssxref("@charset") }} や {{ cssxref("@import") }} など) を伝えたり、条件情報 ({{ cssxref("@media") }} や {{ cssxref("@document") }}) など) を伝えたり、記述的情報 ({{ cssxref("@font-face") }} など) を伝えたりするために使用します。</li> </ul> diff --git a/files/ja/web/css/text-align/index.html b/files/ja/web/css/text-align/index.html index 524c430472..40f11c6cfa 100644 --- a/files/ja/web/css/text-align/index.html +++ b/files/ja/web/css/text-align/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/text-align --- <div>{{CSSRef}}</div> -<p><strong><code>text-align</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。</p> +<p><strong><code>text-align</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。</p> <div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div> diff --git a/files/ja/web/css/text-orientation/index.html b/files/ja/web/css/text-orientation/index.html index 67a799f713..268ca05408 100644 --- a/files/ja/web/css/text-orientation/index.html +++ b/files/ja/web/css/text-orientation/index.html @@ -99,7 +99,7 @@ text-orientation: unset; <ul> <li>他の縦書きに関連する CSS プロパティ: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}}</li> - <li><a href="/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> <li><a href="https://www.w3.org/International/articles/vertical-text/">縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)</a></li> <li>広範なブラウザーの対応状況テキスト結果: <a href="https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation">https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation</a></li> </ul> diff --git a/files/ja/web/css/transform-function/rotatez()/index.html b/files/ja/web/css/transform-function/rotatez()/index.html index aec4b6a9ce..5c0618adf5 100644 --- a/files/ja/web/css/transform-function/rotatez()/index.html +++ b/files/ja/web/css/transform-function/rotatez()/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/transform-function/rotateZ() <p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p> <div class="note"> -<p><strong>メモ:</strong> <code>rotateZ(a)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate</a>(a)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 0, 1, a)</code> と等価です。</p> +<p><strong>メモ:</strong> <code>rotateZ(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate</a>(a)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 0, 1, a)</code> と等価です。</p> </div> <div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div> diff --git a/files/ja/web/css/transform-function/scale()/index.html b/files/ja/web/css/transform-function/scale()/index.html index 585964f29b..e4b78176ec 100644 --- a/files/ja/web/css/transform-function/scale()/index.html +++ b/files/ja/web/css/transform-function/scale()/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/transform-function/scale() --- <div>{{CSSRef}}</div> -<p><strong><code>scale()</code></strong> は <a href="/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +<p><strong><code>scale()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。</p> <p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p> @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/scale() <p>座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は <a href="https://ja.wikipedia.org/wiki/点対称">点対称化</a> と大きさの変更を行います。1 と等しい場合、変倍は何もしません。</p> -<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div> +<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/transform-function/scalex()/index.html b/files/ja/web/css/transform-function/scalex()/index.html index 72dbcfc046..8548b169c4 100644 --- a/files/ja/web/css/transform-function/scalex()/index.html +++ b/files/ja/web/css/transform-function/scalex()/index.html @@ -5,9 +5,9 @@ translation_of: Web/CSS/transform-function/scaleX() --- <div>{{CSSRef}}</div> -<div><a href="https://developer.mozilla.org/ja/docs/Web/CSS">CSS</a>の<strong><code>scaleX()</code></strong> 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。</div> +<div><a href="/ja/docs/Web/CSS">CSS</a>の<strong><code>scaleX()</code></strong> 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。</div> -<div>結果は <a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-function" title="CSS の <transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。"><code><transform-function></code></a> データ型になります。</div> +<div>結果は <a href="/ja/docs/Web/CSS/transform-function" title="CSS の <transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。"><code><transform-function></code></a> データ型になります。</div> <div></div> @@ -15,10 +15,10 @@ translation_of: Web/CSS/transform-function/scaleX() <p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p> -<p>係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleX(-1)</code> は<a href="http://en.wikipedia.org/wiki/Axial_symmetry" rel="noopener">軸の線対称</a>を定義し、垂直軸は原点を通過します (<a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin" title="CSS の transform-origin プロパティは、要素の変形 (transform) における原点を設定します。"><code>transform-origin</code></a> プロパティで指定)。</p> +<p>係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleX(-1)</code> は<a href="http://en.wikipedia.org/wiki/Axial_symmetry" rel="noopener">軸の線対称</a>を定義し、垂直軸は原点を通過します (<a href="/ja/docs/Web/CSS/transform-origin" title="CSS の transform-origin プロパティは、要素の変形 (transform) における原点を設定します。"><code>transform-origin</code></a> プロパティで指定)。</p> <div class="note"> -<p><strong>メモ:</strong> <code>scaleX(sx)</code>は<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> </span></font></code><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code>または<code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code>と等価です。</p> +<p><strong>メモ:</strong> <code>scaleX(sx)</code>は<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> </span></font></code><code><a href="/ja/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code>または<code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code>と等価です。</p> </div> <h2 id="Syntax">Syntax</h2> @@ -108,8 +108,8 @@ translation_of: Web/CSS/transform-function/scaleX() <h2 id="See_also">See also</h2> <ul> - <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> - <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li> + <li><code><a href="/ja/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li> <li>{{cssxref("transform")}}</li> <li>{{cssxref("<transform-function>")}}</li> <li>{{cssxref("transform-origin")}}</li> diff --git a/files/ja/web/css/transform-function/translate()/index.html b/files/ja/web/css/transform-function/translate()/index.html index a2c8c98f51..01b7d7e801 100644 --- a/files/ja/web/css/transform-function/translate()/index.html +++ b/files/ja/web/css/transform-function/translate()/index.html @@ -65,7 +65,7 @@ transform: translate(30%, 50%); <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> -<pre class="syntaxbox notranslate">translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) +<pre class="syntaxbox notranslate">translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}<a href="/ja/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>) </pre> <h2 id="Examples" name="Examples">例</h2> diff --git a/files/ja/web/css/transform-function/translatey()/index.html b/files/ja/web/css/transform-function/translatey()/index.html index e0fd47a7bb..ea004906f7 100644 --- a/files/ja/web/css/transform-function/translatey()/index.html +++ b/files/ja/web/css/transform-function/translatey()/index.html @@ -11,12 +11,12 @@ translation_of: Web/CSS/transform-function/translateY() --- <div>{{CSSRef}}</div> -<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> +<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/s/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> <div class="note"> -<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p> +<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/ja/s/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a hrehref="/ja/eb/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p> </div> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/transform/index.html b/files/ja/web/css/transform/index.html index 78f00715d3..360b12a5a4 100644 --- a/files/ja/web/css/transform/index.html +++ b/files/ja/web/css/transform/index.html @@ -16,10 +16,10 @@ translation_of: Web/CSS/transform <p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> -<p>このプロパティに <code>none</code> 以外の値が設定されていると、<a href="/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a> が作成されます。この場合、その要素はその中に含まれる <code>position: fixed;</code> または <code>position: absolute;</code> である要素すべての<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>として扱われます。</p> +<p>このプロパティに <code>none</code> 以外の値が設定されていると、<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a> が作成されます。この場合、その要素はその中に含まれる <code>position: fixed;</code> または <code>position: absolute;</code> である要素すべての<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>として扱われます。</p> <div class="warning"> -<p>変形可能な要素のみが <code>transform</code> の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">非置換インラインボックス</a>、<a href="/ja/docs/Web/HTML/Element/col">表の列ボックス</a>、<a href="/en-US/docs/Web/HTML/Element/colgroup">表の列グループボックス</a>を除くすべての要素です。</p> +<p>変形可能な要素のみが <code>transform</code> の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">非置換インラインボックス</a>、<a href="/ja/docs/Web/HTML/Element/col">表の列ボックス</a>、<a href="/ja/docs/Web/HTML/Element/colgroup">表の列グループボックス</a>を除くすべての要素です。</p> </div> <h2 id="Syntax" name="Syntax">構文</h2> diff --git a/files/ja/web/css/transition-delay/index.html b/files/ja/web/css/transition-delay/index.html index ef4969ab8b..cea8b9b669 100644 --- a/files/ja/web/css/transition-delay/index.html +++ b/files/ja/web/css/transition-delay/index.html @@ -350,6 +350,6 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの利用</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの利用</a></li> <li>{{domxref("TransitionEvent")}}</li> </ul> diff --git a/files/ja/web/css/transition-timing-function/index.html b/files/ja/web/css/transition-timing-function/index.html index b7f542f49d..bce50156f2 100644 --- a/files/ja/web/css/transition-timing-function/index.html +++ b/files/ja/web/css/transition-timing-function/index.html @@ -245,7 +245,7 @@ var intervalID = window.setInterval(updateTransition, 10000); <p>Some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. Animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. However, some animations can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD) and certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> -<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> +<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> <h2 id="Specifications" name="Specifications">仕様書</h2> diff --git a/files/ja/web/css/writing-mode/index.html b/files/ja/web/css/writing-mode/index.html index 8b0ff5b9e1..a93f090c81 100644 --- a/files/ja/web/css/writing-mode/index.html +++ b/files/ja/web/css/writing-mode/index.html @@ -212,12 +212,12 @@ th { <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li>SVG <code><a href="/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> 属性</li> + <li>SVG <code><a href="/ja/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> 属性</li> <li>{{Cssxref("direction")}}</li> <li>{{Cssxref("unicode-bidi")}}</li> <li>{{Cssxref("text-orientation")}}</li> <li>{{Cssxref("text-combine-upright")}}</li> - <li><a href="/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li> <li><a href="https://www.w3.org/International/articles/vertical-text/">Styling vertical text (Chinse, Japanese, Korean and Mongolian)</a></li> <li>広範なブラウザーの対応試験結果: <a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">https://w3c.github.io/i18n-tests/results/writing-mode-vertical</a></li> </ul> diff --git a/files/ja/web/css/zoom/index.html b/files/ja/web/css/zoom/index.html index 05a0b31803..f1b5d43695 100644 --- a/files/ja/web/css/zoom/index.html +++ b/files/ja/web/css/zoom/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/zoom --- <div>{{CSSRef}}{{Non-standard_header}}</div> -<p><span class="seoSummary"> <a href="/en-US/docs/Web/CSS">CSS</a> の標準外の <strong><dfn><code>zoom</code></dfn></strong> プロパティは、要素の拡大率を制御するために使用することができます。</span>できれば、このプロパティの代わりに {{cssxref("transform-function/scale", "transform: scale()")}} を使用してください。ただし、 CSS 変換とは異なり、 <code>zoom</code> は要素のレイアウト時の大きさに影響します。</p> +<p><span class="seoSummary"> <a href="/ja/docs/Web/CSS">CSS</a> の標準外の <strong><dfn><code>zoom</code></dfn></strong> プロパティは、要素の拡大率を制御するために使用することができます。</span>できれば、このプロパティの代わりに {{cssxref("transform-function/scale", "transform: scale()")}} を使用してください。ただし、 CSS 変換とは異なり、 <code>zoom</code> は要素のレイアウト時の大きさに影響します。</p> <pre class="brush: css no-line-numbers">/* キーワード値 */ zoom: normal; |