From 090c477bece74654d461b9bc64a85a85e3f49cd5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 19 Nov 2024 12:01:42 +0000 Subject: [PATCH 001/279] Bump husky from 9.1.6 to 9.1.7 (#24596) --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 73cad549a636a5..03a9da4a229d81 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "cld": "^2.10.0", "fdir": "^6.4.2", "front-matter": "^4.0.2", - "husky": "9.1.6", + "husky": "9.1.7", "lint-staged": "15.2.10", "markdown-it": "^14.1.0", "markdownlint-cli2": "0.15.0", diff --git a/yarn.lock b/yarn.lock index 1afbd4a74d05fe..79a99d0245389b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -402,10 +402,10 @@ human-signals@^5.0.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-5.0.0.tgz#42665a284f9ae0dade3ba41ebc37eb4b852f3a28" integrity sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ== -husky@9.1.6: - version "9.1.6" - resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.6.tgz#e23aa996b6203ab33534bdc82306b0cf2cb07d6c" - integrity sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A== +husky@9.1.7: + version "9.1.7" + resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.7.tgz#d46a38035d101b46a70456a850ff4201344c0b2d" + integrity sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA== ignore@^5.2.4: version "5.2.4" From 2b6f10c00b49c4df0878d95ee261703e2b651fbe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 19 Nov 2024 21:28:17 +0900 Subject: [PATCH 002/279] =?UTF-8?q?2024/04/17=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3=20(#24516)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/04/17 時点の英語版に基づき新規翻訳 * Update index.md --- .../perceivable/color_contrast/index.md | 140 ++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 files/ja/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md diff --git a/files/ja/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md b/files/ja/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md new file mode 100644 index 00000000000000..03d8ed8537cecf --- /dev/null +++ b/files/ja/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md @@ -0,0 +1,140 @@ +--- +title: 色のコントラスト +slug: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +l10n: + sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc +--- + +{{AccessibilitySidebar}} + +背景と前景のコンテンツ（通常はテキスト）の[色のコントラスト](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio)は、可読性を確実に保持するのに十分なほど大きくすべきです。 + +さまざまな視覚能力に対応した読み取り可能なインターフェイスを設計する際、 WCAG ガイドラインでは次のコントラスト比に従うことを推奨しています。 + +| コンテンツの型 | 最小比 (AA レート) | 拡張比 (AAA レート) | +| ------------------------------------------------------------------------------------------ | ------------------ | ------------------- | +| 本文テキスト | 4.5 : 1 | 7 : 1 | +| 拡大テキスト（本文テキストより 120-150% 大きいもの） | 3 : 1 | 4.5 : 1 | +| アクティブなユーザーインターフェイス部分と、アイコンやグラフなどのグラフィックオブジェクト | 3 : 1 | 未定義 | + +これらの比率は、非アクティブなコントロール、ロゴ、または純粋に装飾的なテキストなどの「付随的な」テキストには適用されません。 + +詳細については、下記の[解決策](#解決策)の節をご覧ください。 + +サイトに良い色のコントラストを保つことは、すべてのユーザーにとって好ましいことですが、特定の種類の色覚異常や、その他の類似した症状を持つユーザーにとっては特に有益です。これらのユーザーはコントラストが低く、似たような色を区別するのが難しいという使い勝手の悪さを経験しています。これは、明るい部分や暗い部分を、そうした症状を持たない人ほど容易に識別できないため、エッジや境界線、その他の詳細を見分けるのが難しいからです。 + +ウェブサイトをクールなデザインにするのは良いことですが、ユーザーがコンテンツを読めなければ、そのデザインには何の価値もありません。 + +## 例 + +単純な HTML と CSS のコードを見ていきましょう。 + +```html +
良いコントラスト
+
悪いコントラスト
+``` + +```css +div { + /* 全般的な div のスタイルをここに置く */ +} + +.good { + background-color: #5a80a9; +} + +.bad { + background-color: #400064; +} +``` + +どちらのテキストも既定では黒色です。 + +### 良いコントラスト + +「良い」 `
` の背景色はネオンブルーであり、テキストが読みやすくなっています。 + +```html +
良いコントラスト
+``` + +```css +div { + font-family: sans-serif; + text-align: center; + font-size: 2rem; + font-weight: bold; + width: 250px; + padding: 30px; + border-radius: 20px; + box-shadow: 4px 4px 4px black; +} + +.good { + background-color: #5a80a9; +} +``` + +{{EmbedLiveSample('良いコントラスト', '100%', '100')}} + +### 悪いコントラスト + +一方、「悪い」 `
` は背景が濃い紫色で、テキストがかなり読みにくくしています。 + +```html +
悪いコントラスト
+``` + +```css +div { + font-family: sans-serif; + text-align: center; + font-size: 2rem; + font-weight: bold; + width: 250px; + padding: 30px; + border-radius: 20px; + box-shadow: 4px 4px 4px black; +} + +.bad { + background-color: #400064; +} +``` + +{{EmbedLiveSample('悪いコントラスト', '100%', '100')}} + +## 解決策 + +ウェブサイトに配色を選ぶ際には、前景色と背景色にコントラストの強い色を選びましょう。 デザイン上の制約の範囲内で、色のコントラストをできるだけ良くしてください。理想的には AAA 評価（下記 1.4.6 参照）を目指しますが、少なくとも AA 評価（下記 1.4.3 参照）を満たすようにしてください。 + +動画やアニメーションなどのテキスト以外のコンテンツが含まれる場合は、 1.4.11 に従うことで対応できます（下記参照）。 + +色を選択する際にコントラストを調べるには、 WebAIM の [Color Contrast Checker](https://webaim.org/resources/contrastchecker/) などのツールを使用してください。 + +また、 Firefox の開発者ツールを使用して、色のコントラストをその場で調べることができます。[アクセシビリティインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html)ガイド、特に [Check for accessibility issues](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#check-for-accessibility-issues) の節をご覧ください。説明おの節のライブサンプルで試してみてください。 + +## 関連する WCAG 達成基準 + +- [1.4.3 最低限のコントラスト (AA)](https://www.w3.org/TR/WCAG21/#contrast-minimum) + + - : 背景と前景のコンテンツの間の色のコントラストは、読みやすさを確実なものとするための最低限のレベルであるべきです。 + + - テキストとその背景のコントラスト比は少なくとも 4.5:1 であるべきです。 + - 見出し（またはそれよりも大きい）テキストの比は、少なくとも 3:1 であるべきです。 大きいテキストは、少なくとも 18 ポイント、または 14 ポイントの太字として定義されます。 + +- [1.4.6 強調されたテキスト (AAA)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) + + - : これは、基準 1.4.3 に従い、その上に構築されます。 + + - テキストとその背景のコントラスト比は少なくとも 7:1 であるべきです。 + - 見出し（またはそれよりも大きい）テキストの比は少なくとも 4.5:1 であるべきです。 + +- [1.4.11 テキスト以外のコントラスト (AA)](https://www.w3.org/TR/WCAG21/#non-text-contrast)（2.1 で追加） + - : ユーザーインターフェイスコンポーネントとグラフィックオブジェクトの最低限のカラーコントラスト比は 3:1 です。 + +## 関連情報 + +- [色とそのコントラスト](/ja/docs/Learn/Accessibility/CSS_and_JavaScript#色とそのコントラスト) +- [複数のラベル](/ja/docs/Learn/Forms/How_to_structure_a_web_form#複数のラベル) +- [Understanding Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html)（英語） From 9efd2970e02fe16d9199dc56e25e7fa3ed1acf8e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Nov 2024 22:45:21 +0900 Subject: [PATCH 003/279] =?UTF-8?q?2024/11/02=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../understanding_wcag/perceivable/index.md | 39 +++++++++---------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/files/ja/web/accessibility/understanding_wcag/perceivable/index.md b/files/ja/web/accessibility/understanding_wcag/perceivable/index.md index a82568c22ec165..ebbb6652eacda6 100644 --- a/files/ja/web/accessibility/understanding_wcag/perceivable/index.md +++ b/files/ja/web/accessibility/understanding_wcag/perceivable/index.md @@ -2,7 +2,7 @@ title: 知覚可能 slug: Web/Accessibility/Understanding_WCAG/Perceivable l10n: - sourceCommit: 019ca5c9ce641bfa02825e1ba0444f35dfb646cc + sourceCommit: 3a004b55441ee5ac51bd34be5f3b7c6ce693ed6d --- {{AccessibilitySidebar}} @@ -38,19 +38,14 @@ l10n: - 複雑な画像や図表には、同じページ上またはリンク先のいずれかにアクセス可能な代替手段を用意するべきです。 - longdesc - 属性ではなく通常のリンクを使用してください。 + 複雑な画像や図表には、同じページ上またはリンク先のいずれかにアクセス可能な代替手段を用意するべきです。 longdesc 属性ではなく通常のリンクを使用してください。

テキストの説明や、アクセス可能なデータ表がうまくいくかもしれません（HTML 表の高度な機能とアクセシビリティを参照）。 longdesc 反対論については、その他の代替テキストの仕組みも参照してください。 + >を参照）。 longdesc 反対論については、 W3C のImage Description Extension (longdesc)も参照してください。

@@ -69,9 +64,6 @@ l10n: >、 映像のテキストトラック、その他のマルチメディアコンテンツを参照してください。

@@ -138,7 +130,7 @@ l10n: 1.2.2 ウェブベースの動画にキャプションを付ける (A) ウェブ上に表示される動画（例えば、HTML 動画）には、キャプションを付けるべきです。 これは、動画の音声部分が聞こえない人々のためのものです。 - HTML 動画のキャプションについては映像のテキストトラックsを、その他のテクノロジーについてはその他のマルチメディアコンテンツを参照してください。 Add your own subtitles & closed captions（YouTube、英語）も参照してください。 + HTML 動画のキャプションについては映像のテキストトラックsを参照してください。 Add your own subtitles & closed captions（YouTube、英語）も参照してください。 1.2.3 ウェブベースの動画にテキストトランスクリプトまたは音声解説を提供する (A) ウェブ上に提示される動画（例えば、HTML 動画）のためのテキストトランスクリプトまたは音声解説を提供するべきです。 これは、動画の視覚的な部分を見ることができず、音声だけではコンテンツ全体を把握できない人々のためのものです。 @@ -206,8 +198,7 @@ l10n:
  • 画像の代替テキスト。 コンテンツ画像には、その画像の内容を明確に説明するテキストが含まれているべきです。 - これは、プログラム的に関連付けることができます（例えば、alt - テキスト）。 + これは、プログラム的に関連付けることができます（例えば、alt　テキスト）。 そうでない場合は、関連付けるのは簡単です（例えば、それを説明し、そのすぐ隣に置きます）。 これは、たとえあなたが画像を見ることができなくても、完全な意味がまだ推測できることを意味するはずです。
    • @@ -269,7 +260,7 @@ l10n: キーボードショートカットや、キーボードなどの手段でアクティブにできるボタンなどの代替手段を提供する必要があります。 -
    +

    メモ: 色だけで指示を伝えることは関連していますが、異なるガイドラインでカバーされています — 1.4.1。 @@ -341,7 +332,7 @@ l10n: ## ガイドライン 1.4: 前景と背景の区別を含め、ユーザーがコンテンツを見たり聞いたりしやすくする -このガイドラインは、コアコンテンツが背景や他の装飾から識別しやすいことを確認することに関するものです。 典型的な例は、色で（色のコントラストと指示を伝えるための色の使い方の両方が）、他の状況でも適用されます。 +このガイドラインは、コアコンテンツが背景や他の装飾から識別しやすいことを確認することに関するものです。 典型的な例は、色（[色のコントラスト](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)と指示を伝えるための[色の使い方](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color)の両方が）ですが、他の状況でも適用されます。 @@ -359,10 +350,14 @@ l10n:

    @@ -398,7 +393,9 @@ l10n: - + - + @@ -96,19 +99,177 @@ font-variation-settings: unset; ## 例 -他にも多数の可変フォントの例が、 [可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide), [v-fonts.com](https://v-fonts.com/), [axis-praxis.org](https://www.axis-praxis.org/) などにあります。 +他にも多数の可変フォントの例が、[可変フォントガイド](/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide)にあります。 + +### フォントの太さの変数の制御 (wght) + +以下のコードブロック内の "Play" をクリックすると、 MDN Playground で例を編集できます。 CSS を編集して、様々なフォントの太さの値を試してみてください。太さの範囲から外れた値を指定した場合に何が起こるのかを確認してください。 + +```html hidden live-sample___variable-fonts-weight-example +
    +

    Weight

    + (font-weight: 625) +
    +
    +

    Weight

    + (font-variation-settings: "wght" 625) +
    +
    +

    Weight

    + (font-variation-settings: "wght" 625)
    + + +
    +``` + +```css hidden live-sample___variable-fonts-weight-example +@font-face { + font-family: "Amstelvar VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2") + format("woff2-variations"); + font-weight: 300 900; + font-stretch: 35% 100%; + font-style: normal; + font-display: swap; +} + +p { + font: + 1.2em "Amstelvar VF", + Georgia, + serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 625; +} +``` + +```css live-sample___variable-fonts-weight-example +/* weight range is 300 to 900 */ +.p1 { + font-weight: 625; +} + +/* weight range is 300 to 900 */ +.p2 { + font-variation-settings: "wght" 625; +} + +/* Adjust with slider & custom property */ +.p3 { + font-variation-settings: "wght" var(--text-axis); +} +``` + +```js hidden live-sample___variable-fonts-weight-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); -### 太さ (wght) +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` + +{{EmbedLiveSample("variable-fonts-weight-example", "", "450px")}} + +### フォントの傾きの変数の制御 (slnt) + +以下のコードブロック内の "Play" をクリックすると、 MDN Playground で例を編集できます。 CSS を編集して、様々なフォントの太さの値を試してみてください。 + +```html hidden live-sample___variable-fonts-slant-example +
    +

    Slant

    + (font-style: oblique 14deg) +
    +
    +

    Slant

    + (font-variation-settings: 'slnt' 12) +
    +
    +

    Slant

    + (font-variation-settings: 'slnt' 5)
    + + +
    +``` -以下のデモの CSS は、フォントの太さの値を編集することができます。 +```css hidden live-sample___variable-fonts-slant-example +@font-face { + font-family: "Roboto VF"; + src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/Roboto-VF.woff2") + format("woff2-variations"); + font-weight: 100 900; + font-stretch: 75% 100%; + font-style: oblique 0deg 12deg; + font-display: swap; +} + +p { + font: + 1.2em "Roboto VF", + Helvetica, + sans-serif; + font-size: 4rem; + margin: 1rem; + display: inline-block; +} + +.adjustable { + border: 1px dashed; + --text-axis: 5; +} +``` -{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}} +```css live-sample___variable-fonts-slant-example +/* 傾きの範囲は 0deg ～ 12deg */ +.p1 { + font-style: oblique 14deg; +} + +/* 傾きの範囲は 0 ～ 12 */ +.p2 { + font-variation-settings: "slnt" 12; +} + +/* スライダーとカスタムプロパティで調整 */ +.p3 { + font-variation-settings: "slnt" var(--text-axis); +} +``` -### 傾き (slnt) +```js hidden live-sample___variable-fonts-slant-example +const angle = document.querySelector("#text-axis"); +const text = document.querySelector("#angle-text"); +const adjustable = document.querySelector(".adjustable"); -以下のデモの CSS は、フォントの傾きの値を編集することができます。 +angle.addEventListener("input", (e) => { + const angle = e.target.value; + text.innerText = angle; + adjustable.style.setProperty("--text-axis", angle); +}); +``` -{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}} +{{EmbedLiveSample("variable-fonts-slant-example", "", "450px")}} ## 仕様書 @@ -120,6 +281,8 @@ font-variation-settings: unset; ## 関連情報 -- [可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) -- [OpenType Font Variations Overview](https://docs.microsoft.com/typography/opentype/spec/otvaroverview) -- [OpenType Design-Variation Axis Tag Registry](https://docs.microsoft.com/typography/opentype/spec/dvaraxisreg) +- [可変フォントガイド](/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) +- [OpenType font variations overview](https://learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview) (microsoft.com) +- [OpenType design-variation axis tag registry](https://learn.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg) (microsoft.com) +- [OpenType variable fonts](https://www.axis-praxis.org/) (axis-praxis.org) +- [Variable fonts](https://v-fonts.com/) (v-fonts.com) From 06ec3317f2187441ab58463567dfc12ff0bb9231 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 01:58:57 +0900 Subject: [PATCH 133/279] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/font-palette/palette-mix/index.md | 127 ++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 files/ja/web/css/font-palette/palette-mix/index.md diff --git a/files/ja/web/css/font-palette/palette-mix/index.md b/files/ja/web/css/font-palette/palette-mix/index.md new file mode 100644 index 00000000000000..7dd09605b33161 --- /dev/null +++ b/files/ja/web/css/font-palette/palette-mix/index.md @@ -0,0 +1,127 @@ +--- +title: palette-mix() +slug: Web/CSS/font-palette/palette-mix +l10n: + sourceCommit: 879e0a9c9d60831afcc7f66ea1b5f43ea0cd4361 +--- + +{{CSSRef}}{{SeeCompatTable}} + +**`palette-mix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、新しい {{cssxref("font-palette")}} 値を、指定したパーセント値と色混合方式によって 2 個の `font-palette` 値を混ぜ合わせることによって生成することができます。 + +## 構文 + +```css +/* フォント定義のパレットを混合 */ +font-palette: palette-mix(in lch, normal, dark) + +/* 作者定義のパレットを混合 */ +font-palette: palette-mix(in lch, --blues, --yellows) + +/* 混合するそれぞれのパレットの様々なパーセント値 */ +font-palette: palette-mix(in lch, --blues 50%, --yellows 50%) +font-palette: palette-mix(in lch, --blues 70%, --yellows 30%) + +/* さまざまな色混合方式 */ +font-palette: palette-mix(in srgb, --blues, --yellows) +font-palette: palette-mix(in hsl, --blues, --yellows) +font-palette: palette-mix(in hsl shorter hue, --blues, --yellows) + +``` + +### 値 + +関数記法: + +```plain +palette-mix(method, palette1 [p1], palette2 [p2]) +``` + +- `method` + - : 混合する伊六区間を指定する {{cssxref("<color-interpolation-method>")}} です。。 +- `palette1`, `palette2` + - : 互いに混合する {{cssxref("font-palette")}} 値です。これは任意の `font-palette` 値を取ることができます。 `palette-mix()` 関数、`normal`、`dark`、`light` などです。 +- `p1`, `p2` {{optional_inline}} + + - : {{cssxref("<percentage>")}} 値で、 `0%` ～ `100%` の間で混合するそれぞれのパレットの量を指定します。次のように一般化されます。 + + - `p1` と `p2` の両方が省略された場合は、 `p1 = p2 = 50%` となります。 + - `p1` が省略された場合は、 `p1 = 100% - p2` となります。 + - `p2` が省略された場合は、 `p2 = 100% - p1` となります。 + - `p1 = p2 = 0%` であった場合は、この関数は無効になります。 + - `p1 + p2 ≠ 100%` であった場合は、 `p1' = p1 / (p1 + p2)` および `p2' = p2 / (p1 + p2)` となります。ここで、 `p1'` と `p2'` は正規化された結果です。 + +## 例 + +### `palette-mix()` を使用して 2 つのパレットを混合 + +この例では、 `palette-mix()` 関数を使用して、新しいパレットを作成するために他の 2 つのパレットを混合する方法を示します。 + +#### HTML + +HTML には、フォント情報を適用するための 3 つの段落があります。 + +```html +

    Yellow palette

    +

    Blue palette

    +

    Mixed palette

    +``` + +#### CSS + +CSS では、 Google Fonts からカラーフォントをインポートし、 {{cssxref("@font-palette-values")}} アットルールを使って 2 つのカスタムフォントパレット値を定義します。次に、段落に 3 つの異なる `font-palette` 値（`--yellow`、`--blue`、そして `palette-mix()` を使って青色と黄色のパレットを混合して作成した新しい緑色のパレット）を適用します。 + +```css +@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap"); + +@font-palette-values --blueNabla { + font-family: Nabla; + base-palette: 2; /* これは Nabla の青いパレット */ +} + +@font-palette-values --yellowNabla { + font-family: Nabla; + base-palette: 7; /* これは Nabla の黄色いパレット */ +} + +p { + font-family: "Nabla"; + font-size: 4rem; + text-align: center; + margin: 0; +} + +.yellowPalette { + font-palette: --yellowNabla; +} + +.bluePalette { + font-palette: --blueNabla; +} + +.mixedPalette { + font-palette: palette-mix(in lch, --blueNabla 55%, --yellowNabla 45%); +} +``` + +#### 結果 + +出力結果は次のようになります。 + +{{EmbedLiveSample("Using `palette-mix()` to blend two palettes", "100%", 350)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("font-palette")}} +- {{cssxref("@font-palette-values", "@font-palette-values")}} +- {{cssxref("color_value/color-mix", "color-mix()")}} +- [CSS 色値](/ja/docs/Web/CSS/CSS_colors/Color_values)ガイド +- {{glossary("Color space","色空間")}} From d0d7afe1fb548a66e5ad2ed50e43afbb00114b67 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Sun, 24 Nov 2024 23:24:16 +0800 Subject: [PATCH 134/279] zh-CN: update Games/Anatomy (#23321) Co-authored-by: A1lo --- files/zh-cn/games/anatomy/index.md | 132 +++++++++++++++-------------- 1 file changed, 67 insertions(+), 65 deletions(-) diff --git a/files/zh-cn/games/anatomy/index.md b/files/zh-cn/games/anatomy/index.md index e3cc95c2698ac9..82210b2e2ad304 100644 --- a/files/zh-cn/games/anatomy/index.md +++ b/files/zh-cn/games/anatomy/index.md @@ -1,62 +1,64 @@ --- title: 剖析游戏结构 slug: Games/Anatomy +l10n: + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{GamesSidebar}} -本文从技术角度分析了一般电子游戏的结构和工作流程，就此介绍主循环是如何运行的。它有助于初学者了解在现代游戏开发领域构建游戏时需要什么，以及如何将 JavaScript 这样的 Web 标准工具作为自己的工具使用。游戏开发经验丰富但不熟悉 Web 开发的开发者也能从中受益。 +本文从技术角度分析了一般电子游戏的结构和工作流程，就此介绍主循环是如何运行的。它有助于初学者了解在现代游戏开发领域构建游戏时需要什么，以及理解像 JavaScript 这样的 Web 标准是如何成为可用于开发游戏的工具的。游戏开发经验丰富但不熟悉 Web 开发的开发者也能从本文中受益。 ## 呈现、接收、解释、计算、重复 -所有电子游戏的目标都是向用户**呈现**一个场景，**接收**他们的输入，将这些输入信号**解释**为动作，并**计算**出由这些动作产生的新场景。游戏不断地循环遍历，一遍又一遍，直到遇到某些终止条件（比如赢、输或者退出睡觉）。毫不奇怪，这种模式与游戏引擎的编程方式相呼应。 +所有电子游戏的目标都是向用户**呈现**一个场景，**接收**他们的输入，将这些输入信号**解释**为动作，并**计算**出由这些动作产生的新场景。游戏不断地循环遍历，一遍又一遍，直到遇到某些终止条件（比如赢、输或者用户退出休息）。毫不奇怪，这种模式与游戏引擎的编程方式相呼应。 具体情况取决于游戏本身。 -一些游戏通过**用户输入**来驱动这个循环。想象一下，你正在开发一种“大家来找茬”类型的游戏。这些游戏向用户**呈现**两张图片，游戏**接收**点击（或触摸）；将用户输入**解释**为成功，失败，暂停，菜单交互等。最后，游戏根据用户的输入**计算并更新**游戏场景。这种游戏是由用户的输入驱动，也就是说，它会在用户进行输入之后冻结画面，等待玩家进行新的输入。这是一种基于回合的游戏类型，它不需要每帧持续更新画面，只有当玩家作出反应时才会。 +一些游戏通过**用户输入**来驱动这个循环。想象一下，你正在开发一种“_找不同_”类型的游戏。这些游戏向用户**呈现**两张图片、**接收**用户的点击（或触摸）、将用户输入**解释**为成功、失败、暂停、菜单交互等。最后，游戏根据用户的输入**计算**得到新的游戏场景。这种游戏是由用户的输入驱动，也就是说，它会在用户进行输入之后冻结画面，等待玩家进行新的输入。这是一种基于回合的游戏类型，它不需要每帧持续更新画面，只有当玩家作出反应时才会。 -另一些游戏需要尽可能控制每一个细微的时间片（动画）。与上述原理有点小区别：每个动画帧都将循环遍历，并在之后第一个可用的轮次捕获玩家输入的任何变化。这种每帧一次的模型是通过一个叫**主循环**的东西实现的。如果你的游戏循环是基于时间的，则必须保证对主循环精准的模拟。 +另一些游戏需要尽可能控制每一个细微的时间片段。与上述原理有点小区别：每个动画帧都将循环遍历，并在之后第一个可用的轮次捕获玩家输入的任何变化。这种每帧一次的模型是通过一个叫**主循环**的东西实现的。如果你的游戏循环是基于时间的，则必须保证对主循环精准的模拟。 -但它也可能不需要逐帧控制。你的游戏循环可能类似找不同的例子，并以输入事件作为基础。它可能需要输入和模拟时间片。它甚至可以基于其他的东西来循环。 +但它也可能不需要逐帧控制。你的游戏循环可能类似于*找不同*的例子，并且以输入事件作为基础，那么它可能同时需要输入和模拟时间片段。它甚至可以基于其他的东西来循环。 -现代 JavaScript - 正如下一节中所描述的 - 它可以轻松开发出一个高效的，逐帧执行的主循环，这很值得庆幸。当然，你的游戏只会按照你所做的那样优化。如果某些东西看起来应该被添加到一个更罕见的事件里，那么将它从主循环中剥离出来通常是个好主意（但并非总是如此）。 +正如我们将再下一节中所描述的，现代 JavaScript 可以轻松开发出一个高效的，逐帧执行的主循环。当然，你的游戏只会按照你所做的那样优化。如果某些东西看起来应该被添加到一个更少发生的事件里，那么将它从主循环中剥离出来通常是个好主意（但并非总是如此）。 ## 在 JavaScript 中构建一个主循环 JavaScript 能很好的处理事件和回调函数。现代浏览器努力在需要的时候调用方法，并在间隙中闲下来（或做其他任务）。将你的代码附加到适合它们的时刻是一个很好的主意。考虑一下你的函数是需要在严格的时间周期内，还是每一帧，或者仅仅是在发生了其他情况之后执行。当你的函数需要被调用时，要更具体地使用浏览器，这样浏览器就可以在调用时进行优化。而且，这可能会让你的工作更轻松。 -有些代码需要逐帧运行，所以应将其附加到浏览器的重绘周期中，没有比这更好的了！在 Web 中，通常 {{domxref("window.requestAnimationFrame()")}} 方法是大多数良好的逐帧循环的基础。在调用该方法时必须传入一个回调函数，这个回调函数将在下一次重新绘制之前执行。下面是一个简单的主循环的例子： +有些代码需要逐帧运行，所以应将其附加到浏览器的重绘周期中，没有比这更好的了！在 Web 中通常将 {{domxref("window.requestAnimationFrame()")}} 方法作为大多数良好的逐帧循环的基础。在调用该方法时必须传入一个回调函数，这个回调函数将在下一次重新绘制之前执行。下面是一个简单的主循环的例子： ```js window.main = () => { window.requestAnimationFrame(main); - // 无论你的主循环需要做什么 + // 你的主循环可以做你想要做的任何事情 }; -main(); // 开始循环 +main(); // 开始主循环 ``` > [!NOTE] -> 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`，这不是随意的，它被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。 +> 在这里讨论的每个 `main()` 方法中，在执行循环内容之前，我们会递归调用一个新的 `requestAnimationFrame`。这不是毫无根据而写的：这样做被认为是最佳实践。如果你的当前帧错过了它的垂直同步窗口的周期，你也在下一个帧通过 `requestAnimationFrame` 尽早的调用 `main()`，从而确保浏览器能够及时地执行。 -上面的代码块有两个语句。第一个语句创建一个名为 `main()` 中的全局变量的函数。这个函数做一些工作，也告诉浏览器在下一帧通过 `window.requestAnimationFrame()` 调用本身。第二个语句调用第一个语句中定义的 `main()` 函数。因为 `main()`中在第二个语句中被调用一次，而每次调用都将自身又放置到下一个帧的执行队列中，因此 `main()` 的调用与你的帧率同步。 +上面的代码块有两个语句。第一个语句创建一个名为 `main()` 的全局变量的函数。这个函数会执行一些操作，同时告诉浏览器在下一帧通过 `window.requestAnimationFrame()` 调用本身。第二个语句调用第一个语句中定义的 `main()` 函数。因为 `main()` 中在第二个语句中被调用一次，而每次调用都将自身又放置到下一个帧的执行队列中，因此 `main()` 的调用与你的帧率同步。 -当然，这个循环并不完美。不过在讨论如何改善之前，让我们先讨论一下它已经做好了什么。 +当然，这个循环并不完美。不过在讨论如何改善之前，让我们先讨论一下它已经做到了什么。 将主循环的时机安排在浏览器每次的绘制显示中，允许你能像浏览器想要绘制的那样频繁的运行你的循环。你能够控制每一帧动画，并且 `main()` 是循环中唯一执行的函数，所以这很简单。主视角射击游戏（或类似的游戏）每一帧都会出现一个新的场景。没有比这种方法更平滑并绘制及时的了。 -但是不要马上认为动画必需要帧帧控制。通过 CSS 动画或浏览器中的其他工具，可以很容易实现简单的动画，甚至 GPU 加速。有很多这样的东西，它们会让你的工作更轻松。 +但是不要马上认为动画必需要帧帧控制。通过 CSS 动画或浏览器中的其他工具，我们也可以很容易实现简单的动画，甚至能用上 GPU 加速。还有有很多类似这样的工具能让我们的开发变得更加简单。 ## 在 JavaScript 中构建一个更好的主循环 -在前面的主循环中有两个明显的问题：`main()` 污染了 {{domxref("window")}} 对象（所有全局变量存储的对象），并且示例代码没有给我们留下一个停止循环的方法，除非整个浏览器选项卡被关闭或刷新。对于第一个问题，如果你希望主循环只运行，并且不需要被简单（直接）访问它，你可以将它作为一个立即调用的函数表达式（IIFE）创建。 +在前面的主循环中有两个明显的问题：`main()` 污染了 {{domxref("window")}} 对象（所有全局变量存储的对象），并且示例代码没有给我们留下一个*停止*循环的方法（除非整个标签页被关闭或刷新）。对于第一个问题，如果你希望主循环只运行，并且不需要被简单（直接）地访问，你可以将它创建为一个立即调用的函数表达式（IIFE）。 ```js /* * 以分号开头是为了以防此示例上方的代码行依赖于自动分号插入（ASI）。 -* 浏览器可能会意外地认为整个示例从上一行继续。 +* 浏览器可能会意外地认为整个示例会从上一行继续。 * 如果前一行不为空或终止，则前面的分号标志着新行的开始。 */ @@ -72,18 +74,18 @@ main(); // 开始循环 ``` -当浏览器遇到这个 IIFE 时，它将定义你的主循环，并立即将其加入下一个帧的更新队列中。`main`（或 `main()` 方法）不会被附加到任何对象，在应用程序的其他地方仍是一个有效的未使用的名称，仍可以自由地定义为其他的东西。 +当浏览器遇到这个 IIFE 时，它将定义你的主循环，并立即将其加入下一个帧的更新队列中。`main`（或作为方法而言的 `main()`）不会被附加到任何对象。它在应用程序的其他地方仍是一个有效的未使用的名称，仍可以自由地被定义为其他的东西。 > [!NOTE] -> 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用`cancelAnimationFrame()`。 +> 在实践中，更常见的终止下一个 `requestAnimationFrame()` 方式是使用 if 语句，而不是调用 `cancelAnimationFrame()`。 -对于第二个问题，要终止循环，你需要调用 `window.cancelAnimationFrame()` 来取消 `main()` 的调用。该方法需要传入你最后一次调用 `requestAnimationFrame()` 时返回的 ID。让我们假设你的游戏的函数和变量是建立在你称为 MyGame 的名称空间上。扩展我们的最后一个例子，主循环现在看起来是这样的： +对于第二个问题，要终止循环，你需要调用 {{domxref("window.cancelAnimationFrame()")}} 来取消 `main()` 的调用。该方法需要传入你最后一次调用 `requestAnimationFrame()` 时返回的 ID。让我们假设你的游戏的函数和变量是建立在你称为 `MyGame` 的名称空间上。扩展我们的最后一个例子，主循环现在看起来是这样的： ```js /* * 以分号开头是为了以防此示例上方的代码行依赖于自动分号插入（ASI）。 -* 浏览器可能会意外地认为整个示例从上一行继续。 +* 浏览器可能会意外地认为整个示例会从上一行继续。 * 如果前一行不为空或终止，则前面的分号标志着新行的开始。 * * 让我们假设 MyGame 是之前定义的。 @@ -101,45 +103,45 @@ main(); // 开始循环 ``` -现在，我们在 MyGame 名称空间中声明了一个变量`stopMain`，其值为主循环最后调用 `requestAnimationFrame()` 时返回的 ID。任何时候，我们可以通过告诉浏览器取消与 ID 相对应的请求来停止主循环。 +现在，我们在 `MyGame` 名称空间中声明了一个变量 `stopMain`，其值为主循环最后调用 `requestAnimationFrame()` 时返回的 ID。任何时候，我们可以通过告诉浏览器取消与 ID 相对应的请求来停止主循环。 ```js window.cancelAnimationFrame(MyGame.stopMain); ``` -在 JavaScript 的中编写主循环的关键在于，考虑到任何会驱动你行为的事件，并注意不同的系统是如何相互作用的。你可能拥有多个由多个不同类型的事件驱动的组件。这看起来像是不必要的复杂性，但它可能就是一个很好的优化（当然，不一定是这样的）。问题是，你并不是在编写一个典型的主循环。在 JavaScript 中，你使用的是浏览器的主循环，并且你正在尝试这样做。 +在 JavaScript 的中编写主循环的关键在于考虑到任何会驱动你行为的事件，同时要注意不同的系统是如何相互作用的。你可能拥有多个由多个不同类型的事件驱动的组件。这看起来像是不必要地变复杂了，但它可能也是一个很好的优化（当然也不一定）。问题是，你并不是在编写一个典型的主循环。在 JavaScript 中，你使用的是浏览器的主循环，并且你正在尝试这样做。 ## 用 JavaScript 构建一个更优化的主循环 基本上，在 JavaScript 的中，浏览器有它自己的主循环，而你的代码存在于循环某些阶段。上面描述的主循环，试图避免脱离浏览器的控制。这种主循环附着于 `window.requestAnimationFrame()` 方法，该方法将在浏览器的下一帧中执行，具体取决于浏览器如何与将其自己的主循环关联起来。[W3C 的 requestAnimationFrame 规范](https://www.w3.org/TR/animation-timing/)并没有真正定义什么时候浏览器必须执行 requestAnimationFrame 回调。这有一个好处，浏览器厂商可以自由地实现他们认为最好的解决方案，并随着时间的推移进行调整。 -现代版的 Firefox 和 Google Chrome（可能还有其他版本）试图在框架的时间片的开始时尝试将 `requestAnimationFrame` 回调与它们的主线程进行连接。因此，浏览器的主线程看起来就像下面这样： +现代版的 Firefox 和 Google Chrome（可能还有其他浏览器）都尝试图在框架的时间片段的开始时*尝试*将 `requestAnimationFrame` 回调与它们的主线程进行连接。因此，浏览器的主线程*看起来*就像下面这样： -1. 启动一个新帧（而之前的帧由显示处理）。 -2. 遍历 `requestAnimationFrame` 回调并调用它们。 +1. 启动一个新帧（而之前的帧由显示器处理）。 +2. 遍历 `requestAnimationFrame` 回调列表并调用它们。 3. 当上面的回调停止控制主线程时，执行垃圾收集和其他帧任务。 -4. 睡眠（除非事件打断了浏览器的小睡），直到显示器准备好你的图像（[VSync](https://www.techopedia.com/definition/92/vertical-sync-vsync)）并重复。 +4. 睡眠（除非事件打断了浏览器的睡眠），直到显示器准备好你的图像（[垂直同步](https://www.techopedia.com/definition/92/vertical-sync-vsync)）并重复。 -你可以考虑开发实时应用程序，因为有时间做工作。所有上述步骤都必须在每 16 毫秒内进行一次，以保持 60 赫兹的显示效果。浏览器会尽可能早地调用你的代码，从而给它最大的计算时间。你的主线程通常会启动一些甚至不在主线程上的工作负载（如 WebGL 的中的光栅化或着色器）。在浏览器使用其主线程管理垃圾收集，其他任务或处理异步事件时，可以在 Web Worker 或 GPU 上执行长时间的计算。 +你可以考虑开发实时应用程序，因为有时间做工作。所有上述步骤都必须在每 16 毫秒内进行一次，以跟上 60Hz 的显示器。浏览器会尽可能早地调用你的代码，从而给它最大的计算时间。你的主线程通常会启动一些甚至不在主线程上的工作负载（如 WebGL 的中的光栅化或着色器）。在浏览器使用其主线程管理垃圾收集，其他任务或处理异步事件时，可以在 Web Worker 或 GPU 上执行长时间的计算。 -当我们讨论预算时，许多网络浏览器都有一个称为高分辨率时间的工具。{{jsxref("Date")}} 对象不再是计时事件的识别方法，因为它非常不精确，可以由系统时钟进行修改。另一方面，高分辨率的时间计算自 `navigationStart`（当上一个文档被卸载时）的毫秒数。这个值以小数的精度返回，精确到千分之一毫秒。它被称为{{ domxref("DOMHighResTimeStamp") }}，但是，无论出于什么目的和目的，都认为它是一个浮点数。 +当我们讨论预算时间时，许多 Web 浏览器都有一个称为*高解析度时间*的工具。{{jsxref("Date")}} 对象不再是公认的事件计时方法，因为它非常不精确，可以由系统时钟进行修改。另一方面，高解析度时间计算自 `navigationStart`（当上一个文档被卸载时）的毫秒数。这个值以小数的精度返回，精确到千分之一毫秒。它被称为 {{domxref("DOMHighResTimeStamp")}}，但是，无论出于什么意图和目的，都认为它是一个浮点数。 > [!NOTE] -> 系统（硬件或软件）不能达到微秒精度，可以提供毫秒精度的最小值然而，如果他们能够做到这一点，他们就应该提供 0.001 毫秒的准确性。 +> 系统（硬件或软件）不能达到微秒精度，则至少提供毫秒级的精度。不过，如果能够达到微秒的精度，那就应该提供这一精度。 这个值本身并不太有用，因为它与一个相当无趣的事件相关，但它可以从另一个时间戳中减去，以便准确准确地确定这两个点之间的时间间隔。要获得这些时间戳中的一个，你可以调用 `window.performance.now()` 并将结果存储为一个变量。 ```js -var tNow = window.performance.now(); +const tNow = window.performance.now(); ``` -回到主循环的主题。你将经常想知道何时调用主函数。因为这是常见的，`window.requestAnimationFrame()` 总是提供一个 `DOMHighResTimeStamp` 执行时回调函数作为参数。这将导致我们之前的主循环的另一个增强。 +回到主循环的主题。你将经常想知道何时调用主函数。因为这是常见的，`window.requestAnimationFrame()` 总是在执行回调函数时提供 `DOMHighResTimeStamp` 作为其参数。这将为我们之前的主循环带来另一个增强。 ```js /* * 以分号开头是为了以防此示例上方的代码行依赖于自动分号插入（ASI）。 -* 浏览器可能会意外地认为整个示例从上一行继续。 +* 浏览器可能会意外地认为整个示例会从上一行继续。 * 如果前一行不为空或终止，则前面的分号标志着新行的开始。 * * 我们还假设 MyGame 是以前定义的。 @@ -150,7 +152,7 @@ var tNow = window.performance.now(); MyGame.stopMain = window.requestAnimationFrame(main); // 你的主循环内容 - // tFrame，来自"function main(tFrame)"，现在是由 rAF 提供的 DOMHighResTimeStamp。 + // tFrame，来源于“function main(tFrame)”，现在变为是由 rAF 提供的 DOMHighResTimeStamp。 } main(); // 开始循环 @@ -158,9 +160,9 @@ var tNow = window.performance.now(); ``` -其他一些优化是可能的，这取决于你的游戏想要完成什么。你的游戏类型显然会有所不同，但它甚至可能比这更微妙。你可以在画布上单独绘制每个像素，也可以将 DOM 元素（包括具有透明背景的多个 WebGL 的画布）放入复杂的层次结构中。每条路径都将导致不同的机会和约束。 +其他一些优化是可能的，这取决于你的游戏想要完成什么。你的游戏类型显然会有所不同，但它甚至可能比这更微妙。你可以在画布上单独绘制每个像素，也可以将 DOM 元素（包括具有透明背景的多个 WebGL 的画布）放入复杂的层次结构中。每条路径都将带来不同的机会和约束。 -## 决定......时间 +## 决定……时间 你将需要对你的主循环作出艰难的决定：如何模拟准确的时间进度。如果你想要控制每一帧，那么你需要确定你的游戏更新和绘制的频率，你甚至可能希望以不同的速率进行更新和绘制。你还需要考虑如果用户的系统无法跟上工作负载，那么你还需考虑如何优雅降级，以保证性能。让我们首先假定你会在每次绘制时，同时处理用户的输入，并更新游戏状态。我们稍后再细讲。 @@ -169,7 +171,7 @@ var tNow = window.performance.now(); ### 大多数浏览器游戏应该是什么样的 -如果你的游戏可以达到你所支持的任何硬件的最大刷新率，那么你的工作就变得相当容易了。你可以简单地进行更新，渲染，然后在垂直同步之前什么都不用做。 +如果你的游戏可以达到你所支持的任何硬件的最大刷新率，那么你的工作就变得相当容易了。你可以简单地进行更新、渲染，然后在垂直同步之前什么都不用做。 ```js @@ -181,8 +183,8 @@ var tNow = window.performance.now(); * 我们还假设 MyGame 是以前定义的。 */ -;(function(){ - function main(tFrame){ +;(() => { + function main(tFrame) { MyGame.stopMain = window.requestAnimationFrame(main); update(tFrame); // 调用 update 方法。在我们的例子中，我们给它 rAF 的时间戳。 @@ -194,20 +196,20 @@ var tNow = window.performance.now(); ``` -如果无法达到最大刷新率，可以调整画面质量设置以保持你的时间预算。这个概念最有名的例子是 id Software 的 RAGE 游戏，这个游戏取消了用户的控制权，以使其计算时间保持在大约 16ms（或大约 60fps）。如果计算时间过长，则提交的解析度就降低，纹理和其他资源将无法加载或绘制等。这个（非网络）案例研究做了一些假设和折衷： +如果无法达到最大刷新率，可以调整画面质量设置以保持你的时间预算。这个概念最有名的例子是 id Software 的游戏——狂怒。这个游戏取消了用户的控制权，以使其计算时间保持在大约 16ms（或大约 60fps）。如果计算时间过长，渲染的分辨率就会降低，纹理和其他资源将无法加载或绘制等。这个（非 Web 的）案例研究做了一些假设和折衷： -- 每个动画帧都占用户输入。 +- 每个动画帧都考虑用户输入。 - 没有帧需要外推（猜测），因为每个绘图都有自己的更新。 - 仿真系统基本上可以假定每次完全更新间隔约 16ms。 - 给用户控制质量设置将是一场噩梦。 - 不同的监视器以不同的速率输入：30FPS、75FPS、100FPS、120FPS、144FPS 等 -- 无法跟上 60 FPS 的系统会失去视觉质量，以保持游戏运行的最佳速度（最终如果质量太低，则会彻底失败）。 +- 无法跟上 60 FPS 的系统会失去视觉质量，以保持游戏运行的最佳速度（最终如果质量太低，则会是彻底的失败）。 ### 处理可变刷新率需求的其他方法 存在其他解决问题的方法。 -一种常见的技术是以恒定的频率更新模拟，然后绘制尽可能多的（或尽可能少的）实际帧。更新方法可以继续循环，而不用考虑用户看到的内容。绘图方法可以查看最后的更新以及发生的时间。由于绘制知道何时表示，以及上次更新的模拟时间，它可以预测为用户绘制一个合理的框架。这是否比官方更新循环更频繁（甚至更不频繁）无关紧要。更新方法设置检查点，并且像系统允许的那样频繁地，渲染方法画出周围的时间。在 Web 标准中分离更新方法有很多种方法： +一种常见的技术是以恒定的频率更新模拟，然后绘制尽可能多的（或尽可能少的）实际帧。更新方法可以继续循环，而不用考虑用户看到的内容。绘图方法可以查看最后的更新以及发生的时间。由于绘制知道何时表示，以及上次更新的模拟时间，它可以预测为用户绘制一个合理的框架。这是否比官方更新循环更频繁（甚至更不频繁）无关紧要。更新方法设置检查点，并且像系统允许的那样频繁地，渲染方法画出周围的时间。在 Web 标准中分离更新有很多种方法： - 在 `requestAnimationFrame()` 中绘制，并在 {{domxref("Window.setInterval", "setInterval()")}} 或 {{domxref("Window.setTimeout", "setTimeout()")}} 中更新。 @@ -223,16 +225,16 @@ var tNow = window.performance.now(); 这些方法中的每一种都有类似的权衡： -- 用户可以跳过渲染帧或根据其性能内插额外的帧。 -- 你可以指望所有用户以相同的恒定频率更改打嗝的更新非美容变量。 +- 用户可以跳过渲染帧或根据其性能插入额外的帧。 +- 你可以指望所有用户以相同的固定频率更新非修饰性的变量，而不会卡顿。 - 程序比我们前面看到的基本循环要复杂得多。 - 用户输入完全被忽略，直到下次更新（即使用户具有快速设备）。 -- 强制性内插具有性能损失。 +- 强制插帧具有性能损失。 -单独的更新和绘图方法可能如下面的示例。为了演示，该示例基于第三个项目符号，只是不使用 Web Workers 进行可读性（而且我们诚实地说可写性）。 +单独的更新和绘图方法可能类似于下面的示例。为了演示，该示例基于第三点，只是没有使用 Web Worker 以提高可读性（老实说，也包含可写性）。 > [!WARNING] -> 这个例子，具体来说，需要进行技术审查。 +> 这个例子需要进行单独的技术审查。 ```js @@ -243,37 +245,37 @@ var tNow = window.performance.now(); * * 我们还假设 MyGame 是以前定义的。 * -* MyGame.lastRender 跟踪最后提供的 requestAnimationFrame 时间戳。 -* MyGame.lastTick 跟踪最后更新时间。始终以 tickLength 递增。 -* MyGame.tickLength 是游戏状态更新的频率。这是 20 Hz(50ms)。 +* MyGame.lastRender 跟踪上一次提供的 requestAnimationFrame 时间戳。 +* MyGame.lastTick 跟踪上次更新时间。始终以 tickLength 递增。 +* MyGame.tickLength 是游戏状态更新的频率。这里是 20 Hz（50ms）。 * -* timeSinceTick 是 requestAnimationFrame 回调和最后一次更新之间的时间。 +* timeSinceTick 是 requestAnimationFrame 回调和上一次更新之间的时间。 * numTicks 是这两个呈现帧之间应该发生的更新次数。 * * render() 传入 tFrame, 因为 render 方法可能需要计算 * tFrame 距离最近的更新已经过去了多久，通过外推的方式 -* 来获得场景数据。(对于快速设备，render 方法是纯表现性的)。 +* 来获得场景数据。（对于快速设备，render 方法是纯装饰性的）。 * 用以绘制场景。 * * update() 根据给定时间点计算游戏状态。通常需要用 tickLength * 作为循环参数，递增更新。来保证游戏状态的严谨。传入 DOMHighResTimeStamp -* 格式的当前时间。（除非需要增加暂停功能，传入的时间应该总是 -* 最后更新时间 + 游戏的 tick 间隔。) +* 代表当前时间。（除非需要增加暂停功能，传入的时间应该总是 +* 上次更新时间 + 游戏的 tick 间隔。） * -* setInitialState() 执行在运行 mainloop 之前需要的任何任务。 -* 它只是一个普通的示例函数，表示你在 mainloop 前做过的事。 +* setInitialState() 执行在运行主循环之前需要的任何任务。 +* 它只是一个你可能添加的通用示例函数。 */ -;(function(){ - function main(tFrame){ +;(() => { + function main(tFrame) { MyGame.stopMain = window.requestAnimationFrame(main); - var nextTick = MyGame.lastTick + MyGame.tickLength; - var numTicks = 0; + const nextTick = MyGame.lastTick + MyGame.tickLength; + let numTicks = 0; - // 如果 tFrame < nextTick，则需要更新 0 个 ticks（对于 numTicks，默认为 0）。 + // 如果 tFrame < nextTick，则需要更新 0 个 tick（对于 numTicks，默认为 0）。 // 如果 tFrame = nextTick，则需要更新 1 tick（等等）。 // 备注：正如我们在总结中提到的那样，你应该跟踪 numTicks 的大小。 - // 如果它很大，那么你的游戏是睡着了，或者机器无法跟上。 + // 如果它很大，要么你的游戏是卡住了，要么机器无法跟上。 if (tFrame > nextTick) { const timeSinceTick = tFrame - MyGame.lastTick; numTicks = Math.floor(timeSinceTick / MyGame.tickLength); @@ -286,7 +288,7 @@ var tNow = window.performance.now(); function queueUpdates(numTicks) { for (let i = 0; i < numTicks; i++) { - MyGame.lastTick += MyGame.tickLength; // 现在 lastTick 是这个刻度。 + MyGame.lastTick += MyGame.tickLength; // 现在 lastTick 应是这一时间。 update(MyGame.lastTick); } } @@ -301,13 +303,13 @@ var tNow = window.performance.now(); ``` -另一个选择是简单地做一些事情不那么频繁。如果你的更新循环的一部分难以计算但对时间不敏感，则可以考虑缩小其频率，理想情况下，在延长的时间段内将其扩展成块。这是一个隐含的例子，在火炮博物馆的炮兵游戏中，他们[调整垃圾发生率](https://web.archive.org/web/20161021030645/http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html)来优化垃圾收集。显然，清理资源不是时间敏感的（特别是如果整理比垃圾本身更具破坏性）。 +另一个选择是简单地做一些事情不那么频繁。如果你的更新循环的一部分难以计算但对时间不敏感，则可以考虑缩小其频率，理想情况下，在延长的时间段内将其扩展成块。这是一个隐含的例子，在火炮博物馆的炮兵游戏中，他们[调整垃圾发生率](https://web.archive.org/web/20161021030645/http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html)来优化垃圾回收。显然，清理资源不是时间敏感的（特别是如果整理比垃圾本身更具破坏性）。 这也可能适用于你自己的一些任务。那些是当可用资源成为关注点时的好候选人。 -## 概要 +## 总结 -我知道上述的任何一种，或许没有适合你的游戏。正确的决定完全取决于你愿意（和不愿意）做出的权衡。主要关心的是切换到另一个选项。幸运的是，我没有任何经验，但我听说这是一个令人难以置信的游戏的 Whack-a-Mole。 +我知道上述的任何一种，或许没有适合你的游戏。正确的决定完全取决于你愿意（和不愿意）做出的权衡。主要关心的是切换到另一个选项。幸运的是，我没有任何经验，但我听说这是一个令人痛苦的打地鼠游戏。 像 Web 这样的受管理平台，要记住的一件重要的事情是，你的循环可能会在相当长的一段时间内停止执行。当用户取消选择你的标签并且浏览器休眠（或减慢）其 `requestAnimationFrame` 回调间隔时，可能会发生这种情况。你有很多方法来处理这种情况，这可能取决于你的游戏是单人游戏还是多人游戏。一些选择是： From 6c1c2d579c3644b63ba563f24d873a8b27cd1a7d Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 24 Nov 2024 21:23:11 +0300 Subject: [PATCH 135/279] [ru] add `Web/URI` document (#24655) [ru] add 'Web/URI' document --- files/ru/_redirects.txt | 4 +--- files/ru/_wikihistory.json | 4 ---- .../ru/web/html/global_attributes/id/index.md | 2 +- files/ru/web/http/session/index.md | 2 +- .../uri}/index.md | 19 ++++++++----------- 5 files changed, 11 insertions(+), 20 deletions(-) rename files/ru/{orphaned/web/http/basics_of_http/identifying_resources_on_the_web => web/uri}/index.md (83%) diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 8e43fe69aa059d..855c146c3808b1 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -688,8 +688,7 @@ /ru/docs/Web/HTTP/Basics_of_HTTP /ru/docs/conflicting/Web/HTTP /ru/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /ru/docs/Web/URI/Schemes/data /ru/docs/Web/HTTP/Basics_of_HTTP/Data_URLs /ru/docs/Web/URI/Schemes/data -/ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web /ru/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web -/ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web_RU /ru/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web +/ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web /ru/docs/Web/URI /ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types /ru/docs/Web/HTTP/MIME_types /ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types /ru/docs/Web/HTTP/MIME_types/Common_types /ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Полный_список_типов_MIME /ru/docs/Web/HTTP/MIME_types/Common_types @@ -901,7 +900,6 @@ /ru/docs/XPath/Funkcje/floor /ru/docs/Web/XPath/Functions/floor /ru/docs/XSLT /ru/docs/Web/XSLT /ru/docs/en /en-US/ -/ru/docs/orphaned/Learn/Front-end_web_developer https://developer.mozilla.org/ru/curriculum/ /ru/docs/Заглавная_страница /ru/docs/Web /ru/docs/Повторное_введение_в_JavaScript /ru/docs/Web/JavaScript/Language_overview /ru/docs/Руководство_по_JavaScript_1.5 /ru/docs/Web/JavaScript/Guide diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 1ab5e405125a08..f3c2ebdd1816e7 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -15941,9 +15941,5 @@ "conflicting/Web/HTTP/Headers": { "modified": "2020-10-15T22:14:29.517Z", "contributors": ["Reddok", "J4CKVVH173"] - }, - "orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": { - "modified": "2020-01-09T21:04:16.499Z", - "contributors": ["rshmelev"] } } diff --git a/files/ru/web/html/global_attributes/id/index.md b/files/ru/web/html/global_attributes/id/index.md index c97f821cc420f5..8e22d4fb19bd58 100644 --- a/files/ru/web/html/global_attributes/id/index.md +++ b/files/ru/web/html/global_attributes/id/index.md @@ -5,7 +5,7 @@ slug: Web/HTML/Global_attributes/id {{HTMLSidebar("Global_attributes")}} -**{{glossary("global attribute", "Глобальный атрибут")}} `id`** устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование [идентификатора фрагмента](/ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment)), скриптинге или стилизации (с помощью {{glossary("CSS")}}). +**{{glossary("global attribute", "Глобальный атрибут")}} `id`** устанавливает элементу уникальный идентификатор (ID), имя которого должно быть уникальным в документе (на странице). Его назначением является идентификация элемента при связывании (использование [идентификатора фрагмента](/ru/docs/Web/URI#Fragment)), скриптинге или стилизации (с помощью {{glossary("CSS")}}). {{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}} diff --git a/files/ru/web/http/session/index.md b/files/ru/web/http/session/index.md index d065eb8c65e124..667a0d28b62f01 100644 --- a/files/ru/web/http/session/index.md +++ b/files/ru/web/http/session/index.md @@ -141,7 +141,7 @@ Content-Type: text/html ## Смотрите также -- [Определение ресурсов в Интернете](/ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web) +- [Определение ресурсов в Интернете](/ru/docs/Web/URI) - [HTTP заголовки](/ru/docs/Web/HTTP/Заголовки) - [Методы HTTP запроса](/ru/docs/Web/HTTP/Methods) - [Коды ответа HTTP](/ru/docs/Web/HTTP/Status) diff --git a/files/ru/orphaned/web/http/basics_of_http/identifying_resources_on_the_web/index.md b/files/ru/web/uri/index.md similarity index 83% rename from files/ru/orphaned/web/http/basics_of_http/identifying_resources_on_the_web/index.md rename to files/ru/web/uri/index.md index 6e85f735ef47ec..ecc0f95c9d7628 100644 --- a/files/ru/orphaned/web/http/basics_of_http/identifying_resources_on_the_web/index.md +++ b/files/ru/web/uri/index.md @@ -1,16 +1,13 @@ --- -title: Идентификация ресурсов в Вебе -slug: orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web -original_slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web +title: URI +slug: Web/URI --- -{{HTTPSidebar}} +{{QuickLinksWithSubpages("/ru/docs/Web/URI")}} -"Объект" (или "цель") HTTP-запроса называется "ресурс", чья природа может быть разной: фото, документ, или что-либо ещё. Каждый ресурс идентифицируется с помощью унифицированного идентификатора ресурса ({{Glossary("URI")}}) используемого повсюду в HTTP для идентификации ресурсов. +**Uniform Resource Identifiers (URI)** используются для идентификации «ресурсов» в Интернете. Обычно они используются в качестве целей запросов [HTTP](/ru/docs/Web/HTTP), в таком случае URI представляет местоположение физического ресурса, такого как документ, фотография, двоичные данные и т.д. URI также могут использоваться для других действий, например, открытия почтового клиента, отправки текстовых сообщений или выполнение JavaScript, при использовании в других местах, таких как атрибут [`href`](/ru/docs/Web/HTML/Element/a#href) HTML-ссылки ``. -Обычно чтобы описать конкретный ресурс (его имя) и его местоположение в Вебе, используется всего один URL (Uniform Resource Locator - Унифицированный локатор ресурса, вид URI, его ещё называют _веб-адресом_). Можно добавить, что иногда с помощью специального заголовка {{HTTPHeader("Alt-Svc")}} в ответе на запрос можно попросить клиента перезапросить ресурс с другой локации. - -## URLы и URNы +## URL и URN ### URL @@ -53,7 +50,7 @@ urn:ietf:rfc:7230 | Схема | Описание | | ----------- | -------------------------------------------------------------------------- | -| data | [Data URIs](/ru/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) | +| data | [Data URIs](/ru/docs/Web/URI/Schemes/data) | | file | Доступ к файлам на локальном компьютере | | ftp | [File Transfer Protocol](/ru/docs/Glossary/FTP) (протокол передачи файлов) | | http/https | [Hyper text transfer protocol (Secure)](/ru/docs/Glossary/HTTP) | @@ -114,5 +111,5 @@ mailto:help@supercyberhelpdesk.info ## Читайте также -- [Что такое URL?](/ru/docs/Learn/Common_questions/What_is_a_URL) -- [Список URI-схем IANA](http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml) +- [Что такое URL?](/ru/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) +- [Список URI-схем IANA](https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml) From d86656322787e7e137c60c0d60f46aa9a7e9db00 Mon Sep 17 00:00:00 2001 From: Hak Lee Date: Mon, 25 Nov 2024 10:06:58 +0900 Subject: [PATCH 136/279] [ko] update `web/api/web_share_api` (#24616) * docs(ko): create web/api/web_share_api markdown * fix: correct typos in the documentation * fix: remove unused frontmatter fileds --- files/ko/web/api/web_share_api/index.md | 74 +++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/ko/web/api/web_share_api/index.md diff --git a/files/ko/web/api/web_share_api/index.md b/files/ko/web/api/web_share_api/index.md new file mode 100644 index 00000000000000..203df6f16944d2 --- /dev/null +++ b/files/ko/web/api/web_share_api/index.md @@ -0,0 +1,74 @@ +--- +title: Web Share API +slug: Web/API/Web_Share_API +l10n: + sourceCommit: 44c4ec928281dc2d7c5ea42b7d2c74a2013f16ac +--- + +{{DefaultAPISidebar("Web Share API")}}{{securecontext_header}} + +**Web Share API**는 사용자가 선택한 공유 대상에 텍스트, 링크, 파일 및 기타 콘텐츠를 공유할 수 있는 메커니즘을 제공합니다. + +> [!NOTE] +> 이 API는 [Web Workers](/ko/docs/Web/API/Web_Workers_API)에서 사용할 수 없습니다 ({{domxref("WorkerNavigator")}}를 통해 노출되지 않음). + +> [!NOTE] +> 이 API를 웹사이트가 자신을 공유 대상으로 지정할 수 있도록 해주는 [Web Share Target API](/ko/docs/Web/Manifest/share_target)와 혼동해서는 안 됩니다. + +## 개념 및 사용 방법 + +**Web Share API**는 사이트가 텍스트, 링크, 파일 및 기타 콘텐츠를 사용자가 선택한 공유 대상으로 공유할 수 있도록 하며, 기본 운영 체제의 공유 메커니즘을 활용합니다. 이러한 공유 대상에는 일반적으로 시스템 클립보드, 이메일, 연락처 또는 메시징 애플리케이션, Bluetooth 또는 Wi-Fi 채널이 포함됩니다. + +이 API는 두 가지 메서드를 제공합니다. {{domxref("navigator.canShare()")}} 메서드는 데이터를 {{domxref("navigator.share()")}}에 전달하여 공유하기 전에 해당 데이터가 "공유 가능"한지 검증하는 데 사용할 수 있습니다. + +{{domxref("navigator.share()")}} 메서드는 기본 운영 체제의 네이티브 공유 메커니즘을 호출하고 지정된 데이터를 전달합니다. 이 메서드는 {{Glossary("transient activation", "임시 활성화")}}가 필요하므로 반드시 버튼 클릭과 같은 UI 이벤트에서 트리거되어야 하며, 메서드에 전달되는 데이터는 네이티브 구현에서 지원하는 유효한 데이터여야 합니다. + +**Web Share API**는 [web-share](/ko/docs/Web/HTTP/Headers/Permissions-Policy/web-share) 권한 정책에 의해 제한됩니다. 권한 정책이 지원되지만 허용되지 않은 경우, 두 메서드 모두 데이터를 공유할 수 없다고 표시합니다. + +## 인터페이스 + +### 다른 인터페이스로의 확장 + +- {{domxref("navigator.canShare()")}} + - : 지정된 데이터가 공유 가능한지 여부를 나타내는 불리언 값을 반환합니다. +- {{domxref("navigator.share()")}} + - : 전달된 데이터가 공유 대상에게 성공적으로 전송되었을 경우, 이를 해결하는 {{jsxref("Promise")}}를 반환합니다. 이 메서드는 버튼 클릭 또는 기타 사용자 활성화에서 호출되어야 합니다 ({{Glossary("transient activation", "임시 활성화")}} 필요). + +## 예제 + +아래 코드는 버튼 클릭을 통해 {{domxref("navigator.share()")}}를 사용하여 링크를 공유하는 방법을 보여줍니다. + +```js +const shareData = { + title: "MDN", + text: "Learn web development on MDN!", + url: "https://developer.mozilla.org", +}; + +const btn = document.querySelector("button"); +const resultPara = document.querySelector(".result"); + +// Share must be triggered by "user activation" +btn.addEventListener("click", async () => { + try { + await navigator.share(shareData); + resultPara.textContent = "MDN shared successfully"; + } catch (err) { + resultPara.textContent = `Error: ${err}`; + } +}); +``` + +위 예제는 [Web share test](https://mdn.github.io/dom-examples/web-share/)에서 가져왔습니다 ([소스 코드 보기](https://github.com/mdn/dom-examples/blob/main/web-share/index.html)). 또한, {{domxref("navigator.share()")}}에서 실시간 예제를 확인할 수 있습니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [Web Share Target API](/ko/docs/Web/Manifest/share_target) From 4d12d8c44ab40cef8748fa1c683cfedfffff943f Mon Sep 17 00:00:00 2001 From: hochan Lee Date: Mon, 25 Nov 2024 10:29:42 +0900 Subject: [PATCH 137/279] [ko] fix: update mdn sourceCommit (#24306) * fix: update mdn howto source commit * fix: update mdn howto source commit * fix: update writing_guidelines source commit * fix: redirects --- files/ko/_redirects.txt | 10 -- files/ko/mdn/index.md | 22 +-- .../experimental_deprecated_obsolete/index.md | 26 --- .../howto/creating_moving_deleting/index.md | 139 --------------- .../howto/document_web_errors/index.md | 3 +- .../ko/mdn/writing_guidelines/howto/index.md | 2 +- .../writing_guidelines/what_we_write/index.md | 121 ------------- .../code_style_guide/index.md | 165 ------------------ 8 files changed, 14 insertions(+), 474 deletions(-) delete mode 100644 files/ko/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md delete mode 100644 files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md delete mode 100644 files/ko/mdn/writing_guidelines/what_we_write/index.md delete mode 100644 files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 2e39ff6fedbf55..18cde29c5936d9 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -322,21 +322,11 @@ /ko/docs/Localization /ko/docs/Glossary/Localization /ko/docs/MDN/About /ko/docs/MDN/Writing_guidelines /ko/docs/MDN/Contribute /ko/docs/conflicting/MDN/Community/Contributing -/ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete -/ko/docs/MDN/Contribute/Creating_and_editing_pages /ko/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting -/ko/docs/MDN/Contribute/Does_this_belong /ko/docs/MDN/Writing_guidelines/What_we_write /ko/docs/MDN/Contribute/Feedback /ko/docs/MDN/Community /ko/docs/MDN/Contribute/Getting_started /ko/docs/MDN/Community/Contributing/Getting_started -/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide /ko/docs/MDN/Contribute/Howto /ko/docs/conflicting/MDN/Community/Contributing -/ko/docs/MDN/Contribute/Howto/Create_and_edit_pages /ko/docs/MDN/Writing_guidelines/Howto/Creating_moving_deleting /ko/docs/MDN/Contribute/Processes /ko/docs/conflicting/MDN/Community/Contributing_6f769e24821efb7b69fc8d984aa30a77 /ko/docs/MDN/Getting_started /ko/docs/MDN/Community/Contributing/Getting_started -/ko/docs/MDN/Guidelines/Best_practices /ko/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete -/ko/docs/MDN/Guidelines/Code_guidelines/Code_guidelines /ko/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide -/ko/docs/MDN/Guidelines/Code_guidelines/General /ko/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide -/ko/docs/MDN/Guidelines/Conventions_definitions /ko/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete -/ko/docs/MDN/Guidelines/Does_this_belong_on_MDN /ko/docs/MDN/Writing_guidelines/What_we_write /ko/docs/MDN/Kuma https://github.com/mdn/yari/tree/main/docs /ko/docs/MDN/Yari https://github.com/mdn/yari/tree/main/docs /ko/docs/MDN/피드백 /ko/docs/MDN/Community diff --git a/files/ko/mdn/index.md b/files/ko/mdn/index.md index fbff33b4622fa8..dd7d48b7b0c726 100644 --- a/files/ko/mdn/index.md +++ b/files/ko/mdn/index.md @@ -1,25 +1,27 @@ --- title: MDN Web Docs 프로젝트 slug: MDN +l10n: + sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff --- {{MDNSidebar}} -**MDN Web Docs**는 저희가 작성하는 무료 웹 플랫폼 리소스입니다. 저희의 임무는 개발자들이 웹 플랫폼 위에 프로젝트를 쉽게 만들 수 있도록 필요한 정보들을 제공하기 위함입니다. +**MDN Web Docs**는 오픈 웹 플랫폼을 문서화하는 무료 자료입니다.우리의 사명은 개발자들이 웹 플랫폼에서 쉽게 프로젝트를 구축할 수 있도록 필요한 정보를 제공하는 것입니다. -이 문서는 MDN Web Docs 프로젝트 그 자체에 대한 랜딩 페이지입니다. 여기서는 이 사이트가 어떻게 동작하는지, 저희가 어떻게 문서를 작성하는지, 지켜야 하는 가이드라인과 규칙에는 어떤 게 있는지, 그리고 여러분께서 어떻게 도와주실 수 있는지를 설명하는 안내서들이 있습니다. +여기는 MDN Web Docs 프로젝트의 랜딩 페이지로, 사이트 작동 방식, 문서화 방법, 우리가 따르는 지침과 규약, 그리고 기여할 수 있는 방법에 대한 안내서를 제공합니다. -모두의 도움을 환영합니다! MDN Web Docs는 오픈 소스 프로젝트로서 기여를 받고 있습니다. 여러분께서는, 간단한 오탈자 수정부터 새로운 문서 추가까지, 다양한 방법으로 참여하실 수 있습니다. +모두의 기여를 환영합니다! MDN Web Docs는 오픈 소스 프로젝트로, 다양한 기여를 받습니다. 단순한 작업(교정 및 오타 수정)부터 복잡한 작업(API 문서 작성)에 이르기까지 도움을 줄 수 있는 다양한 작업이 있습니다. -[시작하기](/ko/docs/MDN/Community/Contributing/Getting_started) 페이지에서 방법을 확인해 주세요. 대화가 필요하시거나 질문이 있으시면 [MDN Web Docs 채팅](/ko/docs/MDN/Community/Communication_channels#채팅)에 참여해 주세요. +기여 방법을 알아보려면 [시작하기](/ko/docs/MDN/Community/Contributing/Getting_started) 페이지를 방문하세요. 질문이 있거나 대화에 참여하고 싶다면 [MDN Web Docs 채팅방](/ko/docs/MDN/Community/Communication_channels#채팅)에서 소통하세요. -- [커뮤니티 가이드라인](/ko/docs/MDN/Community) +- [커뮤니티 안내서](/ko/docs/MDN/Community) - - : 이 안내서들은 MDN Web Docs 기여에 필요한 정보들을 제공합니다. 작업과 이슈, 토론 시작, 콘텐츠 제안 등을 하는 법 또한 다룹니다. 도움이 필요하시거나, 저희에게 연락하셔야 하는 경우에도 여기서 창구를 확인하실 수 있습니다. + - : 이 안내서들은 MDN Web Docs 기여하는 방법을 안내하며, 작업과 문제 해결, 논의 참여, 콘텐츠 제안 방법 등을 다룹니다. 도움이 필요하거나 문의가 있을 때 여기에 정보가 있습니다. -- [작성 가이드라인](/ko/docs/MDN/Writing_guidelines) +- [작성 안내서](/ko/docs/MDN/Writing_guidelines) - - : 이 안내서들은 MDN Web Docs의 문서를 작성하실 때 필요한 정보들을 제공합니다. 저희가 다루는 종류와 다루지 않는 종류를 설명하고, 문서 스타일 가이드, 콘텐츠 작업을 완수하기 위한 안내, 여러 페이지 구조에 대한 정보들도 다룹니다. + - : 이 안내서들은 MDN Web Docs의 문서를 작성하는 방법에 관한 모든 정보가 포함되어 있습니다. 작성할 콘텐츠와 작성하지 않을 콘텐츠 유형에 관한 정책을 설명하며, 작성 스타일 가이드, 다양한 콘텐츠 작업을 수행하는 방법 가이드, 페이지 구조 정보도 포함되어 있습니다. -- [MDN Product Advisory Board](/ko/docs/MDN/MDN_Product_Advisory_Board) - - : MDN Product Advisory Board의 임무는 MDN Web Docs 커뮤니티를 지원하는 Mozilla, Mozilla 문서화 팀, 중요 협력 조직들 사이를 조정하는 것입니다. +- [MDN 제품 자문 위원회](/ko/docs/MDN/MDN_Product_Advisory_Board) + - : MDN 제품 자문 위원회의 임무는 Mozilla, 문서화 팀, 그리고 MDN 커뮤니티가 MDN Web Docs를 함께 유지 관리할 수 있도록 돕는 주요 협력 조직 간의 협력을 구축하는 것입니다. diff --git a/files/ko/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md b/files/ko/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md deleted file mode 100644 index 1363bd158bb8bf..00000000000000 --- a/files/ko/mdn/writing_guidelines/experimental_deprecated_obsolete/index.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: 모범 사례 -slug: MDN/Writing_guidelines/Experimental_deprecated_obsolete ---- - -{{MDNSidebar}} - -이 글은 MDN에서 추천하는 콘텐츠 작업 법을 설명합니다. 이 가이드라인은 더 나은 결과로 이끌 선호하는 일하는 법을 설명하거나 비슷한 일을 하는 여러 방법 중에서 결정에 조언을 제공합니다. - -## 콘텐츠 복사하기 - -때때로, 여러 페이지에 같은 텍스트를 재사용해야 합니다 (또는 한 페이지의 콘텐츠를 다른 페이지를 위한 템플릿으로 사용하고 싶습니다). 세 가지 선택 사항이 있습니다: - -- 전체 페이지를 복사하고 싶다면: - - 1. 복사하고 싶은 페이지를 보는 동안, **고급** (톱니바퀴) 메뉴의 [**이 글 복제**](/ko/docs/MDN/Contribute/Creating_and_editing_pages#Clone_of_an_existing_page)를 고르세요. 이는 새 페이지를 위한 편집기 UI를 엽니다, 복제된 페이지의 콘텐츠로 이미 채워진 채로. - 2. 복제된 페이지를 위한 새로운 **한국어 제목** 및 **슬러그**를 입력하세요. - 3. 필요에 따라 페이지의 콘텐츠를 편집하고 평소대로 저장하세요. - -- 페이지의 일부만 복사하고 싶은 경우, **페이지를 방문만 하지 말고 거기서 복사하세요**. 이는 원치 않는 추가 HTML 조각을 목적 페이지에 끼워 넣고 누군가는 이를 정리해야 합니다, 당신 또는 다른 편집자가. 아무도 그것을 원하지 않습니다. MDN 페이지의 일부를 다른 페이지로 복사하려면: - - 1. 소스 페이지에서, 소스 페이지의 **편집** 버튼을 클릭하세요. - 2. **편집기 UI 내에서 재사용하고 싶은 콘텐츠를 복사하세요.** - 3. 그 페이지를 위한 편집기 UI를 빠져나오기 위해 **Discard** 클릭하세요. - 4. 붙여 넣고 싶은 페이지를 위한 편집기 UI를 여세요. - 5. 클립보드에서 콘텐츠를 붙여 넣으세요. diff --git a/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md b/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md deleted file mode 100644 index 372da5a3a34648..00000000000000 --- a/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: 페이지 생성 및 수정 -slug: MDN/Writing_guidelines/Howto/Creating_moving_deleting ---- - -{{MDNSidebar}} - -신규 공헌자가 이미 있는 문서를 수정하거나 신규 문서를 생성하는 법에 대해 설명합니다. - -## 기존 페이지 수정하기 - -페이지를 수정하기 위해서: - -- 오른쪽 최상단 근처의 **Edit** 버튼을 클릭하세요. -- 페이지가 로드되며 직접 정보를 추가하거나 삭제할 수 있는 편집화면이 뜹니다. -- 문단 추가, 텍스트 삭제, 헤드라인 삽입, 그리고 문서 작성 및 편집을 위한 기본적인 기능 이상의 것을 수행할 수 있습니다. - -MDN에 탑재된 편집기 사용에 대한 좀 더 세부적인 내용은 [MDN 편집기 가이드](/ko/docs/MDN/Contribute/Editor)에 있는 [편집기 UI 요소](/ko/docs/MDN/Contribute/Editor/Basics)를 참고하세요. - -### 변경 내용 미리보기 - -수정한 내용이 어떤 모습일지 보기 위해서는... - -- 페이지 상단이나 하단에 있는 "미리보기" 버튼을 클릭하세요. -- 그러면 새 창이나 탭으로 수정 사항을 포함하고 있는 미리보기 페이지가 열립니다. -- 이 버튼을 클릭할 때 마다, 가장 최근에 수정한 내용으로 미리보기 페이지가 새롭게 로딩됩니다. - -하지만!! 미리보기는 저장된 페이지가 아닙니다. 저장 전 편집 페이지를 닫지 않도록 **주의하세요!!** - -### 리비전 답글 - -미리보기로 확인했다면, 변경사항(리비전)를 저장하고 싶을 겁니다. 저장 전, 편집영역 아래 있는 리비전 답글 영역에 변경 사유를 남겨주세요. 다른 공헌자들이 참고할 수 있도록요. 예를 들면, 새로운 섹션을 추가했거나, 좀 더 정확한 용어를 쓰기 위해 단어를 수정했거나, 언어를 구분하기 위해 문장을 다시 썼거나, 중복되는 내용이기 때문에 정보를 제거했다 등을 적으면 됩니다. - -### 목차 - -페이지 상단에 "이동"이라는 목차 영역은 페이지에 있는 소제목 이동 링크를 자동으로 만들어준 것입니다. 소제목을 바꾸면 목차명도 바뀝니다. 편집화면 '설명 번역'의 "TOC" 드롭다운 메뉴를 통해서 목차를 제거하거나 목차 깊이를 조절할 수 있습니다. - -### 태그 - -페이지 내용과 기능을 설명하는 태그를 페이지의 편집 섹션 아래에서 추가하거나 제거할 수 있습니다. 어떤 태그를 적용할 것인지에 대해 자세히 알고 싶으면 [페이지에 알맞은 태그를 붙이는 방법](/ko/docs/MDN/Contribute/Tagging)을 보세요. - -### 검토가 필요한가요? - -전문가 또는 숙련된 공헌자의 검토가 필요하다고 생각되면, 저장하기 전에, 검토 요청 체크박스를 이용하여, (코드 샘플, API 혹은 테크놀로지에 대한) 기술상의 검토, (산문, 문법 및 내용에 대한) 편집상의 검토, (KumaScript 코드에 대한) 템플릿 검토를 요청할 수 있습니다. - -### 자료 첨부 - -자세한 설명을 추가하기 위해 자료를 첨부하고 싶다면, 페이지 하단에서 첨부할 수 있습니다. - -### 개시, 버리기 또는 개시하고 계속 편집 - -편집을 완료하고, 미리보기 한 결과에도 만족했다면, 페이지 제목의 오른쪽이나 페이지 하단에 있는 녹색의 "변경 사항 저장"을 클릭하여 작업한 결과와 답글을 저장할 수 있습니다. 마음이 바뀌었다면, 페이지 제목의 오른쪽에 있는 붉은색의 "변경 파기"를 클릭하여 그 동안 작업한 것을 버릴 수 있습니다. - -리비전 답글에서 답글을 달고 **엔터키**를 누르는 것은 "저장하고 계속 수정"하는 것을 클릭하는 것과 같습니다. - -> [!NOTE] -> 변경내용을 저장하려 할 때, 밴경내용이 실제 MDN에는 적절한 내용인데 유효하지 않다는 이유로 거절된다면, [작성팀에 콘텐츠가 게시되게 도와 달라는메일](mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E)을 보내야만 합니다. - -## 새로운 페이지 생성하기 - -만약 당신이 어디에 새로운 글을 써야할지 모른다고해도 , **걱정하지마세요!** 어디든 적으세요 그러면 우리가 그 문서를 찾고 있어야 할 장소로 옴기고 새로 쓴 글이 해당 문서에 적합하다면 , 존재하는 문서에 합칠 거에요. 당신은 또한 완벽하게 해야한다는 것에 대한 걱정을 할 필요가 없어요. 우리는 도움을 주는 행복한 요정들을 가지고 있고 요정들은 당신의 글을 깔끔하고 아주 부드럽게 만드는 것을 도와 줄 것 입니다. - -새로운 페이지를 만드는 몇 가지 방법이 있습니다: - -- ["누락된 페이지" 링크](#Missing_page_link) -- [링크가 없는 새로운 페이지](#New_page_without_link) -- [이미 존재하는 페이지의 하위 페이지](#Subpage_of_an_existing_page) -- [이미 존재하는 페이지 복제](#Clone_of_an_existing_page) -- [이미 존재하는 페이지의 링크](#Link_from_an_existing_page) - -### 페이지 생성 권한 얻기 - -보안의 이유로, 새롭게 생성된 계정은 새로운 페이지를 생성할 수 있는 능력이 없습니다. 페이지 생성을 하고 싶다면, 페이지 생성 방법을 안내하는 페이지를 보게 될 것입니다. 두가지 선택이 있습니다. - -- **생성될 페이지 요청**. 이를 위해서는, "Create page: ``"이라는 제목으로 [문서를 제출](https://bugzilla.mozilla.org/enter_bug.cgi?bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_fx_iteration=---&cf_fx_points=---&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&flag_type-4=X&flag_type-607=X&flag_type-800=X&flag_type-803=X&form_name=enter_bug&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=Unspecified&priority=--&product=Developer%20Documentation&rep_platform=Unspecified&short_desc=Create%20page%3A%20&status_whiteboard=create-page&target_milestone=---&version=unspecified)합니다. 페이지가 어디에 위치하는지 안다면, MDN에 있는 원하는 페이지의 위치를 URL 항목에 입력합니다. 왜 페이지를 생성해야 하는지에 대한 약간의 정보를 코멘트 텍스트 영역에 입력해야 합니다. -- **페이지 생성 권한 요청.** 페이지 생성 권한을 요청하면, 부여 받을 것이고, 여기에 있는 지침에 따라 새로운 페이지를 추가할 수 있을 것입니다. 이 특권을 요청하기 위해, [MDN admin 팀에 메일](mailto:mdn-admins@mozilla.org)을 보내십시오. 당신의 사용자 이름과 새로운 페이지 생성을 위한 능력을 왜 얻으려 하는지 입력합니다. 예를 들면, 많은 새로운 페이지에 포함되는 새로운 API에 대한 문서를 만들고 있다거나, 새로운 용어를 추가하고 싶을 수 있습니다. 또한, 사이트 콘텐츠에 어떤 유용한 공헌을 이미 했거나, 어느 정도 시간을 할애하여 공헌자로 활동했을 수도 있습니다. 어느 정도의 시간 할애나 다른 요인들이 함께 고려되기 때문에, 정해진 기간이 있는 것은 아닙니다. - -### "누락된 페이지" 링크 - -대부분의 위키가 그러하듯, MDN에서도 아직 존재하지 않는 페이지로 링크를 연결하는 것이 가능합니다. 예를 들어, 작성자가 어떤 API의 개별 항목에 대한 페이지를 생성하기 전에, 항목의 모든 리스트를 생성할 수 있습니다. MDN에서 존재하지 않는 페이지로 링크를 연결하면 통상 빨간색으로 표시됩니다. - -"누락된 페이지" 링크로 페이지를 생성하기 위해서는: - -1. MDN에 로그인 합니다. (로그인 하지 않고, "누락된 페이지" 링크를 클릭하면 404(페이지 없음) 에러가 발생합니다.) -2. "누락된 페이지" 링크를 클릭합니다. [MDN 편집기 UI](/ko/docs/MDN/Contribute/Editor)가 열리고, 누락된 페이지를 생성할 수 있는 준비가 됩니다. -3. 페이지의 내용을 작성하고, 저장합니다. - -### 링크가 없는 새로운 페이지 - -다른 페이지의 링크를 걸지 않은 새로운 페이지를 만들기 위해서는, 브라우저의 URL 항목에 고유한 페이지 이름을 입력합니다. 예를 들면, 아래와 같이 입력한다면.. - -`
    https://developer.mozilla.org/ko/docs/FooBar
    ` - -MDN은 제목이 "FooBar"로 된 새로운 페이지가 생성하고, 편집기가 실행되어 새로운 페이지에 내용을 추가할 수 있게 해줍니다. 편집기 모드를 이용하는 방법에 대한 내용은 이 글의 [이미 존재하는 페이지 편집하기](/ko/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page) 섹션을 참고하세요. - -### 이미 존재하는 페이지의 하위 페이지 - -페이지의 계층 구조에서 이미 존재하는 페이지 하위로 페이지를 생성하고 싶다면: - -1. "부모" 페이지에서, **Advanced** 메뉴(툴바의 기어 아이콘)를 클릭하고, **New sub-page**를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다. -2. **Title** 항목에 문서의 제목을 입력합니다. -3. 필요하다면 **Slug** 항목을 수정합니다. 예를 들어, 제목이 너무 길어서 단축 URL을 입력할 수 있습니다. 이 항목은 에디터에서 제목의 공백을 언더스코어로 연결하여 자동적으로 채워줍니다. 이 경우, 문서의 URL 중 가장 마지막 부분만 수정할 수 있습니다. -4. TOC 항목에서, 페이지의 목차에 자동적으로 노출되기 원하는 헤드라인을 선택하거나, 페이지에서 필요가 없다면 "목차 없음(No table of contents)"을 선택합니다. -5. 편집 패널에서 페이지의 내용을 작성하고 변경사항을 저장합니다. 편집 모드 사용에 대한 방법은 이 글의 [이미 존재하는 페이지 편집하기](/ko/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page) 섹션을 참고하세요. - -### 이미 존재하는 페이지 복제 - -새로운 페이지를 위해 사용하고자 하는 페이지의 포멧이 이미 존재한다면, 페이지를 '복제'하여 내용을 수정할 수 있습니다. - -1. 복제하려는 원래 페이지에서, **Advanced** 메뉴(툴바의 기어 아이콘)을 클릭하고, 이 페이지 복제하기(**Clone this page**)를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다. -2. 페이지의 타이틀(**Title**)을 새로운 내용에 맞게 적절하게 바꿉니다. **Slug** 항목은 타이틀(**Title**) 항목을 바꾸면 자동적으로 반영됩니다. -3. 필요하다면, 문서의 계층구조의 다른 부분에 새로운 문서를 넣기 위해 **Slug** 항목의 경로 부분도 변경합니다. (대부분의 경우, 복제된 페이지가 원래 페이지와 유사한 내용을 가지고 있고, 따라서 위치도 비슷하기 때문에 이 과정은 필요하지 않습니다.) -4. TOC 항목에서, 페이지의 목자에 자동적으로 노출되기 원하는 헤드라인을 선택하거나, 목차를 가지고 있지 않다면 "목차 없음(No table of contenst)"을 선택합니다. -5. 편집 패널에서 페이지의 내용을 작성하고, 변경사항을 저장합니다. 편집 모드 사용에 대한 방법은 이 글의 [이미 존재하는 페이지 편집하기](/ko/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page) 섹션을 참고하세요. - -### 이미 존재하는 페이지의 링크 - -이 방법은 다소 복합적입니다. 다른 페이지에 링크를 만들고, 새로운 페이지를 만들기 위해 삽입한 링크를 클릭합니다. - -1. 이미 존재하는 페이지의 텍스트 안에 넣고자 하는 새로운 페이지의 이름을 입력합니다. -2. 이름을 선택하고, 편집기의 툴바에서 링크 아이콘 클릭(**click the Link icon**)을 클릭합니다. "**Update Link**" 다이얼로그가 열리고, "**Link To**" 항목에 선택된 텍스트로 채워집니다. -3. 기본적으로, URL 항목의 시작 부분은 "/ko/docs/"가 삽입됩니다. "/ko/docs/" 다음에 페이지의 이름을 입력하세요. (페이지 이름은 링크 텍스트와 동일하지 않아도 됩니다.) -4. 링크를 생성하고 삽입하기 위해 OK를 클릭합니다. - -페이지가 존재하지 않는다면, 링크는 붉은색으로 보여집니다. 페이지가 존재한다면 링크는 파란색으로 보여집니다. 새로운 페이지를 만들고 싶은데 원하는 페이지 제목이 이미 존재한다면, 먼저 해당 페이지에 있는 내용을 추가 편집하거나 좀 더 개선할 부분은 없는지 확인하십시오. 아니면, 생성하고자 하는 페이지에 대한 다른 제목을 고민해보고 링크를 만들어 보세요. 페이지 이름에 대한 안내는 [페이지 네이밍 가이드](/ko/docs/Project:Page_Naming_Guide)를 참고하세요. - -새로운 페이지에 내용을 추가하기 위해, 저장하고 편집기를 닫은 후에 이제 막 추가된 붉은색 링크를 클릭합니다. 편집 모드에 새로운 페이지가 열리고, 작성을 할 수 있습니다. 편집 모드 사용에 대한 방법은 이 글의 [이미 존재하는 페이지 편집하기](/ko/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page) 섹션을 참고하세요. - -## 페이지 콘텐츠 새로고침하기 - -MDN의 KumaScript 매크로와 페이지의 콘텐츠를 다른 페이지로 넣을 수 있는 트랜스클루젼(transclusion)의 지원은 성능 향상을 위해 생성된 페이지의 캐시의 필요에 의해 종종 방해될 수 있다. 페이지는 그 소스로부터 만들어지고, 이후에 있을 요청을 위해 산출물을 캐시로 저장해둔다. 그 때부터 어떤 매크로(템플릿), 페이지의 [Page](/ko/docs/Template:Page) 매트로를 이용하는 트랜스클루젼도 매크로나 매크로의 산출물, 혹은 삽입되어 추가된 원래 자료의 변경에도 영향이 없을 것이다. - -- 페이지를 직접 업데이트 하기 위해서, 브라우저의 강재 새로고침을 이용할 수 있다. MDN은 이를 감지하여 업데이트된 매크로 산출물과 삽입된(transcluded) 페이지 내용을 가져와 페이지를 새롭게 만든다. -- 정기적으로 페이지가 자동으로 새롭게 만들어지도록 설정하는 것도 가능하다. 페이지가 자주 업데이트 되는 것에 대한 기대가 없다면 이것은 실행되지 않을 것입니다. 자세한 내용은 [페이지 재생성](/ko/docs/MDN/Contribute/Tools/Page_regeneration)을 참고하세요. - -## 함께 보기 - -- [MDN 편집기 가이드](/ko/docs/MDN/Contribute/Editor) -- [MDN 스타일 가이드](/ko/docs/MDN/Contribute/Content/Style_guide) diff --git a/files/ko/mdn/writing_guidelines/howto/document_web_errors/index.md b/files/ko/mdn/writing_guidelines/howto/document_web_errors/index.md index 1e1e8f71c84baa..e3ebb59bea858c 100644 --- a/files/ko/mdn/writing_guidelines/howto/document_web_errors/index.md +++ b/files/ko/mdn/writing_guidelines/howto/document_web_errors/index.md @@ -2,7 +2,7 @@ title: 웹 오류를 문서화하는 방법 slug: MDN/Writing_guidelines/Howto/Document_web_errors l10n: - sourceCommit: aa66311219951396e7305df61eb31831360d2c79 + sourceCommit: 4ecbac9e89961a132c1e7f5493ec94f60dcb1ee4 --- {{MDNSidebar}} @@ -14,7 +14,6 @@ JavaScript 오류에는 문제 해결을 위한 추가 조언이 포함된 JavaS ## 1단게 – 문서화할 오류 결정하기 - Firefox/Gecko의 오류 메시지: -- Edge/Chakra의 오류 메시지: - Chrome/v8의 오류 메시지: ## 2단계 - 기존 오류 문서 확인하기 diff --git a/files/ko/mdn/writing_guidelines/howto/index.md b/files/ko/mdn/writing_guidelines/howto/index.md index f224cdda6fc599..fa961620582c1f 100644 --- a/files/ko/mdn/writing_guidelines/howto/index.md +++ b/files/ko/mdn/writing_guidelines/howto/index.md @@ -2,7 +2,7 @@ title: 방법 안내서 slug: MDN/Writing_guidelines/Howto l10n: - sourceCommit: aa66311219951396e7305df61eb31831360d2c79 + sourceCommit: ce83b64f1132a29a19471e46bfffced755f775eb --- {{MDNSidebar}} diff --git a/files/ko/mdn/writing_guidelines/what_we_write/index.md b/files/ko/mdn/writing_guidelines/what_we_write/index.md deleted file mode 100644 index c5b859e0b1c665..00000000000000 --- a/files/ko/mdn/writing_guidelines/what_we_write/index.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: 이건 MDN에 있나요? -slug: MDN/Writing_guidelines/What_we_write ---- - -{{MDNSidebar}} - -무엇인가를 문서로 남겨두겠다는 생각을 하기 시작했다면, 그 문서를 어디에 둘지도 고민해보았을 겁니다. 문서가 위치할 수 있는 몇 가지 장소가 있고, MDN이 웹에서 가장 큰 문서 저장소 중 하나이지만 유일한 옵션은 아닙니다. 또한 소스 코드에 문서를 보관해둘 수도 있고, [Mozilla 위키](https://wiki.mozilla.org/)나 git 저장소의 README 파일에 저장해 두어도 좋습니다. 이 글에서는 어느 방법이 여러분들의 문서와 어울릴지를 판단하는데 도움이 되기 위해서 쓰였습니다. - -## MDN에는 뭐가 있죠? - -우리는 MDN에 정말 다양한 주제를 다룹니다. 하지만 완전히 MDN에 있어서는 안될 몇 가지도 있습니다. 이 섹션은 여러분의 문서가 MDN에 있어도 괜찮은지 판단할 수 있도록 도와주겠습니다. - -### MDN에서 다루는 것 - -우리는 MDN에서 정말 많은 내용을 다루고 있습니다. 일반적으로 완전히 제작되었거나 배포 중인 Mozilla 제품이나, 웹에 공개된 열린 기술이라면, MDN에 문서로 남겨둡니다. - -우리들이 다루고 있는 내용 몇가지를 맛보기로 보여드리겠습니다. 전체 리스트는 아니지만 몇가지 아이디어는 줄 수 있을 겁니다. - -- 열린 웹 기술 - - - HTML - - CSS - - JavaScript - - Web에 공개된 API - - 그 외 기타 - -- Firefox OS - - - 오픈 웹 애플리케이션 - - Firefox OS 빌드하고 설치하기 - - Firefox OS 프로젝트에 기여하기 - - Gaia 설정 변경하기 - - 그 외 기타 - -- Mozilla 플랫폼 - - - Gecko - - Firefox를 빌드하고 설정하기 - - XUL - - XPCOM - - 그 외 기타 - -> **참고:** **참고하세요:** 우리는 Mozilla 기술이 아니더라도 Web에 공개되어 있는 한 다룰 수 있다는 점이 중요합니다. 가령, 우리는 Webkit 전용 CSS 프로퍼티를 설명해놓은 문서도 있습니다. - -### 우리가 다루지 않는 것 - -MDN에 문서로 남겨져서는 안되는 명백한 것인지 아닌지에 대해 스스로 질문해볼 수 있습니다. - -- 아직 계획중인 문서인가? -- 아직 존재하지 않는 기술을 설명해놓은 설계 문서인가? -- 프로젝트를 제안하는 문서인가? -- 단순히 기술 스펙만 나열했는가? -- Mozilla 브라우저가 아닌 특정 브라우저에만 사용되는 웹에 노출되지 않은 기술인가? - -저 질문 중 하나라도 "예"라고 답변할 수 있다면, MDN에 있어서는 안될 문서입니다. 저 질문 모두에 "아니요"라고 대답할 수 있다면, MDN에 문서로 보관할지 진지하게 고민할 때가 되었다는 겁니다! - -## MDN에 문서로 남겨두면 좋은 점 - -MDN에 문서로 남겨두면 좋은 점이 굉장히 많답니다. - -### 글을 쓰는 사람들이 굉장히 많습니다 - -MDN 공동체는 굉장히 큽니다. 정말 큽니다. 큰 것들을 작게 보이게 만들 정도로 큽니다. 농담이 아니라, 우리는 굉장히 많은 사람들과 MDN에 있는 자료를 만들어내며 관리하고 있습니다. 전세계 모든 땅(인정할게요. 남극까지는 잘 모르겠어요.)의 작가, 편집자들과 함께하고 있기 때문에, 글을 쓰려는 사람들은 무조건 득 보는 거에요. - -- 우리에게는 우리의 컨텐츠를 최대한 좋게 만들어 보겠다는 **사명**을 갖고 있는 유급 편집 스탭이 있습니다. -- 우리는 충분한 양의 컨텐츠를 기여하고 여러분들을 도와줄 수 있는 핵심 커뮤니티와 함께하고 있습니다. -- **사실은 다른 사람들에게 여러분의 글의 대부분 혹은 전부를 쓰게 할 수 있는 절호의 찬스입니다!** -- 넓디넓은 MDN 커뮤니티에게서 많은 것들을 얻어갈 수 있습니다. 오타를 잡아주는 것부터 시작해서 편집에 관한 논평까지, 여러분들의 소원을 들어줄 수 있습니다. -- [Matrix](https://chat.mozilla.org/#/room/#mdn:mozilla.org) 채널을 통해 글쓰기 커뮤니티와 이야기를 하거나 조언을 들을 수 있고, 여러분들의 문서 제작이나 유지보수에 도움을 청할 수도 있습니다 -- 전세계에 분포한 기여자들과 함께하고 있기 때문에, 언제나 누군가 주변에서 문제를 발견하고 해결해 줄 겁니다. - -Do you want your development team to be entirely responsible for the production of documentation? That's likely if your documentation is maintained elsewhere. - -### 유지보수 - -Because of the sheer number of contributors, there's usually someone on hand to watch for problems with your content: from spam control to copy-editing, things can happen around the clock. Here's just a taste of what our team can do: - -- 스팸 제거 - - : 스팸이 발생하면 우리들이 처리합니다. -- 편집 - - : 여러분 생각보다 필력이 달려도 걱정하실 것 없습니다. 여러분이 쓴 글을 다른 사람들이 읽을 수 있도록 해주겠습니다. -- 스타일의 일관성 - - : 여러분이 작성한 문서 하나에서만 지켜지는 일관성이 아니라, 다른 문서와 함께 있을 때에도 일관적인 스타일을 가지고 있을지 봐주겠습니다. -- 컨텐츠 관리 - - : Our team will help ensure that the documentation is cross-linked with other relevant materials, that articles are put in the right places, and that menus and other infrastructure is built to make it easy to follow and understand. - -## 다른 곳에 문서로 남겨두는 경우 - -MDN 말고 다른 곳에다가 여러분이 만든 작업물을 문서로 남겨둘 이유도 없는 건 아닙니다. 그런 이유에 대해서 몇가지 살펴보도록 하고, 각각 장단점을 찾아보도록 할게요. - -### 계획이나 진행 상황 - -간단합니다. 계획, 진행 상황, 요청에 대한 문서는 MDN에 남기면 안됩니다. - -### Github에 올라온 프로젝트 - -Mozilla의 몇몇 프로젝트는 Github에 올라와 있습니다. 또, Github에는 문서를 보관하기 위해 자기네들만의 위키 비스무리한 시스템을 가지고 있어요. 몇몇 팀은 거기에다가 문서를 남겨두기를 더 좋아합니다. 여러분만의 문서를 만들어갈 생각이라면 아무래도 그쪽이 더 편하고 좋겠죠. 하지만 몇가지 사실을 기억하세요. - -- MDN 문서 팀이 여러분들을 도와드릴 수 없을지도 모릅니다. 우리는 일반적으로(때로 예외가 있기는 합니다만) MDN 바깥의 문서화에는 참여하지 않습니다. -- 여러분들의 문서다 다른 관련된 내용과 상호 링크하기가 힘들거나 불가능합니다. -- 다른 문서와 일관된 스타일을 가지지 못할 수도 있습니다. -- 다른 문서 사이에 없기 때문에 발견될 가능성이 줄어듭니다. -- Github에 저장된 문서는 MDN에 있는 문서에 비해 별로 매력적으로 보이지도 않으면서 가독성도 영 좋지는 않습니다. - -물론 이런 점들이 여러분들에게 별로 문제가 되지 않거나 문제가 되더라도 딱히 불편한 점이 없을 수도 있습니다. 몇몇 팀은 문서로 남기겠다는 필요성이 별로 없어서 코드 안에서만 작업하고 문서를 남겨두기도 합니다. - -### 소스 안에 문서를 남겨두고 싶은 경우 - -몇몇 팀은 소스 저장소에다가 자신들의 문서를 저장하는 걸 더 선호하기도 합니다. 내부 프로젝트나 라이브러리 프로젝트에서는 꽤나 흔한 일이긴 한데요. 코드를 쓰듯이 자신들의 기술을 문서로 남길 수 있다는 점에서 이점이 있기는 합니다. 하지만 그만큼 단점도 있지요. - -- MDN 문서 팀이 여러분들을 도와드릴 수 없습니다. 코드가 Mozilla의 소스 저장소에 있더라도, 리뷰나 체크인 시스템은 문서 팀이 참여하기에는 그닥 효율적이지 못합니다. -- 관련 있는 다른 문서와 상호 링크할 수 있는 간편한 도구를 찾기가 힘듭니다. 상호 링크를 하면 읽는 이들에게 맥락과 중요한 정보를 더 잘 전달할 수 있을텐데 말이죠. -- 다른 문서 사이에 없기 때문에 발견될 가능성이 줄어듭니다. -- (JavaDoc 같은) 변환 도구를 사용하여 웹에서 읽을 수 있는 문서를 만들더라도, MDN에서 할 수 있는것보다 예쁘거나 매력적이지도 않을 겁니다. - -여전히 몇몇 프로젝트에서 이런 방법을 사용할 수 없는 건 아닙니다. (오히려 좋은 방법일 수도 있습니다.) 작은 프로젝트나 별로 관심을 얻을 생각을 하지 않는 프로젝트에는 특히 그렇죠. - -## 나중에는 - -It's worth mentioning that someday we intend to make it possible to present off-site content as if it were part of MDN, and that we hope to one day have tools to actually import content from other sites onto MDN. However, there's no timeline in place for making this happen, and even once it does, it will not be as effective as building the documentation directly on MDN. diff --git a/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md b/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md deleted file mode 100644 index 5d706240bdda48..00000000000000 --- a/files/ko/mdn/writing_guidelines/writing_style_guide/code_style_guide/index.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: 모든 코드에 대한 일반 가이드라인 -slug: MDN/Writing_guidelines/Writing_style_guide/Code_style_guide ---- - -{{MDNSidebar}} - -아래 코드 예제 가이드라인에서 HTML, CSS, JavaScript 나 다른 어느 코드로 예로 들건 , 모든 코드 타입에 적용됩니다. - -## 이 문서 내용은 - -- [들여쓰기, 여백주기, 사이즈](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#들여쓰기_여백주기_사이즈) - - - [들여쓰기](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#들여쓰기) - - [코드 한 줄 길이](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#코드_한_줄_길이) - - [코드 블럭 높이](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#코드_블럭_높이) - -- [예제 디스플레이 가이드라인](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#예제_디스플레이_가이드라인) - - - [렌더링 된 예제 크기](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#렌더링_된_예제_크기) - - [이미지나 다른 미디어의 사용](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#이미지나_다른_미디어의_사용) - - [컬러의 사용](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#컬러의_사용) - - [좋은 예시와 나쁜 예시 강조](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#좋은_예시와_나쁜_예시_강조) - -- [레퍼런스 페이지에 문법 섹션 작성](/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#레퍼런스_페이지에서_문법_섹션_작성) - -## 들여쓰기, 여백주기, 사이즈 - -### 들여쓰기 - -모든 코드는 2 스페이스로 들여쓰기 해야합니다. 예를 들면: - -```html example-good -
    -

    This is my paragraph.

    -
    -``` - -```js example-good -function myFunc() { - if (thingy) { - console.log("Yup, that worked."); - } -} -``` - -### 코드 한 줄 길이 - -한 행의 코드는 최대 80자 ([대화형 예제](https://github.com/mdn/interactive-examples)는 64자) 이내로 제한 되어야 합니다. 가독성을 위해 합리적으로 행을 분리 하는 것 좋지만 모범 사례를 벗어나지는 마십시오. - -예를 들면, 아래는 안 좋은 예입니다. - -```js example-bad -let tommyCat = - "Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine."; -``` - -이것은 좀 낫지만, 그래도 여전히 좋지 않습니다: - -```js -let tommyCat = - "Said Tommy the Cat as he reeled back to clear whatever foreign " + - "matter may have nestled its way into his mighty throat. Many a fat alley rat " + - "had met its demise while staring point blank down the cavernous barrel of " + - "this awesome prowling machine."; -``` - -템플릿 리터럴을 사용하는 것이 더 좋습니다: - -```js example-good -let tommyCat = `Said Tommy the Cat as he reeled back to clear whatever foreign - matter may have nestled its way into his mighty throat. Many a fat alley rat - had met its demise while staring point blank down the cavernous barrel of - this awesome prowling machine.`; -``` - -### 코드 블럭 높이 - -코드 블럭은 필요한 만큼 길어야 하지만 너무 길면 안됩니다. 15에서 25 라인 정도의 길이가 이상적입니다. 코드 블럭이 너무 길어진다면, 가장 유용한 스니펫만 보여주고, 나머지 부분은 깃허브 저장소나 코드펜 같은 링크로 연결하세요. - -## 예제 디스플레이 가이드라인 - -### 렌더링 된 예제 크기 - -MDN 메인 콘텐츠 창은 데스크탑에서 약 700px 크기 이므로, 삽입된 MDN 예제는 ( 삽입된 예제를 100% 너비로 설정했을 때 ) 해당 너비에서 잘 보여야 합니다. - -높이의 경우, 최대한의 화면 가독성을 위해 가능하면 렌더링 된 예제 높이를 700px 아래로 유지하는 것을 추천합니다. - -모바일 디바이스에서도 예제가 잘 보이도록 어느 정도는 반응형으로 동작되도록 예제를 작성하는데 신경써야 합니다. - -### 이미지나 다른 미디어의 사용 - -가끔 이미지나 다른 미디어를 예제에 삽입하고 싶을 때가 있습니다. 그럴 때에는: - -- 해당 미디어의 라이센스가 사용을 허용하는지 확인하세요. [CC0](https://creativecommons.org/share-your-work/public-domain/cc0/)와 같은 매우 관대한 라이브러리나, 적어도 일반적인 콘텐츠 라이센스인 [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA) 중 하나를 사용하도록 해야합니다. -- 이미지에 대해서는, 나 를 사용해 예제의 페이지 무게를 줄여야 합니다. -- `SVG`에 대해서는, [SVGOMG](https://jakearchibald.github.io/svgomg/)를 통해 `SVG` 파일이 파일 마지막에 빈 줄을 갖도록 해야합니다. -- 페이지에서 아이콘을 보여줄 때 (즉 {{cssxref("background-image")}} 를 이용할 때), 적당한 곳에 [빌트인 MDN 아이콘](https://mdn.github.io/mdn-fiori/patterns/css/iconography/)을 사용하고, 다른 경우와 비교하여 스타일을 맞추도록 하십시오. - -### 컬러의 사용 - -소문자 16진수 대신, 음영이나 주요 컬러(즉, 검은색, 흰색, 빨간색)는 키워드를 사용할 수있습니다. 필요한 경우에만 좀 더 복잡한 컬러스킴을 사용하세요.( 예를 들면, 투명색이 필요할 때) - -주요 "기본" 컬러는 키워드로 설정하는것이 좋습니다. 예를 들면: - -```css example-good -color: black; -color: white; -color: red; -``` - -좀 더 복잡한 컬러는 rgb() 를 사용합니다. (반 투명 색 포함): - -```css example-good -color: rgb(0, 0, 0, 0.5); -color: rgb(248, 242, 230); -``` - -16진수 컬러를 사용해야 한다면, 소문자를 이용하세요: - -```css example-good -color: #058ed9; -color: #a39a92; -``` - -그리고 가능한 곳에는 단축형태를 사용하세요: - -```css example-good -color: #ff0; -color: #fff; -``` - -[MDN's Fiori 가이드라인](https://mdn-fiori.netlify.app/)(프론트엔드 코드베이스용)은 전체 MDN 디자인에 사용된 [유용한 컬러셋](https://mdn-fiori.netlify.app/?path=/docs/docs-colors--page)을 포함하고 있습니다. ( 역자주: 영어 원문 링크가 깨져 [MDN Fiori 깃허브 리포](https://github.com/mdn/mdn-fiori) 에서 비슷한 링크를 찾아 연결했습니다.) - -### 좋은 예시와 나쁜 예시 강조 - -이 가이드라인에서 알 수 있는 것처럼, 좋은 실습예시는 연두색에 웃는얼굴로 강조되며, 나쁜 실습 예시는 슬픈표정에 빨간 바탕으로 강조됩니다. - -이 처럼 하려면, MDN 에디터 콘트롤로 코드 블럭을 `
    ` 블럭이 되도록 하고, 적절한 문법 강조를 설정해야 합니다. 소스 코드는 아래와 비슷하게 보일겁니다:
-
-```html
-
    -    function myFunc() {
-      console.log('Hello!');
-    };
    
-```
-
-이 상태에서 좋은 예시로 만들려면, `class` 속성의 오른쪽 따옴표 바로 앞에 `example-good`을 넣으면 됩니다:
-
-```html
-
          ...
    
-```
-
-나쁜 예시로 만들려면, `class` 속성의 오른쪽 따옴표 바로 앞에 `example-bad`를 넣으면 됩니다:
-
-```html
-
          ...
    
-```
-
-우리는 당신이 이 기능을 사용하길 권장합니다. 모든 곳에 사용할 필요는 없습니다. 당신의 코드에서 좋은 예와 나쁜 예를 구분할 필요가 있을때 사용하세요.
-
-## 레퍼런스 페이지에서 문법 섹션 작성
-
-MDN 레퍼런스 페이지에는 JavaScript 메서드, CSS 속성, HTML 요소 등과 같이 기능의 구문이 무엇을 할 수 있고, 어때야 하는지 명확하게 보여주는 문법 섹션(Syntax section)이 포함되어 있습니다. 이 내용을 작성하는 가이드라인은 [Syntax sections](/ko/docs/MDN/Contribute/Structures/Syntax_sections) 문서를 참고하세요.

From 8c4170a3d2c7078863d5fffea31e29a6515f941a Mon Sep 17 00:00:00 2001
From: Kelvin Chiu 
Date: Mon, 25 Nov 2024 09:31:06 +0800
Subject: [PATCH 138/279] [zh-cn]: spelling correction: "Pomise" -> "Promise"
 (#24732)

---
 files/zh-cn/learn/javascript/asynchronous/promises/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/learn/javascript/asynchronous/promises/index.md b/files/zh-cn/learn/javascript/asynchronous/promises/index.md
index 85652980512695..05644b6b1e845b 100644
--- a/files/zh-cn/learn/javascript/asynchronous/promises/index.md
+++ b/files/zh-cn/learn/javascript/asynchronous/promises/index.md
@@ -334,7 +334,7 @@ fetchProducts();
 
 我们甚至可以使用 `try...catch` 块来处理错误，就像我们在写同步代码时一样。
 
-但请注意，这个写法只在异步函数中起作用。异步函数总是返回一个 Pomise，所以你不能做这样的事情：
+但请注意，这个写法只在异步函数中起作用。异步函数总是返回一个 Promise，所以你不能做这样的事情：
 
 ```js example-bad
 async function fetchProducts() {

From 9e8bd0a1c57c60ec81513d07414af0dedc5d0d12 Mon Sep 17 00:00:00 2001
From: Vivi 
Date: Mon, 25 Nov 2024 13:36:56 +0900
Subject: [PATCH 139/279] =?UTF-8?q?[ko]=20javascript=20promise=20try=20?=
 =?UTF-8?q?=EC=8B=A0=EA=B7=9C=20=EB=B2=88=EC=97=AD=20(#24312)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [ko] javascript promise try 신규 번역

* Update files/ko/web/javascript/reference/global_objects/promise/try/index.md

* Update files/ko/web/javascript/reference/global_objects/promise/try/index.md

---------

Co-authored-by: hochan Lee 
---
 .../global_objects/promise/try/index.md       | 176 ++++++++++++++++++
 1 file changed, 176 insertions(+)
 create mode 100644 files/ko/web/javascript/reference/global_objects/promise/try/index.md

diff --git a/files/ko/web/javascript/reference/global_objects/promise/try/index.md b/files/ko/web/javascript/reference/global_objects/promise/try/index.md
new file mode 100644
index 00000000000000..47c73f4a0a9930
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/try/index.md
@@ -0,0 +1,176 @@
+---
+title: Promise.try()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/try
+l10n:
+  sourceCommit: 7cd4706990ab95794415aee05ba0a9662e742a17
+---
+
+{{JSRef}}
+
+**`Promise.try()`** 는 반환값이나 예외 발생, 동기나 비동기에 관계 없이 모든 종류의 콜백을 가지고, 그 결과를 {{jsxref("Promise")}} 내부에서 감싸는 정적 메서드입니다.
+
+## 구문
+
+```js-nolint
+Promise.try(func)
+Promise.try(func, arg1)
+Promise.try(func, arg1, arg2)
+Promise.try(func, arg1, arg2, /* …, */ argN)
+```
+
+### 파라미터
+
+- `func`
+  - : 주어진 인자 (`arg1`, `arg2`, …, `argN`) 를 동기적으로 호출되는 함수입니다. 이는 반환값이든, 예외를 발생시키든, 프로미스를 반환하든 그 어떤 것이든 수행할 수 있습니다.
+- `arg1`, `arg2`, …, `argN`
+  - : `func` 에 전달되는 인자입니다.
+
+### 반환 값
+
+{{jsxref("Promise")}} 는 다음 값들을 반환합니다.
+
+- `func` 가 동기적으로 값을 반환한다면 이미 fulfilled 상태입니다.
+- `func` 가 동기적으로 예외를 발생시킨다면 이미 rejected 상태입니다.
+- `func` 이 프로미스를 반환한다면 비동기적으로 fulfilled 혹은 rejected 상태입니다.
+
+## 설명
+
+콜백을 취하는 API가 있다고 가정하겠습니다. 이 콜백은 동기적으로 동작할 수 있고 비동기로 동작할 수도 있습니다. 결과를 프로미스로 감싸서 모든 함수를 동일하게 동작하게 하고 싶을 때 가장 간단한 방법은 {{jsxref("Promise/resolve", "Promise.resolve(func())")}} 를 사용하는 것일 수 있습니다. 만일 `func()` 가 동기적으로 예외를 발생시킨다면 이 예외는 감지되지 않고 rejected 프로미스로 변환되지 않는다는 문제가 있을 수 있습니다.
+
+일반적으로 함수를 fulfilled나 rejected 상태의 프로미스로 끌어올리기 위한 접근 방법은 아래와 같습니다.
+
+```js
+new Promise((resolve) => resolve(func()));
+```
+
+여기서는 `Promise.try()` 가 더욱 효과적입니다.
+
+```js
+Promise.try(func);
+```
+
+내장 `Promise()` 생성자는 실행자로부터 발생된 예외를 자동적으로 감지하고 거부됨으로 반환합니다. 따라서 이 두 접근 방법은 유사하지만 `Promise.try()` 가 더 간단하고 가독성이 좋습니다.
+
+`Promise.try()` 가 이와 완전히 동일한 것이 아니라, 상당히 유사하다는 점을 기억해야 합니다.
+
+```js
+Promise.resolve().then(func);
+```
+
+{{jsxref("Promise/then", "then()")}} 에 전달된 콜백은 항상 동기적으로 실행되는 `Promise()` 생성자와는 다르게 항상 비동기적으로 호출된다는 점입니다. `Promise.try` 는 함수를 동기적으로도 호출하고 가능하다면 즉시 프로미스를 이행 상태로 만듭니다.
+
+{{jsxref("Promise/catch", "catch()")}} 와 {{jsxref("Promise/finally", "finally()")}} 가 결합된 `Promise.try()` 는 동기와 비동기 처리를 하나로 묶어 처리할 수도 있습니다. 그리고 프로미스의 예외 처리를 마치 동기 예외 처리와 비슷한 것처럼 보이게 할 수 있습니다.
+
+{{domxref("Window/setTimeout", "setTimeout()")}} 처럼, `Promise.try()` 는 콜백으로 전달되는 추가적인 인자들도 수용합니다. 이를 이해하기 위해 아래 예제를 확인해 보세요.
+
+```js
+Promise.try(() => func(arg1, arg2));
+```
+
+이렇게도 작성할 수 있습니다.
+
+```js
+Promise.try(func, arg1, arg2);
+```
+
+이들은 동일한 동작을 하지만 후자는 추가적인 클로저 생성을 방지할 수 있어 더 효율적입니다.
+
+## 예제
+
+### Promise.try() 사용하기
+
+다음 예제는 콜백을 받아서 프로미스로 끌어올리고, 그 결과를 처리하며 오류 처리도 수행합니다.
+
+```js
+function doSomething(action) {
+  return Promise.try(action)
+    .then((result) => console.log(result))
+    .catch((error) => console.error(error))
+    .finally(() => console.log("Done"));
+}
+
+doSomething(() => "Sync result");
+
+doSomething(() => {
+  throw new Error("Sync error");
+});
+
+doSomething(async () => "Async result");
+
+doSomething(async () => {
+  throw new Error("Async error");
+});
+```
+
+async/await 구문에서는 같은 코드를 이렇게 표현할 수도 있습니다.
+
+```js
+async function doSomething(action) {
+  try {
+    const result = await action();
+    console.log(result);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    console.log("Done");
+  }
+}
+```
+
+### 프로미스가 아닌 생성자에서 try() 호출하기
+
+`Promise.try()` 는 제너릭 메서드입니다. 이는 `Promise()` 생성자와 동일한 시그니처를 구현하는 모든 생성자에서 호출될 수 있습니다.
+
+다음은 실제 `Promise.try()` 의 좀 더 충실한 근사치입니다. (하지만 폴리필로 사용해서는 안 됩니다.)
+
+```js
+Promise.try = function (func) {
+  return new this((resolve, reject) => {
+    try {
+      resolve(func());
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+```
+
+`Promise.try()` 의 (`try...catch` 를 이용한 것과 같은) 구현 방식 덕분에 어떤 커스텀 생성자에 `this` 를 설정하여 `Promise.try()` 를 안전하게 호출할 수 있고, 절대로 동기적으로 예외를 발생시키지 않습니다.
+
+```js
+class NotPromise {
+  constructor(executor) {
+    // "resolve" 와 "reject" 함수는 어떠한 동작도 하지 않습니다.
+    // 그러나 프로미스의 Promise.try() 는 resolve 를 호출합니다.
+    executor(
+      (value) => console.log("Resolved", value),
+      (reason) => console.log("Rejected", reason),
+    );
+  }
+}
+
+const p = Promise.try.call(NotPromise, () => "hello");
+// Logs: Resolved hello
+
+const p2 = Promise.try.call(NotPromise, () => {
+  throw new Error("oops");
+});
+// Logs: Rejected Error: oops
+```
+
+`Promise()` 와는 다르게 `NotPromise()` 생성자는 실행자가 동작하는 동안 어떠한 예외도 우아하게 처리하지 않습니다. 하지만 `throw` 와는 다르게 `Promise.try()` 는 예외를 감지하고, 이를 `reject()` 로 전달하여 로그를 출력하게 됩니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [`core-js` 의 `Promise.try` 폴리필](https://github.com/zloirock/core-js#promisetry)
+- [Promise 사용](/ko/docs/Web/JavaScript/Guide/Using_promises) 안내서
+- {{jsxref("Promise")}}
+- [`Promise()` 생성자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)

From 9831eba287ffe720b3f461fd09525ba1d726d344 Mon Sep 17 00:00:00 2001
From: Sheep-realms <38580457+sheep-realms@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:34:40 +0800
Subject: [PATCH 140/279] zh-cn: fix typos and fix punctuation errors (#24695)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: allo 
---
 .../javascript/reference/strict_mode/index.md | 47 +++++++++----------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/strict_mode/index.md b/files/zh-cn/web/javascript/reference/strict_mode/index.md
index c7ed154f7248c3..6c552552a1cac9 100644
--- a/files/zh-cn/web/javascript/reference/strict_mode/index.md
+++ b/files/zh-cn/web/javascript/reference/strict_mode/index.md
@@ -22,44 +22,39 @@ slug: Web/JavaScript/Reference/Strict_mode
 
 ### 为脚本开启严格模式
 
-为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句 `"use strict";` （或 `'use strict';`）
+为整个脚本文件开启严格模式，需要在所有语句之前放一个*特定*语句 `"use strict";`（或 `'use strict';`）。
 
 ```js
 // 整个脚本都开启严格模式的语法
 "use strict";
-var v = "Hi!  I'm a strict mode script!";
+const v = "你好！我是一个严格模式的脚本！";
 ```
 
-这种语法存在陷阱，有一个[大型网站](https://bugzilla.mozilla.org/show_bug.cgi?id=627531)已经被它[坑倒](https://bugzilla.mozilla.org/show_bug.cgi?id=579119)了：不能盲目地合并冲突代码。试想合并一个严格模式的脚本和一个非严格模式的脚本：合并后的脚本代码看起来是严格模式。反之亦然：非严格合并严格看起来是非严格的。合并均为严格模式的脚本或均为非严格模式的都没问题，只有在合并严格模式与非严格模式有可能有问题。建议按一个个函数去开启严格模式（至少在学习的过渡期要这样做）.
-
-你也可以将整个脚本的内容用一个函数包括起来，然后在这个外部函数中使用严格模式。这样做就可以消除合并的问题，但是这就意味着你必须要在函数作用域外声明一个全局变量。
-
 ### 为函数开启严格模式
 
-同样地，要给某个函数开启严格模式，得把 `"use strict";` (或 `'use strict';`) 声明*一字不漏地*放在函数体所有语句之前。
+同样地，要给某个函数开启严格模式，得把*特定*语句 `"use strict";`（或 `'use strict';`）放在函数体所有语句之前。
 
 ```js
-function strict() {
+function myStrictFunction() {
   // 函数级别严格模式语法
   "use strict";
   function nested() {
-    return "And so am I!";
+    return "我也一样！";
   }
-  return "Hi!  I'm a strict mode function!  " + nested();
+  return `你好！我是严格模式的函数！${nested()}`;
 }
-
-function notStrict() {
-  return "I'm not strict.";
+function myNotStrictFunction() {
+  return "我不是严格模式的函数。";
 }
 ```
 
 ## 严格模式中的变化
 
-严格模式同时改变了语法及运行时行为。变化通常分为这几类：将问题直接转化为错误（如语法错误或运行时错误）, 简化了如何为给定名称的特定变量计算，简化了 `eval` 以及 `arguments`, 将写"安全“JavaScript 的步骤变得更简单，以及改变了预测未来 ECMAScript 行为的方式。
+严格模式同时改变了语法及运行时行为。变化通常分为这几类：将问题直接转化为错误（如语法错误或运行时错误），简化了如何为给定名称的特定变量计算，简化了 `eval` 以及 `arguments`，将写“安全”JavaScript 的步骤变得更简单，以及改变了预测未来 ECMAScript 行为的方式。
 
 ### 将过失错误转成异常
 
-在严格模式下，某些先前被接受的过失错误将会被认为是异常。JavaScript 被设计为能使新人开发者更易于上手，所以有时候会给本来错误操作赋予新的不报错误的语义 (non-error semantics). 有时候这可以解决当前的问题，但有时候却会给以后留下更大的问题。严格模式则把这些失误当成错误，以便可以发现并立即将其改正。
+在严格模式下，某些先前被接受的过失错误将会被认为是异常。JavaScript 被设计为能使新人开发者更易于上手，所以有时候会给本来错误操作赋予新的不报错误的语义（non-error semantics）。有时候这可以解决当前的问题，但有时候却会给以后留下更大的问题。严格模式则把这些失误当成错误，以便可以发现并立即将其改正。
 
 第一，严格模式下无法再意外创建全局变量。在普通的 JavaScript 里面给一个错误命名的变量名赋值会使全局对象新增一个属性并继续“工作”（尽管将来可能会失败：在现代的 JavaScript 中有可能）。严格模式中意外创建全局变量被抛出错误替代：
 
@@ -70,7 +65,7 @@ mistypedVaraible = 17; // 因为变量名拼写错误
 // 这一行代码就会抛出 ReferenceError
 ```
 
-第二，严格模式会使引起静默失败 (silently fail，注：不报错也没有任何效果) 的赋值操作抛出异常。例如，`NaN` 是一个不可写的全局变量。在正常模式下，给 `NaN` 赋值不会产生任何作用; 开发者也不会受到任何错误反馈。但在严格模式下，给 `NaN` 赋值会抛出一个异常。任何在正常模式下引起静默失败的赋值操作 (给不可写属性赋值，给只读属性 (getter-only) 赋值，给不可扩展对象 ([non-extensible](/zh-CN/JavaScript/Reference/Global_Objects/Object/preventExtensions) object) 的新属性赋值) 都会抛出异常：
+第二，严格模式会使引起静默失败（silently fail，注：不报错也没有任何效果）的赋值操作抛出异常。例如，`NaN` 是一个不可写的全局变量。在正常模式下，给 `NaN` 赋值不会产生任何作用; 开发者也不会受到任何错误反馈。但在严格模式下，给 `NaN` 赋值会抛出一个异常。任何在正常模式下引起静默失败的赋值操作（给不可写属性赋值，给只读属性（getter-only）赋值，给[不可扩展对象](/zh-CN/JavaScript/Reference/Global_Objects/Object/preventExtensions)的新属性赋值）都会抛出异常：
 
 ```js
 "use strict";
@@ -94,7 +89,7 @@ Object.preventExtensions(fixed);
 fixed.newProp = "ohai"; // 抛出 TypeError 错误
 ```
 
-第三，在严格模式下，试图删除不可删除的属性时会抛出异常 (之前这种操作不会产生任何效果):
+第三，在严格模式下，试图删除不可删除的属性时会抛出异常（之前这种操作不会产生任何效果）：
 
 ```js
 "use strict";
@@ -111,7 +106,7 @@ delete Object.prototype; // 抛出 TypeError 错误
 var o = { p: 1, p: 2 }; // !!! 语法错误
 ```
 
-第五，严格模式要求函数的参数名唯一。在正常模式下，最后一个重名参数名会掩盖之前的重名参数。之前的参数仍然可以通过 `arguments[i] 来访问`, 还不是完全无法访问。然而，这种隐藏毫无意义而且可能是意料之外的 (比如它可能本来是打错了), 所以在严格模式下重名参数被认为是语法错误：
+第五，严格模式要求函数的参数名唯一。在正常模式下，最后一个重名参数名会掩盖之前的重名参数。之前的参数仍然可以通过 `arguments[i]` 来访问，还不是完全无法访问。然而，这种隐藏毫无意义而且可能是意料之外的（比如它可能本来是打错了），所以在严格模式下重名参数被认为是语法错误：
 
 ```js
 function sum(a, a, c) {
@@ -121,7 +116,7 @@ function sum(a, a, c) {
 }
 ```
 
-第六，严格模式禁止八进制数字语法。ECMAScript 并不包含八进制语法，但所有的浏览器都支持这种以零 (`0`) 开头的八进制语法：`0644 === 420` 还有 `"\045" === "%"`.在 ECMAScript 6 中支持为一个数字加"`0`o"的前缀来表示八进制数。
+第六，严格模式禁止八进制数字语法。ECMAScript 并不包含八进制语法，但所有的浏览器都支持这种以零（`0`）开头的八进制语法：`0644 === 420` 还有 `"\045" === "%"`。在 ECMAScript 6 中支持为一个数字加 `0o` 的前缀来表示八进制数。
 
 ```js
 var a = 0o10; // ES6: 八进制
@@ -137,7 +132,7 @@ var sum =
   142;
 ```
 
-第七，ECMAScript 6 中的严格模式禁止设置{{Glossary("primitive")}}值的属性。不采用严格模式，设置属性将会简单忽略 (no-op),采用严格模式，将抛出{{jsxref("TypeError")}}错误
+第七，严格模式禁止设置{{Glossary("primitive", "原始")}}值的属性。不采用严格模式，设置属性将会简单忽略（no-op），采用严格模式，将抛出 {{jsxref("TypeError")}} 错误
 
 ```js
 "use strict";
@@ -151,7 +146,7 @@ false.true = ""; // TypeError
 
 严格模式简化了代码中变量名字映射到变量定义的方式。很多编译器的优化是依赖存储变量 X 位置的能力：这对全面优化 JavaScript 代码至关重要。JavaScript 有些情况会使得代码中名字到变量定义的基本映射只在运行时才产生。严格模式移除了大多数这种情况的发生，所以编译器可以更好的优化严格模式的代码。
 
-第一，严格模式禁用 `with`. `with`所引起的问题是块内的任何名称可以映射 (map) 到 with 传进来的对象的属性，也可以映射到包围这个块的作用域内的变量 (甚至是全局变量), 这一切都是在运行时决定的：在代码运行之前是无法得知的。严格模式下，使用 `with` 会引起语法错误，所以就不会存在 with 块内的变量在运行时才决定引用到哪里的情况了：
+第一，严格模式禁用 `with`。`with`所引起的问题是块内的任何名称可以映射（map）到 with 传进来的对象的属性，也可以映射到包围这个块的作用域内的变量（甚至是全局变量），这一切都是在运行时决定的：在代码运行之前是无法得知的。严格模式下，使用 `with` 会引起语法错误，所以就不会存在 with 块内的变量在运行时才决定引用到哪里的情况了：
 
 ```js
 "use strict";
@@ -166,7 +161,7 @@ with (obj) {
 
 一种取代 `with`的简单方法是，将目标对象赋给一个短命名变量，然后访问这个变量上的相应属性。
 
-第二，[`严格模式下的 eval 不再为上层范围 (surrounding scope，注：包围 eval 代码块的范围) 引入新变量`](http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/). 在正常模式下，代码 `eval("var x;")` 会给上层函数 (surrounding function) 或者全局引入一个新的变量 `x` . 这意味着，一般情况下，在一个包含 `eval` 调用的函数内所有没有引用到参数或者局部变量的名称都必须在运行时才能被映射到特定的定义 (因为 `eval` 可能引入的新变量会覆盖它的外层变量). 在严格模式下 `eval` 仅仅为被运行的代码创建变量，所以 `eval` 不会使得名称映射到外部变量或者其他局部变量：
+第二，严格模式下 [`eval` 不再为周围的作用域引入新变量](https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/)。在正常模式下，代码 `eval("var x;")` 会给上层函数（surrounding function）或者全局引入一个新的变量 `x`。这意味着，一般情况下，在一个包含 `eval` 调用的函数内所有没有引用到参数或者局部变量的名称都必须在运行时才能被映射到特定的定义（因为 `eval` 可能引入的新变量会覆盖它的外层变量）。在严格模式下 `eval` 仅仅为被运行的代码创建变量，所以 `eval` 不会使得名称映射到外部变量或者其他局部变量：
 
 ```js
 var x = 17;
@@ -216,7 +211,7 @@ eval("var y; delete y;"); // !!! 语法错误
 
 严格模式让 `arguments` 和 `eval` 少了一些奇怪的行为。两者在通常的代码中都包含了很多奇怪的行为：`eval` 会添加删除绑定，改变绑定好的值，还会通过用它索引过的属性给形参取别名的方式修改形参。虽然在未来的 ECMAScript 版本解决这个问题之前，是不会有补丁来完全修复这个问题，但严格模式下将 eval 和 arguments 作为关键字对于此问题的解决是很有帮助的。
 
-第一，名称 `eval` 和 `arguments` 不能通过程序语法被绑定 (be bound) 或赋值。以下的所有尝试将引起语法错误：
+第一，名称 `eval` 和 `arguments` 不能通过程序语法被绑定或赋值。以下的所有尝试将引起语法错误：
 
 ```js
 "use strict";
@@ -260,7 +255,7 @@ f(); // 抛出类型错误
 
 严格模式下更容易写出“安全”的 JavaScript。现在有些网站提供了方式给用户编写能够被网站其他用户执行的 JavaScript 代码。在浏览器环境下，JavaScript 能够获取用户的隐私信息，因此这类 Javascript 必须在运行前部分被转换成需要申请访问禁用功能的权限。没有很多的执行时检查的情况，Javascript 的灵活性让它无法有效率地做这件事。一些语言中的函数普遍出现，以至于执行时检查他们会引起严重的性能损耗。做一些在严格模式下发生的小改动，要求用户提交的 JavaScript 开启严格模式并且用特定的方式调用，就会大大减少在执行时进行检查的必要。
 
-第一，在严格模式下通过`this`传递给一个函数的值不会被强制转换为一个对象。对一个普通的函数来说，`this`总会是一个对象：不管调用时`this`它本来就是一个对象；还是用布尔值，字符串或者数字调用函数时函数里面被封装成对象的`this`；还是使用`undefined`或者`null`调用函数式`this`代表的全局对象（使用[`call`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`apply`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)或者[`bind`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)方法来指定一个确定的`this`）。这种自动转化为对象的过程不仅是一种性能上的损耗，同时在浏览器中暴露出全局对象也会成为安全隐患，因为全局对象提供了访问那些所谓安全的 JavaScript 环境必须限制的功能的途径。所以对于一个开启严格模式的函数，指定的`this`不再被封装为对象，而且如果没有指定`this`的话它值是`undefined`：
+第一，在严格模式下通过 `this` 传递给一个函数的值不会被强制转换为一个对象。对一个普通的函数来说，`this` 总会是一个对象：不管调用时 `this` 它本来就是一个对象；还是用布尔值，字符串或者数字调用函数时函数里面被封装成对象的 `this`；还是使用 `undefined` 或者 `null` 调用函数式 `this` 代表的全局对象（使用 [`call`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)、[`apply`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 或 [`bind`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 方法来指定一个确定的 `this`）。这种自动转化为对象的过程不仅是一种性能上的损耗，同时在浏览器中暴露出全局对象也会成为安全隐患，因为全局对象提供了访问那些所谓安全的 JavaScript 环境必须限制的功能的途径。所以对于一个开启严格模式的函数，指定的 `this` 不再被封装为对象，而且如果没有指定 `this` 的话它值是 `undefined`：
 
 ```js
 "use strict";
@@ -306,7 +301,7 @@ fun(1, 2); // 不会暴露 v（或者 a，或者 b）
 
 未来版本的 ECMAScript 很有可能会引入新语法，ECMAScript5 中的严格模式就提早设置了一些限制来减轻之后版本改变产生的影响。如果提早使用了严格模式中的保护机制，那么做出改变就会变得更容易。
 
-第一，在严格模式中一部分字符变成了保留的关键字。这些字符包括`implements`, `interface`, `let`, `package`, `private`, `protected`, `public`, `static`和`yield`。在严格模式下，你不能再用这些名字作为变量名或者形参名。
+第一，在严格模式中一部分字符变成了保留的关键字。这些字符包括 `implements`、`interface`、`let`、`package`、`private`、`protected`、`public`、`static` 和 `yield`。在严格模式下，你不能再用这些名字作为变量名或者形参名。
 
 ```js-nolint
 function package(protected) { // !!!
@@ -323,7 +318,7 @@ function package(protected) { // !!!
 function fun(static) { 'use strict'; } // !!!
 ```
 
-两个针对 Mozilla 开发的警告：第一，如果你的 JavaScript 版本在 1.7 及以上（你的 chrome 代码或者你正确使用了``加载的代码，`let`或者`yield`都不会作为关键字起作用；第二，尽管 ES5 无条件的保留了`class`, `enum`, `export`, `extends`, `import`和`super`关键字，在 Firefox 5 之前，Mozilla 仅仅在严格模式中保留了它们。
+两个针对 Mozilla 开发的警告：第一，如果你的 JavaScript 版本在 1.7 及以上（你的 chrome 代码或者你正确使用了``加载的代码，`let`或者`yield`都不会作为关键字起作用；第二，尽管 ES5 无条件的保留了`class`、`enum`、`export`、`extends`、`import`和`super`关键字，在 Firefox 5 之前，Mozilla 仅仅在严格模式中保留了它们。
 
 第二，[严格模式禁止了不在脚本或者函数层面上的函数声明](http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/)。在浏览器的普通代码中，在“所有地方”的函数声明都是合法的。这并不在 ES5 规范中（甚至是 ES3）！这是一种针对不同浏览器中不同语义的一种延伸。未来的 ECMAScript 版本很有希望制定一个新的，针对不在脚本或者函数层面进行函数声明的语法。[在严格模式下禁止这样的函数声明](http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls)对于将来 ECMAScript 版本的推出扫清了障碍：
 

From 90654844334c84230a5b40efddf26a5c5f0ab71d Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Mon, 25 Nov 2024 16:04:12 +0800
Subject: [PATCH 141/279] zh-cn: create the translation of the
 `Document.lastElementChild` property (#24748)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: allo 
Co-authored-by: 农药君 <99505726+cnbilinyj@users.noreply.github.com>
Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com>
---
 .../api/document/lastelementchild/index.md    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 files/zh-cn/web/api/document/lastelementchild/index.md

diff --git a/files/zh-cn/web/api/document/lastelementchild/index.md b/files/zh-cn/web/api/document/lastelementchild/index.md
new file mode 100644
index 00000000000000..46c632a125a576
--- /dev/null
+++ b/files/zh-cn/web/api/document/lastelementchild/index.md
@@ -0,0 +1,37 @@
+---
+title: Document：lastElementChild 属性
+slug: Web/API/Document/lastElementChild
+l10n:
+  sourceCommit: 41a8b9c9832359d445d136b6d7a8a28737badc6b
+---
+
+{{ APIRef("DOM") }}
+
+**`Document.lastElementChild`** 只读属性返回文档的最后一个子{{domxref("Element", "元素", "", "nocode")}}，如果没有子元素，则返回 `null`。
+
+对于 HTML 文档，这通常是唯一的子元素，即根 `` 元素。
+
+有关文档中特定元素的最后一个子元素，请参见 {{domxref("Element.lastElementChild")}}。
+
+## 值
+
+根 `` 元素。
+
+## 示例
+
+```js
+document.lastElementChild;
+// 返回根  元素，即文档的唯一子元素
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Element.lastElementChild")}}

From 2d5b23869e2c9693f2b701866a20a43725de22a5 Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Mon, 25 Nov 2024 16:54:31 +0800
Subject: [PATCH 142/279] chore(zh-cn): Move CSS examples - CSS values and
 units (#24747)

---
 .../building_blocks/values_and_units/index.md | 459 +++++++++++++++++-
 1 file changed, 436 insertions(+), 23 deletions(-)

diff --git a/files/zh-cn/learn/css/building_blocks/values_and_units/index.md b/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
index afa2097c91c77a..fc6c5bbf0e7b06 100644
--- a/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
+++ b/files/zh-cn/learn/css/building_blocks/values_and_units/index.md
@@ -156,7 +156,40 @@ CSS 中的值类型是一种定义了一些可使用的值的集合的方式。
 
 按照上面的说明操作之后，尝试以其他方式处理这些值，看看你将收获什么。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 900)}}
+```html live-sample___length
+
    
+  
    我的宽度为 200px
    
+  
    我的宽度为 10vw
    
+  
    我的宽度为 10em
    
+
    
+```
+
+```css live-sample___length
+.box {
+  background-color: lightblue;
+  border: 5px solid darkblue;
+  padding: 10px;
+  margin: 1em 0;
+}
+
+.wrapper {
+  font-size: 1em;
+}
+
+.px {
+  width: 200px;
+}
+
+.vw {
+  width: 10vw;
+}
+
+.em {
+  width: 10em;
+}
+```
+
+{{EmbedLiveSample("length", "", "250px")}}
 
 #### em 和 rem
 
@@ -172,7 +205,57 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 但是，如果你在 CSS 中更改 `` 字体大小，你将看到所有其他相关内容都发生了更改，包括 `rem` 和 `em` 大小的文本。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1100)}}
+```html live-sample___em-rem
+
      
+  
    • 一
      • 
+  
    • 二
      • 
+  
    • 
+    三
+    
        
+      
      • 三 A
        • 
+      
      • 
+        三 B
+        
          
+          
        • 三 B 2
          • 
+        
        
+      
        • 
+    
      
+  
      • 
+
    
+
+
      
+  
    • 一
      • 
+  
    • 二
      • 
+  
    • 
+    三
+    
        
+      
      • 三 A
        • 
+      
      • 
+        三 B
+        
          
+          
        • 三 B 2
          • 
+        
        
+      
        • 
+    
      
+  
      • 
+
    
+```
+
+```css live-sample___em-rem
+html {
+  font-size: 16px;
+}
+
+.ems li {
+  font-size: 1.3em;
+}
+
+.rems li {
+  font-size: 1.3rem;
+}
+```
+
+{{EmbedLiveSample("em-rem", "", "400px")}}
 
 ### 百分比
 
@@ -182,13 +265,68 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 不同之处在于，第二组两个框位于一个 400px 宽的包装器中。第二个 200px 宽的盒子和第一个一样宽，但是第二个 40% 的盒子现在是 400px 的 40%——比第一个窄多了！
 
-**尝试更改包装器的宽度或百分比值，看看这是如何工作的。**
+尝试更改包装器的宽度或百分比值，看看这是如何工作的：
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 1000)}}
+```html live-sample___percentage
+
    我的宽度为 200px
    
+
    我的宽度为 40%
    
+
    
+  
    我的宽度为 200px
    
+  
    我的宽度为 40%
    
+
    
+```
+
+```css live-sample___percentage
+.box {
+  background-color: lightblue;
+  border: 5px solid darkblue;
+  padding: 10px;
+  margin: 1em 0;
+}
+.wrapper {
+  width: 400px;
+  border: 5px solid rebeccapurple;
+}
+
+.px {
+  width: 200px;
+}
+
+.percent {
+  width: 40%;
+}
+```
+
+{{EmbedLiveSample("percentage", "", "350px")}}
 
 下一个示例以百分比设置字体大小。每个 `
  • ` 都有 80% 的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 800)}}
+```html live-sample___percentage-fonts
+
      
+  
    • 一
      • 
+  
    • 二
      • 
+  
    • 
+    三
+    
        
+      
      • 三 A
        • 
+      
      • 
+        三 B
+        
          
+          
        • 三 B 2
          • 
+        
        
+      
        • 
+    
      
+  
      • 
+
    
+```
+
+```css live-sample___percentage-fonts
+li {
+  font-size: 80%;
+}
+```
+
+{{EmbedLiveSample("percentage-fonts")}}
 
 注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。你可以在 MDN 属性引用页面上看到它能接受哪些值。如果允许的值包括 [``](/zh-CN/docs/Web/CSS/length-percentage)，则可以使用长度或百分比。如果允许的值只包含 ``，则不可能使用百分比。
 
@@ -196,9 +334,33 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（`opacity`），它控制元素的不透明度（它的透明程度）。此属性接受 `0`（完全透明）和 `1`（完全不透明）之间的数字。
 
-**在下面的示例中，尝试将不透明度值更改为 `0` 到 `1` 之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的。**
+在下面的示例中，尝试将不透明度值更改为 `0` 到 `1` 之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的：
+
+```html live-sample___opacity
+
    
+  
    我是个具有 opacity 属性的盒子
    
+
    
+```
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 600)}}
+```css live-sample___opacity
+.wrapper {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  padding: 20px;
+}
+
+.box {
+  margin: 40px auto;
+  width: 230px;
+  background-color: lightblue;
+  border: 5px solid darkblue;
+  padding: 10px;
+  opacity: 0.6;
+}
+```
+
+{{EmbedLiveSample("opacity", "", "210px")}}
 
 > [!NOTE]
 > 当你在 CSS 中使用数字作为值时，它不应该用引号括起来。
@@ -216,9 +378,36 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 在这学习示例或 MDN 上的其他示例中，你经常会看到使用的颜色关键字，因为它们是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！你可以在页面上看到 [``](/zh-CN/docs/Web/CSS/color_value) 值的完整列表。
 
-**在下面的示例中尝试使用不同的颜色值，以了解它们是如何工作的。**
+在下面的示例中尝试使用不同的颜色值，以了解它们是如何工作的：
+
+```html live-sample___color-keywords
+
    
+  
    古董白（antiquewhite）
    
+  
    靛色（blueviolet）
    
+  
    黄绿色（greenyellow）
    
+
    
+```
+
+```css live-sample___color-keywords
+.box {
+  padding: 10px;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+}
+.one {
+  background-color: antiquewhite;
+}
+
+.two {
+  background-color: blueviolet;
+}
+
+.three {
+  background-color: greenyellow;
+}
+```
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/color-keywords.html", '100%', 800)}}
+{{EmbedLiveSample("color-keywords")}}
 
 ### 十六进制 RGB 值
 
@@ -226,9 +415,37 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 这些值有点复杂，不太容易理解，但是它们比关键字更通用——你可以使用十六进制值来表示你想在配色方案中使用的任何颜色。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 800)}}
+同样，大胆尝试更改值，看看颜色如何变化：
 
-**同样，大胆尝试更改值，看看颜色如何变化吧！**
+```html live-sample___color-hex
+
    
+  
    #02798b
    
+  
    #c55da1
    
+  
    #128a7d
    
+
    
+```
+
+```css live-sample___color-hex
+.box {
+  padding: 10px;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+}
+
+.one {
+  background-color: #02798b;
+}
+
+.two {
+  background-color: #c55da1;
+}
+
+.three {
+  background-color: #128a7d;
+}
+```
+
+{{EmbedLiveSample("color-hex")}}
 
 ### RGB 和 RGBA 的值
 
@@ -236,18 +453,76 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 让我们重写上一个例子，使用 RGB 颜色：
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 800)}}
+```html live-sample___color-rgb
+
    
+  
    rgb(2 121 139)
    
+  
    rgb(197 93 161)
    
+  
    rgb(18 138 125)
    
+
    
+```
+
+```css live-sample___color-rgb
+.box {
+  padding: 10px;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+}
+.one {
+  background-color: rgb(2 121 139);
+}
+
+.two {
+  background-color: rgb(197 93 161);
+}
+
+.three {
+  background-color: rgb(18 138 125);
+}
+```
+
+{{EmbedLiveSample("color-rgb")}}
 
 你可以向 `rgb()` 传递第四个参数，它代表颜色的 alpha 通道，控制不透明度。如果你把这个值设置为 `0`，它将使颜色完全透明，而 `1` 将使它完全不透明。介于两者之间的值会给你带来不同级别的透明度。
 
 > [!NOTE]
 > 在颜色上设置 alpha 通道与使用我们前面看到的 {{cssxref("opacity")}} 属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用 RGB 与 alpha 参数的颜色只让你指定的颜色不透明。
 
-在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当 alpha 通道值较小时，背景如何显示的。
+在下面的例子中，我们添加了一个背景图片到我们的彩色方块的包含块中。然后我们设置了不同的不透明度值——注意当 alpha 通道值较小时，背景如何显示的。在本例中，尝试更改 alpha 通道值，看看它如何影响颜色输出。
+
+```html live-sample___color-rgba
+
    
+  
    rgb(2 121 139 / .3)
    
+  
    rgb(197 93 161 / .7)
    
+  
    rgb(18 138 125 / .9)
    
+
    
+```
+
+```css live-sample___color-rgba
+.wrapper {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  padding: 40px 20px;
+}
+
+.box {
+  padding: 10px;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+}
+
+.one {
+  background-color: rgb(2 121 139 / 0.3);
+}
+
+.two {
+  background-color: rgb(197 93 161 / 0.7);
+}
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 900)}}
+.three {
+  background-color: rgb(18 138 125 / 0.9);
+}
+```
 
-**在本例中，尝试更改 alpha 通道值，看看它如何影响颜色输出。**
+{{EmbedLiveSample("color-rgba", "", "250px")}}
 
 > [!NOTE]
 > 在旧版本的 CSS 中，`rgb()` 语法不支持 alpha 参数——你需要使用另一个叫 `rgba()` 的函数来实现。如今，你可以向 `rgb()` 传递一个 alpha 参数，但为了向后兼容旧网站，`rgba()` 语法仍然被支持，并且具有与 `rgb()` 完全相同的行为。
@@ -262,11 +537,72 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 我们可以更新 RGB 的例子来使用 HSL 颜色，就像这样：
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 800)}}
+```html live-sample___color-hsl
+
    
+  
    hsl(188 97% 28%)
    
+  
    hsl(321 47% 57%)
    
+  
    hsl(174 77% 31%)
    
+
    
+```
+
+```css live-sample___color-hsl
+.box {
+  padding: 10px;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+}
+
+.one {
+  background-color: hsl(188 97% 28%);
+}
+
+.two {
+  background-color: hsl(321 47% 57%);
+}
+
+.three {
+  background-color: hsl(174 77% 31%);
+}
+```
+
+{{EmbedLiveSample("color-hsl")}}
 
 就像 `rgb()` 一样，你可以向 `hsl()` 传递一个 alpha 参数来指定不透明度。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 900)}}
+```html live-sample___color-hsla
+
    
+  
    hsl(188 97% 28% / .3)
    
+  
    hsl(321 47% 57% / .7)
    
+  
    hsl(174 77% 31% / .9)
    
+
    
+```
+
+```css live-sample___color-hsla
+.wrapper {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  padding: 40px 20px;
+}
+
+.box {
+  padding: 10px;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+}
+
+.one {
+  background-color: hsl(188 97% 28% / 0.3);
+}
+
+.two {
+  background-color: hsl(321 47% 57% / 0.7);
+}
+
+.three {
+  background-color: hsl(174 77% 31% / 0.9);
+}
+```
+
+{{EmbedLiveSample("color-hsla", "", "250px")}}
 
 > [!NOTE]
 > 在旧版本的 CSS 中，`hsl()` 语法不支持 alpha 参数——你需要使用一个叫做 `hsla()` 的不同函数来实现。现在你可以向 `hsl()` 传递一个 alpha 参数，但为了向后兼容老网站，`hsla()` 语法仍然被支持，并且具有与 `hsl()` 完全相同的行为。
@@ -279,7 +615,32 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 在下面的例子中，我们演示了一个图像和一个渐变作为 CSS `background-image` 属性的值。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 900)}}
+```html live-sample___image
+
    
+
    
+```
+
+```css live-sample___image
+.box {
+  height: 150px;
+  width: 300px;
+  margin: 20px auto;
+  border-radius: 0.5em;
+}
+.image {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
+}
+
+.gradient {
+  background-image: linear-gradient(
+    90deg,
+    rgb(119 0 255 / 39%),
+    rgb(0 212 255 / 100%)
+  );
+}
+```
+
+{{EmbedLiveSample("image", "", "380px")}}
 
 > **备注：** `` 还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。如果你想了解 [``](/zh-CN/docs/Web/CSS/image) 数据类型，请查看 MDN 页面。
 
@@ -289,11 +650,26 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 `center`。
 
-在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了 40px。
+在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了 40px。尝试使用这些值，看看如何把这些图像移来移去。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 800)}}
+```html live-sample___position
+
    
+```
 
-**尝试使用这些值，看看如何把这些图像移来移去。**
+```css live-sample___position
+.box {
+  height: 100px;
+  width: 400px;
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
+  background-repeat: no-repeat;
+  background-position: right 40px;
+  margin: 20px auto;
+  border-radius: 0.5em;
+  border: 5px solid rebeccapurple;
+}
+```
+
+{{EmbedLiveSample("position")}}
 
 ## 字符串和标识符
 
@@ -301,7 +677,25 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 在某些地方可以使用 CSS 中的字符串，例如[在指定生成的内容时](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#生成带有before_和after_的内容)。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 600)}}
+```html live-sample___strings-idents
+
    
+```
+
+```css live-sample___strings-idents
+.box {
+  width: 400px;
+  padding: 1em;
+  border-radius: 0.5em;
+  border: 5px solid rebeccapurple;
+  background-color: lightblue;
+}
+
+.box::after {
+  content: "这是个字符串。因为它在 CSS 中被引号包裹了，所以我这么认为。";
+}
+```
+
+{{EmbedLiveSample("strings-idents")}}
 
 ## 函数
 
@@ -311,7 +705,26 @@ HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示
 
 例如，下面我们使用 `calc()` 使框宽为 `20% + 100px`。20% 是根据父容器 `.wrapper` 的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的 20% 是多少，所以我们使用 `calc()` 来告诉浏览器为我们做这个计算。
 
-{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 500)}}
+```html live-sample___calc
+
    
+  
    我的宽度是计算出来的。
    
+
    
+```
+
+```css live-sample___calc
+.wrapper {
+  width: 400px;
+}
+.box {
+  padding: 1em;
+  border-radius: 0.5em;
+  border: 5px solid rebeccapurple;
+  background-color: lightblue;
+  width: calc(20% + 100px);
+}
+```
+
+{{EmbedLiveSample("calc")}}
 
 ## 技能测试！
 

From 0bfe96c2be5d62c3e41c1b5ab657c97e23f8ca9e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 25 Nov 2024 20:26:18 +0900
Subject: [PATCH 143/279] =?UTF-8?q?2024/07/24=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#24646)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 2024/07/24 時点の英語版に基づき更新

* Update files/ja/web/css/line-height/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update files/ja/web/css/line-height/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/ja/web/css/line-height/index.md | 87 ++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 21 deletions(-)

diff --git a/files/ja/web/css/line-height/index.md b/files/ja/web/css/line-height/index.md
index 8a8ed8e4585743..0c60bce7ce0948 100644
--- a/files/ja/web/css/line-height/index.md
+++ b/files/ja/web/css/line-height/index.md
@@ -1,11 +1,13 @@
 ---
 title: line-height
 slug: Web/CSS/line-height
+l10n:
+  sourceCommit: 3928d2b1004e2435e063ef4b037e06e1906d62f3
 ---
 
 {{CSSRef}}
 
-**`line-height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非[置換](/ja/docs/Web/CSS/Replaced_element)インライン要素では、行ボックスの高さの計算に使われる高さを指定します。
+**`line-height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[書字方向](/ja/docs/Web/CSS/writing-mode#vertical-rl)が水平の場合は、行ボックスの高さを設定します。書字方向が垂直の場合は、行ボックスの幅を設定します。これは主にテキストの行間を設定するために使用します。書字方向が水平のブロックレベル要素では、要素に含まれる行ボックスの推奨される高さを指定し、非[置換](/ja/docs/Web/CSS/Replaced_element)インライン要素では、行ボックスの高さの計算に使われる高さを指定します。
 
 {{EmbedInteractiveExample("pages/css/line-height.html")}}
 
@@ -15,8 +17,8 @@ slug: Web/CSS/line-height
 /* キーワード値 */
 line-height: normal;
 
-/* 単位のない値: この値を要素のフォントサイズに
-掛けたものを使用する */
+/* 単位のない値:
+この値を要素のフォントサイズに掛けたものを使用する */
 line-height: 3.5;
 
 /*  値 */
@@ -29,14 +31,15 @@ line-height: 34%;
 line-height: inherit;
 line-height: initial;
 line-height: revert;
+line-height: revert-layer;
 line-height: unset;
 ```
 
-`line-height` プロパティは以下のうちの一つで指定します。
+`line-height` プロパティは以下のうちの 1 つで指定します。
 
-- 一つの ``
-- 一つの ``
-- 一つの ``
+- 1 つの ``
+- 1 つの ``
+- 1 つの ``
 - キーワード `normal`
 
 ### 値
@@ -49,10 +52,8 @@ line-height: unset;
   - : 行ボックスの高さの計算に、指定した {{cssxref("<length>")}} が使われます。**em** の単位で値が与えられると予期しない結果をになることがあります (下記の例を参照してください)。
 - ``
   - : 要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("<percentage>")}} に要素のフォントサイズの計算値を掛けたものです。**パーセント値**は予期しない結果を生む可能性があります (下記の第 2 の例を参照してください)。
-- `-moz-block-height` {{non-standard_inline}}
-  - : 行の高さを現在のブロックのコンテンツの高さにします。
 
-## アクセシビリティの考慮
+## アクセシビリティ
 
 主要な段落コンテンツでは、 `line-height` の値が `1.5` 以上になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。
 
@@ -73,49 +74,54 @@ line-height: unset;
 ```css
 /* 以下のルールの結果はすべて、同じ line height です */
 
+/* 数値/単位なし */
 div {
   line-height: 1.2;
   font-size: 10pt;
-} /* 数値/単位なし */
+}
+
+/* 長さ */
 div {
   line-height: 1.2em;
   font-size: 10pt;
-} /* 長さ */
+}
+
+/* パーセント値 */
 div {
   line-height: 120%;
   font-size: 10pt;
-} /* パーセント値 */
+}
+
+/* font 一括指定 */
 div {
   font:
     10pt/1.2 Georgia,
     "Bitstream Charter",
     serif;
-} /* 一括指定 */
+}
 ```
 
 `line-height` を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、この場合は同時に `font-family` プロパティも指定しなければなりません。
 
-
    line-height の値は単位なしの数値が好ましい
    
+### line-height の値は単位なしの数値が好ましい
 
-以下の例は、{{cssxref("<number>")}} を使用したほうが {{cssxref("<length>")}} よりも好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものには緑色の境界があり、単位なしの `line-height` の値を使用しています。2 番目には赤色の境界があり、 `line-height` の値を `em` で定義して使用しています。
+以下の例は、{{cssxref("<number>")}} を使用したほうが {{cssxref("<length>")}} よりも好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初の div には緑色の境界があり、単位なしの `line-height` の値を使用しています。2 番目の div には赤色の境界があり、 `line-height` の値を `em` で定義して使用しています。
 
 #### HTML
 
-```html
+```html-nolint
 
    
   
    予期しない結果を避けるために、単位なしの line-height を使いましょう。
    
   length と percentage で line-height を指定すると、継承動作がうまくいきません。
-  ...
 
    
 
 
    
-  
    予期しない結果を避けるために、単位なしの line-height を使いましょう。
    
+  
    予期しない結果を避けるために、 line-height は単位なしで使いましょう。
    
   length と percentage で line-height を指定すると、継承動作がうまくいきません。
-  ...
 
    
 
 
-
+
 ```
 
 #### CSS
@@ -147,6 +153,45 @@ h1 {
 
 {{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}
 
+### 縦書きモードでの行間の空間
+
+`line-height` プロパティは、縦書きの書字方向における縦の行間の空間を調整するために使用することができます。
+
+```html hidden
+
    
+  古池や蛙飛び込む水の音
    
+  ふるいけやかわずとびこむみずのおと
    
+  富士の風や扇にのせて江戸土産
    
+  ふじのかぜやおうぎにのせてえどみやげ
    
+
    
+
+
    
+  古池や蛙飛び込む水の音
    
+  ふるいけやかわずとびこむみずのおと
    
+  富士の風や扇にのせて江戸土産
    
+  ふじのかぜやおうぎにのせてえどみやげ
    
+
    
+```
+
+```css
+.haiku {
+  border: 1px solid;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  background-color: wheat;
+
+  writing-mode: vertical-rl;
+}
+
+.wide {
+  line-height: 2;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Space between lines in vertical writing modes', '100%', 650)}}
+
 ## 仕様書
 
 {{Specifications}}

From dfc913e630cc95e6f29f09255bbbcf219bbc1eb5 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Thu, 21 Nov 2024 16:06:04 +0900
Subject: [PATCH 144/279] =?UTF-8?q?2024/09/10=20=E6=99=82=E7=82=B9?=
 =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?=
 =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/vertical-align/index.md | 45 ++++++++++--------------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md
index 57f1fc171f1d6b..7681b94e09d339 100644
--- a/files/ja/web/css/vertical-align/index.md
+++ b/files/ja/web/css/vertical-align/index.md
@@ -13,8 +13,8 @@ l10n:
 
 vertical-align は、2 つの場面で使用することができます。
 
-- 包含する行ボックスの中で、インラインレベル要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。
-- [表のセルの内容](#vertical_alignment_in_a_table_cell)の垂直方向の配置を決める場合。
+- その中の行ボックスの中で、インラインレベル要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#行ボックス内での垂直方向の配置)ために使用することができます。
+- [表のセルの内容](#表のセル内での垂直方向の配置)の垂直方向の配置を決める場合。
 
 `vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Glossary/Block-level_content)の垂直方向の配置には使用できません。
 
@@ -46,7 +46,7 @@ vertical-align: revert-layer;
 vertical-align: unset;
 ```
 
-`vertical-align` プロパティは、以下の値のうち一つで指定します。
+`vertical-align` プロパティは、以下の値のうち 1 つで指定します。
 
 ### インライン要素用の値
 
@@ -65,7 +65,7 @@ vertical-align: unset;
 - `text-bottom`
   - : 要素の下端を親要素のフォントの下端に揃えます。
 - `middle`
-  - : 要素の中央を親要素の `baseline + x-height の半分` に揃えます。
+  - : 要素の中央を親要素のベースラインに x-height の半分を加えた位置に揃えます。
 - {{cssxref("<length>")}}
   - : 要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
 - {{cssxref("<percentage>")}}
@@ -84,7 +84,7 @@ vertical-align: unset;
 
 ### 表のセル用の値
 
-- `baseline` (および `sub`, `super`, `text-top`, `text-bottom`, ``, ``)
+- `baseline` （および `sub`, `super`, `text-top`, `text-bottom`, ``, ``）
   - : セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。
 - `top`
   - : セルの上端のパディング辺を行の上端に揃えます。
@@ -109,31 +109,24 @@ vertical-align: unset;
 
 #### HTML
 
-```html
+```html-nolint live-sample___basic_example
 
    
-  An link image with
-  a default alignment.
+  画像 link に既定の配置を設定しています。
 
    
 
    
-  An
-  link
-  image with a text-top alignment.
+  画像 link に text-top の配置を設定しています。
 
    
 
    
-  An
-  link
-  image with a text-bottom alignment.
+  画像 link に text-bottom の配置を設定しています。
 
    
 
    
-  An
-  link
-  image with a middle alignment.
+  画像 link に middle の配置を設定しています。
 
    
 ```
 
 #### CSS
 
-```css
+```css live-sample___basic_example
 img.top {
   vertical-align: text-top;
 }
@@ -147,13 +140,13 @@ img.middle {
 
 #### 結果
 
-{{EmbedLiveSample("基本的な例")}}
+{{EmbedLiveSample("Basic_example")}}
 
 ### 行ボックス内での垂直方向の配置
 
 #### HTML
 
-```html-nolint
+```html-nolint live-sample___vertical_alignment_in_a_line_box
 
    
 top:         star
 middle:      star
@@ -172,7 +165,7 @@ text-bottom: star
 ```
 
-```css hidden
+```css hidden live-sample___vertical_alignment_in_a_line_box
 #* {
   box-sizing: border-box;
 }
@@ -194,7 +187,7 @@ p {
 
 #### 結果
 
-{{EmbedLiveSample("行ボックス内での垂直方向の配置", 1200, 160)}}
+{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}}
 
 ### 表のセル内での垂直方向の配置
 
@@ -207,7 +200,7 @@ p {
 
 #### HTML
 
-```html
+```html live-sample___vertical_alignment_in_a_table_cell
    • + 色の使用、 色とそのコントラストおよび、 + 複数のラベルを参照してください。 @@ -378,7 +373,7 @@ l10n: href="/ja/docs/Web/Media/Audio_and_video_delivery/Video_player_styling_basics" >動画プレーヤーのスタイル設定の基本に示すように、ネイティブの - <button> + <button> を使用してアクセス可能なキーボードコントロールを提供します。
    - 色のコントラストと色とそのコントラストを参照してください。 @@ -462,7 +459,7 @@ l10n: >）。
  • - 行の高さは、段落内ではテキストサイズの 1.5 倍以上（例えば、 `line-height: 1.5;`）、段落間ではテキストサイズの 2.25 倍以上（例えば、 `padding: 2.25rem;`）にするするべきです。 + 行の高さは、段落内ではテキストサイズの 1.5 倍以上（例えば、 line-height: 1.5;）、段落間ではテキストサイズの 2.25 倍以上（例えば、 padding: 2.25rem;）にするするべきです。
  • テキストサイズが2倍になったときに、コンテンツのスクロールが必要になるべきではありません。 @@ -564,7 +561,7 @@ l10n: この達成基準では、満たす必要がある次の 3 つの条件を指定します。

      -
    • 却下可能（閉じたり取り除くことが可能）。
      • +
    • 却下可能（閉じたり取り除いたりすることが可能）。
    • ホバーリング可能（追加のコンテンツは、ポインターが上にあるときは消えません）。
      • From 6b09c551967c5b2a6e6481d40f31e3bf8faab934 Mon Sep 17 00:00:00 2001 From: Yuhan <74097164+Yuhanawa@users.noreply.github.com> Date: Tue, 19 Nov 2024 20:30:54 +0800 Subject: [PATCH 004/279] [zh-cn]: update the translation of HTML ` +``` + +如果没有标题，他们就只能浏览每个 ` @@ -155,19 +221,98 @@ slug: Web/HTML/Element/iframe #### 结果 -{{ EmbedLiveSample('一个简单的 iframe') }} +{{EmbedLiveSample('一个简单的 iframe', 640,400)}} -## 无障碍环境 +### 在 \ +请注意在使用 `srcdoc` 时，在嵌入内容中的任何相对 URL 都将会相对于嵌入该内容的页面的 URL 进行解析，如果你想要使用锚链接指向嵌入内容，你需要明确使用 `about:srcdoc` 作为基准 URL。 + +#### HTML + +```html-nolint +
      +
      九分钟以前，jc 写道：
      + +
      ``` -如果没有标题，他们就只能浏览每一个框架来获取需要的内容。这非常耗时间，也很容易让人迷惑，尤其是当页面中包含很多框架或者互动内容如音视频等的时候。 +在使用 `srcdoc` 时，如何进行转义： + +- 首先，编写 HTML 内容，像正常 HTML 一样转义需要转义字符（例如 `<`、`>`、`&` 等）。 +- 在 `srcdoc` 属性中 `<` 和 `<` 代表相同的字符。因此，在 HTML 中要将它们修改为实际需要的转义序列，将所有的 `&` 替换为 `&`。例如 `<` 修改为 `&lt;`，`&` 修改为 `&amp;`。 +- 替换所有的双引号（`"`）为 `"` 以防止 `srcdoc` 属性被提前终止。（如果你使用 `'`，那么你应该将 `'` 替换为 `'`）。这个步骤在上一个步骤后执行，所以 `"` 不会变成 `&quot;`。 + +#### 结果 + +{{EmbedLiveSample('在 iframe 中嵌入源代码', 640, 300)}} + +## 技术概要 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      + 内容分类 + + 流式内容、短语内容、嵌入内容、交互内容、可感知内容。 +
      允许的内容无。
      标签省略不允许，开始标签和结束标签都不能省略。
      允许的父元素接受嵌入内容的任何元素
      隐含的 ARIA 角色 + 没有对应的角色 +
      允许的 ARIA 角色 + application、document、img、none、presentation +
      DOM 接口{{domxref("HTMLIFrameElement")}}
      ## 规范 @@ -176,3 +321,8 @@ slug: Web/HTML/Element/iframe ## 浏览器兼容性 {{Compat}} + +## 参见 + +- [CSP：frame-ancestors](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) +- [隐私、权限和信息安全](/zh-CN/docs/Web/Privacy) From 132fb172e229625bd7e077b81b26fa0480b55f5a Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Tue, 19 Nov 2024 20:40:13 +0800 Subject: [PATCH 005/279] [zh-CN]: add translation for `Navigation.forward()` (#24579) --- .../zh-cn/web/api/navigation/forward/index.md | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 files/zh-cn/web/api/navigation/forward/index.md diff --git a/files/zh-cn/web/api/navigation/forward/index.md b/files/zh-cn/web/api/navigation/forward/index.md new file mode 100644 index 00000000000000..f5b404c90ead59 --- /dev/null +++ b/files/zh-cn/web/api/navigation/forward/index.md @@ -0,0 +1,75 @@ +--- +title: Navigation：forward() 方法 +slug: Web/API/Navigation/forward +l10n: + sourceCommit: e00c30e3919b1cc08fa1ea3913e75a42a91add02 +--- + +{{APIRef("Navigation API")}}{{SeeCompatTable}} + +{{domxref("Navigation")}} 接口的 **`forward()`** 方法在导航历史记录中向前导航一个条目。 + +## 语法 + +```js-nolint +forward(options) +``` + +### 参数 + +- `options` {{optional_inline}} + - : 包含以下属性的选项对象： + - `info` {{optional_inline}} + - : 开发人员定义的信息，将传递给 {{domxref("Navigation/navigate_event", "navigate")}} 事件，可在 {{domxref("NavigateEvent.info")}} 中获取。这可以是任何数据类型。例如，你可能希望根据导航方式（向左滑动、向右滑动或返回主页）以不同的动画显示新导航的内容。可以传入一个字符串来指示要使用哪种动画，该字符串可作为 `info` 传入。 + +### 返回值 + +具有以下属性的对象： + +- `committed` + - : 当可见 URL 发生改变并且新的 {{domxref("NavigationHistoryEntry")}} 被创建时，将兑现的 {{jsxref("Promise")}}。 +- `finished` + - : 当 {{domxref("NavigateEvent.intercept()")}} 处理器返回的所有 promise 都被兑现时，将兑现的 {{jsxref("Promise")}}。这相当于当 {{domxref("Navigation/navigatesuccess_event", "navigatesuccess")}} 事件触发时，兑现 {{domxref("NavigationTransition.finished")}} promise。 + +如果导航由于某种原因失败，则这两个 promise 中的任意一个会被拒绝。 + +### 异常 + +- `InvalidStateError` {{domxref("DOMException")}} + - : 如果 {{domxref("Navigation.currentEntry")}} 的 {{domxref("NavigationHistoryEntry.index")}} 值为 -1 或 {{domxref("Navigation.entries", "navigation.entries().length - 1")}}，即当前 {{domxref("Document")}} 尚未激活，或者当前历史记录条目是历史记录中的最后一条，即无法向前导航，或者当前 {{domxref("Document")}} 正在卸载时，抛出此异常。 + +## 示例 + +```js +async function backHandler() { + if (navigation.canGoBack) { + await navigation.back().finished; + // 导航结束后处理任何必要的清理工作 + } else { + displayBanner("你在第一页"); + } +} + +async function forwardHandler() { + if (navigation.canGoForward) { + await navigation.forward().finished; + // 导航结束后处理任何必要的清理工作 + } else { + displayBanner("你在最后一页"); + } +} +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [现代客户端路由：导航 API](https://developer.chrome.google.cn/docs/web-platform/navigation-api/) +- [导航 API 说明](https://github.com/WICG/navigation-api/blob/main/README.md) +- Domenic Denicola 的[导航 API 在线演示](https://gigantic-honored-octagon.glitch.me/) From c29f060629a569a9a7aed3dfd19ddd494da08c55 Mon Sep 17 00:00:00 2001 From: nyb1030 <88608444+nyb1030@users.noreply.github.com> Date: Wed, 20 Nov 2024 02:28:19 +0900 Subject: [PATCH 006/279] [ja] update `Web/API/Document/prerendering` translation (#24455) * Update prerendering index.md Translated version of https://github.com/mdn/content/pull/36526 * Update files/ja/web/api/document/prerendering/index.md Co-authored-by: Masahiro FUJIMOTO * Update index.md --------- Co-authored-by: Masahiro FUJIMOTO --- .../ja/web/api/document/prerendering/index.md | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/files/ja/web/api/document/prerendering/index.md b/files/ja/web/api/document/prerendering/index.md index d81220e1f5806d..027361b0acfad8 100644 --- a/files/ja/web/api/document/prerendering/index.md +++ b/files/ja/web/api/document/prerendering/index.md @@ -30,7 +30,7 @@ if (document.prerendering) { function pagePrerendered() { return ( document.prerendering || - self.performance?.getEntriesByType?.("navigation")[0]?.activationStart > 0 + performance.getEntriesByType("navigation")[0]?.activationStart > 0 ); } ``` @@ -49,6 +49,24 @@ if (document.prerendering) { > **メモ:** [投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) ランディングページ、特に[安全でない投機的読み込み条件](/ja/docs/Web/API/Speculation_Rules_API#安全でない投機的読み込み条件)の節で、遅延させたい活動の種類に関する詳細情報を参照してください。 +事前レンダリングがアクティベーションされた頻度を測定するには、次の 3 つの API をすべて組み合わせます。 `document.prerendering` はページが現在事前レンダリング中であるかを検出し、`prerenderingchange` は事前レンダリングされた後にアクティベートされたかを監視し、`activationStart` はページが過去に事前レンダリングされたかをチェックします。 + +```js +if (document.prerendering) { + document.addEventListener( + "prerenderingchange", + () => { + console.log("Prerender activated after this script ran"); + }, + { once: true }, + ); +} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) { + console.log("Prerender activated before this script ran"); +} else { + console.log("This page load was not via prerendering"); +} +``` + ## 仕様書 {{Specifications}} @@ -61,3 +79,4 @@ if (document.prerendering) { - [投機ルール API](/ja/docs/Web/API/Speculation_Rules_API) - {{domxref("Document.prerenderingchange_event", "prerenderingchange")}} イベント +- {{domxref("PerformanceNavigationTiming.activationStart")}} プロパティ From 16ec2b1d64e8c36a310b8261d247f1d2e14dc2ce Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Wed, 20 Nov 2024 00:36:01 +0300 Subject: [PATCH 007/279] [ru] add translation guide about MDN links (#24518) --- docs/README.md | 6 ++--- docs/ru/{translation-guide.md => README.md} | 25 +++++++++++++++------ 2 files changed, 21 insertions(+), 10 deletions(-) rename docs/ru/{translation-guide.md => README.md} (67%) diff --git a/docs/README.md b/docs/README.md index c12fe7e224f27a..5e1156088538bf 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,12 +4,12 @@ This document describes the general guidelines for translating MDN content, whic For guidelines relating to specific locales, we have locale-specific docs in subdirectories: -- [Russian translation guide / Участие в переводе](ru/translation-guide.md) -- [Simplified Chinese Guide / 简体中文翻译指南](zh-cn/translation-guide.md) -- [Traditional Chinese Guide / 正體中文翻譯指南](zh-tw/translation-guide.md) - [Spanish guide / Guía en español](es/README.md) - [Japanese translation guide / 日本語翻訳ガイド](ja/README.md) - [Korean translation guide / 한국 번역 지침](ko/README.md) +- [Russian translation guide / Руководство по переводу на русский язык](ru/README.md) +- [Simplified Chinese Guide / 简体中文翻译指南](zh-cn/translation-guide.md) +- [Traditional Chinese Guide / 正體中文翻譯指南](zh-tw/translation-guide.md) > [!NOTE] > If you want to add a guide to document some specific guidelines for your locale and it does not already appear here, you are welcome to add one, or [talk to the locale teams](https://github.com/mdn/translated-content/blob/main/PEERS_GUIDELINES.md#review-teams) about it. diff --git a/docs/ru/translation-guide.md b/docs/ru/README.md similarity index 67% rename from docs/ru/translation-guide.md rename to docs/ru/README.md index 931b1c84a6fbaf..bd0c1c2a0812e8 100644 --- a/docs/ru/translation-guide.md +++ b/docs/ru/README.md @@ -1,10 +1,24 @@ # Участие в переводе -Для начала ознакомьтесь с [общими правилами][], в частности, со страницей ["Writing style guide"][]. +Для начала ознакомьтесь с [правилами внесения изменений в MDN][https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md], [информацией о переводе документов MDN](https://github.com/mdn/translated-content/blob/main/docs/README.md) и [Руководством по составлению документации](/ru/docs/MDN/Guidelines). -Основная тема — [Перевод MDN на русский язык](https://github.com/mdn/translated-content/issues/276) +## Использование ссылок -## Рекомендации по переводу +При переводе документов не забывайте изменять язык (`en-US` на `ru`) во внутренних ссылках на сайт MDN так, чтобы они вели на соответствующие локализованные страницы. Также для внутренних ссылок необходимо сохранять только путь в URL-адресе (без схемы и имени домена). + +Рассмотрим пример: + +```md +If you are new to HTML, CSS, JavaScript, etc., try our [Learn web development](/en-US/docs/Learn) tutorials. +``` + +При переводе на русский язык следует заменить `en-US` на `ru`: + +```md +Если вы только начинаете изучение HTML, CSS и JavaScript, попробуйте наши руководства по [Изучению веб-разработки](/ru/docs/Learn). +``` + +## Общие рекомендации по переводу на русский язык - «_Вы_» и его производные пишите с маленькой буквы. - Всегда используйте букву «`ё`». @@ -15,7 +29,7 @@ - При переводе зарубежных имён пользуйтесь [правилами практической транскрипции](https://ru.wikipedia.org/wiki/Категория:Практическая_транскрипция_с_русским_языком). - Не переводите названия компаний, библиотек и т.д. - Не переводите аббревиатуры (API, DOM, UI). -- Не склоняйте через апостроф иностранные слова. Если это требуется, попробуйте русифицировать слово (URL'ы -> URL-адреса). +- Не склоняйте через апостроф иностранные слова. Если это требуется, попробуйте русифицировать слово (например, вместо `URL'ы` следует использовать `URL-адреса`). - Названия статей и заголовки пишите с одной заглавной буквы. ## Глоссарий @@ -37,6 +51,3 @@ | technical reference | технические материалы (при использовании в качестве заголовка) | \* — по возможности лучше избежать прямого перевода, используя синонимы или лучше раскрывая смысл. - -[общими правилами]: https://developer.mozilla.org/en-US/docs/MDN/Guidelines -["Writing style guide"]: https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Writing_style_guide From dc69f6fec7a21269f87bf30bd560220be308dad7 Mon Sep 17 00:00:00 2001 From: familyboat <84062528+familyboat@users.noreply.github.com> Date: Wed, 20 Nov 2024 15:38:01 +0800 Subject: [PATCH 008/279] zh-cn: update the translation of "JavaScript Introduction" (#24563) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Allo --- .../javascript/guide/introduction/index.md | 114 ++++++++++-------- 1 file changed, 64 insertions(+), 50 deletions(-) diff --git a/files/zh-cn/web/javascript/guide/introduction/index.md b/files/zh-cn/web/javascript/guide/introduction/index.md index 4be1e49610259c..a235c1fd7a7799 100644 --- a/files/zh-cn/web/javascript/guide/introduction/index.md +++ b/files/zh-cn/web/javascript/guide/introduction/index.md @@ -1,123 +1,137 @@ --- title: 介绍 slug: Web/JavaScript/Guide/Introduction +l10n: + sourceCommit: d71da812ee94c20658cb1916a123a42254ea545c --- {{jsSidebar("JavaScript 指南")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}} -本章节介绍了 JavaScript，并且讨论了它的一些基本概念。 +本章介绍了 JavaScript，并且讨论了它的一些基本概念。 ## 你应该已经掌握哪些知识？ -我们假设你已经掌握了以下基础技能： +本指南假设你已经掌握了以下基础技能： -- 对互联网和万维网（{{Glossary("WWW")}}）有基本的认识。 -- 熟悉超文本标记语言（{{Glossary("HTML")}}）。 +- 对互联网和万维网（[WWW](/zh-CN/docs/Glossary/World_Wide_Web)）有基本的认识。 +- 熟悉超文本标记语言（[HTML](/zh-CN/docs/Glossary/HTML)）。 - 一些编程经验。如果你初识编程，请先试着看看主页列出的有关 [JavaScript](/zh-CN/docs/Web/JavaScript) 的教程。 ## 去哪里获取有关 JavaScript 的信息？ MDN 上的 JavaScript 文档包括以下内容： -- [认识 Web](/zh-CN/Learn) 为初学者提供信息，并介绍一些关于编程和互联网的基本概念。 -- [JavaScript 入门](/zh-CN/docs/Web/JavaScript/Guide) （即本教程）提供 JavaScript 这门语言及其目标的概述。 -- [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference) 提供关于 JavaScript 的详细参考资料。 +- [学习 Web 开发](/zh-CN/docs/Learn)为初学者提供信息，并介绍一些关于编程和互联网的基本概念。 +- [JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide)（即本指南）提供 JavaScript 这门语言及其目标的概述。 +- [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference)提供关于 JavaScript 的详细参考资料。 -如果你刚开始学习 JavaScript，请详细阅读 [学习区（Learning area）](/zh-CN/Learn) 和 [JavaScript 入门](/zh-CN/docs/Web/JavaScript/Guide) 的文章。如果你已经掌握了 JavaScript 基础知识，你可以通过 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference) 来了解更多关于单个（individual）对象和语句的细节。 +如果你刚开始学习 JavaScript，先从[学习区](/zh-CN/docs/Learn)和 [JavaScript 指南](/zh-CN/docs/Web/JavaScript/Guide)的文章开始。你一旦掌握了 JavaScript 基础知识，就可以通过 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference)来了解有关单个对象和语句的更多细节。 ## 什么是 JavaScript? -JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单等）。另外还有高级的服务端 Javascript 版本，例如 Node.js，它可以让你在网页上添加更多功能，不仅仅是下载文件（例如在多台电脑之间的协同合作）。在宿主环境（例如 web 浏览器）中，JavaScript 能够通过其所连接的环境提供的编程接口进行控制。 +JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如，拥有复杂的动画、可点击的按钮、弹出菜单等）。还有一些更高级的服务器端 JavaScript 版本，如 Node.js，它们允许你为网站添加添加更多功能，而不仅仅是下载文件（例如，多台计算机之间的实时协作）。在宿主环境（例如 Web 浏览器）中，可以将 JavaScript 和宿主环境的对象连接起来，并以编程的方式控制这些对象。 -JavaScript 内置了一些对象的标准库，比如数组（`Array`），日期（`Date`），数学（`Math`）和一套核心语句，包括运算符、流程控制符以及声明方式等。JavaScript 的核心部分可以通过添加对象来扩展语言以适应不同用途；例如： +JavaScript 包含一个对象标准库（例如，`Array`、`Date` 和 `Math`）和一套核心语言元素（例如，运算符、控制结构和语句）。可以通过用额外的对象实现各种目的对核心 JavaScript 进行扩展；例如： -- 客户端的 JavaScript 通过提供对象，控制浏览器及其文档对象模型（DOM），来扩展语言核心。例如：客户端的拓展代码允许应用程序将元素放在某个 HTML 表单中，并且支持响应用户事件，比如鼠标点击、表单提交和页面导航。 -- 服务端的 JavaScript 则通过提供有关在服务器上运行 JavaScript 的对象来可扩展语言核心。例如：服务端版本直接支持应用和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。 +- _客户端 JavaScript_ 通过提供控制浏览器及其*文档对象模型*（DOM）的对象对核心语言进行扩展。例如：客户端扩展允许应用程序将元素放在某个 HTML 表单中，并且支持响应用户事件，比如鼠标点击、表单输入和页面导航。 +- _服务器端 JavaScript_ 则通过提供和在服务器上运行 JavaScript 有关的对象对核心语言进行扩展。例如：服务器端扩展支持应用程序和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。 -这意味着，在浏览器中，JavaScript 可以改变网页（DOM）的外观与样式。同样地，在服务器上，Node.js 中的 JavaScript 可以对浏览器上编写的代码发出的客户端请求做出响应。 +这意味着，在浏览器中，JavaScript 可以改变网页（DOM）的外观。同样地，在服务器上，Node.js JavaScript 可以对在浏览器执行的代码发出的自定义请求做出响应。 ## JavaScript 和 Java -JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript 语言类似 Java 但是并没有 Java 的静态类型和强类型检查特性。JavaScript 遵循了 Java 的表达式语法，命名规范以及基础流程控制，这也是 JavaScript 从 LiveScript 更名的原因。 +JavaScript 和 Java 在一些方面有共性但是在另一些方面有着根本性区别。JavaScript 语言类似 Java 但是并没有 Java 的静态类型和强类型检查。JavaScript 遵循大部分 Java 表达式语法、命名规范以及基础控制流结构，这也是 JavaScript 从 LiveScript 更名的原因。 -与 Java 通过声明的方式构建类的编译时系统不同，JavaScript 采用基于少量的数据类型如数字、布尔、字符串值的运行时系统。JavaScript 拥有基于原型的对象模型提供的动态继承；也就是说，独立对象的继承是可以改变的。JavaScript 支持匿名函数。函数也可以作为对象的属性被当做宽松的类型方式执行。 +与 Java 通过声明的方式构建类的编译时系统不同，JavaScript 支持的是基于少量的数据类型（表示数字、布尔、字符串值的数据类型）的运行时系统。JavaScript 的对象模型是基于原型的，而不是基于更常见的类。基于原型的模型提供了动态继承；也就是说，每个对象继承的内容可以不同。JavaScript 支持不需要特殊声明要求的函数。函数也可以作为对象的属性被当做松散类型的方法执行。 -与 Java 相比，Javascript 是一门形式自由的语言。你不必声明所有的变量，类和方法。你不必关心方法是否是公有、私有或者受保护的，也不需要实现接口。无需显式指定变量、参数、方法返回值的数据类型。 +与 Java 相比，Javascript 是一门形式自由的语言。你不必声明所有的变量、类和方法。你不必关心方法是否是公有、私有或者受保护的，也不需要实现接口。无需显式指定变量、参数、方法返回值的类型。 -Java 是基于类的编程语言，设计的初衷就是为了确保快速执行和类型安全。类型安全，举个例子，你不能将一个 Java 整数变量转化为一个对象引用，或者由 Java 字节码访问专有存储器。Java 基于类的模型，意味着程序包含专有的类及其方法。Java 的类继承和强类型要求紧耦合的对象层级结构。这些要求使得 Java 编程比 JavaScript 要复杂的多。 +Java 是基于类的编程语言，设计的初衷就是为了确保快速执行和类型安全。类型安全，举个例子，你不能将一个 Java 整数变量转化为一个对象引用，或者通过破坏 Java 字节码访问私有内存。Java 基于类的模型，意味着程序包含专有的类及其方法。Java 的类继承和强类型通常要求紧耦合的对象层级。这些要求使得 Java 编程比 JavaScript 编程要复杂的多。 -相比之下，JavaScript 传承了 HyperTalk 和 dBASE 语句精简、动态类型等精髓，这些脚本语言为更多开发者提供了一种语法简单、内置功能强大以及用最小需求创建对象的编程工具。 +相比之下，JavaScript 传承了 HyperTalk 和 dBASE 语句精简、动态类型等精髓。这些脚本语言由于其更简单的语法、专门的内置功能以及对象创建的最小要求，为更广泛的受众提供了编程工具。 -| JavaScript | Java | -| ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -| 面向对象。不区分对象类型。通过原型机制继承，任何对象的属性和方法均可以被动态添加。 | 基于类系统。分为类和实例，通过类层级的定义实现继承。不能动态增加对象或类的属性或方法。 | -| 变量类型不需要提前声明 (动态类型)。 | 变量类型必须提前声明 (静态类型)。 | -| 不能直接自动写入硬盘。 | 可以直接自动写入硬盘。 | - -请查看章节 [对象模型的详情](/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model) 来了解更多 JavaScript 和 Java 的不同。 +| JavaScript | Java | +| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | +| 面向对象。不区分对象类型。继承通过原型机制实现，可以向对象动态地添加属性和方法。 | 基于类。对象分为类和实例，所有的继承通过类层级实现。不能向类和实例动态地添加属性或方法。 | +| 不需要声明变量数据类型（动态类型，松散类型）。 | 必须声明变量数据类型（静态类型，强类型）。 | +| 不能自动写入硬盘。 | 可以自动写入硬盘。 | ## JavaScript 和 ECMAScript 规范 -JavaScript 的标准化组织是 [ECMA](http://www.ecma-international.org/)——这个欧洲信息与通信系统标准化协会提供基于 Javascript 的标准化方案（ECMA 原先是欧洲计算机制造商协会的首字母缩写）。这种标准化版本的 JavaScript 被称作 ECMAScript，在所有支持该标准的应用中以相同的方式工作。公司可以使用开放标准语言来开发他们自己的 JavaScript 实现版本。ECMAScript 标准在 ECMA－262 规范中进行文档化。参照 [JavaScript 的新特性](/zh-CN/docs/Web/JavaScript/New_in_JavaScript)以便学习更多关于不同版本的 JavaScript 和 ECMAScript 规范版本。 +JavaScript 的标准化组织是 [Ecma 国际](https://ecma-international.org/)——这个欧洲标准化信息与通信系统协会提供基于 Javascript 的标准化、国际化编程语言（ECMA 原先是欧洲计算机制造商协会的首字母缩写）。这个名为 ECMAScript 的 JavaScript 标准化版本，在所有支持该标准的应用程序中以相同的方式工作。公司可以使用开放标准语言来开发其 JavaScript 实现。ECMAScript 标准的文档位于 ECMA-262 规范中。 -ECMA-262 标准也通过了 国际标准化组织（[ISO](http://www.iso.ch/)）的 ISO-16262。你可以[在这里](http://www.ecma-international.org/publications/standards/Ecma-262.htm)找到该规范文件。ECMAScript 规范并没有描述文档对象模型（[DOM](/zh-CN/docs/Web/API/Document_Object_Model)），该模型由 万维网联盟（[W3C](http://www.w3.org/)）制定。DOM 定义了 HTML 文件对象被脚本操作的方法。为了更清楚地了解当使用 JavaScript 编程时用到的不同技术，请参阅 [JavaScript 技术概述](/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview)。 +ECMA-262 标准也由 [ISO](https://www.iso.org/home.html)（国际标准化组织）批准为 ISO-16262。你也可以在 [Ecma 国际网站](https://ecma-international.org/publications-and-standards/standards/ecma-262/)找到该规范文件。ECMAScript 规范并没有描述文档对象模型（DOM），该模型由[万维网联盟（W3C）](https://www.w3.org/)和/或 [WHATWG（Web 超文本应用技术工作组）](https://whatwg.org/)标准化。DOM 定义了脚本访问 HTML 文档对象的方式。为了更清楚地了解当使用 JavaScript 编程时用到的不同技术，请参阅 [JavaScript 技术概述](/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview)。 -### JavaScript 文献 和 ECMAScript 规范 +### JavaScript 文档和 ECMAScript 规范 -ECMAScript 规范是实现 ECMAScript 的一组需求;如果你想在 ECMAScript 实现或引擎 (如 Firefox 中的 SpiderMonkey 或 Chrome 中的 V8) 中实现符合标准的语言特性，那么它是非常有用的。 +ECMAScript 规范是一组用于实现 ECMAScript 的要求。如果你想在 ECMAScript 实现或引擎（如 Firefox 中的 SpiderMonkey 或 Chrome 中的 V8）中实现兼容标准的语言特性，那么它是非常有用的。 -ECMAScript 文档不是用来帮助脚本程序员的;使用 JavaScript 文档获取关于编写脚本的信息。 +ECMAScript 文档*不*是用来帮助脚本程序员的。有关编写脚本的信息请参考 JavaScript 文档。 -ECMAScript 规范使用了 JavaScript 程序员可能不熟悉的术语和语法。尽管 ECMAScript 中对语言的描述可能有所不同，但语言本身保持不变。JavaScript 支持 ECMAScript 规范中列出的所有功能。 +JavaScript 程序员可能对 ECMAScript 规范使用的术语和语法不熟悉。尽管语言的描述在 ECMAScript 中可能有所不同，但语言本身保持不变。JavaScript 支持 ECMAScript 规范中列出的所有功能。 -JavaScript 文档描述了适合 JavaScript 程序员的语言方面。 +JavaScript 文档描述语言的角度适合于 JavaScript 程序员。 ## JavaScript 入门 -开始使用 JavaScript 很容易，你只需要一个现代 Web 浏览器。这篇教程包含了一些只在最新版本的火狐浏览器上才有的功能，所以建议大家使用最新版本的火狐浏览器。 +想要开始使用 JavaScript，你只需要一个现代 Web 浏览器。最新的 [Firefox](https://www.mozilla.org/zh-CN/firefox/new/)、[Chrome](https://www.google.cn/chrome/index.html)、[Microsoft Edge](https://www.microsoft.com/zh-cn/edge) 和 [Safari](https://www.apple.com/safari/) 都支持本指南中涉及的特性。 + +探索 JavaScript 的一个非常有用的工具就是 JavaScript 控制台（有时也称作 Web 控制台，或就是控制台）：这个工具让你能在当前页面输入并运行 JavaScript。 + +这里的截图展示的是 [Firefox Web 控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/)，但是所有的现代浏览器搭载的控制台都以相同的方式工作。 -火狐浏览器内置的 Web 控制台非常适合学习 JavaScript,Web 控制台包含两个输入模式——单行模式、多行模式。 +### 打开控制台 -### 单行模式 +打开控制台的准确步骤因浏览器不同而不同： -[Web 控制台](/zh-CN/docs//Tools/Web_Console) 不仅可以展示当前已加载页面的信息，还包含一个可以在当前页面执行 Javascript 表达式的 [命令行。](/zh-CN/docs/Tools/Web_Console#The_command_line_interpreter) +- [打开 Firefox 中的控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/#opening-the-web-console) +- [打开 Chrome 中的控制台](https://developer.chrome.google.cn/docs/devtools/open) +- [打开 Microsoft Edge 中的控制台](https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/console/) -在火狐浏览器菜单栏的“工具" => "浏览器工具" => "Web 开发者工具"( 在 Windows 和 Linux 上Ctrl+Shift+I ，Mac 上Cmd+Option+K)，选择"Web 开发者工具栏"的控制台选项卡，它会如期出现在浏览器窗口的底部。如图，最下一行就是可以执行输入的命令行，面板上可以显示执行结果： +### 输入并运行 JavaScript -![](2019-04-04_00-15-29.png) +控制台出现在浏览器窗口的底部。控制台的底部是一个你可以用来输入 JavaScript 的输入行，输出出现在面板的上面： -控制台的工作方式与 eval 完全相同：返回最后输入的表达式。为了简单起见，可以想象每次输入到控制台的东西实际上都被 console.log 所包围。 +![一个 Web 控制台位于底部的浏览器窗口，包含两行输入和输出。可以在下面输出文本](2019-04-04_00-15-29.png) + +控制台的工作方式正好就像 `eval`：返回输入的上一个表达式。出于简化的目的，可以这样想象，每次向控制台输入时，输入实际上由 `console.log` 包围在 `eval` 周围，就像这样： ```js console.log(eval("3 + 5")); ``` -### 多行模式 +### 控制台的多行输入模式 -Web 控制台的单行模式非常适合用来测试单个的 JavaScript 表达式，对于复杂的 JavaScript 表达式或者一定规模的代码块就显得力不从心了。这正是[多行模式](https://firefox-source-docs.mozilla.org/devtools-user/web_console/the_command_line_interpreter/index.html#multi-line-mode)要解决的！ +默认情况下，在输入一行代码后，如果你按下 Enter（或者 Return，取决于你的键盘），然后会执行你输入的字符串。进入多行输入模式： -### Hello world +- 如果你输入的字符串不完整（例如，你输入的是 `function foo() {`），然后控制台会将 Enter 当作换行，这样你就能输入另一行。 +- 如果你在按下 Enter 的同时按下 Shift，然后控制台会将其当作换行，这样你就能输入另一行。 +- 仅在 Firefox 中，你可以激活[多行输入模式](https://firefox-source-docs.mozilla.org/devtools-user/web_console/the_command_line_interpreter/index.html#multi-line-mode)，在这个模式中，你可以在一个迷你编辑器中输入多行，然后在你准备好时运行全部代码。 -让我们用 Web 控制台的多行模式来写一个“Hello World"程序吧！JavaScript code: +想要开始书写 JavaScript，打开控制台，复制下列代码，并将其粘贴到提示符处： ```js (function () { "use strict"; + /* 代码开始 */ function greetMe(yourName) { - alert("Hello " + yourName); + alert(`你好${yourName}`); } - greetMe("World"); + greetMe("世界"); + /* 代码结束 */ })(); ``` -输入完成后，按下Cmd+Enter或者Ctrl+Enter(或者单击运行按钮) 就可以在浏览器中看到执行结果了！ +按下 Enter，在浏览器中看其结果！ + +## 接下来 -在接下来的章节里，我们将向你介绍 JavaScript 的语法以及语言特性，届时你将可以使用它编写更加复杂的程序。 +在接下来的章节里，本指南将向你介绍 JavaScript 语法以及语言特性，届时你将可以使用它编写更加复杂的程序。 -但是现在请记住，始终将 `(function(){"use strict";` 添加到你的代码之前，始终将`})();`添加到你的代码之后。[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)和[IIFE](/zh-CN/docs/Glossary/IIFE)这两篇文章详细解释了它们的作用。现在关于它们的作用你只要知道以下两点： +但是现在请记住，始终将 `(function(){"use strict";` 添加到你的代码之前，始终将 `})();` 添加到你的代码之后。[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)和[立即调用函数表达式](/zh-CN/docs/Glossary/IIFE)这两篇文章详细解释了它们的作用，但现在关于它们的作用你只要知道以下两点： -1. 防止 JavaScript 的语义影响初学者 -2. 防止控制台中的代码片段之间发生意料之外的交互 +1. 防止 JavaScript 的语义影响初学者。 +2. 防止控制台中的代码片段之间发生意料之外的交互（例如，在一个控制台执行中创建的用于不同的控制台执行）。 {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}} From 6f996f8e1a59a36105abd104fe1d68c421057dcf Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 20 Nov 2024 15:42:54 +0800 Subject: [PATCH 009/279] [zh-CN]: add translation for `Navigation.updateCurrentEntry()` (#24593) --- .../web/api/navigation/activation/index.md | 2 +- .../web/api/navigation/currententry/index.md | 2 +- files/zh-cn/web/api/navigation/index.md | 2 +- .../web/api/navigation/transition/index.md | 2 +- .../navigation/updatecurrententry/index.md | 58 +++++++++++++++++++ 5 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 files/zh-cn/web/api/navigation/updatecurrententry/index.md diff --git a/files/zh-cn/web/api/navigation/activation/index.md b/files/zh-cn/web/api/navigation/activation/index.md index 13e1d2a857f039..1329ea97638d88 100644 --- a/files/zh-cn/web/api/navigation/activation/index.md +++ b/files/zh-cn/web/api/navigation/activation/index.md @@ -33,4 +33,4 @@ if (navigation.activation) { - [现代客户端路由：导航 API](https://developer.chrome.google.cn/docs/web-platform/navigation-api/) - [导航 API 说明](https://github.com/WICG/navigation-api/blob/main/README.md) -- Domenic Denicola 的[导航 API 在线示例](https://gigantic-honored-octagon.glitch.me/) +- Domenic Denicola 的[导航 API 在线演示](https://gigantic-honored-octagon.glitch.me/) diff --git a/files/zh-cn/web/api/navigation/currententry/index.md b/files/zh-cn/web/api/navigation/currententry/index.md index 1b7107aec88ab9..e67f51c96aa9db 100644 --- a/files/zh-cn/web/api/navigation/currententry/index.md +++ b/files/zh-cn/web/api/navigation/currententry/index.md @@ -45,4 +45,4 @@ navigation.addEventListener("navigate", (event) => { - [现代客户端路由：导航 API](https://developer.chrome.google.cn/docs/web-platform/navigation-api/) - [导航 API 说明](https://github.com/WICG/navigation-api/blob/main/README.md) -- Domenic Denicola 的[导航 API 在线示例](https://gigantic-honored-octagon.glitch.me/) +- Domenic Denicola 的[导航 API 在线演示](https://gigantic-honored-octagon.glitch.me/) diff --git a/files/zh-cn/web/api/navigation/index.md b/files/zh-cn/web/api/navigation/index.md index 013ff7feba8c7c..a1ace64f8d7924 100644 --- a/files/zh-cn/web/api/navigation/index.md +++ b/files/zh-cn/web/api/navigation/index.md @@ -127,4 +127,4 @@ navigation.updateCurrentEntry({ state: newState }); - [现代客户端路由：导航 API](https://developer.chrome.google.cn/docs/web-platform/navigation-api/) - [导航 API 说明](https://github.com/WICG/navigation-api/blob/main/README.md) -- Domenic Denicola 的[导航 API 在线示例](https://gigantic-honored-octagon.glitch.me/) +- Domenic Denicola 的[导航 API 在线演示](https://gigantic-honored-octagon.glitch.me/) diff --git a/files/zh-cn/web/api/navigation/transition/index.md b/files/zh-cn/web/api/navigation/transition/index.md index c5b37884f70c5c..187e7dd4ab3c51 100644 --- a/files/zh-cn/web/api/navigation/transition/index.md +++ b/files/zh-cn/web/api/navigation/transition/index.md @@ -37,4 +37,4 @@ async function handleTransition() { - [现代客户端路由：导航 API](https://developer.chrome.google.cn/docs/web-platform/navigation-api/) - [导航 API 说明](https://github.com/WICG/navigation-api/blob/main/README.md) -- Domenic Denicola 的[导航 API 在线示例](https://gigantic-honored-octagon.glitch.me/) +- Domenic Denicola 的[导航 API 在线演示](https://gigantic-honored-octagon.glitch.me/) diff --git a/files/zh-cn/web/api/navigation/updatecurrententry/index.md b/files/zh-cn/web/api/navigation/updatecurrententry/index.md new file mode 100644 index 00000000000000..ce7a28b2829907 --- /dev/null +++ b/files/zh-cn/web/api/navigation/updatecurrententry/index.md @@ -0,0 +1,58 @@ +--- +title: Navigation：updateCurrentEntry() 方法 +slug: Web/API/Navigation/updateCurrentEntry +l10n: + sourceCommit: b55f5ca413d0b8115ecbafa19b3afbca72900e97 +--- + +{{APIRef("Navigation API")}}{{SeeCompatTable}} + +{{domxref("Navigation")}} 接口的 **`updateCurrentEntry()`** 方法更新 {{domxref("Navigation.currentEntry","currentEntry")}} 的 `state`；用于状态改变且与导航或重新加载无关的情况。 + +## 语法 + +```js-nolint +updateCurrentEntry(options) +``` + +### 参数 + +- `options` + - : 包含以下属性的选项对象： + - `state` + - : 导航完成后，开发者定义的信息将存储在关联的 {{domxref("NavigationHistoryEntry")}} 中，可通过 {{domxref("NavigationHistoryEntry.getState", "getState()")}} 检索。这可以是任何数据类型。例如，你可能希望存储页面访问次数以用于分析目的，或者存储 UI 状态详细信息，以便视图可以与用户上次离开时​​完全相同地显示。存储在 `state` 中的任何数据都必须[可结构化克隆](/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)。 + +### 返回值 + +无（`undefined`）。 + +### 异常 + +- `DataCloneError` {{domxref("DOMException")}} + - : 如果 `state` 参数中包含不可结构化克隆的值，则抛出此异常。 +- `InvalidStateError` {{domxref("DOMException")}} + - : 如果 {{domxref("Navigation.currentEntry")}} 为 `null`，即没有当前历史记录条目，则抛出此异常。例如，如果当前页面为 `about:blank`，则可能会发生这种情况。 + +## 示例 + +你可以使用类似下面的方法更新 {{htmlelement("details")}} 元素的打开/关闭状态，以便在重新加载页面或从其他地方导航回来时可以恢复状态。 + +```js +detailsElem.addEventListener("toggle", () => { + navigation.updateCurrentEntry({ state: { detailOpen: detailsElem.open } }); +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [现代客户端路由：导航 API](https://developer.chrome.google.cn/docs/web-platform/navigation-api/) +- [导航 API 说明](https://github.com/WICG/navigation-api/blob/main/README.md) +- Domenic Denicola 的[导航 API 在线演示](https://gigantic-honored-octagon.glitch.me/) From 64f965d6bf5d1b9473ebaaeafd92bd876f701ac9 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Wed, 20 Nov 2024 16:35:28 +0800 Subject: [PATCH 010/279] [zh-cn]: update the translation of Math `E` static data property (#24615) Co-authored-by: A1lo --- .../reference/global_objects/math/e/index.md | 18 ++++++++++++------ .../reference/global_objects/math/index.md | 4 ++-- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/e/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/e/index.md index 250d14299f9c11..9367f70883b441 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/e/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/e/index.md @@ -1,17 +1,23 @@ --- title: Math.E slug: Web/JavaScript/Reference/Global_Objects/Math/E +l10n: + sourceCommit: 761b9047d78876cbd153be811efb1aa77b419877 --- {{JSRef}} -## 概述 +**`Math.E`** 静态数据属性表示欧拉数，即自然对数的底数 e，其值约为 2.718。 -**`Math.E`** 属性表示自然对数的底数（或称为基数），e，约等于 2.718。 +{{EmbedInteractiveExample("pages/js/math-e.html")}} -Math.E=e≈2.718\mathtt{\mi{Math.E}} = e \approx 2.718 +## 值 -{{js_property_attributes(0,0,0)}} + + 𝙼𝚊𝚝𝚑.𝙴=e≈2.718\mathtt{Math.E} = e \approx 2.718 + + +{{js_property_attributes(0, 0, 0)}} ## 描述 @@ -19,9 +25,9 @@ slug: Web/JavaScript/Reference/Global_Objects/Math/E ## 示例 -### 示例：使用 `Math.E` +### 使用 Math.E -下面的函数返回 e： +以下函数返回 e 的值： ```js function getNapier() { diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/index.md index 2220054644ddc0..c713b0c6d4ebb4 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/index.md @@ -13,10 +13,10 @@ slug: Web/JavaScript/Reference/Global_Objects/Math 与其他全局对象不同的是，`Math` 不是一个构造器。`Math` 的所有属性与方法都是静态的。引用圆周率的写法是 `Math.PI`，调用正余弦函数的写法是 `Math.sin(x)`，`x` 是要传入的参数。`Math` 的常量是使用 JavaScript 中的全精度浮点数来定义的。 -## 属性 +## 静态属性 - {{jsxref("Math.E")}} - - : 欧拉常数，也是自然对数的底数，约等于 `2.718`。 + - : 欧拉数，即自然对数的底数，约等于 `2.718`。 - {{jsxref("Math.LN2")}} - : `2` 的自然对数，约等于 `0.693`。 - {{jsxref("Math.LN10")}} From 18031d54332c7c42077f5b6dc5103a53f03af394 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Wed, 20 Nov 2024 16:36:57 +0800 Subject: [PATCH 011/279] [zh-cn]: update the translation of `Window.visualViewport` property (#24614) --- .../web/api/window/visualviewport/index.md | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/files/zh-cn/web/api/window/visualviewport/index.md b/files/zh-cn/web/api/window/visualviewport/index.md index 8f0b14f157dd8b..ec2e95c5eab23b 100644 --- a/files/zh-cn/web/api/window/visualviewport/index.md +++ b/files/zh-cn/web/api/window/visualviewport/index.md @@ -1,21 +1,17 @@ --- -title: Window.visualViewport +title: Window：visualViewport 属性 slug: Web/API/Window/visualViewport +l10n: + sourceCommit: 04b91d4a12bec8c3adad0de48a030f6b6c4e4d1e --- -{{SeeCompatTable}}{{APIRef("Visual Viewport")}} +{{APIRef("Visual Viewport")}} -{{domxref("Window")}} 接口的 visualViewport 只读属性返回一个{{domxref("VisualViewport")}}对象，该对象表示给定窗口的可视视口。 +{{domxref("Window")}} 接口的 **`visualViewport`** 只读属性返回一个 {{domxref("VisualViewport")}} 对象，表示给定窗口的可视视口。如果当前文档未完全激活，则返回 `null`。 -## 语法 +## 值 -```plain -var visualViewport = Window.visualViewport -``` - -### 值 - -一个 {{domxref("VisualViewport")}} 对象。 +{{domxref("VisualViewport")}} 对象。 ## 规范 From 6a4159568cf3f877d1cc4be3e176b023e85ac7a3 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:20:49 +0100 Subject: [PATCH 012/279] [ja] sync translated content (#24610) * ja: sync translated content * Update _redirects.txt * Delete files/ja/conflicting/web/http/headers/content-security-policy/index.md --------- Co-authored-by: Masahiro FUJIMOTO --- files/ja/_redirects.txt | 1 + .../content-security-policy/sources/index.md | 120 ------------------ 2 files changed, 1 insertion(+), 120 deletions(-) delete mode 100644 files/ja/web/http/headers/content-security-policy/sources/index.md diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 476bdcbc16ee89..ffe5b3b032da7b 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -4183,6 +4183,7 @@ /ja/docs/Web/HTTP/HTTP_access_control/Errors/CORSPreflightDidNotSucceed /ja/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed /ja/docs/Web/HTTP/HTTP_access_control/Errors/CORSRequestNotHttp /ja/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp /ja/docs/Web/HTTP/HTTP_response_codes /ja/docs/Web/HTTP/Status +/ja/docs/Web/HTTP/Headers/Content-Security-Policy/Sources /ja/docs/Web/HTTP/Headers/Content-Security-Policy /ja/docs/Web/HTTP/Headers/Content-Security-Policy/referrer /ja/docs/Web/HTTP/Headers/Referrer-Policy /ja/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for /ja/docs/Web/HTTP/Headers/Content-Security-Policy /ja/docs/Web/HTTP/Headers/Feature-Policy /ja/docs/Web/HTTP/Headers/Permissions-Policy diff --git a/files/ja/web/http/headers/content-security-policy/sources/index.md b/files/ja/web/http/headers/content-security-policy/sources/index.md deleted file mode 100644 index 5d527827eea8ab..00000000000000 --- a/files/ja/web/http/headers/content-security-policy/sources/index.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSP ソース値 -slug: Web/HTTP/Headers/Content-Security-Policy/Sources -l10n: - sourceCommit: af967bb052695baa631c004b9b149c6f91920776 ---- - -{{HTTPSidebar}} - -HTTP の {{HTTPHeader("Content-Security-Policy")}} (CSP) ヘッダーディレクティブで、リソースを読み込むための `` を指定する場合、以下の一覧のいずれかを使用することができます。 -関連するディレクティブには{{Glossary("fetch directive", "フェッチディレクティブ")}}や、その他の[以下の一覧](#関連ディレクティブ)にあるものがあります。 - -## ソース - -- `` - - - : ホスト名または IP アドレスによるインターネットホストで、 [URL スキーム](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)、ポート番号、パスは任意です。 - ワイルドカード (`'*'`) はサブドメイン、ホストアドレス、ポート番号に使用することができ、そ れぞれの有効な値がすべて有効であることを示します。 - スキームを照合する場合、安全なアップグレードが許可されます（例: `http://example.com` を指定すると `https://example.com` と一致します）。 - 例を示します。 - - - `http://*.example.com`: example.com の任意のサブドメインから読み込もうとするすべての試みに一致します。`https` リソースにも一致します。 - - `mail.example.com:443`: mail.example.com の 443 番ポートへのアクセスの試行に一致します。 - - `https://store.example.com`: `https:` を使用した store.example.com へのすべてのアクセスの試行に一致します。 - - `*.example.com`: 現在のプロトコルを使用した example.com のすべてのサブドメインからの読み込みのすべての試行に一致します。 - - `https://*.example.com:12/path/to/file.js`: ポート 12 で `https:` を使用して example.com の任意のサブドメインから読み込もうとする、パスが `/path/to/file.js` である場合のみすべての試みに一致します。 - - `ws://example.com`: `ws:` を使用して example.com から読み込もうとするすべての試みに一致します。また、 `wss` リソースにも一致します。 - -- `` - - - : `http:` または `https:` のようなスキームです。 - コロンは必要です。 - 以下の他の値とは異なり、単一引用符は使用しないでください。 - data スキームも指定することができます (非推奨)。 - - - `data:` コンテンツのソースとして [`data:` URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) が使えるようにします。 - _これは安全ではありません。攻撃者は任意の data: URI を挿入することもできます。使用は控え、スクリプトには絶対に使用しないでください。_ - - `mediastream:` コンテンツのソースとして [`mediastream:` URI](/ja/docs/Web/API/Media_Capture_and_Streams_API) が使えるようにします。 - - `blob:` コンテンツのソースとして [`blob:` URI](/ja/docs/Web/API/Blob) が使えるようにします。 - - `filesystem:` コンテンツのソースとして [`filesystem:` URI](/ja/docs/Web/API/FileSystem) が使えるようにします。 - - > [!NOTE] - > スキームソースがない場合、文書のオリジンのスキームが使用されます。 - > セキュアアップグレードは許可されているので、`https:` を使用して文書を読み込んだ場合、`example.com` は `https://example.com` に一致しますが、`http://example.com` には一致しません。 - > 詳しい情報は、 [CSP Level 3](https://www.w3.org/TR/CSP3/#match-url-to-source-list) を参照してください。 - -- `'self'` - - : 保護された文書が提供されたオリジンを、同じ URL スキームおよびポート番号で参照します。 - 単一引用符が必要です。ブラウザーによっては独自にソースディレクティブから `blob` および `filesystem` を除外していることがあります。 - これらのコンテンツ種別を許可する必要があるサイトは、Data 属性を使用して指定することができます。 -- `'unsafe-eval'` - - : 文字列からコードを生成する `eval()` およびその他の安全でないメソッドの利用を許可します。 - 単一引用符が必要です。 -- `'wasm-unsafe-eval'` - - : `'unsafe-eval'` を使って安全でない JavaScript の実行を許可する必要なしに、WebAssembly モジュールの読み込みと実行を可能にします。 - 単一引用符が必要です。 -- `'unsafe-hashes'` - - : 特定のインラインの[イベントハンドラー](/ja/docs/Web/Events/Event_handlers)を許可します。 - インラインイベントハンドラーを許可したいが、インラインの {{HTMLElement("script")}} 要素や `javascript:` URL は不要な場合、これは `unsafe-inline` を使うよりも安全な方法です。 -- `'unsafe-inline'` - - : インラインの {{HTMLElement("script")}} 要素、`javascript:` の URL、インラインイベントハンドラー、インライン {{HTMLElement("style")}} 要素のような、インラインリソースの使用を許可します。 - 単一引用符が必要です。 -- `'none'` - - : 空のセットを参照します。つまり、一致する URL はありません。 - 単一引用符が必要です。 -- `'nonce-'` - - - : 暗号化ノンス (一度だけ使われる数値) を使用する特定のインラインスクリプトのための許可リストです。 - サーバーはポリシーを転送するたびに固有のノンスを生成する必要があります。 - リソースのポリシーを回避することを難しくするため、推測できないノンスを提供することが重要です。 - 例えば[安全でないインラインスクリプト](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script)を参照してください。 - ノンスを指定すると、最近のブラウザーは、ノンスの対応がない古いブラウザーのために設定されている可能性がある `'unsafe-inline'` を無視するようになります。 - - > [!NOTE] - > CSP の `nonce` ソースは _ノンス指定可能_ な要素にのみ適用できます（例えば {{HTMLElement("img")}} 要素には `nonce` 属性がないので、この CSP ソースに関連付ける方法はありません）。 - -- `'-'` - - : スクリプトまたはスタイルの sha256, sha384, sha512 の何れかのハッシュです。 - この値は、ハッシュを作成するために使用されたアルゴリズムと、ハイフンに続いてスクリプトまたはスタイルの base64 エンコードされたハッシュで構成されています。 - ハッシュを生成するときは、 \ - - -

      To display the mouse coordinates click anywhere on the page.

      - - +

      移动鼠标以查看其位置。

      +

      ``` +### JavaScript + +```js +let screenLog = document.querySelector("#screen-log"); +document.addEventListener("mousemove", logKey); + +function logKey(e) { + screenLog.innerText = ` + 屏幕 X/Y：${e.screenX}，${e.screenY} + 视口 X/Y：${e.clientX}，${e.clientY}`; +} +``` + +### 结果 + +{{EmbedLiveSample("示例")}} + ## 规范 {{Specifications}} @@ -53,8 +51,9 @@ var x = instanceOfMouseEvent.clientX {{Compat}} -## 相关 +## 参见 - {{ domxref("MouseEvent") }} -- {{domxref("event.clientY","clientY")}} +- {{domxref("MouseEvent.clientY","clientY")}} - {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} +- [坐标系](/zh-CN/docs/Web/CSS/CSSOM_view/Coordinate_systems) diff --git a/files/zh-cn/web/api/mouseevent/x/index.md b/files/zh-cn/web/api/mouseevent/x/index.md index 8ece37cbfe41ac..2f5006c6c0afbc 100644 --- a/files/zh-cn/web/api/mouseevent/x/index.md +++ b/files/zh-cn/web/api/mouseevent/x/index.md @@ -1,11 +1,13 @@ --- -title: MouseEvent.x +title: MouseEvent：x 属性 slug: Web/API/MouseEvent/x +l10n: + sourceCommit: ef75c1741b450c2331204be5563ee964ad5f4c48 --- -{{APIRef}}{{SeeCompatTable}} +{{APIRef("UI Events")}} -**`MouseEvent.x`** 是 {{domxref("MouseEvent.clientX")}} 属性的别名。 +**`MouseEvent.x`** 属性是 {{domxref("MouseEvent.clientX")}} 属性的别名。 ## 规范 diff --git a/files/zh-cn/web/api/mouseevent/y/index.md b/files/zh-cn/web/api/mouseevent/y/index.md index 759afe1b38973f..38d187f043621e 100644 --- a/files/zh-cn/web/api/mouseevent/y/index.md +++ b/files/zh-cn/web/api/mouseevent/y/index.md @@ -1,11 +1,13 @@ --- -title: MouseEvent.y +title: MouseEvent：y 属性 slug: Web/API/MouseEvent/y +l10n: + sourceCommit: 7b3ccaec4a93584da12939587ea746acaabe30bc --- -{{APIRef}}{{SeeCompatTable}} +{{APIRef("UI Events")}} -**`MouseEvent.y`** 属性是 {{domxref("MouseEvent.clientY")}} 属性的别称。 +**`MouseEvent.y`** 属性是 {{domxref("MouseEvent.clientY")}} 属性的别名。 ## 规范 From 69f1d346302c060aead1510972b68f4831e98187 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Sun, 24 Nov 2024 20:51:25 +0800 Subject: [PATCH 121/279] [zh-cn]: update the translation of `Window.scrollByLines()` method (#24677) --- .../web/api/window/scrollbylines/index.md | 51 +++++++++++-------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/files/zh-cn/web/api/window/scrollbylines/index.md b/files/zh-cn/web/api/window/scrollbylines/index.md index 0288837188c2f7..4579aaac2cc85b 100644 --- a/files/zh-cn/web/api/window/scrollbylines/index.md +++ b/files/zh-cn/web/api/window/scrollbylines/index.md @@ -1,43 +1,50 @@ --- -title: Window.scrollByLines() +title: Window：scrollByLines() 方法 slug: Web/API/Window/scrollByLines +l10n: + sourceCommit: 20c51db7895b1b6f41d4fa90e71830f4b6678eea --- -{{ ApiRef() }} +{{APIRef}} {{Non-standard_header}} -{{Non-standard_header}} - -## 概要 - -按给定的行数滚动文档。 +**`Window.scrollByLines()`** 方法按指定的行数滚动文档。 ## 语法 -```plain -window.scrollByLines(lines) +```js-nolint +scrollByLines(lines) ``` -## 参数 +### 参数 -- `lines` 要滚动的行数。 -- `lines` 可以是正整数，也可以是负整数。 +- `lines` + - : 滚动文档的行数，可以是正整数或负整数。 -## 例子 +### 返回值 -```html - - -``` +无（{{jsxref("undefined")}}）。 + +## 示例 ```html - - + + + + + ``` ## 规范 -这不是任何规范的一部分。 +这不属于任何规范。 + +## 浏览器兼容性 + +{{Compat}} -## 参考 +## 参见 -- {{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}} +- {{domxref("window.scroll()")}} +- {{domxref("window.scrollBy()")}} +- {{domxref("window.scrollByPages()")}} +- {{domxref("window.scrollTo()")}} From 5a9164895ef49b05c5bebd1129f2244ea80ab212 Mon Sep 17 00:00:00 2001 From: WangYC Date: Sun, 24 Nov 2024 20:54:56 +0800 Subject: [PATCH 122/279] zh-cn: fix typo (#24715) --- .../zh-cn/learn/javascript/first_steps/what_went_wrong/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md index f413e1374e2c0c..dd5498f576a18a 100644 --- a/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md +++ b/files/zh-cn/learn/javascript/first_steps/what_went_wrong/index.md @@ -216,7 +216,7 @@ function checkGuess( { 浏览器会认为我们试图将函数的内容当作参数传回函数。写圆括号时要小心！ -### SystaxError: missing } after function body +### SyntaxError: missing } after function body 这个简单。通常意味着函数或条件结构中丢失了一个花括号。如果我们将 `checkGuess()` 函数末尾的花括号删除，就会得到这个错误。 From 6cac01c47189eebad62b707d79ee456c363370ec Mon Sep 17 00:00:00 2001 From: Arthur Sedlukha Date: Sun, 24 Nov 2024 22:49:10 +0900 Subject: [PATCH 123/279] [ru]: update Web/HTML/Element/html translation (#24309) * [ru]: tag docs sync * [ru]: - sourceCommit added * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [ru] improve 'Web/HTML/Element/html' translation * set html lang to 'ru' --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Leonid Vinogradov --- files/ru/web/html/element/html/index.md | 82 +++++++++++++++++-------- 1 file changed, 57 insertions(+), 25 deletions(-) diff --git a/files/ru/web/html/element/html/index.md b/files/ru/web/html/element/html/index.md index 6bce00094687da..7ddc14ee00a993 100644 --- a/files/ru/web/html/element/html/index.md +++ b/files/ru/web/html/element/html/index.md @@ -1,51 +1,83 @@ --- -title: +title: ": корневой элемент HTML-документа" slug: Web/HTML/Element/html +l10n: + sourceCommit: 816cc4d4a5a318a23222946b6981bb92b499aebb --- {{HTMLSidebar}} -**HTML-элемент ``** представляет собой корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют корневым элементом. Все другие элементы должны быть потомками этого элемента (должны находиться внутри него). - -| [Категории контента](/ru/docs/Web/Guide/HTML/Content_categories) | Отсутствуют. | -| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Допустимое содержимое | Один элемент {{HTMLElement("head")}}, за которым следует один элемент {{HTMLElement("body")}}. | -| Пропуск тегов | Открывающий тег может быть пропущен, если первое, что находится внутри элемента ``, не является комментарием. В {{glossary("HTML5")}} закрывающий тег может быть пропущен. В старых версиях HTML, если сразу за элементом `` следует комментарий (при наличии элемента {{HTMLElement("body")}}), то закрывающий тег пропускать нельзя. | -| Допустимые родители | Отсутствуют. Это корневой элемент документа. | -| Допустимые ARIA-роли | Нет | -| DOM-интерфейс | {{domxref("HTMLHtmlElement")}} | +[HTML](/ru/docs/Web/HTML)-элемент **``** представляет корень (элемент верхнего уровня) HTML-документа, поэтому его так же называют _корневым элементом_. Все другие элементы должны быть потомками этого элемента, то есть находиться внутри него. В документе может быть только один элемент ``. ## Атрибуты -К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты). +Этот элемент поддерживает [глобальные атрибуты](/ru/docs/Web/HTML/Global_attributes). - `version` {{deprecated_inline}} - - : Определяет версию HTML DTD (Document Type Definition, больше известное как {{glossary("Doctype")}}), которая управляет текущим документом. Этот атрибут не нужен, потому что он является избыточным, так как есть информация, указываемая в объявлении типа документа. + - : Определяет версию HTML {{glossary("Doctype", "Document Type Definition")}}, используемую в текущем документе. Этот атрибут является избыточным, так как информация о версии указывается в объявлении типа документа. - `xmlns` - - : Определяет {{glossary("Namespace", "пространство имён")}} {{glossary("XHTML", "XHTML-документа")}}. Значение по умолчанию `"http://www.w3.org/1999/xhtml"`. Это требуется при {{glossary("parse", "парсинге")}} документов с помощью {{glossary("parser", "парсера")}} {{glossary("XML")}} и необязательно для документов `text/html`. + - : Определяет {{glossary("Namespace", "пространство имён")}} {{glossary("XML", "XML-документа")}}. Значение по умолчанию `"http://www.w3.org/1999/xhtml"`. Требуется для разбора документов с помощью XML-{{glossary("parser", "парсера")}} и необязателен для документов `text/html`. + +## Доступность + +Несмотря на то, что HTML не требует указывать начальные и конечные теги элемента ``, важно это делать, так как это позволит указать [`lang`](/ru/docs/Web/HTML/Global_attributes/lang) веб-страницы. Указание атрибута `lang` с допустимым идентификатором языка в соответствии с {{RFC(5646, "Tags for Identifying Languages (также известный как BCP 47)")}} в элементе `` поможет технологиям чтения с экрана определить правильный язык. Идентификатор языка должен описывать язык, используемый для большей части содержимого страницы. Без него программы чтения с экрана обычно используют язык, установленный в операционной системе, что может привести к неправильному произношению. + +Добавление правильного объявления `lang` в элемент `` также гарантирует, что важные метаданные, содержащиеся в {{HTMLElement("head")}} страницы, такие как {{HTMLElement("title")}}, также будут объявлены правильно. -## Пример +- [MDN Understanding WCAG, Guideline 3.1 explanations](/ru/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.1_%e2%80%94_readable_make_text_content_readable_and_understandable) +- [Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html) + +## Примеры ```html - + - ... + - ... + ``` -## Доступность - -Добавление атрибута [`lang`](/ru/docs/Web/HTML/Global_attributes#lang) с допустимым (валидным) идентификатором языка (определены в документе IETF [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)) в элемент `` поможет технологии чтения с экрана правильно определить язык. Идентификатор языка должен описывать язык, который используется большей частью содержимого страницы. Без него программы чтения с экрана, как правило, по умолчанию используют язык операционной системы, который может может стать причиной неправильного произношения. - -Добавление валидного атрибута `lang` в элемент `` также гарантирует, что важные метаданные, содержащиеся в элементе {{HTMLElement("head")}}, например заголовок страницы {{HTMLElement("title")}}, также будут объявлены правильно. - -- [MDN Understanding WCAG, Guideline 3.1 explanations](/ru/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable) -- [Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html) +## Техническая сводка + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Категории контентаОтсутствуют.
      Допустимое содержимоеОдин элемент {{HTMLElement("head")}}, за которым следует один элемент {{HTMLElement("body")}}.
      Пропуск тегов + Открывающий тег может быть пропущен, если первое, что находится внутри элемента <html>, не является комментарием.
      + Если сразу за элементом <html> следует комментарий, то закрывающий тег пропускать нельзя. +
      Допустимые родителиОтсутствуют. Это корневой элемент документа.
      Неявная ARIA-рольdocument
      Допустимые ARIA-ролиАтрибут role не допускается
      DOM-интерфейс{{domxref("HTMLHtmlElement")}}
      ## Спецификации From 6ffc30a50c844b4d7a1e9d3709cac24bc41ea872 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 24 Nov 2024 16:56:45 +0300 Subject: [PATCH 124/279] [ru] update `Web/HTTP/Overview` translation (#24580) [ru] update 'Web/HTTP/Overview' translation --- files/ru/web/http/overview/index.md | 193 +++++++++++++++++++--------- 1 file changed, 130 insertions(+), 63 deletions(-) diff --git a/files/ru/web/http/overview/index.md b/files/ru/web/http/overview/index.md index e5aacae961cf80..16af107402c9bf 100644 --- a/files/ru/web/http/overview/index.md +++ b/files/ru/web/http/overview/index.md @@ -1,103 +1,155 @@ --- title: Обзор протокола HTTP slug: Web/HTTP/Overview +l10n: + sourceCommit: 88467d31d2ad7bdfade8b38ec69f6702fee080d1 --- {{HTTPSidebar}} -**HTTP** — это {{glossary("protocol", "протокол")}}, для получения различных ресурсов, например, HTML-документов. Он лежит в основе обмена данными в Интернете. HTTP является протоколом клиент-серверного взаимодействия, что означает инициирование запросов к серверу самим получателем, обычно веб-браузером. Полученный итоговый документ как правило состоит из различных ресурсов, таких как текстовое содержимое, описание структуры документа, изображения, видео-файлы, скрипты и т.д. +**HTTP** — это {{glossary("protocol", "протокол")}} для получения ресурсов, например, HTML-документов. +Он лежит в основе обмена данными в Интернете и является протоколом клиент-серверного взаимодействия, что означает инициирование запросов к серверу самим получателем, обычно веб-браузером. +Готовый документ как правило состоит из различных ресурсов, таких как текстовое содержимое, описание структуры, изображения, видео-файлы, скрипты и т.д. -![Единый веб-документ, составленный из нескольких ресурсов с разных серверов.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg) +![Веб-документ, составленный из нескольких ресурсов с разных серверов.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/fetching-a-page.svg) -Клиенты и серверы взаимодействуют, обмениваясь одиночными сообщениями (а не потоком данных). Сообщения, отправленные клиентом, называются _запросами_, а сообщения, отправленные сервером, называются _ответами_. +Клиент и сервер взаимодействуют, обмениваясь отдельными сообщениями (а не потоком данных). Сообщения, отправляемые клиентом, называются _запросами_ (англ. _request_), а сообщения от сервера называются _ответами_ (англ. _response_). ![HTTP — это протокол прикладного уровня, расположенный поверх TCP (транспортный уровень) и IP (сетевой уровень) и ниже уровня представления.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/http-layers.svg) -Хотя HTTP был разработан ещё в начале 1990-х годов, за счёт своей расширяемости в дальнейшем он все время совершенствовался. HTTP является протоколом прикладного уровня, который чаще всего использует возможности другого протокола - {{glossary("TCP")}} (или {{glossary("TLS")}} - защищённый TCP) - для пересылки своих сообщений, однако любой другой надёжный транспортный протокол теоретически может быть использован для доставки таких сообщений. Благодаря своей расширяемости, он используется не только для получения клиентом гипертекстовых документов, изображений и видео, но и для передачи содержимого серверам, например, с помощью HTML-форм. HTTP также может быть использован для получения только частей документа с целью обновления веб-страницы по запросу (например, посредством AJAX запроса). +Разработанный в начале 1990-х годов, HTTP является расширяемым протоколом, который развивался с течением времени. +Это протокол прикладного уровня, который использует соединение {{glossary("TCP")}} (или {{glossary("TLS")}}-защищённый TCP) для пересылки сообщений, однако теоретически может быть использован любой другой надёжный транспортный протокол. Благодаря своей расширяемости, HTTP используется не только для получения гипертекстовых документов, но и для изображений и видео, а также для отправки содержимого серверам, например, с помощью HTML-форм. +HTTP также может быть использован для получения частей документа с целью обновления веб-страницы по запросу. ## Составляющие систем, основанных на HTTP -HTTP — это клиент-серверный протокол, то есть запросы отправляются какой-то одной стороной — участником обмена (user-agent) (либо прокси вместо него). Чаще всего в качестве участника выступает веб-браузер, но им может быть кто угодно, например, робот, путешествующий по Сети для пополнения и обновления данных индексации веб-страниц для поисковых систем. +HTTP — это клиент-серверный протокол, то есть запросы отправляются какой-то одной стороной — пользовательским агентом (либо прокси от его имени). Чаще всего в качестве пользовательского агента выступает веб-браузер, но необязательно, например, им может быть робот, индексирующий веб-страницы для поисковых систем. -Каждый запрос (англ. _request_) отправляется серверу, который обрабатывает его и возвращает ответ (англ. _response_). Между этими запросами и ответами как правило существуют многочисленные посредники, называемые {{glossary("Proxy_server","прокси")}}, которые выполняют различные операции и работают как шлюзы или {{glossary("cache","кэш")}}, например. +Каждый отдельный запрос отправляется серверу, который обрабатывает его и возвращает ответ. +Между клиентом и сервером как правило существуют многочисленные посредники, называемые {{glossary("Proxy_server", "прокси")}}, которые выполняют различные операции и работают как шлюзы или, например, {{glossary("cache", "кэш")}}. -![HTTP-запрос от клиента, пересылаемый несколькими прокси-серверами на сервер, и ответ, возвращающийся по тому же маршруту клиенту.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/client-server-chain.svg) +![HTTP-запрос от клиента, пересылаемый несколькими прокси на сервер, и ответ, возвращающийся по тому же маршруту клиенту.](https://mdn.github.io/shared-assets/images/diagrams/http/overview/client-server-chain.svg) -Обычно между браузером и сервером гораздо больше различных устройств-посредников, которые играют какую-либо роль в обработке запроса: маршрутизаторы, модемы и так далее. Благодаря тому, что Сеть построена на основе системы уровней (слоёв) взаимодействия, эти посредники "спрятаны" на сетевом и транспортном уровнях. В этой системе уровней HTTP занимает самый верхний уровень, который называется "прикладным" (или "уровнем приложений"). Знания об уровнях сети, таких как представительский, сеансовый, транспортный, сетевой, канальный и физический, имеют важное значение для понимания работы сети и диагностики возможных проблем, но не требуются для описания и понимания HTTP. +Обычно между браузером и сервером гораздо больше различных устройств-посредников, которые играют какую-либо роль в обработке запроса: маршрутизаторы, модемы и т.д. +Благодаря тому, что Интернет имеет многоуровневую структуру, эти посредники "спрятаны" на сетевом и транспортном уровнях. +В этой системе уровней HTTP занимает самый верхний уровень, который называется "прикладным" или "уровнем приложений". +Хотя знания об уровнях имеют важное значение для понимания работы сети и диагностики возможных проблем, но не обязательны для описания HTTP. -### Клиент: участник обмена +### Клиент: пользовательский агент -Участник обмена (user agent) — это любой инструмент или устройство, действующие от лица пользователя. Эту задачу преимущественно выполняет веб-браузер; в некоторых случаях участниками выступают программы, которые используются инженерами и веб-разработчиками для отладки своих приложений. +_Пользовательский агент_ (англ. _user agent_) — это любой инструмент или устройство, действующие от лица пользователя. +Эту задачу преимущественно выполняет веб-браузер, но это также могут программы, которые используются инженерами и веб-разработчиками для отладки своих приложений. -Браузер **всегда** является той сущностью, которая создаёт запрос. Сервер обычно этого не делает, хотя за многие годы существования сети были придуманы способы, которые могут позволить выполнить запросы со стороны сервера. +Браузер **всегда** является той сущностью, которая инициирует запрос. +Сервер обычно этого не делает, хотя за годы существования сети были придуманы способы, которые могут позволить выполнить запросы со стороны сервера. -Чтобы отобразить веб страницу, браузер отправляет начальный запрос для получения HTML-документа этой страницы. После этого браузер изучает этот документ и запрашивает дополнительные файлы, необходимые для отображения содержания веб-страницы (исполняемые скрипты, информацию о макете страницы - CSS таблицы стилей, дополнительные ресурсы в виде изображений и видео-файлов), которые непосредственно являются частью исходного документа, но расположены в других местах сети. Далее браузер соединяет все эти ресурсы для отображения их пользователю в виде единого документа — веб-страницы. Скрипты, выполняемые самим браузером, могут получать по сети дополнительные ресурсы на последующих этапах обработки веб-страницы, и браузер соответствующим образом обновляет отображение этой страницы для пользователя. +Чтобы отобразить веб-страницу, браузер отправляет начальный запрос для получения HTML-документа. +После этого браузер изучает этот документ и запрашивает дополнительные файлы, необходимые для отображения веб-страницы (исполняемые скрипты, CSS-стили, изображения и видео-файлы). +Далее браузер соединяет все эти ресурсы для отображения их пользователю в виде единого документа — веб-страницы. Скрипты, выполняемые самим браузером, могут получать дополнительные ресурсы на последующих этапах обработки веб-страницы, и браузер соответствующим образом обновляет отображение этой страницы. -Веб-страница является гипертекстовым документом. Это означает, что некоторые части отображаемого текста являются ссылками, которые могут быть активированы (обычно нажатием кнопки мыши) с целью получения и соответственно отображения новой веб-страницы (переход по ссылке). Это позволяет пользователю "перемещаться" по страницам сети (Internet). Браузер преобразует эти гиперссылки в HTTP-запросы и в дальнейшем полученные HTTP-ответы отображает в понятном для пользователя виде. +Веб-страница является гипертекстовым документом. +Это означает, что некоторые части отображаемого текста являются ссылками, которые могут быть активированы (обычно нажатием кнопки мыши) для получения новой веб-страницы. Это позволяет пользователю "перемещаться" по страницам сети Интернет. +Браузер преобразует эти переходы в HTTP-запросы и в дальнейшем отображает полученные HTTP-ответы в понятном для пользователя виде. ### Веб-сервер -На другой стороне коммуникационного канала расположен сервер, который обслуживает (англ. _serve_) пользователя, предоставляя ему документы по запросу. С точки зрения конечного пользователя, сервер всегда является некой одной виртуальной машиной, полностью или частично генерирующей документ, хотя фактически он может быть группой серверов, между которыми балансируется нагрузка, то есть перераспределяются запросы различных пользователей, либо сложным программным обеспечением, опрашивающим другие компьютеры (такие как кеширующие серверы, серверы баз данных, серверы приложений электронной коммерции и другие). +На другой стороне коммуникационного канала расположен сервер, который _обслуживает_ (англ. _serve_) запросы клиента. +Сервер представляется некой одной виртуальной машиной, но фактически это может быть группа серверов, между которыми балансируется нагрузка, то есть перераспределяются запросы различных пользователей, либо другим программным обеспечением (таким как кеширующие серверы, серверы баз данных, серверы приложений электронной коммерции и другие). -Сервер не обязательно расположен на одной машине, и наоборот - несколько серверов могут быть расположены (хоститься) на одной и той же машине. В соответствии с версией HTTP/1.1 и имея {{HTTPHeader("Host")}} заголовок, они даже могут делить тот же самый IP-адрес. +Сервер не обязательно расположен на одном компьютере, и наоборот — несколько серверов могут быть расположены на одной и той же машине. +Начиная с версии HTTP/1.1 заголовок {{HTTPHeader("Host")}} позволяет нескольким серверам даже использовать один тот же IP-адрес. ### Прокси -Между веб-браузером и сервером находятся большое количество сетевых узлов, передающих HTTP сообщения. Из-за слоистой структуры большинство из них оперируют также на транспортном сетевом или физическом уровнях, становясь прозрачным на HTTP слое и потенциально снижая производительность. Эти операции на уровне приложений называются **прокси**. Они могут быть прозрачными или нет, (изменяющие запросы не пройдут через них), и способны исполнять множество функций: +Между веб-браузером и сервером находятся большое количество сетевых узлов, передающих HTTP-сообщения. +Из-за многоуровневой структуры большинство из них оперируют на транспортном, сетевом или физическом уровнях, становясь прозрачным для HTTP и потенциально снижая производительность. +Эти промежуточные узлы на уровне приложений называются **прокси**. +Они могут быть прозрачными, то есть пересылать запросы без преобразований, и непрозрачными — изменяющими запрос каким-либо образом перед передачей его другому серверу. +Прокси могут выполнять различные функций: -- caching (кеш может быть публичным или приватными, как кеш браузера) -- фильтрация (как сканирование антивируса, родительский контроль, …) -- выравнивание нагрузки (позволить нескольким серверам обслуживать разные запросы) -- аутентификация (контролировать доступом к разным ресурсам) -- протоколирование (разрешение на хранение истории операций) +- кеширование (кеш может быть публичным или приватными, как кеш браузера) +- фильтрация (как сканирование антивирусом или родительский контроль) +- балансирование нагрузки (чтобы позволить нескольким серверам обслуживать запросы) +- аутентификация (для контроля доступа к разным ресурсам) +- протоколирование (позволяет хранить историю операций) ## Основные аспекты HTTP -### HTTP - прост +### HTTP является простым -Даже с большей сложностью, введённой в HTTP/2 путём инкапсуляции HTTP-сообщений в фреймы, HTTP, как правило, прост и удобен для восприятия человеком. HTTP-сообщения могут читаться и пониматься людьми, обеспечивая более лёгкое тестирование разработчиков и уменьшенную сложность для новых пользователей. +HTTP был спроектирован так, чтобы быть простым и понятным для человека, даже с учётом сложности, добавленной в HTTP/2 в виде инкапсуляции HTTP-сообщений в кадры. +HTTP-сообщения могут быть прочитаны и поняты людьми, что упрощает тестирование для разработчиков и упрощает работу новичкам. -### HTTP - расширяемый +### HTTP является расширяемым -Введённые в HTTP/1.0 [HTTP-заголовки](/ru/docs/Web/HTTP/Headers) сделали этот протокол лёгким для расширения и экспериментирования. Новая функциональность может быть даже введена простым соглашением между клиентом и сервером о семантике нового заголовка. +Введённые в HTTP/1.0 [HTTP-заголовки](/ru/docs/Web/HTTP/Headers) сделали этот протокол лёгким для расширения и экспериментирования. +Новая функциональность может быть добавлена простым соглашением между клиентом и сервером о семантике нового заголовка. ### HTTP не имеет состояния, но имеет сессию -HTTP не имеет состояния: не существует связи между двумя запросами, которые последовательно выполняются по одному соединению. Из этого немедленно следует возможность проблем для пользователя, пытающегося взаимодействовать с определённой страницей последовательно, например, при использовании корзины в электронном магазине. Но хотя ядро HTTP не имеет состояния, куки позволяют использовать сессии с сохранением состояния. Используя расширяемость заголовков, куки добавляются к рабочему потоку, позволяя сессии на каждом HTTP-запросе делиться некоторым контекстом или состоянием. +HTTP не имеет состояния: не существует связи между двумя запросами, которые последовательно выполняются по одному соединению. +Это добавляет некоторые проблемы для пользователей, которые хотят взаимодействовать с определённой страницей последовательно, например, при использовании корзины в электронном магазине. +Но хотя ядро HTTP не имеет состояния, HTTP-куки позволяют использовать сессии с сохранением состояния. +Используя расширяемость заголовков, HTTP-куки позволяют при каждом HTTP-запросе использовать сессии для сохранения контекста или состояния. ### HTTP и соединения -Соединение управляется на транспортном уровне, и потому принципиально выходит за границы HTTP. Хотя HTTP не требует, чтобы базовый транспортный протокол был основан на соединениях, требуя только _надёжность_, или отсутствие потерянных сообщений (т.е. как минимум представление ошибки). Среди двух наиболее распространённых транспортных протоколов Интернета, TCP надёжен, а UDP — нет. HTTP впоследствии полагается на стандарт TCP, являющийся основанным на соединениях, несмотря на то, что соединение не всегда требуется. +Соединение управляется на транспортном уровне, и поэтому принципиально выходит за границы HTTP. +HTTP не требует, чтобы транспортный протокол был основан на соединениях, необходима только _надёжность_, то есть отсутствие потерянных сообщений (или как минимум информирование о таких потерях). +Среди двух наиболее распространённых транспортных протоколов Интернета, TCP является надёжным, а UDP — нет. +Поэтому HTTP полагается на стандарт TCP, который основан на соединениях. -HTTP/1.0 открывал TCP-соединение для каждого обмена запросом/ответом, имея два важных недостатка: открытие соединения требует нескольких обменов сообщениями, и потому медленно, хотя становится более эффективным при отправке нескольких сообщений, или при регулярной отправке сообщений: _тёплые_ соединения более эффективны, чем _холодные_. +Прежде чем клиент и сервер смогут обменяться HTTP-запросом и ответом, они должны установить TCP-соединение, этот процесс требует нескольких циклов обмена данными. +Поведение HTTP/1.0 по умолчанию заключается в открытии отдельного TCP-соединения для каждой пары запрос-ответ. +Это менее эффективно, чем совместное использование одного TCP-соединения, когда несколько запросов отправляются последовательно. -Для смягчения этих недостатков, HTTP/1.1 предоставил конвейерную обработку (которую оказалось трудно реализовать) и устойчивые соединения: лежащее в основе TCP соединение можно частично контролировать через заголовок {{HTTPHeader("Connection")}}. HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений через простое соединение, помогающее держать соединение тёплым и более эффективным. +Для смягчения этого недостатка, в HTTP/1.1 была добавлена конвейерная обработка (которую оказалось трудно реализовать) и _постоянные_ соединения: лежащее в основе TCP соединение можно частично контролировать с помощью заголовка {{HTTPHeader("Connection")}}. +HTTP/2 сделал следующий шаг, добавив мультиплексирование сообщений по одному соединению, помогающее держать соединение «тёплым» и более эффективным. -Проводятся эксперименты по разработке лучшего транспортного протокола, более подходящего для HTTP. Например, Google экспериментирует с [QUIC](https://en.wikipedia.org/wiki/QUIC) (которая основана на UDP) для предоставления более надёжного и эффективного транспортного протокола. +Проводятся эксперименты по разработке лучшего транспортного протокола, более подходящего для HTTP. +Например, Google экспериментирует с [QUIC](https://ru.wikipedia.org/wiki/QUIC), который основан на UDP, для предоставления более надёжного и эффективного транспортного протокола. -## Чем можно управлять через HTTP +## Чем можно управлять в HTTP -Естественная расширяемость HTTP со временем позволила большее управление и функциональность Сети. Кеш и методы аутентификации были ранними функциями в истории HTTP. Способность ослабить первоначальные ограничения, напротив, была добавлена в 2010-е. +Расширяемая природа HTTP со временем позволила обеспечить больший контроль и функциональность Интернета. +Методы кеширования и аутентификации были функциями, обрабатываемыми на ранних этапах развития HTTP. +Возможность ослабить _ограничение источника_, напротив, была добавлена ​​только в 2010-х годах. -Ниже перечислены общие функции, управляемые с HTTP. +Ниже перечислены наиболее распространённые возможности HTTP: -- _[Кеш](/ru/docs/Web/HTTP/Caching)_ - Сервер может инструктировать прокси и клиенты, указывая что и как долго кешировать. Клиент может инструктировать прокси промежуточных кешей игнорировать хранимые документы. +- _[Кеширование](/ru/docs/Web/HTTP/Caching)_ + HTTP может управлять кешированием документов. + Сервер может инструктировать прокси и клиентов, указывая что и как долго кешировать. + Клиент может инструктировать прокси промежуточных кешей игнорировать хранимые документы. - _Ослабление ограничений источника_ - Для предотвращения шпионских и других нарушающих приватность вторжений, веб-браузер обеспечивает строгое разделение между веб-сайтами. Только страницы из **того же источника** могут получить доступ к информации на веб-странице. Хотя такие ограничение нагружают сервер, заголовки HTTP могут ослабить строгое разделение на стороне сервера, позволяя документу стать частью информации с различных доменов (по причинам безопасности). + Для предотвращения шпионских и других нарушающих конфиденциальность вторжений, веб-браузеры обеспечивают строгое разделение между веб-сайтами. + Только страницы из **того же источника** могут получить доступ к информации на веб-странице. + Хотя такие ограничения усложняют работу сервера, заголовки HTTP могут ослабить строгое разделение на стороне сервера, позволяя документу комбинировать информацию из различных доменов. + Это может быть необходимо в том числе по причинам, связанным с безопасностью. - _Аутентификация_ - Некоторые страницы доступны только специальным пользователям. Базовая аутентификация может предоставляться через HTTP, либо через использование заголовка {{HTTPHeader("WWW-Authenticate")}} и подобных ему, либо с помощью настройки спецсессии, используя куки. + Некоторые страницы могу быть защищены и доступны только специальным пользователям. + Базовая аутентификация может предоставляться через HTTP, с помощью заголовка {{HTTPHeader("WWW-Authenticate")}} и подобных ему, либо с помощью настройки сессии и использования [HTTP-кук](/ru/docs/Web/HTTP/Cookies). - _[Прокси и туннелирование](/ru/docs/Web/HTTP/Proxy_servers_and_tunneling)_ - Серверы и/или клиенты часто располагаются в интернете и скрывают свои истинные IP-адреса от других. HTTP запросы идут через прокси для пересечения этого сетевого барьера. Не все прокси — HTTP прокси. SOCKS-протокол, например, оперирует на более низком уровне. Другие, как, например, ftp, могут быть обработаны этими прокси. + Серверы и клиенты часто расположены в подсетях и скрывают свои истинные IP-адреса от других компьютеров. + HTTP-запросы идут через прокси для преодоления этого сетевого барьера. + Не все прокси являются HTTP-прокси. + Например, SOCKS-протокол оперирует на более низком уровне. + Другие, такие как FTP, могут быть обработаны этими прокси. - _Сессии_ - Использование HTTP кук позволяет связать запрос с состоянием на сервере. Это создаёт сессию, хотя ядро HTTP — протокол без состояния. Это полезно не только для корзин в интернет-магазинах, но также для любых сайтов, позволяющих пользователю настроить выход. + Использование HTTP-кук позволяет связать запрос с состоянием сервера. + Это создаёт сессию, хотя сам HTTP — протокол без состояния. + Это полезно не только для реализации корзины в интернет-магазине, но также для любых сайтов, позволяющих пользователю настраивать их поведение. -## HTTP поток +## HTTP-поток Когда клиент хочет взаимодействовать с сервером, являющимся конечным сервером или промежуточным прокси, он выполняет следующие шаги: -1. Открытие TCP соединения: TCP-соединение будет использоваться для отправки запроса (или запросов) и получения ответа. Клиент может открыть новое соединение, переиспользовать существующее или открыть несколько TCP-соединений к серверу. -2. Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) являются человекочитаемыми. Начиная с HTTP/2, простые сообщения инкапсулируются во фреймы, делая невозможным их чтение напрямую, но принципиально остаются такими же. +1. Открытие TCP соединения: TCP-соединение будет использоваться для отправки запроса (или запросов) и получения ответа. + Клиент может открыть новое соединение, переиспользовать существующее или открыть несколько TCP-соединений к серверу. + +2. Отправка HTTP-сообщения: HTTP-сообщения (до HTTP/2) являются человекочитаемыми. + Начиная с HTTP/2, отдельные сообщения инкапсулируются в кадры, делая невозможным их чтение напрямую, но принципиально остаются такими же. + Например: ```http GET / HTTP/1.1 @@ -105,7 +157,7 @@ HTTP/1.0 открывал TCP-соединение для каждого обм Accept-Language: fr ``` -3. Читает ответ от сервера: +3. Чтение ответа от сервера, например: ```http HTTP/1.1 200 OK @@ -117,20 +169,23 @@ HTTP/1.0 открывал TCP-соединение для каждого обм Content-Length: 29769 Content-Type: text/html - … (here come the 29769 bytes of the requested web page) ``` -4. Закрывает или переиспользует соединение для дальнейших запросов. - -Если активирован HTTP-конвейер, несколько запросов могут быть отправлены без ожидания получения первого ответа целиком. HTTP-конвейер тяжело внедряется в существующие сети, где старые куски ПО сосуществуют с современными версиями. HTTP-конвейер был заменён в HTTP/2 на более надёжные мультиплексные запросы во фрейме. +4. Закрытие или переиспользование соединения для следующих запросов. -## HTTP сообщения +Если активирована конвейерная обработка HTTP, можно отправить несколько запросов, не дожидаясь полного получения первого ответа. +Конвейерную обработку HTTP оказалось сложно реализовать в существующих сетях, где старые части программного обеспечения сосуществуют с современными версиями. +Конвейерная обработка HTTP была заменена в HTTP/2 более надёжным мультиплексированием запросов внутри кадра. -[Подробнее в отдельной статье «Сообщения HTTP»](/ru/docs/Web/HTTP/Messages) +## HTTP-сообщения -HTTP/1.1 и более ранние HTTP сообщения человекочитаемые. В версии HTTP/2 эти сообщения встроены в новую бинарную структуру, фрейм, позволяющий оптимизации, такие как компрессия заголовков и мультиплексирование. Даже если часть оригинального HTTP сообщения отправлена в этой версии HTTP, семантика каждого сообщения не изменяется и клиент воссоздаёт (виртуально) оригинальный HTTP-запрос. Это также полезно для понимания HTTP/2 сообщений в формате HTTP/1.1. +Сообщения в HTTP/1.1 и более ранних версиях человекочитаемы. +В версии HTTP/2 сообщения встроены в новую бинарную структуру — кадр (англ. _frame_), которая поддерживает оптимизации, такие как сжатие заголовков и мультиплексирование. +Даже если только часть исходного HTTP-сообщения отправляется в этой версии HTTP, семантика каждого сообщения остаётся неизменной, и клиент воссоздаёт (виртуально) исходный HTTP/1.1-запрос. +Поэтому полезно понимать HTTP/2-сообщения в формате HTTP/1.1. -Существует два типа HTTP сообщений, запросы и ответы, каждый в своём формате. +Существует два типа HTTP-сообщений: запросы и ответы, для каждого из них есть свой формат. ### Запросы @@ -140,11 +195,12 @@ HTTP/1.1 и более ранние HTTP сообщения человекочи Запросы содержат следующие элементы: -- HTTP-[метод](/ru/docs/Web/HTTP/Methods), обычно глагол подобно {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} или существительное, как {{HTTPMethod("OPTIONS")}} или {{HTTPMethod("HEAD")}}, определяющее операцию, которую клиент хочет выполнить. Обычно, клиент хочет получить ресурс (используя `GET`) или передать значения [HTML-формы](/ru/docs/Learn/Forms) (используя `POST`), хотя другие операции могут быть необходимы в других случаях. -- Путь к ресурсу: URL ресурсы лишены элементов, которые очевидны из контекста, например без {{glossary("protocol","протокола")}} (`http://`), {{glossary("domain","домена")}} (здесь `developer.mozilla.org`), или TCP {{glossary("port","порта")}} (здесь `80`). -- Версию HTTP-протокола. -- [Заголовки](/ru/docs/Web/HTTP/Headers) (опционально), предоставляющие дополнительную информацию для сервера. -- Или тело, для некоторых методов, таких как `POST`, которое содержит отправленный ресурс. +- HTTP-[метод](/ru/docs/Web/HTTP/Methods), обычно это глагол ({{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}) или существительное ({{HTTPMethod("OPTIONS")}}, {{HTTPMethod("HEAD")}}), определяющее операцию, которую клиент хочет выполнить. + Самые распространённые операции — это получение ресурса (используя `GET`) или отправка [HTML-формы](/ru/docs/Learn/Forms) (используя `POST`), хотя существуют и другие. +- Путь к ресурсу. URL ресурса не содержит элементов, которые очевидны из контекста, например {{glossary("protocol", "протокол")}} (`http://`), {{glossary("domain", "домен")}} (`developer.mozilla.org`) или TCP-{{glossary("port","порт")}} (`80`). +- Версия HTTP-протокола. +- Необязательные [заголовки](/ru/docs/Web/HTTP/Headers), предоставляющие дополнительную информацию для сервера. +- Тело — для некоторых методов (таких как `POST`) содержит отправленный ресурс. ### Ответы @@ -154,14 +210,25 @@ HTTP/1.1 и более ранние HTTP сообщения человекочи Ответы содержат следующие элементы: -- Версию HTTP-протокола. -- [HTTP код состояния](/ru/docs/Web/HTTP/Status), сообщающий об успешности запроса или причине неудачи. +- Версия HTTP-протокола. +- [Код состояния](/ru/docs/Web/HTTP/Status), сообщающий об успешности запроса или причине неудачи. - Сообщение состояния — краткое описание кода состояния. -- HTTP [заголовки](/ru/docs/Web/HTTP/Headers), подобно заголовкам в запросах. -- Опционально: тело, содержащее пересылаемый ресурс. +- HTTP-[заголовки](/ru/docs/Web/HTTP/Headers), подобно заголовкам в запросах. +- Необязательно: тело, содержащее получаемый ресурс. + +## API, основанные на HTTP + +Наиболее распространённым API, которое основано на HTTP является [Fetch API](/ru/docs/Web/API/Fetch_API), который может быть использован для отправки HTTP-запросов из JavaScript. Fetch API заменяет {{domxref("XMLHttpRequest")}} API. + +Другой API — [события, отправляемые сервером](/ru/docs/Web/API/Server-sent_events), использует HTTP как транспортный механизм. +Используя интерфейс {{domxref("EventSource")}}, клиент открывает соединение и устанавливает обработчики событий. +Браузер автоматически преобразует сообщения, которые поступают по HTTP, в соответствующие объекты {{domxref("Event")}}. +Затем он доставляет их до обработчиков событий, которые были установлены для событий указанного {{domxref("Event.type", "типа")}} или в обработчик {{domxref("EventSource.message_event", "onmessage")}}, если специализированные обработчики не были установлены. -## Вывод +## Заключение -HTTP — расширяемый и лёгкий в использовании протокол. Клиент-серверная структура в сочетании с возможностью добавления заголовков позволяет HTTP развиваться вместе с расширяющимися возможностями интернета. +HTTP — расширяемый и лёгкий в использовании протокол. +Клиент-серверная структура в сочетании с возможностью добавления заголовков позволяет HTTP развиваться вместе с расширяющимися возможностями Интернета. -Хотя HTTP/2 добавляет некоторую сложность, помещая HTTP сообщения во фреймы для улучшения производительности, базовая структура сообщений осталась такой же как и в HTTP/1.0. Сессионный поток остаётся простым, его можно исследовать и отлаживать с помощью [Сетевого монитора](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html). +Несмотря на то, что HTTP/2 добавляет некоторую сложность, помещая HTTP-сообщения в кадры для улучшения производительности, базовая структура сообщений осталась такой же как и в HTTP/1.0. +Работа с сессиями остаётся простой, её можно исследовать и отлаживать с помощью [Сетевого монитора](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html). From c4d2d09f67caafbef9c45b316c8ec0e34dab173b Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 24 Nov 2024 16:57:30 +0300 Subject: [PATCH 125/279] [ru] update `Glossary/Protocol` translation (#24581) [ru] update 'Glossary/Protocol' translation --- files/ru/glossary/protocol/index.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/files/ru/glossary/protocol/index.md b/files/ru/glossary/protocol/index.md index c2dbf505405b18..4e8c1a5289848d 100644 --- a/files/ru/glossary/protocol/index.md +++ b/files/ru/glossary/protocol/index.md @@ -1,15 +1,19 @@ --- title: Протокол slug: Glossary/Protocol +l10n: + sourceCommit: 50e5e8a9b8a6b7d0dd9877610c9639d8b90f329f --- {{GlossarySidebar}} -**Протокол** - это система правил, определяющая, как данные обмениваются внутри или между компьютерами. Для связи между устройствами требуется согласование формата данных, которые будут использоваться для обмена. Набор правил, определяющих формат, называется протоколом. +**Протокол** — это система правил, определяющих, как происходит обмен данными внутри или между компьютерами. Для связи между устройствами требуется, чтобы устройства согласовали формат обмениваемых данных. Набор правил, определяющих формат, называется протоколом. ## Смотрите также -### Основная информация - -- [Communication_protocol](https://en.wikipedia.org/wiki/Communication_protocol) в Википедии -- [RFC Official Internet Protocol Standards](http://www.rfc-editor.org/search/standards.php) +- [Протокол передачи данных](https://ru.wikipedia.org/wiki/Протокол_передачи_данных) в Википедии +- [RFC Official Internet Protocol Standards](https://www.rfc-editor.org/standards) +- [Обзор протокола HTTP](/ru/docs/Web/HTTP/Overview) +- Связанные термины глоссария: + - {{glossary("TCP")}} + - {{glossary("Packet")}} From cf36c31aa64d069a568892f3f4dfac77db5341a6 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 24 Nov 2024 16:58:02 +0300 Subject: [PATCH 126/279] [ru] update `Glossary/Head` translation (#24582) [ru] update 'Glossary/Head' translation --- files/ru/glossary/head/index.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/files/ru/glossary/head/index.md b/files/ru/glossary/head/index.md index 9e0e819931217e..ce641fb782a0bd 100644 --- a/files/ru/glossary/head/index.md +++ b/files/ru/glossary/head/index.md @@ -1,13 +1,15 @@ --- -title: Head (Заголовок) +title: Head slug: Glossary/Head +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**Head** (**Заголовок**) это часть {{glossary("HTML")}} документа, которая содержит {{glossary("metadata","метаданные")}} о документе, такие как автор, описание, ссылки на {{glossary("CSS")}} или {{glossary("JavaScript")}} файлы, которые должны быть применены в HTML. +**Head** — это часть {{glossary("HTML")}}-документа, которая содержит {{glossary("metadata", "метаданные")}} о документе, такие как автор, описание, ссылки на файлы {{glossary("CSS")}} или {{glossary("JavaScript")}}, которые должны быть применены в HTML. ## Смотрите также -- Документация элемента {{htmlelement("head")}} на MDN -- [Тег \](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) в учебнике по HTML от MDN +- Описание элемента {{htmlelement("head")}} на MDN +- [Тег \](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) в учебнике MDN From 2080f04573c0511a93fd6fe157ce5ba5ab0da9e6 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 24 Nov 2024 16:58:21 +0300 Subject: [PATCH 127/279] [ru] update `Glossary/Metadata` translation (#24587) [ru] update 'Glossary/Metadata' translation --- files/ru/glossary/metadata/index.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/files/ru/glossary/metadata/index.md b/files/ru/glossary/metadata/index.md index 3b436061220e84..11d2ead629e656 100644 --- a/files/ru/glossary/metadata/index.md +++ b/files/ru/glossary/metadata/index.md @@ -1,14 +1,16 @@ --- title: Метаданные slug: Glossary/Metadata +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- {{GlossarySidebar}} -**Метаданные** - это, в самом простом определении, данные, что описывают данные. Например, {{ glossary("HTML") }}-документ - это данные, но HTML также может содержать метаданные в элементе {{ htmlelement("head") }}, который описывает документ, например кто его написал и его резюме. +**Метаданные** — это, в самом простом определении, данные, которые описывают данные. Например, {{glossary("HTML")}}-документ — это данные, но HTML может также содержать в своём элементе {{htmlelement("head")}} метаданные, которые описывают этот документ, например, кто его автор и его краткое содержание. ## Смотрите также -### Метаданные в HTML - +- [Метаданные в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#метаданные_элемент_meta) +- [Метаданные](https://ru.wikipedia.org/wiki/Метаданные) в Википедии - Элемент {{htmlelement("meta")}} в MDN From ac6eb3487dd65dee7c15a1917185f31422bfa131 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= Date: Sun, 24 Nov 2024 23:30:17 +0900 Subject: [PATCH 128/279] [ja] Translate EditContext (#24624) * Translate EditContext * Fix according to mdn-linter Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../api/editcontext/attachedelements/index.md | 53 +++++++++ .../api/editcontext/characterbounds/index.md | 38 +++++++ .../characterboundsrangestart/index.md | 24 ++++ .../characterboundsupdate_event/index.md | 100 +++++++++++++++++ .../editcontext/compositionend_event/index.md | 61 ++++++++++ .../compositionstart_event/index.md | 61 ++++++++++ .../web/api/editcontext/editcontext/index.md | 67 +++++++++++ files/ja/web/api/editcontext/index.md | 68 +++++++++++ .../web/api/editcontext/selectionend/index.md | 92 +++++++++++++++ .../api/editcontext/selectionstart/index.md | 92 +++++++++++++++ files/ja/web/api/editcontext/text/index.md | 53 +++++++++ .../textformatupdate_event/index.md | 100 +++++++++++++++++ .../api/editcontext/textupdate_event/index.md | 76 +++++++++++++ .../updatecharacterbounds/index.md | 106 ++++++++++++++++++ .../editcontext/updatecontrolbounds/index.md | 77 +++++++++++++ .../api/editcontext/updateselection/index.md | 85 ++++++++++++++ .../updateselectionbounds/index.md | 40 +++++++ .../web/api/editcontext/updatetext/index.md | 96 ++++++++++++++++ 18 files changed, 1289 insertions(+) create mode 100644 files/ja/web/api/editcontext/attachedelements/index.md create mode 100644 files/ja/web/api/editcontext/characterbounds/index.md create mode 100644 files/ja/web/api/editcontext/characterboundsrangestart/index.md create mode 100644 files/ja/web/api/editcontext/characterboundsupdate_event/index.md create mode 100644 files/ja/web/api/editcontext/compositionend_event/index.md create mode 100644 files/ja/web/api/editcontext/compositionstart_event/index.md create mode 100644 files/ja/web/api/editcontext/editcontext/index.md create mode 100644 files/ja/web/api/editcontext/index.md create mode 100644 files/ja/web/api/editcontext/selectionend/index.md create mode 100644 files/ja/web/api/editcontext/selectionstart/index.md create mode 100644 files/ja/web/api/editcontext/text/index.md create mode 100644 files/ja/web/api/editcontext/textformatupdate_event/index.md create mode 100644 files/ja/web/api/editcontext/textupdate_event/index.md create mode 100644 files/ja/web/api/editcontext/updatecharacterbounds/index.md create mode 100644 files/ja/web/api/editcontext/updatecontrolbounds/index.md create mode 100644 files/ja/web/api/editcontext/updateselection/index.md create mode 100644 files/ja/web/api/editcontext/updateselectionbounds/index.md create mode 100644 files/ja/web/api/editcontext/updatetext/index.md diff --git a/files/ja/web/api/editcontext/attachedelements/index.md b/files/ja/web/api/editcontext/attachedelements/index.md new file mode 100644 index 00000000000000..c34bc0273cb64f --- /dev/null +++ b/files/ja/web/api/editcontext/attachedelements/index.md @@ -0,0 +1,53 @@ +--- +title: "EditContext: attachedElements() メソッド" +slug: Web/API/EditContext/attachedElements +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの **`attachedElements()`** メソッドは、要素が 1 個だけ格納された {{jsxref("Array")}} を返します。この要素は、この `EditContext` オブジェクトと関連付けられた要素です。 + +## 構文 + +```js-nolint +attachedElements() +``` + +### 返値 + +1 個の {{domxref("HTMLElement")}} オブジェクトが格納された {{jsxref("Array")}} です。 + +1 個の `EditContext` のインスタンスに関連付けられる要素は 1 個だけなので、返される配列は常に 1 個の要素を持ちます。将来この API が複数の要素の関連付けに対応するように拡張された場合、返り値は複数の要素が格納された配列になるでしょう。 + +## 例 + +### `EditContext` のインスタンスに関連付けられた要素の取得 + +この例は、`attachedElements` メソッドを用いて `EditContext` のインスタンスに関連付けられた要素を取得する方法を示しています。 + +```html + +``` + +```js +const canvas = document.getElementById("editor-canvas"); +const editContext = new EditContext(); +canvas.editContext = editContext; + +const attachedElements = editContext.attachedElements(); +console.log(attachedElements[0] === canvas); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス diff --git a/files/ja/web/api/editcontext/characterbounds/index.md b/files/ja/web/api/editcontext/characterbounds/index.md new file mode 100644 index 00000000000000..648f0d161b31bc --- /dev/null +++ b/files/ja/web/api/editcontext/characterbounds/index.md @@ -0,0 +1,38 @@ +--- +title: "EditContext: characterBounds() メソッド" +slug: Web/API/EditContext/characterBounds +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの **`characterBounds()`** メソッドは、この `EditContext` オブジェクト内の各文字を囲む長方形のリストが格納された {{jsxref("Array")}} を返します。 + +`EditContext` オブジェクト内の各文字の位置とサイズは、必要に応じて、オペレーティングシステムが{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) などのプラットフォーム固有の編集関係の UI を正しく配置するために用いられます。これは、テキストを `` 要素に描画するときなど、オペレーティングシステムが自動的に各文字の位置と大きさを求めることができない状況で特に重要です。 + +ウェブ開発者は、{{domxref("EditContext.characterboundsupdate_event", "characterboundsupdate")}} イベントと {{domxref("EditContext.updateCharacterBounds()")}} メソッドを組み合わせて用い、オペレーティングシステムが各文字の位置と大きさの情報を要求した時に各文字の領域を更新することに関心を持つ可能性が高いでしょう。 + +`characterBounds()` メソッドは、、`updateCharacterBounds()` により最後に更新された各文字の領域のリストを返します。このリストには `EditContext` オブジェクト内のすべての文字に対応する要素が格納されているのではなく、`updateCharacterBounds()` で更新された文字に対応する要素のみが格納されています。これらの各文字が `EditContext` オブジェクト内のどこに位置するかを知るには、{{domxref("EditContext.characterBoundsRangeStart")}} プロパティを使用してください。 + +## 構文 + +```js-nolint +characterBounds() +``` + +### 返値 + +{{domxref("DOMRect")}} オブジェクトが格納された {{jsxref("Array")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス diff --git a/files/ja/web/api/editcontext/characterboundsrangestart/index.md b/files/ja/web/api/editcontext/characterboundsrangestart/index.md new file mode 100644 index 00000000000000..4e47d077a8509e --- /dev/null +++ b/files/ja/web/api/editcontext/characterboundsrangestart/index.md @@ -0,0 +1,24 @@ +--- +title: "EditContext: characterBoundsRangeStart プロパティ" +slug: Web/API/EditContext/characterBoundsRangeStart +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの読み取り専用プロパティ **`characterBoundsRangeStart`** は、編集可能なテキストコンテンツ内での、配列 {{domxref("EditContext.characterBounds()", "characterBounds")}} の最初の要素に対応する文字の位置を表します。 + +例えば、`EditContent` に格納されている文字列が `abc` であり、`characterBoundRangeStart` が `1` であるとき、配列 `characterBounds` の最初の要素には文字 `b` の領域が格納されています。 + +## 値 + +{{jsxref("Number")}} です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/characterboundsupdate_event/index.md b/files/ja/web/api/editcontext/characterboundsupdate_event/index.md new file mode 100644 index 00000000000000..e3809c395d2b12 --- /dev/null +++ b/files/ja/web/api/editcontext/characterboundsupdate_event/index.md @@ -0,0 +1,100 @@ +--- +title: "EditContext: characterboundsupdate イベント" +slug: Web/API/EditContext/characterboundsupdate_event +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +`characterboundsupdate` イベントは、オペレーティングシステムが `EditContext` オブジェクトの編集可能なテキスト領域内にある特定の各文字の境界を知る必要がある時発火します。 + +これは、オペレーティングシステムが{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) ウィンドウなどのプラットフォーム固有の編集関係の UI を表示する必要がある際に発生します。 + +`characterboundsupdate` イベントが発火した際は、テキストの各文字の境界を計算し、{{domxref("EditContext.updateCharacterBounds()")}} メソッドを呼び出すことによりオペレーティングシステムに必要な情報を渡すべきです。 + +いつ、そしてどのように `characterboundsupdate` イベントを用いるかについて詳しくは、{{domxref("EditContext.updateCharacterBounds()", "updateCharacterBounds")}} メソッドのドキュメントを参照してください。 + +## 構文 + +{{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。 + +```js +addEventListener("characterboundsupdate", (event) => {}); + +oncharacterboundsupdate = (event) => {}; +``` + +## イベント型 + +{{domxref("CharacterBoundsUpdateEvent")}} です。{{domxref("Event")}} を継承しています。 + +## イベントプロパティ + +_以下に挙げたプロパティに加えて、親の {{domxref("Event")}} インターフェイス由来のプロパティも使用可能です。_ + +- {{domxref('CharacterBoundsUpdateEvent.rangeStart')}} {{readonlyinline}} + - : 編集可能な領域内のテキスト内のオペレーティングシステムが境界を必要としている始点の文字のオフセットです。 +- {{domxref('CharacterBoundsUpdateEvent.rangeEnd')}} {{readonlyinline}} + - : 編集可能な領域内のテキスト内のオペレーティングシステムが境界を必要としている終点の文字のオフセットです。 + +## 例 + +### 必要に応じて各文字の境界を更新する + +この例では、`updateCharacterBounds` メソッドを用いて、オペレーティングシステムが情報を要求した時に `canvas` 要素の `EditContext` 内の各文字の境界を更新する方法を示します。このイベントリスナーコールバックはテキストの変換に IME ウィンドウやその他のプラットフォーム固有の編集 UI を使用しているときのみ呼ばれることに注意してください。 + +```html + +``` + +```js +const FONT_SIZE = 40; +const FONT = `${FONT_SIZE}px Arial`; + +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); +ctx.font = FONT; + +const editContext = new EditContext(); +canvas.editContext = editContext; + +function computeCharacterBound(offset) { + // テキストの先頭から対象の文字までの幅を計測します。 + const widthBeforeChar = ctx.measureText( + editContext.text.substring(0, offset), + ).width; + + // 対象の文字の幅を計測します。 + const charWidth = ctx.measureText(editContext.text[offset]).width; + + const charX = canvas.offsetLeft + widthBeforeChar; + const charY = canvas.offsetTop; + + // 文字の境界を表す DOMRect を返します。 + return DOMRect.fromRect({ + x: charX, + y: charY - FONT_SIZE, + width: charWidth, + height: FONT_SIZE, + }); +} + +editContext.addEventListener("characterboundsupdate", (e) => { + const charBounds = []; + for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) { + charBounds.push(computeCharacterBound(offset)); + } + + console.log("The required character bounds are", charBounds); + editContext.updateCharacterBounds(e.rangeStart, charBounds); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/compositionend_event/index.md b/files/ja/web/api/editcontext/compositionend_event/index.md new file mode 100644 index 00000000000000..02b321ccb90416 --- /dev/null +++ b/files/ja/web/api/editcontext/compositionend_event/index.md @@ -0,0 +1,61 @@ +--- +title: "EditContext: compositionend イベント" +slug: Web/API/EditContext/compositionend_event +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの `compositionend` イベントは、{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) ウィンドウを用いた変換が終了する時発火します。 + +## 構文 + +{{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドでイベント名を使用するか、イベントハンドラープロパティを設定します。 + +```js +addEventListener("compositionend", (event) => {}); + +oncompositionend = (event) => {}; +``` + +## 例 + +### `compositionend` を用いて編集可能な領域の境界線を変える + +以下の例では、`compositionstart` イベントが発火した時に編集可能な領域の境界線を赤色に設定し、`compositionend` イベントが発火した時に黒色に戻します。この例のイベントリスナーコールバックは、テキストの変換に IME ウィンドウやその他のプラットフォーム固有の編集 UI を用いている場合のみ呼び出されることに注意してください。 + +```css +#text-editor { + border: 1px solid black; +} +#text-editor.is-composing { + border-color: red; +} +``` + +```html +
      +``` + +```js +const editorElement = document.getElementById("text-editor"); +const editContext = new EditContext(); +editorElement.editContext = editContext; + +editContext.addEventListener("compositionstart", (event) => { + editorElement.classList.add("is-composing"); +}); + +editContext.addEventListener("compositionend", (event) => { + editorElement.classList.remove("is-composing"); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/compositionstart_event/index.md b/files/ja/web/api/editcontext/compositionstart_event/index.md new file mode 100644 index 00000000000000..1654bca445464e --- /dev/null +++ b/files/ja/web/api/editcontext/compositionstart_event/index.md @@ -0,0 +1,61 @@ +--- +title: "EditContext: compositionstart イベント" +slug: Web/API/EditContext/compositionstart_event +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの `compositionstart` イベントは、{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) ウィンドウを用いた変換が開始する時発火します。 + +## 構文 + +{{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。 + +```js +addEventListener("compositionstart", (event) => {}); + +oncompositionstart = (event) => {}; +``` + +## 例 + +### `compositionstart` を用いて編集可能な領域の境界線を変える + +以下の例では、`compositionstart` イベントが発火した時に編集可能な領域の境界線を赤色に設定し、`compositionend` イベントが発火した時に黒色に戻します。この例のイベントリスナーコールバックは、テキストの変換に IME ウィンドウやその他のプラットフォーム固有の編集 UI を用いている場合のみ呼び出されることに注意してください。 + +```css +#text-editor { + border: 1px solid black; +} +#text-editor.is-composing { + border-color: red; +} +``` + +```html +
      +``` + +```js +const editorElement = document.getElementById("text-editor"); +const editContext = new EditContext(); +editorElement.editContext = editContext; + +editContext.addEventListener("compositionstart", (event) => { + editorElement.classList.add("is-composing"); +}); + +editContext.addEventListener("compositionend", (event) => { + editorElement.classList.remove("is-composing"); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/editcontext/index.md b/files/ja/web/api/editcontext/editcontext/index.md new file mode 100644 index 00000000000000..7692087b0b2cc6 --- /dev/null +++ b/files/ja/web/api/editcontext/editcontext/index.md @@ -0,0 +1,67 @@ +--- +title: "EditContext: EditContext() コンストラクター" +slug: Web/API/EditContext/EditContext +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +**`EditContext()`** コンストラクターは、新しい {{DOMxRef("EditContext")}} オブジェクトを返します。 + +## 構文 + +```js-nolint +new EditContext() +new EditContext(options) +``` + +### 引数 + +- `options` {{optional_inline}} + - : 以下のプロパティを持つ、省略可能なオブジェクトです。 + - `text` + - : `EditContext` のテキストの初期値として設定する文字列です。 + - `selectionStart` + - : `EditContext` の選択範囲の始点の初期値として設定する数値です。 + - `selectionEnd` + - : `EditContext` の選択範囲の終点の初期値として設定する数値です。 + +## 例 + +### `EditContext` オブジェクトを生成する + +以下の例では、初期値としてテキスト `"Hello world!"` を格納し、このテキスト全体を選択した新しい `EditContext` オブジェクトを生成します。 + +```html +
      +``` + +```js +const initialText = "Hello world!"; + +const editContext = new EditContext({ + text: initialText, + selectionStart: 0, + selectionEnd: initialText.length, +}); + +const editorElement = document.getElementById("editor"); +editorElement.editContext = editContext; + +console.log( + `EditContext object ready. Text: ${editContext.text}. Selection: ${editContext.selectionStart} - ${editContext.selectionEnd}.`, +); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス diff --git a/files/ja/web/api/editcontext/index.md b/files/ja/web/api/editcontext/index.md new file mode 100644 index 00000000000000..f0b4921bde3442 --- /dev/null +++ b/files/ja/web/api/editcontext/index.md @@ -0,0 +1,68 @@ +--- +title: EditContext +slug: Web/API/EditContext +l10n: + sourceCommit: a6f2a5b313727d983c369dec91c4c7418b1b4f74 +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +**`EditContext`** インターフェイスは、{{domxref("EditContext API", "", "", "nocode")}} を用いて、編集可能になった要素のテキスト編集コンテキストを表します。 + +{{domxref("EditContext API", "", "", "nocode")}} は、{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) による変換、絵文字ピッカー、その他のプラットフォーム固有の編集関係の UI などの高度なテキスト入力体験に対応したリッチなテキストエディターをウェブ上で構築するのに利用できます。 + +## コンストラクター + +- {{domxref("EditContext.EditContext", "EditContext()")}} {{experimental_inline}} + - : 新しい `EditContext` のインスタンスを返します。 + +## インスタンスプロパティ + +- {{domxref("EditContext.text")}} {{ReadOnlyInline}} {{experimental_inline}} + - : 要素の編集可能なコンテンツです。 +- {{domxref("EditContext.selectionStart")}} {{ReadOnlyInline}} {{experimental_inline}} + - : 編集可能なテキストコンテンツ内での、現在選択されている範囲の始点のオフセットです。 +- {{domxref("EditContext.selectionEnd")}} {{ReadOnlyInline}} {{experimental_inline}} + - : 編集可能なテキストコンテンツ内での、現在選択されている範囲の終点のオフセットです。 +- {{domxref("EditContext.characterBoundsRangeStart")}} {{ReadOnlyInline}} {{experimental_inline}} + - : 編集可能なテキストコンテンツ内での、IME による変換が最後に開始された場所のオフセットです。 + +## インスタンスメソッド + +_`EditContext` は {{domxref("EventTarget")}} インターフェイスがもととなっており、そのメソッドを含みます。_ + +- {{domxref("EditContext.attachedElements()")}} {{experimental_inline}} + - : この `EditContext` オブジェクトに関係する要素である {{domxref("HTMLElement")}} オブジェクト 1 個が格納された {{jsxref("Array")}} です。 +- {{domxref("EditContext.characterBounds()")}} {{experimental_inline}} + - : `EditContext` オブジェクト内の各文字を囲む長方形のリストです。 +- {{domxref("EditContext.updateText()")}} {{experimental_inline}} + - : `EditContext` オブジェクト内部のテキストコンテンツを更新します。 +- {{domxref("EditContext.updateSelection()")}} {{experimental_inline}} + - : 編集可能なテキストコンテンツ内の選択の内部状態を更新します。 +- {{domxref("EditContext.updateControlBounds()")}} {{experimental_inline}} + - : オペレーティングシステムに、編集可能なテキスト領域の位置と大きさを知らせます。 +- {{domxref("EditContext.updateSelectionBounds()")}} {{experimental_inline}} + - : オペレーティングシステムに、編集可能なテキスト領域内で選択されている部分の位置と大きさを知らせます。 +- {{domxref("EditContext.updateCharacterBounds()")}} {{experimental_inline}} + - : オペレーティングシステムに、`EditContext` オブジェクト内の各文字の位置と大きさを知らせます。 + +## イベント + +- {{domxref("EditContext.textupdate_event", "textupdate")}} {{experimental_inline}} + - : ユーザーがテキストまたは選択範囲を変更した時発火します。 +- {{domxref("EditContext.textformatupdate_event", "textformatupdate")}} {{experimental_inline}} + - : {{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) ウィンドウを用いた変換を実行中であり、IME が変換の状態を表すためテキストの変換中の部分を別の書式で表示するべきだと判断した時発火します。 +- {{domxref("EditContext.characterboundsupdate_event", "characterboundsupdate")}} {{experimental_inline}} + - : オペレーティングシステムが、IME ウィンドウを表示するため、`EditContext` オブジェクトの編集可能なテキスト領域内にある特定の各文字の大きさと位置を知る必要がある時発火します。 +- {{domxref("EditContext.compositionstart_event", "compositionstart")}} {{experimental_inline}} + - : IME ウィンドウを用いた変換が開始する時発火します。 +- {{domxref("EditContext.compositionend_event", "compositionend")}} {{experimental_inline}} + - : IME ウィンドウを用いた変換が終了する時発火します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/selectionend/index.md b/files/ja/web/api/editcontext/selectionend/index.md new file mode 100644 index 00000000000000..c4d057fc132e3f --- /dev/null +++ b/files/ja/web/api/editcontext/selectionend/index.md @@ -0,0 +1,92 @@ +--- +title: "EditContext: selectionEnd プロパティ" +slug: Web/API/EditContext/selectionEnd +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} の読み取り専用プロパティ **`selectionEnd`** は、編集可能なテキストコンテンツ内での、現在選択されている範囲の終点のオフセットを表します。 + +## 値 + +{{jsxref("Number")}} です。 + +## 例 + +### `selectionEnd` を用いて編集可能なキャンバスでユーザーの選択を描画する + +この例では、`selectionStart` および `selectionEnd` プロパティを用いて、`EditContext` に関連付けられた `` 要素に現在の選択範囲を描画する方法を示します。 + +```html + +``` + +```js +const ANCHOR_X = 10; +const ANCHOR_Y = 30; +const FONT_SIZE = 20; + +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); +ctx.font = `${FONT_SIZE}px Arial`; + +const editContext = new EditContext({ + text: "Hello world!", + selectionStart: 6, + selectionEnd: 11, +}); +canvas.editContext = editContext; + +function render() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // まず、テキストコンテンツ全体を描画します。 + ctx.fillStyle = "black"; + ctx.fillText(editContext.text, ANCHOR_X, ANCHOR_Y); + + // テキストの始点から選択範囲の始点までの幅を取得します。 + const selectionStartX = ctx.measureText( + editContext.text.substring(0, editContext.selectionStart), + ); + + // 選択範囲の幅を取得します。 + const selectionWidth = ctx.measureText( + editContext.text.substring( + editContext.selectionStart, + editContext.selectionEnd, + ), + ); + + // 選択範囲を表すため、テキストの上に長方形を描画します。 + ctx.fillStyle = "blue"; + ctx.fillRect( + selectionStartX.width + ANCHOR_X, + ANCHOR_Y - FONT_SIZE, + selectionWidth.width, + FONT_SIZE, + ); + + // 選択されたテキストを白で、長方形の上に再描画します。 + ctx.fillStyle = "white"; + ctx.fillText( + editContext.text.substring( + editContext.selectionStart, + editContext.selectionEnd, + ), + selectionStartX.width + ANCHOR_X, + ANCHOR_Y, + ); +} + +render(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/selectionstart/index.md b/files/ja/web/api/editcontext/selectionstart/index.md new file mode 100644 index 00000000000000..d394ceb89b587c --- /dev/null +++ b/files/ja/web/api/editcontext/selectionstart/index.md @@ -0,0 +1,92 @@ +--- +title: "EditContext: selectionStart プロパティ" +slug: Web/API/EditContext/selectionStart +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} の読み取り専用プロパティ **`selectionStart`** は、編集可能なテキストコンテンツ内での、現在選択されている範囲の始点のオフセットを表します。 + +## 値 + +{{jsxref("Number")}} です。 + +## 例 + +### `selectionStart` を用いて編集可能なキャンバスでユーザーの選択を描画する + +この例では、`selectionStart` および `selectionEnd` プロパティを用いて、`EditContext` に関連付けられた `` 要素に現在の選択範囲を描画する方法を示します。 + +```html + +``` + +```js +const ANCHOR_X = 10; +const ANCHOR_Y = 30; +const FONT_SIZE = 20; + +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); +ctx.font = `${FONT_SIZE}px Arial`; + +const editContext = new EditContext({ + text: "Hello world!", + selectionStart: 6, + selectionEnd: 11, +}); +canvas.editContext = editContext; + +function render() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // まず、テキストコンテンツ全体を描画します。 + ctx.fillStyle = "black"; + ctx.fillText(editContext.text, ANCHOR_X, ANCHOR_Y); + + // テキストの始点から選択範囲の始点までの幅を取得します。 + const selectionStartX = ctx.measureText( + editContext.text.substring(0, editContext.selectionStart), + ); + + // 選択範囲の幅を取得します。 + const selectionWidth = ctx.measureText( + editContext.text.substring( + editContext.selectionStart, + editContext.selectionEnd, + ), + ); + + // 選択範囲を表すため、テキストの上に長方形を描画します。 + ctx.fillStyle = "blue"; + ctx.fillRect( + selectionStartX.width + ANCHOR_X, + ANCHOR_Y - FONT_SIZE, + selectionWidth.width, + FONT_SIZE, + ); + + // 選択されたテキストを白で、長方形の上に再描画します。 + ctx.fillStyle = "white"; + ctx.fillText( + editContext.text.substring( + editContext.selectionStart, + editContext.selectionEnd, + ), + selectionStartX.width + ANCHOR_X, + ANCHOR_Y, + ); +} + +render(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/text/index.md b/files/ja/web/api/editcontext/text/index.md new file mode 100644 index 00000000000000..dc34aee4615405 --- /dev/null +++ b/files/ja/web/api/editcontext/text/index.md @@ -0,0 +1,53 @@ +--- +title: "EditContext: text プロパティ" +slug: Web/API/EditContext/text +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの読み取り専用プロパティ **`text`** は、要素の編集可能なコンテンツを表します。 + +## 値 + +この `EditContext` オブジェクトに関連付けられた要素の現在の編集可能なコンテンツが格納された文字列です。初期値は空文字列です。 + +この文字列は `EditContext` に関連付けられた DOM 要素の {{domxref("Node.textContent", "textContent")}} プロパティと一致することもありますし、しないこともあります。たとえば、関連付けられた要素が `textContent` プロパティを持たない `` 要素である可能性があります。もしくは、関連付けられた要素が `
      ` 要素で、より高度な描画を行うため `EditContext.text` の値とは異なるテキストが格納されている可能性もあります。 + +`EditContext` オブジェクトの `text` プロパティは、編集可能なテキスト領域のモデルとして使用できます。`selectionStart` や `selectionEnd` などの `EditContext` オブジェクトの他のプロパティは、この `text` 文字列内でのオフセットを表しています。 + +## 例 + +### `text` を用いて編集可能なキャンバスにテキストを描画する + +以下の例では、EditContext API を用いてユーザーが入力したテキストを `` 要素に描画します。 + +```html + +``` + +```js +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); +const editContext = new EditContext(); +canvas.editContext = editContext; + +editContext.addEventListener("textupdate", (e) => { + // ユーザーが にフォーカスを当ててテキストを入力すると、 + // このイベントが発火し、それをテキストの再描画に用います。 + console.log( + `The user entered the text: ${e.text}. Re-rendering the full EditContext text`, + ); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillText(editContext.text, 10, 10); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/textformatupdate_event/index.md b/files/ja/web/api/editcontext/textformatupdate_event/index.md new file mode 100644 index 00000000000000..0e5513a8ac77fb --- /dev/null +++ b/files/ja/web/api/editcontext/textformatupdate_event/index.md @@ -0,0 +1,100 @@ +--- +title: "EditContext: textformatupdate イベント" +slug: Web/API/EditContext/textformatupdate_event +l10n: + sourceCommit: f216422c99b6c7014e398803b70600501bce8a48 +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの `textformatupdate` イベントは、{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) ウィンドウを用いた変換を実行中に発火します。 + +このイベントは、IME が変換の状態を表すためテキストの変換中の部分を別の書式で表示するべきだと判断した時発火します。 + +以下のスクリーンショットは、日本語の IME を用いて Windows 上のメモ帳アプリケーションでテキストを書いている例です。テキストは、IME による推薦の一つに従って変換中であることを表すため、太い下線とともに表示されています。 + +![IME ウィンドウで日本語のテキストを変換中の Windows 上のメモ帳](./ime-notepad.png) + +ウェブ開発者としては、`textformatupdate` イベントを監視し、それに従って編集可能な領域内に表示しているテキストの書式を更新するべきです。 + +## 構文 + +{{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。 + +```js +addEventListener("textformatupdate", (event) => {}); + +ontextformatupdate = (event) => {}; +``` + +## イベント型 + +{{domxref("TextFormatUpdateEvent")}} です。{{domxref("Event")}} を継承しています。 + +## イベントプロパティ + +_以下に挙げるプロパティに加えて、親の {{domxref("Event")}} インターフェイス由来のプロパティも使用可能です。_ + +- {{domxref('TextFormatUpdateEvent.getTextFormats')}} + - : IME ウィンドウがテキストに適用したい書式のリストを返します。 + +## 例 + +### IME により変換中のテキストの書式を描画する + +以下の例では、`textformatupdate` イベントを用いて、編集可能な領域内のテキストの書式を更新しています。この例のイベントリスナーコールバックは、IME ウィンドウやその他のプラットフォーム固有の UI を用いてテキストを変換しているときにのみ呼ばれることに注意してください。 + +```html + +``` + +```js +const TEXT_X = 10; +const TEXT_Y = 10; + +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); + +const editContext = new EditContext(); +canvas.editContext = editContext; + +editContext.addEventListener("textformatupdate", (e) => { + // キャンバスを初期化します。 + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // テキストを描画します。 + ctx.fillText(editContext.text, TEXT_X, TEXT_Y); + + // IME ウィンドウが適用したいテキストの書式を取得します。 + const formats = e.getTextFormats(); + + // テキストの書式を走査します。 + for (const format of formats) { + const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format; + + const underlineXStart = ctx.measureText( + editContext.text.substring(0, rangeStart), + ).width; + const underlineXEnd = ctx.measureText( + editContext.text.substring(0, rangeEnd), + ).width; + const underlineY = TEXT_Y + 3; + + // 簡単のため、この例ではシンプルな下線のみを描画します。 + // 下線の描画には、underlineStyle および underlineThickness の値を用いるべきです。 + + ctx.beginPath(); + ctx.moveTo(TEXT_X + underlineXStart, underlineY); + ctx.lineTo(TEXT_X + underlineXEnd, underlineY); + ctx.stroke(); + } +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/textupdate_event/index.md b/files/ja/web/api/editcontext/textupdate_event/index.md new file mode 100644 index 00000000000000..dfa7b85a1606a3 --- /dev/null +++ b/files/ja/web/api/editcontext/textupdate_event/index.md @@ -0,0 +1,76 @@ +--- +title: "EditContext: textupdate イベント" +slug: Web/API/EditContext/textupdate_event +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの `textupdate` イベントは、ユーザーが `EditContext` のインスタンスに関連付けられた編集可能な領域のテキストまたは選択範囲を変更した時発火します。 + +このイベントにより、ユーザーの入力に応じて UI 内に新しいテキストや選択範囲を描画できます。 + +## 構文 + +{{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドでイベント名を用いるか、イベントハンドラープロパティを設定します。 + +```js +addEventListener("textupdate", (event) => {}); + +ontextupdate = (event) => {}; +``` + +## イベント型 + +{{domxref("TextUpdateEvent")}} です。{{domxref("Event")}} を継承しています。 + +## イベントプロパティ + +_以下に挙げるプロパティに加え、親の {{domxref("Event")}} インターフェイス由来のプロパティも使用可能です。_ + +- {{domxref('TextUpdateEvent.updateRangeStart')}} {{readonlyinline}} + - : 更新されたテキストの範囲の始点の文字の添字を返します。 +- {{domxref('TextUpdateEvent.updateRangeEnd')}} {{readonlyinline}} + - : 更新されたテキストの範囲の終点の文字の添字を返します。 +- {{domxref('TextUpdateEvent.text')}} {{readonlyinline}} + - : 更新された範囲に挿入されたテキストを返します。 +- {{domxref('TextUpdateEvent.selectionStart')}} {{readonlyinline}} + - : 更新後の新しい選択範囲の始点の文字の添字を返します。 +- {{domxref('TextUpdateEvent.selectionEnd')}} {{readonlyinline}} + - : 更新後の新しい選択範囲の終点の文字の添字を返します。 + +## 例 + +### `textupdate` で更新されたテキストを描画する + +以下の例では、EditContext API の `textupdate` イベントを用いて、ユーザーが編集可能な `` 要素に入力したテキストを描画します。 + +```html + +``` + +```js +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); +const editContext = new EditContext(); +canvas.editContext = editContext; + +editContext.addEventListener("textupdate", (e) => { + // にフォーカスがある状態でユーザーがテキストを入力すると、 + // このイベントが発火します。これをテキストの再描画に用います。 + console.log( + `The user entered the text: ${e.text} at ${e.updateRangeStart}. Re-rendering the full EditContext text`, + ); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillText(editContext.text, 10, 10); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/editcontext/updatecharacterbounds/index.md b/files/ja/web/api/editcontext/updatecharacterbounds/index.md new file mode 100644 index 00000000000000..9f34f0c96227af --- /dev/null +++ b/files/ja/web/api/editcontext/updatecharacterbounds/index.md @@ -0,0 +1,106 @@ +--- +title: "EditContext: updateCharacterBounds() メソッド" +slug: Web/API/EditContext/updateCharacterBounds +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの **`EditContext.updateCharacterBounds()`** メソッドは、オペレーティングシステムに `EditContext` オブジェクト内の各文字の位置と大きさを知らせるため、 {{domxref("EditContext.characterboundsupdate_event", "characterboundsupdate")}} イベントへの応答として呼び出すべきです。 + +`updateCharacterBounds()` メソッドを呼び出す必要があるのは、`characterboundsupdate` イベントのみです。 + +文字の境界の情報は、{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) を正しく配置するため、オペレーティングシステムが必要に応じて使用します。これは、`` 要素にテキストを描画するときなど、オペレーティングシステムが文字の位置と大きさを自動的に認識できない状況で、特に重要です。 + +### IME ウィンドウの位置が急に飛ばないようにする + +`characterboundsupdate` イベント内で同期的に文字の境界を計算して `updateCharacterBounds` を呼ぶことで、オペレーティングシステムが IME ウィンドウを表示する際に必要な情報を確実に持っているようにします。イベントハンドラー内で `updateCharacterBounds()` を同期的に呼ばない場合、ユーザーは IME ウィンドウが正しい場所に移動する前に間違った場所に表示される様子を見る可能性があります。 + +### どの文字を含めるか + +`updateCharacterBounds()` メソッドはオペレーティングシステムが情報を必要としていることを知らせてきた時にのみ、そして現在の IME による変換に含まれている文字についてのみ呼び出すべきです。 + +`characterboundsupdate` イベントハンドラーに渡されるイベントオブジェクトには、現在変換されている文字の範囲を表す `rangeStart` および `rangeEnd` プロパティがあります。`updateCharacterBounds()` はこの範囲内の文字についてのみ呼び出すべきです。 + +## 構文 + +```js-nolint +updateCharacterBounds(rangeStart, characterBounds) +``` + +### 引数 + +- `rangeStart` + - : 文字の境界を提供するテキストの範囲の始点を表す数値です。 +- `characterBounds` + - : 各文字の境界を表す {{domxref("DOMRect")}} オブジェクトが格納された {{jsxref("Array")}} です。 + +### 例外 + +- 渡された引数が 2 個未満の場合、`TypeError` {{domxref("DOMException")}} が投げられます。 +- `rangeStart` が数値でないか、`characterBounds` が反復可能でない場合、`TypeError` {{domxref("DOMException")}} が投げられます。 + +## 例 + +### 必要に応じて文字の境界を更新する + +この例は、`updateCharacterBounds` メソッドを用いて、オペレーティングシステムが情報を必要としていることを知らせてきた時、`` 要素の `EditContext` 内の各文字の境界を更新する方法を示します。この例における `characterboundsupdate` イベントリスナーコールバックは、IME ウィンドウやその他のプラットフォーム固有の UI を用いてテキストを変換しているときのみ呼ばれることに注意してください。 + +```html + +``` + +```js +const FONT_SIZE = 40; +const FONT = `${FONT_SIZE}px Arial`; + +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); +ctx.font = FONT; + +const editContext = new EditContext(); +canvas.editContext = editContext; + +function computeCharacterBound(offset) { + // 文字列の先頭から対象の文字までの幅を測定します。 + const widthBeforeChar = ctx.measureText( + editContext.text.substring(0, offset), + ).width; + + // 対象の文字の幅を測定します。 + const charWidth = ctx.measureText(editContext.text[offset]).width; + + const charX = canvas.offsetLeft + widthBeforeChar; + const charY = canvas.offsetTop; + + // 文字の境界を表す DOMRect を返します。 + return DOMRect.fromRect({ + x: charX, + y: charY - FONT_SIZE, + width: charWidth, + height: FONT_SIZE, + }); +} + +editContext.addEventListener("characterboundsupdate", (e) => { + const charBounds = []; + for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) { + charBounds.push(computeCharacterBound(offset)); + } + + editContext.updateCharacterBounds(e.rangeStart, charBounds); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス diff --git a/files/ja/web/api/editcontext/updatecontrolbounds/index.md b/files/ja/web/api/editcontext/updatecontrolbounds/index.md new file mode 100644 index 00000000000000..cbe2ecc750036d --- /dev/null +++ b/files/ja/web/api/editcontext/updatecontrolbounds/index.md @@ -0,0 +1,77 @@ +--- +title: "EditContext: updateControlBounds() メソッド" +slug: Web/API/EditContext/updateControlBounds +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの **`EditContext.updateControlBounds()`** メソッドは、オペレーティングシステムに `EditContext` オブジェクトの編集可能なテキスト領域の位置と大きさを知らせるために使われます。 + +オペレーティングシステムに現在の編集可能な領域の境界を知らせるため、このメソッドを呼びます。`EditContext` を初期化する時と、ウェブページがリサイズされた時など編集可能な領域の境界が変わった時に毎回、このメソッドを呼ぶべきです。この境界は、{{glossary("Input Method Editor", "インプットメソッドエディター")}} (IME) ウィンドウなどのプラットフォーム固有の編集関係の UI を配置するために使用されます。 + +## 構文 + +```js-nolint +updateControlBounds(controlBounds) +``` + +### 引数 + +- `controlBounds` + - : 新しいコントロール境界を表す {{domxref("DOMRect")}} オブジェクトです。 + +### 例外 + +- 引数が渡されない場合、`TypeError` {{domxref("DOMException")}} が投げられます。 +- 渡された引数が {{domxref("DOMRect")}} でない場合、`TypeError` {{domxref("DOMException")}} が投げられます。 + +## 例 + +### エディターの初期化時とウィンドウのリサイズ時にコントロール境界を更新する + +この例では、`updateControlBounds()` を用いてプラットフォームに編集可能な領域の位置を伝え続ける方法を示します。 + +```css +#editor { + border: 1px solid black; + height: 50vw; + width: 50vh; +} +``` + +```html +
      +``` + +```js +const editorEl = document.getElementById("editor"); +const editContext = new EditContext(); +editorEl.editContext = editContext; + +function updateControlBounds() { + const editorBounds = editorEl.getBoundingClientRect(); + editContext.updateControlBounds(editorBounds); + console.log( + `Updated control bounds to ${editorBounds.x}, ${editorBounds.y}, ${editorBounds.width}, ${editorBounds.height}`, + ); +} + +// コントロール領域を今更新します。 +updateControlBounds(); +// ページがリサイズされた時にも更新します。 +window.addEventListener("resize", updateControlBounds); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス diff --git a/files/ja/web/api/editcontext/updateselection/index.md b/files/ja/web/api/editcontext/updateselection/index.md new file mode 100644 index 00000000000000..3bfc5b459f1fbf --- /dev/null +++ b/files/ja/web/api/editcontext/updateselection/index.md @@ -0,0 +1,85 @@ +--- +title: "EditContext: updateSelection() メソッド" +slug: Web/API/EditContext/updateSelection +l10n: + sourceCommit: ab5aa440278a135b9932a071f9208f4c58b86d21 +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの **`updateSelection()`** メソッドは、編集可能なテキストコンテンツ内の選択の内部状態を更新します。このメソッドは、マウスのクリックやドラッグ、およびキーボード操作など、ユーザーが `EditContext` に関連付けられた要素で描画されたテキストの操作を行った際に選択の状態を更新するために用いられます。 + +## 構文 + +```js-nolint +updateSelection(start, end) +``` + +### 引数 + +- `start` + - : 新しい選択範囲の始点を表す数値です。 +- `end` + - : 新しい選択範囲の終点を表す数値です。 + +`start` と `end` が同じ値の場合、選択範囲はキャレットに相当します。 + +### 例外 + +- 引数が 1 個しか渡されなかった場合、`TypeError` {{domxref("DOMException")}} が投げられます。 +- いずれかの引数が非負の数値でない場合、{{domxref("DOMException")}} が投げられます。 + +## 例 + +### ユーザーがテキストを操作した際、選択範囲を更新する + +この例では、`updateSelection` メソッドを用いて、矢印キーを用いて編集可能な領域内でキャレットを動かしたりテキストを選択したりする際に `canvas` 要素の `EditContext` 内の選択範囲を更新する方法を示します。 + +```html + +``` + +```js +const canvas = document.getElementById("editor-canvas"); +const editContext = new EditContext(); +canvas.editContext = editContext; + +canvas.addEventListener("keydown", (e) => { + if (e.key == "ArrowLeft") { + const newPosition = Math.max(editContext.selectionStart - 1, 0); + + if (e.shiftKey) { + editContext.updateSelection(newPosition, editContext.selectionEnd); + } else { + editContext.updateSelection(newPosition, newPosition); + } + } else if (e.key == "ArrowRight") { + const newPosition = Math.min( + editContext.selectionEnd + 1, + editContext.text.length, + ); + + if (e.shiftKey) { + editContext.updateSelection(editContext.selectionStart, newPosition); + } else { + editContext.updateSelection(newPosition, newPosition); + } + } + + console.log( + `The new EditContext selection is ${editContext.selectionStart}, ${editContext.selectionEnd}`, + ); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス diff --git a/files/ja/web/api/editcontext/updateselectionbounds/index.md b/files/ja/web/api/editcontext/updateselectionbounds/index.md new file mode 100644 index 00000000000000..e58055bc5c9d99 --- /dev/null +++ b/files/ja/web/api/editcontext/updateselectionbounds/index.md @@ -0,0 +1,40 @@ +--- +title: "EditContext: updateSelectionBounds() メソッド" +slug: Web/API/EditContext/updateSelectionBounds +l10n: + sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの **`EditContext.updateSelectionBounds()`** メソッドは、オペレーティングシステムに `EditContext` オブジェクトに関連付けられた編集可能な領域内で選択されているテキストの領域の情報を知らせます。 + +オペレーティングシステムに現在のユーザーの選択の境界を知らせるため、このメソッドを呼びます。編集可能な領域内におけるユーザーの選択が変化するたびに、このメソッドを呼ぶべきです。この選択の境界は、オペレーティングシステムが IME ウィンドウやその他のプラットフォーム固有の編集関係の UI を配置する助けとして用いられます。 + +## 構文 + +```js-nolint +updateSelectionBounds(selectionBounds) +``` + +### 引数 + +- `selectionBounds` + - : 新しい選択の境界を表す {{domxref("DOMRect")}} オブジェクトです。 + +### 例外 + +- 引数が渡されなかった場合、`TypeError` {{domxref("DOMException")}} が投げられます。 +- 渡された引数が {{domxref("DOMRect")}} でない場合、`TypeError` {{domxref("DOMException")}} が投げられます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス diff --git a/files/ja/web/api/editcontext/updatetext/index.md b/files/ja/web/api/editcontext/updatetext/index.md new file mode 100644 index 00000000000000..ee2829b9adca31 --- /dev/null +++ b/files/ja/web/api/editcontext/updatetext/index.md @@ -0,0 +1,96 @@ +--- +title: "EditContext: updateText() メソッド" +slug: Web/API/EditContext/updateText +l10n: + sourceCommit: 7d7b014191b4892e7a059493a90f0c511cfdf633 +--- + +{{APIRef("EditContext API")}}{{SeeCompatTable}} + +{{domxref("EditContext")}} インターフェイスの **`updateText()`** メソッドは、`EditContext` オブジェクト内部のテキストコンテンツを更新します。 + +ユーザーが関連付けられた要素にテキストを打ち込む際には、このメソッドを使う必要はありません。`EditContext` オブジェクトが自動的に内部のテキストコンテンツを更新し、必要に応じて {{domxref("EditContext.textupdate_event", "textupdate")}} イベントを発火します。 + +しかし、このメソッドは、クリップボードからテキストを貼り付けるときなど、ユーザーがそれ以外の方法でテキストコンテンツを操作する際に使用できます。 + +## 構文 + +```js-nolint +updateText(rangeStart, rangeEnd, text) +``` + +### 引数 + +- `rangeStart` + - : 置き換えるテキストの範囲の始点を表す数値です。 +- `rangeEnd` + - : 置き換えるテキストの範囲の終点を表す数値です。 +- `text` + - : 新しいテキストコンテンツを表す文字列です。 + +### 例外 + +- 渡された引数が 3 個未満の場合は、`TypeError` {{domxref("DOMException")}} が投げられます。 + +## 例 + +### ユーザーがテキストを貼り付けた際、エディターを更新する + +この例では、`updateText` メソッドを用いて、ユーザーがテキストを貼り付けるために Ctrl/Cmd + V ショートカットを押した時に `` 要素の `EditContext` 内のテキストコンテンツを更新する方法を示します。 + +また、この例ではクリップボードからテキストを読むために {{domxref("Clipboard.readText()")}} メソッドを用います。 + +```html + +``` + +```js +const canvas = document.getElementById("editor-canvas"); +const ctx = canvas.getContext("2d"); + +const editContext = new EditContext(); +canvas.editContext = editContext; + +function render() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillText(editContext.text, 0, 40); +} + +editContext.addEventListener("textupdate", (e) => { + render(); +}); + +canvas.addEventListener("keydown", async (e) => { + if (e.key == "v" && (e.ctrlKey || e.metaKey)) { + const pastedText = await navigator.clipboard.readText(); + console.log( + `The user pasted the text: ${pastedText}. Updating the EditContext text.`, + ); + + editContext.updateText( + editContext.selectionStart, + editContext.selectionEnd, + pastedText, + ); + + editContext.updateSelection( + editContext.selectionStart + pastedText.length, + editContext.selectionStart + pastedText.length, + ); + + render(); + } +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 属する {{DOMxRef("EditContext")}} インターフェイス From 5ec8e78391d6c779cd5efb94322afea48ab9c76e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 20 Nov 2024 23:55:24 +0900 Subject: [PATCH 129/279] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/font-variant-alternates/index.md | 58 ++++++++++++------- 1 file changed, 36 insertions(+), 22 deletions(-) diff --git a/files/ja/web/css/font-variant-alternates/index.md b/files/ja/web/css/font-variant-alternates/index.md index fb91429a21e25c..a7947ae20cf6ea 100644 --- a/files/ja/web/css/font-variant-alternates/index.md +++ b/files/ja/web/css/font-variant-alternates/index.md @@ -1,11 +1,19 @@ --- title: font-variant-alternates slug: Web/CSS/font-variant-alternates +l10n: + sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b --- {{CSSRef}} -**`font-variant-alternates`** は CSS のプロパティで、代替書体の使用を制御します。代替書体は {{cssxref("@font-feature-values")}} で定義された代替名で参照される可能性があります。 +**`font-variant-alternates`** は [CSS](/ja/docs/Web/CSS) のプロパティで、代替書体の使用を制御します。代替書体は {{cssxref("@font-feature-values")}} で定義された代替名で参照される可能性があります。 + +{{cssxref("@font-feature-values")}} アットルールを使って、与えられたフォントフェイスに対して、人間が読める名前と、特定の OpenType フォント機能を制御する数値インデックスを関連付けることができます。代替字体を選択する関数（`stylistic`、`styleset`、`character-variant`、`swash`、`ornament`、`annotation`）の場合、 `font-variant-alternates` プロパティで人間が読める名前を参照することで、関連する関数を適用することができます。 + +これにより、特定のフォントが字体を制御するために使っている特定のインデックス値を知らなくても、 CSS ルールで代替字体を有効にすることができます。 + +## 構文 ```css /* キーワード値 */ @@ -29,11 +37,7 @@ font-variant-alternates: revert-layer; font-variant-alternates: unset; ``` -{{cssxref("@font-feature-values")}} アット規則は、代替書体関数 (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament`, `annotation`) の名前を定義し、その名前を OpenType の引数と関連付けることができます。このプロパティはスタイルシート内で ({{cssxref("@font-feature-values")}} で定義された) 人間が読める名前を利用できるようにします。 - -## 構文 - -このプロパティは二つの形式のうち一つを取ります。 +このプロパティは 2 つの形式のどちらかを取ります。 - キーワード `normal` - または、その他の下記のキーワードおよび関数を空白区切り、順不同で 1 つ以上 @@ -72,40 +76,47 @@ font-variant-alternates: unset; ## 例 -### 先端装飾書体を有効化 +### スワッシュ字体の有効化 + +こ の例では、 `@font-feature-values` アットルールを用いて、 [MonteCarlo](https://github.com/googlefonts/monte-carlo) フォントの `swash` 機能の名前を定義しています。このルールは、名前 "fancy" をインデックス値 1 に対応付けます。 + +そして、 `font-variant-alternates` の中でその名前を使えば、そのフォントのスワッシュをオンにすることができます。これは、 `font-feature-settings: "swsh" 1` のような行と等価です。ただし、この特性を適用する CSS は、この特定のフォントに必要なインデックス値を含む必要はありませんし、知る必要すらありません。 #### HTML ```html -

      Firefox rocks!

      -

      Firefox rocks!

      +

      A Fancy Swash

      +

      A Fancy Swash

      ``` #### CSS ```css -@font-feature-values "Leitura Display Swashes" { +@font-face { + font-family: MonteCarlo; + src: url("montecarlo-regular.woff2"); +} + +@font-feature-values "MonteCarlo" { @swash { fancy: 1; } } p { - font-size: 1.5rem; + font-family: "MonteCarlo"; + font-size: 3rem; + margin: 0.7rem 3rem; } .variant { - font-family: Leitura Display Swashes; font-variant-alternates: swash(fancy); } ``` ### 結果 -> [!NOTE] -> この例を有効にするには、 OpenType フォントの _Leitura Display Swashes_ をインストールする必要があります。試験用途の無償版が、 [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes) などにあります。 - -{{ EmbedLiveSample('Enabling swash glyphs') }} +{{EmbedLiveSample("Enabling swash glyphs", 0, 230)}} ## 仕様書 @@ -117,9 +128,12 @@ p { ## 関連情報 -- {{cssxref("font-variant")}} -- {{cssxref("font-variant-caps")}} -- {{cssxref("font-variant-east-asian")}} -- {{cssxref("font-variant-ligatures")}} -- {{cssxref("font-variant-numeric")}} -- {{cssxref("@font-feature-values")}} +- [`font-variant`](/ja/docs/Web/CSS/font-variant) +- [`font-variant-caps`](/ja/docs/Web/CSS/font-variant-caps) +- [`font-variant-east-asian`](/ja/docs/Web/CSS/font-variant-east-asian) +- [`font-variant-emoji`](/ja/docs/Web/CSS/font-variant-emoji) +- [`font-variant-ligatures`](/ja/docs/Web/CSS/font-variant-ligatures) +- [`font-variant-numeric`](/ja/docs/Web/CSS/font-variant-numeric) +- [`font-variant-position`](/ja/docs/Web/CSS/font-variant-position) +- [`@font-feature-values`](/ja/docs/Web/CSS/@font-feature-values) +- [`font-feature-settings`](/ja/docs/Web/CSS/font-feature-settings) From 71a8bf4ff0d56c584b82d7346c8a0d4c68b150e4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 00:19:07 +0900 Subject: [PATCH 130/279] =?UTF-8?q?2024/10/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/font-variant-emoji/index.md | 32 ++++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/files/ja/web/css/font-variant-emoji/index.md b/files/ja/web/css/font-variant-emoji/index.md index e87941e531f2d1..8e44dd2b4537b0 100644 --- a/files/ja/web/css/font-variant-emoji/index.md +++ b/files/ja/web/css/font-variant-emoji/index.md @@ -2,7 +2,7 @@ title: font-variant-emoji slug: Web/CSS/font-variant-emoji l10n: - sourceCommit: 5635446aa0127d686183ddd4fd5adcc34be567da + sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d --- {{CSSRef}} @@ -35,9 +35,9 @@ font-variant-emoji: unset; - `normal` - : ブラウザーが絵文字を表示する方法を選べます。これは多くの場合、オペレーティングシステムの設定に従います。 - `text` - - : Unicode テキスト変化形セレクター (`U+FE0E`) を使用しているかのように絵文字を描画します。 + - : 絵文字を Unicode テキスト変化形セレクター (`U+FE0E`) を使用しているかのように描画します。 - `emoji` - - : Unicode 絵文字変化形セレクター (`U+FE0F`) を使用しているかのように絵文字を描画します。 + - : 絵文字を Unicode 絵文字変化形セレクター (`U+FE0F`) を使用しているかのように描画します。 - `unicode` - : [絵文字の表示プロパティ](https://www.unicode.org/reports/tr51/tr51-23.html#Emoji_Presentation)に従って絵文字を表示します。`U+FE0E` または `U+FE0F` の変化形セレクターが存在する場合、この値の設定を上書きします。 @@ -49,6 +49,16 @@ font-variant-emoji: unset; {{CSSSyntax}} +## アクセシビリティ + +絵文字を使用することは楽しいように思えるかもしれませんが、アクセシビリティ、特に視覚や認知に障害のあるユーザーへの影響を考慮する必要があります。絵文字を使用する際には、以下の要素を考慮してください。 + +- スクリーンリーダーへの表示: スクリーンリーダーは絵文字の代替テキストを読み上げます。このことを念頭に置いて、コンテンツ内での絵文字の位置を検討してください。絵文字を繰り返し多用すると、スクリーンリーダーのユーザーに悪影響があります。顔文字よりも絵文字を使用する方が良いでしょう。顔文字は句読点として読み上げられます。 + +- 背景とのコントラスト: 絵文字を使用する場合、その色と背景色との作用を考えてください。特に、ライト/ダークモードなど、背景色が変化する可能性がある場合は注意が必要です。 + +- 使用する意図： 絵文字の意味の理解がユーザーと異なる可能性があるため、絵文字を言葉に置き換えて使用しないでください。また、絵文字は文化や地域によって異なる意味を持つ場合があることも考慮してください。できれば、一般的に知られている絵文字に使用を制限することを推奨します。 + ## 例 ### 絵文字の表示方法の変更 @@ -58,11 +68,11 @@ font-variant-emoji: unset; #### HTML ```html-nolint hidden -

      +

      お使いのブラウザーは font-variant-emoji に対応していません。この画像は対応した場合の表示方法を示しています。

      文字として表示させる電話の絵文字は白黒で、絵文字として表示させる電話の絵文字はフルカラーでグラフィカルに表示されます。 ``` @@ -84,7 +94,7 @@ font-variant-emoji: unset; ```css hidden @supports (font-variant-emoji: emoji) { - .nosupport { + .no-support { display: none; } .emojis { @@ -118,16 +128,6 @@ font-variant-emoji: unset; {{ EmbedLiveSample('Changing the way an emoji is displayed') }} -## アクセシビリティの考慮 - -絵文字を使用することは楽しいように思えるかもしれませんが、アクセシビリティ、特に視覚や認知に障害のあるユーザーへの影響を考慮する必要があります。絵文字を使用する際には、以下の要素を考慮してください。 - -- スクリーンリーダーへの表示: スクリーンリーダーは絵文字の代替テキストを読み上げます。このことを念頭に置いて、コンテンツ内での絵文字の位置を検討してください。絵文字を繰り返し多用すると、スクリーンリーダーのユーザーに悪影響があります。顔文字よりも絵文字を使用する方が良いでしょう。顔文字は句読点として読み上げられます。 - -- 背景とのコントラスト: 絵文字を使用する場合、その色と背景色との作用を考えてください。特に、ライト/ダークモードなど、背景色が変化する可能性がある場合は注意が必要です。 - -- 使用する意図： 絵文字の意味の理解がユーザーと異なる可能性があるため、絵文字を言葉に置き換えて使用しないでください。また、絵文字は文化や地域によって異なる意味を持つ場合があることも考慮してください。できれば、一般的に知られている絵文字に使用を制限することを推奨します。 - ## 仕様書 {{Specifications}} From 66cb0f31d9600ac3a450c771fdfe825d044a42b6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 00:57:55 +0900 Subject: [PATCH 131/279] =?UTF-8?q?2024/07/18=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/font-variant-ligatures/index.md | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/files/ja/web/css/font-variant-ligatures/index.md b/files/ja/web/css/font-variant-ligatures/index.md index fbcc96d421ee10..91aa5d9638fa24 100644 --- a/files/ja/web/css/font-variant-ligatures/index.md +++ b/files/ja/web/css/font-variant-ligatures/index.md @@ -1,11 +1,13 @@ --- title: font-variant-ligatures slug: Web/CSS/font-variant-ligatures +l10n: + sourceCommit: 8d8f3f44b498aef7b8cf2729d5656f96d2ff6ae5 --- {{CSSRef}} -**`font-variant-ligatures`** は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。 +**`font-variant-ligatures`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。 {{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}} @@ -24,6 +26,13 @@ font-variant-ligatures: no-historical-ligatures; /* */ font-variant-ligatures: contextual; /* */ font-variant-ligatures: no-contextual; /* */ +/* 2 つのキーワード値 */ +font-variant-ligatures: no-contextual common-ligatures; + +/* 4 つのキーワード値 */ +font-variant-ligatures: common-ligatures no-discretionary-ligatures + historical-ligatures contextual; + /* グローバル値 */ font-variant-ligatures: inherit; font-variant-ligatures: initial; @@ -32,36 +41,36 @@ font-variant-ligatures: revert-layer; font-variant-ligatures: unset; ``` -`font-variant-ligatures` プロパティは、以下の一覧のキーワード値のうち一つで指定します。 +`font-variant-ligatures` プロパティは、 `normal`、`none` または以下の一覧のキーワード値のうちのいずれかで指定します。 ### 値 - `normal` - - : 正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。 + - : このキーワードは、正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。 - `none` - - : 一般的なものであっても、すべての合字や文脈書式を無効にします。 -- _\_ + - : 。このキーワードは、一般的なものであっても、すべての合字や文脈書式を無効にします。 +- _``_ - : `fi`, `ffi`, `th` などの、よくある合字を制御します。 OpenType の値 `liga` および `clig` に対応します。2 つの値が指定できます。 - `common-ligatures`: これらの合字を有効にします。なお、キーワード `normal` はこれらの合字を有効にします。 - `no-common-ligatures`: これらの合字を無効にします。 -- _\_ +- _``_ - : フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は `dlig` です。2 つの値が指定できます。 - `discretionary-ligatures`: これらの合字を有効にします。 - `no-discretionary-ligatures`: これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。 -- _\_ +- _``_ - : 古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は `hlig` です。2 つの値が指定できます。 - `historical-ligatures`: これらの合字を有効にします。 - `no-historical-ligatures` これらの合字を無効にします。なお、キーワード `normal` はふつう、これらの合字を無効にします。 -- _\_ +- _``_ - : 字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は `calt` です。2 つの値が指定できます。 @@ -124,10 +133,6 @@ font-variant-ligatures: unset; no-contextual
      if fi ff tf ft jf fj

      -

      - contextual
      - if fi ff tf ft jf fj -

      ``` #### CSS @@ -175,10 +180,6 @@ p { .no-contextual { font-variant-ligatures: no-contextual; } - -.contextual { - font-variant-ligatures: contextual; -} ``` #### 結果 @@ -195,8 +196,10 @@ p { ## 関連情報 -- {{cssxref("font-variant-alternates")}} -- {{cssxref("font-variant-caps")}} -- {{cssxref("font-variant-east-asian")}} -- {{cssxref("font-variant")}} -- {{cssxref("font-variant-numeric")}} +- [`font-variant`](/ja/docs/Web/CSS/font-variant) +- [`font-variant-caps`](/ja/docs/Web/CSS/font-variant-caps) +- [`font-variant-emoji`](/ja/docs/Web/CSS/font-variant-emoji) +- [`font-variant-east-asian`](/ja/docs/Web/CSS/font-variant-east-asian) +- [`font-variant-numeric`](/ja/docs/Web/CSS/font-variant-numeric) +- [`font-variant-position`](/ja/docs/Web/CSS/font-variant-position) +- [CSS フォントモジュール](/ja/docs/Web/CSS/CSS_fonts) From ce97accaf889989b71ca943ba08fbbc731667b8b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 01:04:18 +0900 Subject: [PATCH 132/279] =?UTF-8?q?2024/11/14=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/font-variant-numeric/index.md | 53 ++++- .../web/css/font-variation-settings/index.md | 193 ++++++++++++++++-- 2 files changed, 221 insertions(+), 25 deletions(-) diff --git a/files/ja/web/css/font-variant-numeric/index.md b/files/ja/web/css/font-variant-numeric/index.md index 3dac4086859ff3..43999327d03743 100644 --- a/files/ja/web/css/font-variant-numeric/index.md +++ b/files/ja/web/css/font-variant-numeric/index.md @@ -1,11 +1,13 @@ --- title: font-variant-numeric slug: Web/CSS/font-variant-numeric +l10n: + sourceCommit: ad6eb6b52b4b3082397e8e011bd59a6d88a8f5f3 --- {{CSSRef}} -**`font-variant-numeric`** は CSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。 +**`font-variant-numeric`** は [CSS](/ja/docs/Web/CSS) のプロパティで、数字、分数、序数記号の表記を制御するために使用します。 {{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}} @@ -27,6 +29,7 @@ font-variant-numeric: oldstyle-nums stacked-fractions; font-variant-numeric: inherit; font-variant-numeric: initial; font-variant-numeric: revert; +font-variant-numeric: revert-layer; font-variant-numeric: unset; ``` @@ -38,26 +41,32 @@ font-variant-numeric: unset; ### 値 - `normal` + - : このキーワードは、別形式の表記の使用を無効にします。 + - `ordinal` + - : このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の `ordn` の値に対応します。 + - `slashed-zero` + - : このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の `zero` の値に対応します。 -- _\ + +- _``_ - : これらの値は、数字の形状を制御します。2 つの値が利用できます。 - `lining-nums` は、全てをベースライン上に並べる表記を有効にします。 OpenType の `lnum` の値に対応します。 - `oldstyle-nums` は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の `onum` の値に対応します。 -- _\ +- _``_ - : これらの値は、数字の表記の大きさを制御します。2 つの値が利用できます。 - `proportional-nums` は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の `pnum` の値に対応します。 - `tabular-nums` は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の `tnum` の値に対応します。 -- _\ +- _``_ - : これらの値は、分数の表示に使う表記を制御します。2 つの値が利用できます。 @@ -76,7 +85,29 @@ font-variant-numeric: unset; ### 序数形式の設定 -{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}} +以下のコードブロック内の "Play" をクリックすると、 MDN Playground で例を編集できます。 + +```html live-sample___font-variant-numeric-example +

      1st, 2nd, 3rd, 4th, 5th

      +``` + +```css live-sample___font-variant-numeric-example +@font-face { + font-family: "Source Sans Pro"; + src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf") + format("opentype"); + font-weight: 400; + font-style: normal; +} + +.ordinal { + font-family: "Source Sans Pro"; + font-size: 2rem; + font-variant-numeric: ordinal; +} +``` + +{{EmbedLiveSample("font-variant-numeric-example")}} ## 仕様書 @@ -88,8 +119,10 @@ font-variant-numeric: unset; ## 関連情報 -- {{cssxref("font-variant-alternates")}} -- {{cssxref("font-variant-caps")}} -- {{cssxref("font-variant-east-asian")}} -- {{cssxref("font-variant-ligatures")}} -- {{cssxref("font-variant")}} +- [`font-variant`](/ja/docs/Web/CSS/font-variant) +- [`font-variant-alternates`](/ja/docs/Web/CSS/font-variant-alternates) +- [`font-variant-caps`](/ja/docs/Web/CSS/font-variant-caps) +- [`font-variant-east-asian`](/ja/docs/Web/CSS/font-variant-east-asian) +- [`font-variant-emoji`](/ja/docs/Web/CSS/font-variant-emoji) +- [`font-variant-ligatures`](/ja/docs/Web/CSS/font-variant-ligatures) +- [`font-variant-position`](/ja/docs/Web/CSS/font-variant-position) diff --git a/files/ja/web/css/font-variation-settings/index.md b/files/ja/web/css/font-variation-settings/index.md index 1c6b018411ba4f..02a4e55d7ecb47 100644 --- a/files/ja/web/css/font-variation-settings/index.md +++ b/files/ja/web/css/font-variation-settings/index.md @@ -1,11 +1,13 @@ --- title: font-variation-settings slug: Web/CSS/font-variation-settings +l10n: + sourceCommit: ad6eb6b52b4b3082397e8e011bd59a6d88a8f5f3 --- {{CSSRef}} -**`font-variation-settings`** は CSS のプロパティで、変更したい特性の 4 文字の軸名と特性の値を指定することにより、[可変フォント](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)に対する低水準の制御を提供します。 +**`font-variation-settings`** は [CSS](/ja/docs/Web/CSS) のプロパティで、変更したい特性の 4 文字の軸名と特性の値を指定することにより、[可変フォント](/ja/docs/Web/CSS/CSS_fonts/Variable_fonts_guide)に対する低水準の制御できるようにします。 {{EmbedInteractiveExample("pages/css/font-variation-settings.html")}} @@ -16,12 +18,13 @@ slug: Web/CSS/font-variation-settings font-variation-settings: normal; /* 可変フォントの軸名の値を設定 */ -font-variation-settings: "XHGT" 0.7; +font-variation-settings: "xhgt" 0.7; /* グローバル値 */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: revert; +font-variation-settings: revert-layer; font-variation-settings: unset; ``` @@ -38,7 +41,7 @@ font-variation-settings: unset; このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば {{cssxref("font-weight")}} や {{cssxref("font-style")}}) を設定するための基本プロパティがない場合にのみ使用してください。 -`font-variation-settings` を使用して設定されたフォント特性は、常に `font-weight` などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 `@font-face` 宣言が `font-weight` の範囲を含んでいる場合のみこれが成り立ちます。 +`font-variation-settings` を使用して設定されたフォント特性は、常に `font-weight` などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 {{cssxref("@font-face")}} 宣言が {{cssxref("@font-face/font-weight", "font-weight")}} の範囲を含んでいる場合のみこれが成り立ちます。 ### 登録済みの軸とカスタム軸 @@ -66,11 +69,11 @@ font-variation-settings: unset;
    • "slnt" (slant){{cssxref("font-style")}}: `oblique + angle`{{cssxref("font-style")}}: oblique + angle
    "ital"{{cssxref("font-style")}}: `italic`{{cssxref("font-style")}}: italic
    "opsz"
    @@ -225,7 +218,7 @@ p { #### CSS -```css +```css live-sample___vertical_alignment_in_a_table_cell table { margin-left: auto; margin-right: auto; @@ -262,7 +255,7 @@ td { #### 結果 -{{EmbedLiveSample("表のセル内での垂直方向の配置", 1200, 230)}} +{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}} ## 仕様書 @@ -274,7 +267,7 @@ td { ## 関連情報 -- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#center_item) +- [フレックスボックスの典型的な用途の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#アイテムの中央揃え) - {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}} - [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](https://phrogz.net/css/vertical-align/index.html) - [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align) From 3a1fdfcdfba4252fabf5bf525f176c13a0146b33 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 18:39:17 +0900 Subject: [PATCH 145/279] =?UTF-8?q?2024/04/02=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/svg/element/textpath/index.md | 78 ++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 files/ja/web/svg/element/textpath/index.md diff --git a/files/ja/web/svg/element/textpath/index.md b/files/ja/web/svg/element/textpath/index.md new file mode 100644 index 00000000000000..b0c184055e4062 --- /dev/null +++ b/files/ja/web/svg/element/textpath/index.md @@ -0,0 +1,78 @@ +--- +title: +slug: Web/SVG/Element/textPath +l10n: + sourceCommit: 2f43f506240fa6c866cc3bc2d018364ae49421d9 +--- + +{{SVGRef}} + +{{SVGElement("path")}} の図形に沿ってテキストを表示するには、テキストを **``** 要素で囲み、その要素に {{SVGAttr("href")}} 属性を指定して {{SVGElement("path")}} 要素を参照します。 + +## 例 + +```css hidden live-sample___example +html, +body, +svg { + height: 100%; +} +``` + +```html live-sample___example + + + + + + + + Quick brown fox jumps over the lazy dog. + + +``` + +{{EmbedLiveSample('Example', 200, 200)}} + +## 属性 + +- {{SVGAttr("href")}} + - : テキストを表示するパスまたは基本図形への URL です。 `path` 属性を設定した場合、 `href` は効果がありません。 + _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#url) ; _既定値_: なし; _アニメーション_: **可** +- {{SVGAttr("lengthAdjust")}} + - : テキストの長さを調整する場所です。文字間、または空間と文字の両方。 + _値の型_: `spacing`|`spacingAndGlyphs`; _既定値_: `spacing`; _アニメーション_: **可** +- {{SVGAttr("method")}} + - : パスに沿って個々の文字描画する方法です。 + _値の型_: `align`|`stretch` ; _既定値_: `align`; _アニメーション_: **可** +- {{SVGAttr("path")}} {{Experimental_Inline}} + - : テキストが描画されるパスです。 + _値の型_: [**\**](/ja/docs/Web/SVG/Attribute/path#path-data) ; _既定値_: なし; _アニメーション_: **可** +- {{SVGAttr("side")}} {{Experimental_Inline}} + - : テキストをパス上のどの辺に描画するかです。 + _値の型_: `left`|`right` ; _既定値_: `left`; _アニメーション_: **可** +- {{SVGAttr("spacing")}} + - : 文字間をどのように処理すべきかです。 + _値の型_: `auto`|`exact` ; _既定値_: `exact`; _アニメーション_: **可** +- {{SVGAttr("startOffset")}} + - : テキストの開始位置をパスの開始位置からどれだけずらすか。 + _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)|[**\**](/ja/docs/Web/SVG/Content_type#number) ; _既定値_: `0`; _アニメーション_: **可** +- {{SVGAttr("textLength")}} + - : テキストがレンダリングされる空間の幅。 + _値の型_: [**\**](/ja/docs/Web/SVG/Content_type#length)|[**\**](/ja/docs/Web/SVG/Content_type#percentage)|[**\**](/ja/docs/Web/SVG/Content_type#number) ; _既定値_: _auto_; _アニメーション_: **可** + +## 使用コンテキスト + +{{svginfo}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 23821c83d822f585796e79d2c91f9b0feaed60aa Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 18:49:14 +0900 Subject: [PATCH 146/279] =?UTF-8?q?2024/02/29=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/svg/element/tref/index.md | 60 ++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 files/ja/web/svg/element/tref/index.md diff --git a/files/ja/web/svg/element/tref/index.md b/files/ja/web/svg/element/tref/index.md new file mode 100644 index 00000000000000..00bce1b84dd183 --- /dev/null +++ b/files/ja/web/svg/element/tref/index.md @@ -0,0 +1,60 @@ +--- +title: +slug: Web/SVG/Element/tref +l10n: + sourceCommit: 3a1ef2abc8233835f0b0cc73afaf36e44edaf4a1 +--- + +{{SVGRef}}{{deprecated_header}} + +SVG の {{SVGElement("text")}} 要素のテキストコンテンツは、 {{SVGElement("text")}} 要素内に直接埋め込まれた文字データ、または参照先が **``** 要素で指定された要素の文字データコンテンツのどちらかになります。 + +## 使用コンテキスト + +{{svginfo}} + +## 属性 + +- {{SVGAttr("xlink:href")}} {{deprecated_inline}} + +## DOM インターフェイス + +この要素は {{domxref("SVGTRefElement")}} インターフェイスを実装しています。 + +## 例 + +```xml + + + + Referenced character data + + + + + Inline character data + + + + + + + + + +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{SVGElement("text")}} From a3545c63c7b95b399fc09a36e227b11d90e37112 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 25 Nov 2024 20:28:46 +0900 Subject: [PATCH 147/279] =?UTF-8?q?2024/11/14=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#24659)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/11/14 時点の英語版に基づき更新 * Update files/ja/web/css/@font-face/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/css/@font-face/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/css/@font-face/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ja/web/css/@font-face/index.md | 93 +++++++++++++--------------- 1 file changed, 44 insertions(+), 49 deletions(-) diff --git a/files/ja/web/css/@font-face/index.md b/files/ja/web/css/@font-face/index.md index ee146ada38eb45..9971d5650056d8 100644 --- a/files/ja/web/css/@font-face/index.md +++ b/files/ja/web/css/@font-face/index.md @@ -1,6 +1,8 @@ --- title: "@font-face" slug: Web/CSS/@font-face +l10n: + sourceCommit: ad6eb6b52b4b3082397e8e011bd59a6d88a8f5f3 --- {{CSSRef}} @@ -11,10 +13,12 @@ slug: Web/CSS/@font-face ```css @font-face { - font-family: "Open Sans"; + font-family: "Trickster"; src: - url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); + local("Trickster"), + url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), + url("trickster-outline.otf") format("opentype"), + url("trickster-outline.woff") format("woff"); } ``` @@ -33,43 +37,40 @@ slug: Web/CSS/@font-face - {{cssxref("@font-face/font-style", "font-style")}} - : {{cssxref("font-style")}} 値です。 font-face で対応する範囲を指定するために、 `font-style: oblique 20deg 50deg;` のように 2 つの値を受け付けます。 - {{cssxref("@font-face/font-weight", "font-weight")}} + - : {{cssxref("font-weight")}} 値です。 font-face で対応する範囲を指定するために、 `font-weight: 100 400;` のように 2 つの値を受け付けます。 -- {{cssxref("@font-face/font-variant", "font-variant")}} - - : {{cssxref("font-variant")}} 値です。 -- {{cssxref("font-feature-settings", "font-feature-settings")}} + + > [!NOTE] + > font-variant 記述子は 2018 年に仕様から除去されました。 {{cssxref("font-variant")}} 値プロパティは対応していますが、記述子に相当するものはありません。 + +- {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - : OpenType フォントで高度な印刷機能を制御することができるようにします。 - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - : OpenType または TrueType フォントの種類を低レベルで制御するために、変化形の特徴を表す 4 文字の軸名を、種類の値と共に指定します。 - {{cssxref("@font-face/line-gap-override", "line-gap-override")}} - : フォントの行間の寸法を定義します。 -- {{cssxref("@font-face/size-adjust", "size-adjust")}}{{experimental_inline}} +- {{cssxref("@font-face/size-adjust", "size-adjust")}} - : このフォントに関連するグリフのアウトラインとメトリックの倍率を定義します。これにより、同じフォントサイズでレンダリングしたときに、さまざまなフォントのデザインを調和させることが容易になります。 - {{cssxref("@font-face/src", "src")}} - - - : フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。 - - ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — `format()` 関数の中に形式を含めることができます。 - - ```css - src: - url(ideal-sans-serif.woff) format("woff"), - url(basic-sans-serif.ttf) format("truetype"); - ``` - -利用可能な形式は、`"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, `"svg"` です。 - + - : フォントの形式や技術に関するヒントを含むフォントリソースへの参照を指定します。これは @font-face ルールが有効になるためには必須です。 - {{cssxref("@font-face/unicode-range", "unicode-range")}} - : フォントで使用される Unicode コードポイントの範囲です。 ## 解説 +`url()` と `local()` を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。 + `local()` 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、{{Glossary("user agent", "ユーザーエージェント")}}がそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 `url()` 関数を使用して指定されたフォントリソースをダウンロードして使用します。 -`@font-face` で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。 +ブラウザーはリストの宣言順にリソースを読み込もうとするので、 通常は `local()` を `url()` の前に書くべきです。どちらの関数もオプションなので、 `url()` を使用せずに `local()` のみを 1 つ以上格納したルールブロックも可能です。 +`format()` や `tech()` の値がより具体的なフォントが必要な場合は、これらの値を持たないバージョンの前に記載する必要があります。 -`url()` と `local()` を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。 +`@font-face` で作者が独自のフォントを提供できるようになることで、「ウェブセーフ」フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。 -`@font-face` アットルールは、 CSS の最上位だけでなく、 [CSS の条件付きアットルールグループ](/ja/docs/Web/CSS/At-rule#条件付きグループルール)の中でも使用することができます。 +> [!NOTE] +> Fallback strategies for loading fonts on older browsers are described in the [`src` descriptor page](/ja/docs/Web/CSS/@font-face/src#specifying_fallbacks_for_older_browsers). + +`@font-face` アットルールは、 CSS の最上位だけでなく、 [CSS の条件付きグループアットルール](/ja/docs/Web/CSS/CSS_conditional_rules#アットルール)の中でも使用することができます。 ### フォントの MIME タイプ @@ -88,9 +89,9 @@ slug: Web/CSS/@font-face ```css example-bad .className { @font-face { - font-family: MyHelvetica; + font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + url("MgOpenModernaBold.ttf"); font-weight: bold; } } @@ -106,30 +107,24 @@ slug: Web/CSS/@font-face この例は使用するダウンロード可能なフォントを指定し、文書の本文全体に適用します。 -```html - - - Web Font Sample - - - - This is Bitstream Vera Serif Bold. - - +```html live-sample___web-font-example + + This is Bitstream Vera Serif Bold. + ``` -この例の出力結果は次のようになります。 +```css live-sample___web-font-example +@font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf"); +} + +body { + font-family: "Bitstream Vera Serif Bold", serif; +} +``` -{{EmbedGHLiveSample("css-examples/web-fonts/basic-web-font.html", '100%', 50)}} +{{EmbedLiveSample("web-font-example", "", "100px")}} ### ローカルフォントの代替を指定 @@ -137,9 +132,9 @@ slug: Web/CSS/@font-face ```css @font-face { - font-family: MyHelvetica; + font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + url("MgOpenModernaBold.ttf"); font-weight: bold; } ``` @@ -154,7 +149,7 @@ slug: Web/CSS/@font-face ## 関連情報 -- [WOFF について](/ja/docs/Web/Guide/WOFF) +- [WOFF について](/ja/docs/Web/CSS/CSS_fonts/WOFF) - [FontSquirrel @font-face generator](https://www.fontsquirrel.com/tools/webfont-generator) - [Beautiful fonts with @font-face](https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/) - [Font Library](https://fontlibrary.org/) From 0d291bde0e0755fe496b7ebdf511fd5fde33d41a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 23:39:36 +0900 Subject: [PATCH 148/279] =?UTF-8?q?2024/10/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/@font-face/font-display/index.md | 20 ++++++++----------- .../web/css/@font-face/font-family/index.md | 14 ++++++++----- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/files/ja/web/css/@font-face/font-display/index.md b/files/ja/web/css/@font-face/font-display/index.md index 7fd4c0a1a6b99f..cee233b213da74 100644 --- a/files/ja/web/css/@font-face/font-display/index.md +++ b/files/ja/web/css/@font-face/font-display/index.md @@ -1,11 +1,13 @@ --- title: font-display slug: Web/CSS/@font-face/font-display +l10n: + sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb --- {{CSSRef}} -**`font-display`** 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。 +**`font-display`** は [`@font-face`](/ja/docs/Web/CSS/@font-face) アットルールの記述子で、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。 ## 構文 @@ -36,16 +38,11 @@ font-display: optional; ## 解説 -### フォント表示の過程 - フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時間に分かれます。 -- フォントブロック時間 - - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は*不可視の*代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。 -- フォントスワップ時間 - - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。 -- フォント失敗時間 - - : フォントが読み込まれていなければ、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。 +- フォントブロック時間: フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は*不可視の*代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。 +- フォントスワップ時間: フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。 +- フォント失敗時間: フォントが読み込まれていなければ、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。 ## 公式定義 @@ -63,8 +60,8 @@ font-display: optional; @font-face { font-family: ExampleFont; src: - url(/path/to/fonts/examplefont.woff) format("woff"), - url(/path/to/fonts/examplefont.eot) format("eot"); + url(/path/to/fonts/example-font.woff) format("woff"), + url(/path/to/fonts/example-font.eot) format("eot"); font-weight: 400; font-style: normal; font-display: fallback; @@ -85,7 +82,6 @@ font-display: optional; - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} diff --git a/files/ja/web/css/@font-face/font-family/index.md b/files/ja/web/css/@font-face/font-family/index.md index f11cdb2f990fc7..0efa74b3282d7f 100644 --- a/files/ja/web/css/@font-face/font-family/index.md +++ b/files/ja/web/css/@font-face/font-family/index.md @@ -1,11 +1,16 @@ --- title: font-family slug: Web/CSS/@font-face/font-family +l10n: + sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb --- {{CSSRef}} -**`font-family`** は CSS の記述子で、 {{cssxref("@font-face")}} ルールで指定されたフォントのフォントファミリーを指定することができます。 +**`font-family`** は CSS の記述子で、 {{cssxref("@font-face")}} アットルールで指定されたフォントのフォントファミリーを指定することができます。 + +この値は、 [`font-family`](/ja/docs/Web/CSS/font-family) プロパティを用いて要素をスタイル設定する際に、特定の `@font-face` に対して名前を照合するために用いられます。 +任意の名前を使用することができ、これは基盤のフォントデータで指定された名前を上書きします。 ## 構文 @@ -15,7 +20,7 @@ font-family: "font family"; font-family: "another font family"; /* 値 */ -font-family: examplefont; +font-family: example-font; ``` ### 値 @@ -37,8 +42,8 @@ font-family: examplefont; ```css @font-face { - font-family: examplefont; - src: url("examplefont.ttf"); + font-family: "Some font family"; + src: url("some_font_name.ttf"); } ``` @@ -56,7 +61,6 @@ font-family: examplefont; - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} From 328704d1789beadd1b92def814b2b46cb842e1fb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 00:08:05 +0900 Subject: [PATCH 149/279] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/@font-face/font-stretch/index.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/files/ja/web/css/@font-face/font-stretch/index.md b/files/ja/web/css/@font-face/font-stretch/index.md index 04b0b20dcde928..355e0d790740b4 100644 --- a/files/ja/web/css/@font-face/font-stretch/index.md +++ b/files/ja/web/css/@font-face/font-stretch/index.md @@ -1,13 +1,15 @@ --- title: font-stretch slug: Web/CSS/@font-face/font-stretch +l10n: + sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb --- {{CSSRef}} -**`font-stretch`** は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} ルールで定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。 +**`font-stretch`** は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} アットルールで定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。 -ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、`font-stretch` 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。 +ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、`font-stretch` 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。この CSS 記述子の値は、対応するフォントプロパティの値と同じです。 ## 構文 @@ -31,7 +33,7 @@ font-stretch: 75% 125%; font-stretch: condensed ultra-condensed; ``` -`font-weight` プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。 +`font-stretch` プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。 ### 値 @@ -99,15 +101,15 @@ font-stretch: condensed ultra-condensed;
    baseline
    -### バリアブル（可変）フォント +### 可変フォント -ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル（可変）フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント値の範囲が役立ちます。 +ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、可変フォント（バリアブルフォント）と呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント値の範囲が役立ちます。 TrueType または OpenType 可変フォントの場合、 "wdth" バリエーションを使用して、さまざまな字幅を実装します。 -## アクセシビリティの考慮 +## アクセシビリティ -特にフォントの[コントラストカラー比が低い](/ja/docs/Web/CSS/color#accessibility_concerns)場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。 +特にフォントの[コントラストカラー比が低い](/ja/docs/Web/CSS/color#アクセシビリティ)場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。 - [MDN 「知覚可能」、ガイドライン 1.4 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.4_前景と背景の区別を含め、ユーザーがコンテンツを見たり聞いたりしやすくする) - [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) (英語) @@ -150,8 +152,7 @@ TrueType または OpenType 可変フォントの場合、 "wdth" バリエー - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-weight", "font-weight")}} - {{cssxref("@font-face/font-style", "font-style")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} -- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} +- {{cssxref("@font-face/unicode-range", "unicode-range")}} 記述子 From fe6f393e25c225a9dbd7cd4f9f4a02d0a12a39b7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 00:23:20 +0900 Subject: [PATCH 150/279] =?UTF-8?q?2024/06/27=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@font-face/font-style/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/ja/web/css/@font-face/font-style/index.md b/files/ja/web/css/@font-face/font-style/index.md index 70c65988a67d96..00a3f829ad87b7 100644 --- a/files/ja/web/css/@font-face/font-style/index.md +++ b/files/ja/web/css/@font-face/font-style/index.md @@ -1,13 +1,15 @@ --- title: font-style slug: Web/CSS/@font-face/font-style +l10n: + sourceCommit: 418b3ebf6464716649125199385c39d86c944973 --- {{CSSRef}} -**`font-style`** は CSS の記述子で、 {{cssxref("@font-face")}} ルールの中で指定されたフォントのフォントスタイルを指定することができます。 +**`font-style`** は CSS の記述子で、 {{cssxref("@font-face")}} アットルールの中で指定されたフォントのフォントスタイルを指定することができます。 -特定のフォントファミリーについて、同じフォントファミリーの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-style` 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 +特定のフォントファミリーについて、同じフォントファミリーの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-style` 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。この CSS 記述子の値は対応する {{cssxref("font-style")}} プロパティと同じです。 ## 構文 @@ -85,7 +87,6 @@ font-style: oblique 30deg 50deg; - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} From 709f8d46855395aefd4d896208a98e28752a63e5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 00:27:30 +0900 Subject: [PATCH 151/279] =?UTF-8?q?2023/08/29=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../font-variation-settings/index.md | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/files/ja/web/css/@font-face/font-variation-settings/index.md b/files/ja/web/css/@font-face/font-variation-settings/index.md index 52b6c61bc691f0..11fef6a81769d7 100644 --- a/files/ja/web/css/@font-face/font-variation-settings/index.md +++ b/files/ja/web/css/@font-face/font-variation-settings/index.md @@ -1,11 +1,15 @@ --- title: font-variation-settings slug: Web/CSS/@font-face/font-variation-settings +l10n: + sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e --- {{CSSRef}} -**`font-variation-settings`** は CSS の記述子で、 {{cssxref("@font-face")}} ルールの中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。 +**`font-variation-settings`** は CSS の記述子で、 {{cssxref("@font-face")}} アットルールの中で OpenType または TrueType の低水準のフォントバリエーションを指定することができます。この記述子の値は、グローバルキーワード値を除いて {{cssxref("font-variation-settings")}} と同じです。 + +この記述子は、要素全体ではなく `@font-face` アットルールのフォントオブジェクトにバリエーション値を設定するので、要素内の一部の字体だけがこの記述子を使用して描画されるかもしれません。 ## 構文 @@ -22,7 +26,7 @@ font-variation-settings: "xhgt" 0.7; - `normal` - : テキストは既定の設定を使用してレイアウトされます。 - ` ` - - : テキストを描画するとき、 OpenType の軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("<string>")}} が 4 つの ASCII 文字で、その後に軸の値を示す {{cssxref("number")}} が続きます。 `` の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 `` は小数や負の数を取ることができます。 + - : テキストを描画するとき、 OpenType の軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("<string>")}} が 4 つの {{Glossary("ASCII")}} 文字で、その後に軸の値を示す {{cssxref("number")}} が続きます。 `` の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 `` は小数や負の数を取ることができます。 ## 公式定義 @@ -58,12 +62,5 @@ font-variation-settings: "xhgt" 0.7; ## 関連情報 -- {{cssxref("@font-face/font-display", "font-display")}} -- {{cssxref("@font-face/font-family", "font-family")}} -- {{cssxref("@font-face/font-stretch", "font-stretch")}} -- {{cssxref("@font-face/font-style", "font-style")}} -- {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} -- {{cssxref("font-feature-settings", "font-feature-settings")}} -- {{cssxref("@font-face/src", "src")}} -- {{cssxref("@font-face/unicode-range", "unicode-range")}} +- その他の `@font-face` 記述子: {{cssxref("@font-face/font-display", "font-display")}}, {{cssxref("@font-face/font-family", "font-family")}}, {{cssxref("font-feature-settings", "font-feature-settings")}}, {{cssxref("@font-face/font-stretch", "font-stretch")}}, {{cssxref("@font-face/font-style", "font-style")}}, {{cssxref("@font-face/font-weight", "font-weight")}}, {{cssxref("@font-face/src", "src")}}, {{cssxref("@font-face/unicode-range", "unicode-range")}} +- 関連フォントプロパティ: {{cssxref("font-feature-settings")}}, {{cssxref("font-variation-settings")}} From a523be5b816e41cfa03ae27fea47552c759e81a3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 21 Nov 2024 23:33:58 +0900 Subject: [PATCH 152/279] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/@font-face/ascent-override/index.md | 7 ++++--- .../web/css/@font-face/descent-override/index.md | 7 ++++--- files/ja/web/css/@font-face/font-weight/index.md | 15 ++++++++------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/files/ja/web/css/@font-face/ascent-override/index.md b/files/ja/web/css/@font-face/ascent-override/index.md index 415ac7e4ee3842..caac1bf8b89a72 100644 --- a/files/ja/web/css/@font-face/ascent-override/index.md +++ b/files/ja/web/css/@font-face/ascent-override/index.md @@ -1,11 +1,13 @@ --- title: ascent-override slug: Web/CSS/@font-face/ascent-override +l10n: + sourceCommit: 46a2eda1ce316d5c2c789104c28bc4fdaee5ab8b --- {{CSSRef}} -**`ascent-override`** は CSS の記述子で、フォントのアセンダーの寸法を定義します。アセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの上の高さです。 +**`ascent-override`** は CSS の {{cssxref("@font-face")}} アットルールの記述子で、フォントのアセンダーの寸法を定義します。アセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの上の高さです。 ## 構文 @@ -64,10 +66,9 @@ ascent-override: 90%; - {{cssxref("@font-face/font-weight", "font-weight")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/line-gap-override", "line-gap-override")}} - {{cssxref("@font-face/src", "src")}} - {{cssxref("@font-face/size-adjust", "size-adjust")}} -- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} +- {{cssxref("@font-face/unicode-range", "unicode-range")}} 記述子 diff --git a/files/ja/web/css/@font-face/descent-override/index.md b/files/ja/web/css/@font-face/descent-override/index.md index 9711349bc59786..0163a23ca3d534 100644 --- a/files/ja/web/css/@font-face/descent-override/index.md +++ b/files/ja/web/css/@font-face/descent-override/index.md @@ -1,11 +1,13 @@ --- title: descent-override slug: Web/CSS/@font-face/descent-override +l10n: + sourceCommit: 46a2eda1ce316d5c2c789104c28bc4fdaee5ab8b --- {{CSSRef}} -**`descent-override`** は CSS の記述子で、フォントのディセンダーの寸法を定義します。ディセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの下の高さです。 +**`descent-override`** は CSS の {{cssxref("@font-face")}} アットルールの記述子で、フォントのディセンダーの寸法を定義します。ディセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの下の高さです。 ## 構文 @@ -64,10 +66,9 @@ descent-override: 90%; - {{cssxref("@font-face/font-weight", "font-weight")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/line-gap-override", "line-gap-override")}} - {{cssxref("@font-face/src", "src")}} - {{cssxref("@font-face/size-adjust", "size-adjust")}} -- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} +- {{cssxref("@font-face/unicode-range", "unicode-range")}} 記述子 diff --git a/files/ja/web/css/@font-face/font-weight/index.md b/files/ja/web/css/@font-face/font-weight/index.md index 3d5e781227aa31..7c733dbb772ce1 100644 --- a/files/ja/web/css/@font-face/font-weight/index.md +++ b/files/ja/web/css/@font-face/font-weight/index.md @@ -1,15 +1,17 @@ --- title: font-weight slug: Web/CSS/@font-face/font-weight +l10n: + sourceCommit: 46a2eda1ce316d5c2c789104c28bc4fdaee5ab8b --- {{CSSRef}} -**`font-weight`** は CSS の記述子で、 {{cssxref("@font-face")}} ルールで指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。 +**`font-weight`** は CSS の記述子で、 {{cssxref("@font-face")}} アットルールで指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。 特定のフォントファミリーについて、同じフォントファミリーの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-weight` 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 -一般に、特定のフォントファミリーには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。 +一般に、特定のフォントファミリーには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} 一括指定プロパティを使用してください。 ## 構文 @@ -37,7 +39,7 @@ font-weight: 300 500; `font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。 -CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、[可変フォント](#variable_fonts)が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 +CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、[可変フォント](#可変フォント)が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 ### 一般的な太さの名前との対応 @@ -61,9 +63,9 @@ CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任 TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。 -## アクセシビリティの考慮 +## アクセシビリティ -弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#accessibility_concerns)は、テキストを読むのが難しくなることがあります。 +弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#アクセシビリティ)は、テキストを読むのが難しくなることがあります。 - [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.4_前景と背景の区別を含め、ユーザーがコンテンツを見たり聞いたりしやすくする) - [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) @@ -106,8 +108,7 @@ TrueType や OpenType の可変フォントでは、 "wght" バリエーショ - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} -- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} +- {{cssxref("@font-face/unicode-range", "unicode-range")}} 記述子 From 0d32759b947acc1c9a1e6ed96769dfb136760cd5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 00:32:32 +0900 Subject: [PATCH 153/279] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@font-face/line-gap-override/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ja/web/css/@font-face/line-gap-override/index.md b/files/ja/web/css/@font-face/line-gap-override/index.md index b2f8469c9dccd8..cf6b8e209887c1 100644 --- a/files/ja/web/css/@font-face/line-gap-override/index.md +++ b/files/ja/web/css/@font-face/line-gap-override/index.md @@ -1,11 +1,13 @@ --- title: line-gap-override slug: Web/CSS/@font-face/line-gap-override +l10n: + sourceCommit: 9231a7046973685f4600e1891fa644ecce41ef3b --- {{CSSRef}} -**`line-gap-override`** は CSS の記述子で、そのフォントの line-gap の寸法を定義します。 line-gap の寸法は、フォントが推奨する line-gap または external leading です。 +**`line-gap-override`** は CSS の {{cssxref("@font-face")}} アットルールの記述子で、そのフォントの line-gap の寸法を定義します。 line-gap の寸法は、フォントが推奨する line-gap または external leading です。 ## 構文 @@ -64,10 +66,8 @@ line-gap-override: 90%; - {{cssxref("@font-face/font-weight", "font-weight")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} -- {{cssxref("@font-face/line-gap-override", "line-gap-override")}} - {{cssxref("@font-face/src", "src")}} - {{cssxref("@font-face/size-adjust", "size-adjust")}} -- {{cssxref("@font-face/unicode-range", "unicode-range descriptor")}} +- {{cssxref("@font-face/unicode-range", "unicode-range")}} 記述子 From c98d51629518015ce9adac1219e0de9810cf8119 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 00:35:38 +0900 Subject: [PATCH 154/279] =?UTF-8?q?2023/08/27=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@font-face/size-adjust/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/files/ja/web/css/@font-face/size-adjust/index.md b/files/ja/web/css/@font-face/size-adjust/index.md index 92300e269a8712..4f366c337c4bde 100644 --- a/files/ja/web/css/@font-face/size-adjust/index.md +++ b/files/ja/web/css/@font-face/size-adjust/index.md @@ -1,11 +1,13 @@ --- title: size-adjust slug: Web/CSS/@font-face/size-adjust +l10n: + sourceCommit: 418b3ebf6464716649125199385c39d86c944973 --- {{CSSRef}} -**`size-adjust`** は CSS の記述子で、記述子は、このフォントに関連する字体のアウトラインとメトリックの乗数を定義します。これにより、同じフォントサイズでレンダリングしたときに、様々なフォントのデザインを調和させることが容易になります。 +**`size-adjust`** は CSS の {{cssxref("@font-face")}} アットルールの記述子で、このフォントに関連する字体のアウトラインとメトリックの乗数を定義します。これにより、同じフォントサイズでレンダリングしたときに、様々なフォントのデザインを調和させることが容易になります。 `size-adjust` 記述子は {{cssxref("font-size-adjust")}} プロパティと似たような振る舞いをします。これは、 ex の高さを一致させることによって、フォントごとに調整を計算します。 @@ -64,7 +66,6 @@ size-adjust: 90%; - {{cssxref("@font-face/font-weight", "font-weight")}} 記述子 - {{cssxref("@font-face/font-style", "font-style")}} 記述子 - {{cssxref("@font-face/font-stretch", "font-stretch")}} 記述子 -- {{cssxref("@font-face/font-variant", "font-variant")}} 記述子 - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} 記述子 - {{cssxref("@font-face/src", "src")}} 記述子 From 030280611ab8178e92a95fbcca97335356dff45f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 25 Nov 2024 20:32:00 +0900 Subject: [PATCH 155/279] =?UTF-8?q?2024/11/13=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#24668)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/11/13 時点の英語版に基づき更新 * Update index.md --- files/ja/web/css/@font-face/src/index.md | 246 ++++++++++++++++-- .../web/css/@font-face/unicode-range/index.md | 19 +- 2 files changed, 234 insertions(+), 31 deletions(-) diff --git a/files/ja/web/css/@font-face/src/index.md b/files/ja/web/css/@font-face/src/index.md index 9c7de7785fc63b..7fdccabe07a92a 100644 --- a/files/ja/web/css/@font-face/src/index.md +++ b/files/ja/web/css/@font-face/src/index.md @@ -1,11 +1,13 @@ --- title: src slug: Web/CSS/@font-face/src +l10n: + sourceCommit: 0326d9301650304ef67a56e88b542b160093042e --- {{CSSRef}} -**`src`** は CSS における {{cssxref("@font-face")}} ルールの記述子で、フォントデータを含むリソースを指定します。 `@font-face` ルールを有効にするためには必要です。 +**`src`** は CSS の {{cssxref("@font-face")}} アットルールの記述子で、フォントデータを含むリソースを指定します。 `@font-face` ルールを有効にするためには必要です。 ## 構文 @@ -13,7 +15,6 @@ slug: Web/CSS/@font-face/src /* 値 */ src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */ src: url(path/to/font.woff); /* 相対 URL */ -src: url(path/to/font.woff) format("woff"); /* 明示的な書式 */ src: url("path/to/font.woff"); /* 引用符付きの URL */ src: url(path/to/svgfont.svg#example); /* フラグメントで識別するフォント */ @@ -21,27 +22,131 @@ src: url(path/to/svgfont.svg#example); /* フラグメントで識別するフ src: local(font); /* 引用符なしの名前 */ src: local(some font); /* 空白が入った名前 */ src: local("font"); /* 引用符付きの名前 */ +src: local("some font"); /* 引用符付きの空白を含む */ -/* 複数の項目 */ +/* )> 値 */ +src: url(path/to/fontCOLRv1.otf) tech(color-COLRv1); +src: url(path/to/fontCOLR-svg.otf) tech(color-SVG); + +/* )> 値 */ +src: url(path/to/font.woff) format("woff"); +src: url(path/to/font.otf) format("opentype"); + +/* 複数のリソース */ src: - local(font), - url(path/to/font.svg) format("svg"), url(path/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype"); + +/* フォントの形式と技術のついた複数のリソース */ +src: + url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1), + url("trickster-outline.otf") format(opentype); ``` ### 値 -- ` [ format( # ) ]?` - - : {{cssxref("<url>()")}} と、続けて任意で `format()` 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。 +- `url()` + + - : {{cssxref("url_value", "<url>")}} で構成される外部参照を指定し、その後にオプションで `format()` と `tech()` 成分値を使用して、URL で参照するリソースの書式とフォント技術を指定します。 `format()` と `tech()` の部分は、既知の[フォント形式](#フォント形式)とフォント技術の文字列をカンマで区切ったリストです。ユーザーエージェントがフォント技術や形式に対応していない場合は、フォントリソースのダウンロードをスキップします。形式や技術のヒントが与えられない場合、フォントリソースは常にダウンロードされます。 + +- `format()` + - : `url()` の値に続くオプション宣言で、ユーザーエージェントにフォント形式のヒントを提供します。 + この値に対応していない、または不正な値が指定された場合、ブラウザーはリソースをダウンロードせず、帯域幅を節約できる可能性があります。 + 省略した場合、ブラウザーはリソースをダウンロードしてから形式を検出します。 + [定義済みキーワード](#形式文法)のリストにない後方互換性のためのフォントソースを含める場合は、形式文字列を引用符で囲んでください。取り得る値は下記[フォント形式](#フォント形式)の節で説明しています。 +- `tech()` + - : オプション宣言で `url()` の値に続き、ユーザーエージェントにフォント技術のヒントを提供します。 + `tech()` の値には、[フォント技術](#フォント技術)で説明するキーワードのいずれかを指定します。 +- `local()` + + - : ユーザーの端末で利用できるフォントの名前を指定します。フォント名を引用符で囲むことはオプションです。 + + > [!NOTE] + > OpenType と TrueType フォントの場合、 `` は、ローカルで利用できるフォントの名前表の中の PostScript 名か完全なフォント名のどちらかと照合するために用いられます。どちらの名前を使用するかはプラットフォームやフォントによって異なりますので、プラットフォーム間で適切に照合するためには、どちらの名前も含める必要があります。指定されたフォント名に対するプラットフォームの置換は使用してはいけません。 + + > [!NOTE] + > ローカルで利用できるフォントは、ユーザーの端末にプリインストールされている場合もあれば、ユーザーが積極的にインストールした場合もあります。 + > + > プリインストールされたフォントの組み合わせは具体的な端末のすべてのユーザーにとって同じである可能性が高いですが、ユーザーがインストールしたフォントの組み合わせはそうではありません。したがって、ユーザーがインストールしたフォントの組み合わせを探ることで、ウェブサイトは端末の{{glossary("fingerprinting", "フィンガープリント")}}を作成することができ、ウェブサイトがウェブ全体でユーザーを追跡することができます。 + > + > これを防ぐために、ユーザーエージェントは `local()` を使用した、ユーザーがインストールしたフォントを無視する可能性があります。 + - `` - - : `local()` を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリー内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。 + - : ローカルにインストールされているフォントフェイスの完全な名前または PostScript 名を `local()` の部分値を使って指定します。 + 名前はオプションで、引用符で囲むこともできます。フォントフェイス名は[大文字小文字を区別しません](https://drafts.csswg.org/css-fonts-3/#font-family-casing)。 + +> **メモ:** {{domxref("Local Font Access API", "ローカルフォントアクセス API", "", "nocode")}} を使用することで、ユーザーがローカルにインストールしたフォントデータにアクセスすることができます。これは、名前、スタイル設定、ファミリーなどの高水準の詳細と、基盤となるフォントファイルの生のバイトを含みます。 ## 解説 -値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。 +値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストで、それぞれのリソースは `url()` または `local()` で指定します。 +フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初のものを使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。 + +複数の `src` 記述子が設定されている場合、リソースを読み込むことができる最後の宣言ルールのみが適用されます。 +最後の `src` 記述子がリソースを読み込むことができ、かつ `local()` フォントを含んでいない場合、ブラウザーは外部フォントファイルをダウンロードし、端末に利用できるフォントがあってもローカルバージョンを無視します。 + +> [!NOTE] +> ブラウザーが不正とみなす記述子内の値は無視されます。 +> ブラウザーによっては、不正な項目が 1 つでもあると、記述子全体を無視します。 +> これは代替の設計に影響するかもしれません。 +> 詳しくは[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。 + +CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、 1 から始まるインデックス（例えば "font-collection#1" が最初のフォント、 "font-collection#2" が 2 番目のフォント、など）が使用されます。 + +フォントファイルが複数のフォントのコンテナーである場合には、下記に示すように、使用するサブフォントを示すフラグメント識別子が含まれます。 + +```css +/* WhichFont はフォントファイル内のフォントの PostScript 名 */ +src: url(collection.otc#WhichFont); +/* WhichFont は SVG フォントファイル内のフォントの要素 id */ +src: url(fonts.svg#WhichFont); +``` + +### フォント形式 + +次の表は、有効なフォントキーワードと、それに対応するフォント形式を示しています。CSS内でフォント形式がブラウザーの対応しているかどうかを調べるには、 {{cssxref("@supports", "@supports")}} ルールを使用します。 + +| キーワード | フォント形式 | 一般的な拡張子 | +| ------------------- | ---------------------- | -------------- | +| `collection` | OpenType コレクション | .otc, .ttc | +| `embedded-opentype` | 埋め込み OpenType | .eot | +| `opentype` | OpenType | .otf, .ttf | +| `svg` | SVG フォント（非推奨） | .svg, .svgz | +| `truetype` | TrueType | .ttf | +| `woff` | WOFF 1.0 | .woff | +| `woff2` | WOFF 2.0 | .woff2 | + +> [!NOTE] +> +> - `format(svg)` は [SVG フォント](/ja/docs/Web/SVG/Tutorial/SVG_fonts)を表し、 `tech(color-SVG)` は [SVG 表を持つ OpenType フォント](https://learn.microsoft.com/typography/opentype/spec/svg)（OpenType-SVG 色フォントとも呼ばれる）を表し、これらは完全に異なります。 +> - `opentype` 値 と `truetype` 値は、フォントファイルが 3 次ベジェ曲線（CFF/CFF2 表内）を用いているか、 2 次ベジェ曲線（字体テーブル内）を用いているかにかかわらず等価です。 + +古い正規化されていない `format()` の値には、次のような構文があります。後方互換性のために引用符で囲まれた文字列として指定されます。 -CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。 +| 古い構文 | 等価な構文 | +| ------------------------------- | ----------------------------------- | +| `format("woff2-variations")` | `format(woff2) tech(variations)` | +| `format("woff-variations")` | `format(woff) tech(variations)` | +| `format("opentype-variations")` | `format(opentype) tech(variations)` | +| `format("truetype-variations")` | `format(truetype) tech(variations)` | + +### フォント技術 + +次の表は、 `tech()` 記述子に有効な値と、それに対応するフォント技術を示したものです。 CSS 内でフォント技術にブラウザーの対応しているかどうかを調べるには、 {{cssxref("@supports", "@supports")}} アットルールを使用します。 + +| キーワード | 記述子 | +| :------------------ | :----------------------------------------------------------------------------------------------------------- | +| `color-cbdt` | 色ビットマップデータ表 | +| `color-colrv0` | COLR version 0 表による複数色の字体 | +| `color-colrv1` | COLR version 1 表による複数色の字体 | +| `color-sbix` | 標準ビットマップグラフィック表 | +| `color-svg` | SVG 複数色表 | +| `features-aat` | TrueType の `morx` および `kerx` 表 | +| `features-graphite` | グラファイト機能、いわゆる `Silf`, `Glat`, `Gloc`, `Feat`, and `Sill` 表 | +| `features-opentype` | OpenType `GSUB` および `GPOS` 表 | +| `incremental` | インクリメンタルフォント読み込み | +| `palettes` | フォントパレット `font-palette` ということを意味し、フォントの多くの色パレットから一つを選択することができる | +| `variations` | TrueType および OpenType フォントのフォント変化形で、フォントの軸、太さ、字形などを制御します。 | ## 公式定義 @@ -49,32 +154,128 @@ CSS のその他の URL と同様に、相対 URL を使用することができ ## 形式文法 -{{csssyntax}} +```plain + [ format( ) ]? [ tech( # ) ]? | +local( ) + + = [ | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ] + + = [ | | variations | palettes | incremental-patch | incremental-range | incremental-auto ] + + = [ features-opentype | features-aat | features-graphite ] + + = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ] +``` ## 例 ### url() と local() を使用したフォントリソースの指定 +下記の例は、同じフォントファミリーの 2つのフォントフェイスを定義する方法を示しています。 `font-family` は `MainText` という名前にしています。最初のフォントフェイスは通常のフォントで、 2 つ目は同じフォントファミリーの太字バージョンです。 + ```css -/* 通常のフォントフェイス */ +/* 通常のフォントフェイスの定義 */ @font-face { - font-family: examplefont; + font-family: MainText; src: - local(Example Font), - url("examplefont.woff") format("woff"), - url("examplefont.otf") format("opentype"); + local(Futura-Medium), + url("FuturaMedium.woff") format("woff"), + url("FuturaMedium.otf") format("opentype"); } /* 同じフォントファミリーで太字のフォントフェイス */ @font-face { - font-family: examplefont; + font-family: MainText; src: - local(Example Font Bold), - /* 完全なフォント名 */ local(Example Font-Bold), - /* Postscript 名 */ url("examplefont.woff") format("woff"), - url("examplefont.otf") format("opentype"); + local(Gill Sans Bold) /* 完全なフォント名 */, + local(GillSans-Bold) /* postscript 名 */, + url("GillSansBold.woff") format("woff"), + url("GillSansBold.otf") format("opentype"), + url("GillSansBold.svg#MyFontBold"); /* id による SVG フォントフラグメントの参照 */ font-weight: bold; } + +/* 通常フォントフェイスの使用 */ +p { + font-family: MainText; +} + +/* Font-family は継承されるが、太字フォントが使用される */ +p.bold { + font-weight: bold; +} +``` + +### tech() と format() の値を用いたフォントリソースの指定 + +次の例は、 `tech()` と `format()` の値を使用してフォントリソースを指定する方法を示しています。 +`color-colv1` 技術と `opentype` 形式を用いるフォントを `tech()` と `format()` の値で指定しています。 +ユーザーエージェントが対応していれば色フォントが有効になり、代替フォントとして `opentype` の色なしフォントが指定されます。 + +```css +@font-face { + font-family: "Trickster"; + src: + url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1), + url("trickster-outline.otf") format(opentype); +} + +/* フォントフェイスの使用 */ +p { + font-family: "Trickster"; +} +``` + +### 古いブラウザー向けの代替の指定 + +ブラウザーは、フォントの使用可能なソースを列挙した単一の `src` 記述子を持つ `@font-face` を使用します。 +ブラウザーは読み込むことができる最初のリソースを使用しますので、アイテムは使用する環境設定の順に指定します。 + +一般的に、これはローカルファイルがリモートファイルより先に現れ、 `format()` や `tech()` の制約があるリソースは、制約を持っていないリソースより先に現れるべきであるということを意味しています（そうでなければ、制約の少ないバージョンが常に選択されることになります）。 +例を示します。 + +```css +@font-face { + font-family: "MgOpenModernaBold"; + src: + url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), + url("MgOpenModernaBold.otf") format(opentype); +} +``` + +上記の `tech()` に対応していないブラウザーは、最初の項目を無視し、 2 つ目のリソースを読み込むようにしてください。 + +ブラウザーによっては、[不正なアイテムを無視](#ブラウザーの互換性)せず、値が不正な場合は `src` 記述子全体が失敗するものがあります。 +このブラウザーに作業する場合、代替として複数の `src` 記述子を指定することができます。 +複数の `src` 記述子は逆順に試行されるので、末尾にはすべてのアイテムを含む通常の記述子を持っていることに注意してください。 + +```css +@font-face { + font-family: "MgOpenModernaBold"; + src: url("MgOpenModernaBold.otf") format(opentype); + src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental); + src: + url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), + url("MgOpenModernaBold.otf") format(opentype); +} +``` + +### ユーザーエージェントがフォントに対応しているかの調査 + +次の例は、 {{cssxref("@supports")}} ルールを使ってユーザーエージェントがフォント技術に対応しているかどうかを調べる方法を示しています。 +`@supports` 内の CSS ブロックは、ユーザーエージェントが `color-COLRv1` 技術に対応している場合に適用されます。 + +```css +@supports font-tech(color-COLRv1) { + @font-face { + font-family: "Trickster"; + src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1); + } + + .colored_text { + font-family: "Trickster"; + } +} ``` ## 仕様書 @@ -87,12 +288,13 @@ CSS のその他の URL と同様に、相対 URL を使用することができ ## 関連情報 +- {{cssxref("@font-face", "@font-face")}} +- {{cssxref("@supports", "@supports")}} - {{cssxref("@font-face/font-display", "font-display")}} - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/unicode-range", "unicode-range")}} diff --git a/files/ja/web/css/@font-face/unicode-range/index.md b/files/ja/web/css/@font-face/unicode-range/index.md index 3c2bd6637fadb7..6db6e4b8a92b53 100644 --- a/files/ja/web/css/@font-face/unicode-range/index.md +++ b/files/ja/web/css/@font-face/unicode-range/index.md @@ -1,31 +1,33 @@ --- title: unicode-range slug: Web/CSS/@font-face/unicode-range +l10n: + sourceCommit: 0326d9301650304ef67a56e88b542b160093042e --- {{CSSRef}} -**`unicode-range`** は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 +**`unicode-range`** は CSS の記述子で、 {{cssxref("@font-face")}} を用いて定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 ## 構文 ```css /* 値 */ -unicode-range: U+26; /* 単一の符号位置 */ +unicode-range: U+26; /* 単一のコードポイント */ unicode-range: U+0-7F; -unicode-range: U+0025-00FF; /* 符号位置の範囲 */ +unicode-range: U+0025-00FF; /* コードポイントの範囲 */ unicode-range: U+4??; /* ワイルドカードの範囲 */ unicode-range: U+0025-00FF, U+4??; /* 複数の値 */ ``` ### 値 -- **_単一の符号位置_** - - : 単一の Unicode 符号位置。例: `U+26` -- **_符号位置の範囲_** - - : Unicode 符号位置の範囲。例えば、 `U+0025-00FF` は、 *`U+0025` から `U+00FF` の範囲内の全文字を含む*こと意味します。 +- **_単一のコードポイント_** + - : 単一の Unicode コードポイント。例: `U+26` +- **_コードポイントの範囲_** + - : Unicode コードポイントの範囲。例えば、 `U+0025-00FF` は、 *`U+0025` から `U+00FF` の範囲内の全文字を含む*こと意味します。 - **_ワイルドカードの範囲_** - - : ワイルドカード文字を含む Unicode 符号位置の範囲。 `'?'` 文字を使用します。例えば、`U+4??` は *`U+400` から `U+4FF` の範囲の全文字を含む*ことを意味します。 + - : ワイルドカード文字を含む Unicode コードポイントの範囲。 `'?'` 文字を使用します。例えば、`U+4??` は *`U+400` から `U+4FF` の範囲の全文字を含む*ことを意味します。 ## 解説 @@ -87,7 +89,6 @@ div { - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} From 79aab4d571ae8a70ebac2b92861f14815c37658e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 00:00:57 +0900 Subject: [PATCH 156/279] =?UTF-8?q?2024/10/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@font-face/font-feature-settings/index.md | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 files/ja/web/css/@font-face/font-feature-settings/index.md diff --git a/files/ja/web/css/@font-face/font-feature-settings/index.md b/files/ja/web/css/@font-face/font-feature-settings/index.md new file mode 100644 index 00000000000000..37295193b3e429 --- /dev/null +++ b/files/ja/web/css/@font-face/font-feature-settings/index.md @@ -0,0 +1,102 @@ +--- +title: font-feature-settings +slug: Web/CSS/@font-face/font-feature-settings +l10n: + sourceCommit: 50c8e290f11b061bbf2267e1a3279f28180a5fcb +--- + +{{CSSRef}} + +**`font-feature-settings`** は CSS の記述子で、 {{cssxref("@font-face")}} アットルールで定義されたフォントに使用する初期設定を定義します。さらに、この記述子を使用して、 `@font-face` で定義されたフォントの合字、スモールキャップ、スワッシュなどの字体フォント機能を制御することができます。この記述子の値は、グローバルキーワード値を除いて {{cssxref("font-feature-settings")}} プロパティと同じです。 + +この記述子は、要素全体ではなく `@font-face` アットルールのフォントオブジェクトに機能値を設定するので、この記述子を使用してレンダリングされるのは要素内の一部の字体だけかもしれません。 + +## 構文 + +```css +/* 既定の設定を使用 */ +font-feature-settings: normal; + +/* OpenType 特性タグの値を設定 */ +font-feature-settings: "smcp"; +font-feature-settings: "smcp" on; +font-feature-settings: "swsh" 2; +``` + +### 値 + +この記述子は、キーワード `normal` または `` 値のカンマ区切りリストとして指定します。テキストをレンダリングするとき、 OpenType の `` 値のリストは、テキストレイアウトエンジンに渡されてフォント特性を有効または無効にします。 + +- `normal` + - : テキストが既定のフォント設定でレイアウトされることを示します。これが既定値です。 +- `` + + - : タグ名とオプション値からなる、空間区切りのタプルを表します。 + + タグ名は {{cssxref("<string>")}} で、常に 4 つの {{Glossary("ASCII")}} 文字からなります。タグ名の文字数が多かったり少なかったり、 `U+20` – `U+7E` コードポイント範囲外の文字を格納している場合、記述子は無効になります。 + + オプション値は正の整数か、キーワード `on` または `off` にすることができます。キーワード `on` および `off` は、それぞれ値 `1` および `0` と同義語です。値が設定されていない場合は、既定で `1` になります。論理値でない OpenType 特性 （[stylistic alternates](https://learn.microsoft.com/en-ca/typography/opentype/spec/features_pt#tag-salt) など）では、この値は選択する具体的な字体を意味し、論理値の特性の場合は、その特性のオンとオフを意味します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### @font-face アットルールを使用してすわっしゅ字体を有効化 + +この例では、タグ名 `swsh` と論理値 `1` が、 `@font-face` アットルールの `font-feature-settings` 記述子の値として使用されています。 + +#### HTML + +```html live-sample___enabling_swash_glyphs_using_the_font-face_at-rule +

    Swash is off here

    +

    Swash is on here

    +``` + +#### CSS + +```css live-sample___enabling_swash_glyphs_using_the_font-face_at-rule +@font-face { + font-family: MonteCarlo; + src: url("montecarlo-regular.woff2"); +} +@font-face { + font-family: MonteCarlo2; + src: url("montecarlo-regular.woff2"); + font-feature-settings: "swsh" 1; +} +p { + font-size: 3rem; + margin: 0.7rem 3rem; +} +.swash-off { + font-family: MonteCarlo; +} +.swash-on { + font-family: MonteCarlo2; +} +``` + +#### 結果 + +{{EmbedLiveSample("Enabling swash glyphs using the @font-face rule", 0, 230)}} + +1 行目は [MonteCarlo](https://github.com/googlefonts/monte-carlo) フォントの既定の装飾的なデザインを示し、 2 行目は既定の字体を[スワッシュ](https://learn.microsoft.com/en-ca/typography/opentype/spec/features_pt#tag-swsh)字体に置き換えています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- その他の `@font-face` 記述子: {{cssxref("@font-face/font-family", "font-family")}}, {{cssxref("@font-face/font-style", "font-style")}}, {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}, {{cssxref("@font-face/font-weight", "font-weight")}}, {{cssxref("@font-face/src", "src")}} +- 関連フォントプロパティ: {{cssxref("font-feature-settings")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variation-settings")}} From 0128882d39d339249b3bba71b908f2971abe2b24 Mon Sep 17 00:00:00 2001 From: Mario Ferrero <47794126+mariofdezzz@users.noreply.github.com> Date: Mon, 25 Nov 2024 16:43:17 +0000 Subject: [PATCH 157/279] Apply suggestion page border-radius [es] (#24758) --- files/es/web/css/border-radius/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/es/web/css/border-radius/index.md b/files/es/web/css/border-radius/index.md index f90601a47d8986..17ad7ece6303db 100644 --- a/files/es/web/css/border-radius/index.md +++ b/files/es/web/css/border-radius/index.md @@ -159,9 +159,9 @@ La propiedad `border-radius` se especifica como: - {{cssxref("<length>")}} - - : Indica el tamaño del radio del círculo o de los ejes mayor y menor de la elipse, utilizando valores de longitud. Los valores negativos no son válidos. + - : Indica el tamaño del radio del círculo o de los semiejes mayor y menor de la elipse, utilizando valores de longitud. Los valores negativos no son válidos. - {{cssxref("<percentage>")}} - - : Indica el tamaño del radio del círculo o de los ejes mayor y menor de la elipse, utilizando valores porcentuales. Los porcentajes para el eje horizontal se refieren al ancho del cuadro; los porcentajes para el eje vertical se refieren a la altura del cuadro. Los valores negativos no son válidos. + - : Indica el tamaño del radio del círculo o de los semiejes mayor y menor de la elipse, utilizando valores porcentuales. Los porcentajes para el eje horizontal se refieren al ancho del cuadro; los porcentajes para el eje vertical se refieren a la altura del cuadro. Los valores negativos no son válidos. Por ejemplo: From 0efc8a6b34e0ff406eb3110a4d93c9046265aded Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Mon, 25 Nov 2024 20:56:41 +0300 Subject: [PATCH 158/279] [ru] delete outdated `conflicting/Web/HTTP/Headers` document (#24653) [ru] delete outdated 'conflicting/Web/HTTP/Headers' document --- files/ru/_redirects.txt | 2 - files/ru/_wikihistory.json | 4 -- .../ru/conflicting/web/http/headers/index.md | 61 ------------------- .../glossary/forbidden_header_name/index.md | 1 - .../client-server_overview/index.md | 2 +- .../web/api/document/activeelement/index.md | 2 +- files/ru/web/html/attributes/index.md | 2 +- files/ru/web/html/element/form/index.md | 4 +- .../ru/web/http/content_negotiation/index.md | 8 +-- files/ru/web/http/cors/index.md | 4 -- .../web/http/headers/accept-language/index.md | 2 +- files/ru/web/http/headers/accept/index.md | 2 +- .../ru/web/http/headers/content-type/index.md | 2 +- files/ru/web/http/headers/index.md | 20 ------ files/ru/web/http/methods/options/index.md | 1 - files/ru/web/http/status/406/index.md | 2 - 16 files changed, 9 insertions(+), 110 deletions(-) delete mode 100644 files/ru/conflicting/web/http/headers/index.md diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 855c146c3808b1..518769beeb758c 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -693,12 +693,10 @@ /ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types /ru/docs/Web/HTTP/MIME_types/Common_types /ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Полный_список_типов_MIME /ru/docs/Web/HTTP/MIME_types/Common_types /ru/docs/Web/HTTP/Feature_Policy /ru/docs/Web/HTTP/Permissions_Policy -/ru/docs/Web/HTTP/Headers/Accept-Charset /ru/docs/conflicting/Web/HTTP/Headers /ru/docs/Web/HTTP/Response_codes /ru/docs/Web/HTTP/Status /ru/docs/Web/HTTP/Авторизация /ru/docs/Web/HTTP/Authentication /ru/docs/Web/HTTP/Заголовки /ru/docs/Web/HTTP/Headers /ru/docs/Web/HTTP/Заголовки/Accept /ru/docs/Web/HTTP/Headers/Accept -/ru/docs/Web/HTTP/Заголовки/Accept-Charset /ru/docs/conflicting/Web/HTTP/Headers /ru/docs/Web/HTTP/Заголовки/Accept-Language /ru/docs/Web/HTTP/Headers/Accept-Language /ru/docs/Web/HTTP/Заголовки/Accept-Patch /ru/docs/Web/HTTP/Headers/Accept-Patch /ru/docs/Web/HTTP/Заголовки/Accept-Ranges /ru/docs/Web/HTTP/Headers/Accept-Ranges diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index f3c2ebdd1816e7..edefd4c6b4d92b 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -15937,9 +15937,5 @@ "conflicting/Web/HTTP": { "modified": "2020-07-14T17:05:38.093Z", "contributors": ["vladimir.i.kuropatka", "enonotugh", "cissoid"] - }, - "conflicting/Web/HTTP/Headers": { - "modified": "2020-10-15T22:14:29.517Z", - "contributors": ["Reddok", "J4CKVVH173"] } } diff --git a/files/ru/conflicting/web/http/headers/index.md b/files/ru/conflicting/web/http/headers/index.md deleted file mode 100644 index 11cc2785e1999b..00000000000000 --- a/files/ru/conflicting/web/http/headers/index.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Accept-Charset -slug: conflicting/Web/HTTP/Headers -original_slug: Web/HTTP/Headers/Accept-Charset ---- - -{{HTTPSidebar}} - -Заголовок **`Accept-Charset`** запроса HTTP сообщает какую кодировку клиент может понять. Используя [согласование контента](/ru/docs/Web/HTTP/Content_negotiation), сервер выбирает один из предложенных вариантов, использует его и информирует клиент о своём выборе в {{HTTPHeader("Content-Type")}} ответном заголовке. Браузер обычно не устанавливает этот заголовок, т.к. значение по умолчанию для каждого контентного типа обычно корректный и передача его позволит с большей лёгкостью получить цифровой отпечаток. - -Если сервер не может обслужить никакую из предоставленных кодировок, теоретически он может вернуть {{HTTPStatus("406")}} (Not Acceptable) код ошибки. Но, для более лучшего пользовательского опыта, это редко делается и более частый способ в этом случае, это просто игнорирование заголовка `Accept-Charset`. - -> [!NOTE] -> В более ранних версиях HTTP/1.1, кодировка по умолчанию (`ISO-8859-1`) была определена. Теперь это не так и каждый контентый тип может иметь своё собственное дефолтное значение. - - - - - - - - - - - - -
    Тип заголовка{{Glossary("Request header")}}
    {{Glossary("Forbidden header name")}}Да
    - -## Синтаксис - -``` -Accept-Charset: <кодировка> - -// Множественные типы, придающие вес с {{glossary("quality values", "quality value")}} синтаксисом: -Accept-Charset: utf-8, iso-8859-1;q=0.5 -``` - -## Директивы - -- `` - - : Кодировка типа `utf-8` или `iso-8859-15.` -- `*` - - : Любая кодировка не указанная нигде в заголовке; `'*'` используется как групповой символ. -- `;q=` (q-factor weighting) - - : Любое значение помещается в порядке предпочтения, выраженного с использованием относительного значения качества, называемого _весом_. - -## Примеры - -``` -Accept-Charset: iso-8859-1 - -Accept-Charset: utf-8, iso-8859-1;q=0.5 - -Accept-Charset: utf-8, iso-8859-1;q=0.5, *;q=0.1 -``` - -Смотрите также - -- HTTP [content negotiation](/ru/docs/Web/HTTP/Content_negotiation) -- Header with the result of the content negotiation: {{HTTPHeader("Content-Type")}} -- Other similar headers: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}} diff --git a/files/ru/glossary/forbidden_header_name/index.md b/files/ru/glossary/forbidden_header_name/index.md index ea45f355e5ac36..ec8809bc4be337 100644 --- a/files/ru/glossary/forbidden_header_name/index.md +++ b/files/ru/glossary/forbidden_header_name/index.md @@ -11,7 +11,6 @@ slug: Glossary/Forbidden_header_name Запрещённые имена заголовков начинаются с `Proxy-` или `Sec-`, или содержат следующие имена: -- `Accept-Charset` - `Accept-Encoding` - `Access-Control-Request-Headers` - `Access-Control-Request-Method` diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.md b/files/ru/learn/server-side/first_steps/client-server_overview/index.md index 5f2cccda4a091d..5318b454ae0e48 100644 --- a/files/ru/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.md @@ -81,7 +81,7 @@ Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSC - Мой браузер (`User-Agent`) — Mozilla Firefox (`Mozilla/5.0`). - Он может принимать информацию, упакованную в gzip (`Accept-Encoding: gzip`). -- Он может принимать указанные кодировки (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) и языков (`Accept-Language: de,en;q=0.7,en-us;q=0.3`). +- Он может принимать указанные языки (`Accept-Language: de,en;q=0.7,en-us;q=0.3`). - Строка `Referer` идентифицирует адрес веб-страницы, содержащей ссылку на этот ресурс (то есть источник оригинального запроса, `https://developer.mozilla.org/en-US/`). HTTP-запрос может также содержать body, но в данном случае этого нет. diff --git a/files/ru/web/api/document/activeelement/index.md b/files/ru/web/api/document/activeelement/index.md index da4be57fc8db41..298eea705ac935 100644 --- a/files/ru/web/api/document/activeelement/index.md +++ b/files/ru/web/api/document/activeelement/index.md @@ -61,7 +61,7 @@ var curElement = document.activeElement;
    Выделите текст в одном из текстовых полей ниже:
    -
    + + + + +``` + +```css hidden live-sample___basicUI +body { + font-family: sans-serif; + font-size: 1.25rem; +} +[contenteditable] { + cursor: copy; + caret-color: magenta; + border: 1px solid #ccc; +} +:focus { + outline: dashed magenta 3px; + outline-offset: 10px; +} +* { + accent-color: magenta; +} +div, +fieldset { + margin: 20px; +} +textarea:nth-of-type(1) { + cursor: wait; +} +textarea:nth-of-type(2) { + resize: none; +} +textarea:nth-of-type(3) { + pointer-events: none; +} +``` + +{{EmbedLiveSample("basicUI", "", "300px")}} CSS の {{CSSxRef("outline")}} と {{CSSxRef("outline-offset")}} プロパティは、どの要素が現在フォーカスを持っているかをユーザーにフィードバックするために使用されました。 {{CSSxRef("accent-color")}} は、すべてのフォームコントロールにテーマ色を提供します。テキスト編集時に現れるキャレットは、 {{CSSxRef("caret-color")}} プロパティのおかげで同じ色になっています。これらはすべて UI の改善と考えることができます。 いくつかの機能はユーザビリティを損ないます。 {{CSSxRef("cursor")}} プロパティは、ブラウザー既定値からカーソルを変更するために使用され、混乱を招きます。 {{CSSxRef("resize")}} プロパティは 2 つ目の {{HTMLElement("textarea")}} がリサイズ可能になるのを防ぎ、 {{CSSxRef("pointer-events")}} プロパティは 3 つ目の ` +```html live-sample___disabling_resizability_of_text_areas + ``` #### CSS -```css +```css live-sample___disabling_resizability_of_text_areas textarea { - resize: none; /* Disables resizability */ + resize: none; /* リサイズを無効化 */ } ``` #### 結果 -{{EmbedLiveSample("テキストエリアの寸法の変更を無効化","200","100")}} +{{EmbedLiveSample("Disabling_resizability_of_text_areas","200","100")}} ### 任意の要素に対する resize の使用 @@ -90,18 +90,17 @@ textarea { #### HTML -```html +```html-nolint live-sample___using_resize_with_arbitrary_elements

    - This paragraph is resizable in all directions, because the CSS `resize` - property is set to `both` on this element. + この要素では CSS の `resize` プロパティが `both` に設定されているため、この段落はすべてリサイズ可能です。

    ``` #### CSS -```css +```css live-sample___using_resize_with_arbitrary_elements .resizable { resize: both; overflow: scroll; @@ -121,7 +120,7 @@ p { #### 結果 -{{EmbedLiveSample("任意の要素に対する resize の使用","450","450")}} +{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}} ## 仕様書 From 3c03431651b67260cf9c1f4f40e66fd917da4bc4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 27 Nov 2024 22:34:16 +0900 Subject: [PATCH 208/279] =?UTF-8?q?2024/07/18=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#24714)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/07/18 時点の英語版に基づき更新 * Update index.md --- files/ja/web/css/user-select/index.md | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/files/ja/web/css/user-select/index.md b/files/ja/web/css/user-select/index.md index d4eb584e8f3cf4..092fef1a9fe9d3 100644 --- a/files/ja/web/css/user-select/index.md +++ b/files/ja/web/css/user-select/index.md @@ -2,7 +2,7 @@ title: user-select slug: Web/CSS/user-select l10n: - sourceCommit: bb6092c4230b69c2eceae6910af68c73955cae1c + sourceCommit: 6732005dce0503eebc227e4fb3cc1c72f21d9d81 --- {{CSSRef}} @@ -18,7 +18,6 @@ l10n: user-select: none; user-select: auto; user-select: text; -user-select: contain; user-select: all; /* グローバル値 */ @@ -40,21 +39,16 @@ user-select: unset; - : `auto` の使用値は下記のように決められます。 - `::before` と `::after` の擬似要素では、使用値は `none` になります。 - - 編集可能な要素の場合、使用値は `contain` になります。 - - 上記以外で、親要素の `user-select` の使用値が `all` の場合、対象要素の使用値も `all` になります。 - - 上記以外で、親要素の `user-select` の使用値が `none` の場合、対象要素の使用値も `none` になります。 + - この要素の親要素の `user-select` の使用値が `none` の場合、使用値は `none` になります。 + - 上記以外で、親要素の `user-select` の使用値が `all` の場合、使用値は `all` になります。 - 上記以外の場合、使用値は `text` になります。 - `text` - : ユーザーはテキストを範囲選択できます。 - `all` - : この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。 -- `contain` - - : 要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。 - -> [!NOTE] -> CSS UI 4 では、 [`user-select: element` が `contain` に名称が変わります。](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05) +> **メモ:** [CSS 基本ユーザーインターフェイス](/ja/docs/Web/CSS/CSS_basic_user_interface)モジュールでは、 `contain` 値を `user-select` プロパティに定義して、要素の境界で囲まれた要素内で選択を開始できるようにしていますが、これはどのブラウザーも対応していません。 ## 公式定義 @@ -102,6 +96,5 @@ user-select: unset; ## 関連情報 -- [`user-select: contain` のポリフィル](https://github.com/github/user-select-contain-polyfill) - {{Cssxref("::selection")}} 擬似要素 - JavaScript の {{domxref("Selection")}} オブジェクト From 78468a3909569dda1c82d5010f8cde4735546477 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 23 Nov 2024 22:40:52 +0900 Subject: [PATCH 209/279] =?UTF-8?q?2024/10/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/svg/attribute/cursor/index.md | 67 ++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 files/ja/web/svg/attribute/cursor/index.md diff --git a/files/ja/web/svg/attribute/cursor/index.md b/files/ja/web/svg/attribute/cursor/index.md new file mode 100644 index 00000000000000..66d2d6c9f0c56d --- /dev/null +++ b/files/ja/web/svg/attribute/cursor/index.md @@ -0,0 +1,67 @@ +--- +title: cursor +slug: Web/SVG/Attribute/cursor +l10n: + sourceCommit: bea339d321513fc6d66d95c8f0305b9387fa57bb +--- + +{{SVGRef}} + +[SVG 属性リファレンスホーム](/ja/docs/Web/SVG/Attribute) + +`cursor` 属性は、マウスポインタが要素の上にあるときに表示されるマウスカーソルを指定します。 + +この属性は CSS の {{cssxref("cursor")}} プロパティと全く同じ動作をしますが、 {{ SVGElement("cursor") }} 要素に対応しているブラウザーであれば [\](/ja/docs/Web/SVG/Content_type#funciri) 記法を使用して使用することができます。 + +プレゼンテーション属性として、 CSS スタイルシート内で直接プロパティとして使用することもできます。詳しくは CSS の {{cssxref("cursor")}} を参照してください。 + +## 使用コンテキスト + + + + + + + + + + + + + + + + + + + + +
    カテゴリープレゼンテーション属性
    値 + [[<FuncIRI>,]* [ auto | crosshair | default | pointer | move | + e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | + s-resize | w-resize| text | wait | help ]] | inherit +
    アニメーション可
    標準化文書 + SVG 1.1 (2nd Edition) +
    + +## 要素 + +以下の要素で `cursor` 属性を使用することができます。 + +- [コンテナー要素](/ja/docs/Web/SVG/Element#コンテナー要素) +- [グラフィック要素](/ja/docs/Web/SVG/Element#グラフィック要素) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("cursor")}} From 03ab38436ecec5824d1bc8ee6a6bc3e528cdf6ab Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 23 Nov 2024 23:02:03 +0900 Subject: [PATCH 210/279] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/svg/element/cursor/index.md | 37 ++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 files/ja/web/svg/element/cursor/index.md diff --git a/files/ja/web/svg/element/cursor/index.md b/files/ja/web/svg/element/cursor/index.md new file mode 100644 index 00000000000000..a1bed845ac649b --- /dev/null +++ b/files/ja/web/svg/element/cursor/index.md @@ -0,0 +1,37 @@ +--- +title: +slug: Web/SVG/Element/cursor +l10n: + sourceCommit: 2e5fc06de139c56873a20ec4bc3bf5600ea3cbef +--- + +{{SVGRef}}{{Deprecated_Header}} + +> [!NOTE] +> この要素の代わりに CSS の {{cssxref("cursor")}} プロパティを使用してください。 + +**``** は [SVG](/ja/docs/Web/SVG) の要素で、プラットフォームに依存しないカスタムカーソルを定義するために使用することができます。プラットフォームに依存しないカスタムカーソルを定義するために推奨される手法は、 PNG 画像を作成した上で、 PNG 画像を参照する `cursor` 要素を定義し、画像内でポインター位置（すなわち、ホットスポット）である正確な位置を特定するすることです。 + +PNG 形式が推奨されるのは、アルファチャンネルによって透過マスクを定義する機能に対応しているからです。別の画像形式を使用する場合、この形式は透過マスクを定義することに対応している必要があります（明示的にアルファチャンネルを提供するか、具体的なピクセル色を使用して透過率を示すかの 2 つの選択肢があります）。透過マスクが指定できる場合、マスクはカーソルの形状を定義します。そうでない場合、カーソルは不透明の長方形になります。通常、他のピクセル情報（例えば、R、G、B チャンネル）は、カーソルのマスクされていない部分の色を定義します。カーソルがほとんどの背景で見えるように、カーソルは通常 2 色以上を含むことに注意してください。 + +## 使用コンテキスト + +{{SVGInfo}} + +## 属性 + +- {{SVGAttr("x")}} {{Deprecated_Inline}} +- {{SVGAttr("y")}} {{Deprecated_Inline}} +- {{SVGAttr("xlink:href")}} {{deprecated_inline}} + +## DOM インターフェイス + +この要素は {{DOMxRef("SVGCursorElement")}} インターフェイスを実装しています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} From 1bbe1d93975d1823f5e9e68f867eb219fa95fd89 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 23 Nov 2024 23:07:18 +0900 Subject: [PATCH 211/279] =?UTF-8?q?2023/02/19=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/svgcursorelement/index.md | 37 ++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 files/ja/web/api/svgcursorelement/index.md diff --git a/files/ja/web/api/svgcursorelement/index.md b/files/ja/web/api/svgcursorelement/index.md new file mode 100644 index 00000000000000..4da23494a028b5 --- /dev/null +++ b/files/ja/web/api/svgcursorelement/index.md @@ -0,0 +1,37 @@ +--- +title: SVGCursorElement +slug: Web/API/SVGCursorElement +l10n: + sourceCommit: 226ac33eb70ed5411dd2d68bd602c80cafd780b6 +--- + +{{APIRef("SVG")}}{{Deprecated_Header}} + +**`SVGCursorElement`** SVGCursorElementインターフェイスは、 {{ SVGElement("cursor") }} 要素のプロパティへのアクセスや、それらを操作するメソッドを提供します。 + +{{InheritanceDiagram}} + +## インスタンスプロパティ + +_このインターフェイスには、親である {{domxref("SVGElement")}} から継承したプロパティもあります。_ + +- {{domxref("SVGCursorElement.x")}} {{ReadOnlyInline}} + - : {{domxref("SVGAnimatedLength")}} で、この {{SVGElement("cursor")}} 要素の {{SVGAttr("x")}} 属性に対応します。 +- {{domxref("SVGCursorElement.y")}} {{ReadOnlyInline}} + - : {{domxref("SVGAnimatedLength")}} で、この {{SVGElement("cursor")}} 要素の {{SVGAttr("y")}} 属性に対応します。 + +## インスタンスメソッド + +_このインターフェイスは、独自のメソッドを実装していませんが、親である {{domxref("SVGElement")}} から継承したメソッドがあります。_ + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{SVGElement("cursor")}} From c82994732cca2451926f09358e4f69595d8c0157 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 23 Nov 2024 23:12:23 +0900 Subject: [PATCH 212/279] =?UTF-8?q?2024/10/01=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/caretposition/index.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/files/ja/web/api/caretposition/index.md b/files/ja/web/api/caretposition/index.md index a625d4e8a76d66..6eb7dbfaa9b6d3 100644 --- a/files/ja/web/api/caretposition/index.md +++ b/files/ja/web/api/caretposition/index.md @@ -2,25 +2,27 @@ title: CaretPosition slug: Web/API/CaretPosition l10n: - sourceCommit: e811fc31b67e145c5882e8e3f128d1938c627a51 + sourceCommit: ae524b0c327f8aaea51cc6a5c59e0301bde646c0 --- -{{SeeCompatTable}} {{ APIRef("CSSOM") }} +{{ APIRef("CSSOM") }} -`CaretPosition` インターフェイスは、テキスト挿入ポイントのインジケーターであるキャレット位置を表します。 {{domxref("Document.caretPositionFromPoint()")}} メソッドを使用して `CaretPosition` を取得できます。 +`CaretPosition` インターフェイスは、テキスト挿入ポイントのインジケーターであるキャレット位置を表します。 +`CaretPosition` は {{domxref("Document.caretPositionFromPoint()")}} メソッドを使用して取得できます。 ## インスタンスプロパティ _このインターフェイスはプロパティを継承していません。_ -- {{domxref("CaretPosition.offsetNode")}} {{ReadOnlyInline}} {{Experimental_Inline}} +- {{domxref("CaretPosition.offsetNode")}} {{ReadOnlyInline}} - : キャレットの位置で見つかったノードを含む {{domxref("Node")}} を返します。 -- {{domxref("CaretPosition.offset")}} {{ReadOnlyInline}} {{Experimental_Inline}} - - : キャレット位置ノードの文字オフセットを表す `long` を返します。 +- {{domxref("CaretPosition.offset")}} {{ReadOnlyInline}} + - : キャレット位置ノード内の選択位置のオフセットを表す `long` を返します。 + これは、テキストノードでは文字のオフセット、要素ノードでは選択された子ノードのインデックスになります。 ## インスタンスメソッド -- {{domxref("CaretPosition.getClientRect")}} {{Experimental_Inline}} +- {{domxref("CaretPosition.getClientRect")}} - : キャレット範囲のクライアント長方形を返します。 ## 仕様書 From 863be730f0457299713b3995517d6c4b791a0f67 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 23 Nov 2024 23:30:11 +0900 Subject: [PATCH 213/279] =?UTF-8?q?2024/11/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/css_flexible_box_layout/index.md | 105 +++++++++++++----- 1 file changed, 77 insertions(+), 28 deletions(-) diff --git a/files/ja/web/css/css_flexible_box_layout/index.md b/files/ja/web/css/css_flexible_box_layout/index.md index fc0d60d1c8f5e5..421cb9e70e5d58 100644 --- a/files/ja/web/css/css_flexible_box_layout/index.md +++ b/files/ja/web/css/css_flexible_box_layout/index.md @@ -2,23 +2,53 @@ title: CSS フレックスボックスレイアウト slug: Web/CSS/CSS_flexible_box_layout l10n: - sourceCommit: b9db4e51b6f1cddba3af708643fc9804849d61c2 + sourceCommit: 8a7e911652fcb4a61cc95f458d53f39ad08c0946 --- {{CSSRef}} -**CSS フレックスボックスレイアウト** (CSS Flexible Box Layout) は、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。 +**CSS フレックスボックスレイアウト** (CSS flexible box layout) は、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。 -## 基本的な例 +## フレックスボックスレイアウトの実際 以下の例では、コンテナーに `display: flex` に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 `justify-content` の値は、主軸上に均等に配置するため、 `space-between` に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 `align-items` の既定値は `stretch` なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。 -{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 600)}} +```html live-sample___simple-example +
    +
    One
    +
    Two
    +
    Three
    には追加の
    テキストが
    あります
    +
    +``` + +```css live-sample___simple-example +body { + font-family: sans-serif; +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + justify-content: space-between; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 1em; +} +``` + +{{EmbedLiveSample("simple-example")}} ## リファレンス ### プロパティ +- {{cssxref("align-content")}} +- {{cssxref("align-items")}} +- {{cssxref("align-self")}} - {{cssxref("flex")}} - {{cssxref("flex-basis")}} - {{cssxref("flex-direction")}} @@ -26,30 +56,25 @@ l10n: - {{cssxref("flex-grow")}} - {{cssxref("flex-shrink")}} - {{cssxref("flex-wrap")}} -- {{cssxref("order")}} - -### 配置プロパティ +- {{cssxref("justify-content")}} -`align-content`, `align-self`, `align-items`, `justify-content` の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置 (Box Alignment) の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。 +### 用語集の用語 -- {{cssxref("justify-content")}} -- {{cssxref("align-content")}} -- {{cssxref("align-items")}} -- {{cssxref("align-self")}} -- {{cssxref("place-content")}} -- {{cssxref("place-items")}} -- {{cssxref("row-gap")}} -- {{cssxref("column-gap")}} -- {{cssxref("gap")}} +- {{Glossary("Flexbox","フレックスボックス")}} +- {{Glossary("Flex container","フレックスコンテナー")}} +- {{Glossary("Flex item","フレックスアイテム")}} +- {{Glossary("Main axis","主軸")}} +- {{Glossary("Cross axis","交差軸")}} +- {{Glossary("Flex")}} ## ガイド - [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - - : フレックスボックスの機能の概要 + - : フレックスボックスの機能の概要です。 - [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods) - - : フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか + - : フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているかです。 - [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) - - : ボックス配置プロパティがどのようにフレックスボックスに働くか + - : ボックス配置プロパティがどのようにフレックスボックスに働くかです。 - [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) - : アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。 - [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) @@ -58,6 +83,37 @@ l10n: - : 複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。 - [フレックスボックスの典型的な用途](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) - : 典型的なフレックスボックスの用途の一般的なデザインパターン。 +- [CSS レイアウト: フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox) + - : フレックスボックスレイアウトを使用してウェブレイアウトを作成する方法を学びます。 +- [フレックスボックスのボックス配置](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) + - : [CSS ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)の詳細機能のうち、フレックスボックスに特有のものです。 + +## 関連概念 + +[CSS 表示方法](/ja/docs/Web/CSS/CSS_display)モジュール + +- {{cssxref("display")}} +- {{cssxref("order")}} + +[CSS ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)モジュール + +- {{cssxref("align-content")}} +- {{cssxref("align-items")}} +- {{cssxref("align-self")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} +- {{cssxref("justify-items")}} +- {{cssxref("place-content")}} +- {{cssxref("place-items")}} +- {{cssxref("row-gap")}} + +[CSS ボックスサイズ指定](/ja/docs/Web/CSS/CSS_box_sizing)モジュール + +- {{cssxref("aspect-ratio")}} +- {{cssxref("max-content")}} 値 +- {{cssxref("min-content")}} 値 +- {{cssxref("fit-content")}} 値 +- {{glossary("intrinsic size","内在サイズ")}}（用語） ## 仕様書 @@ -65,12 +121,5 @@ l10n: ## 関連情報 -- [CSS 表示](/ja/docs/Web/CSS/CSS_display)モジュール +- [CSS 書字方向](/ja/docs/Web/CSS/CSS_writing_modes)モジュール - [CSS display の複数キーワード構文の使用](/ja/docs/Web/CSS/display/multi-keyword_syntax_of_display) -- 用語集の項目: - - {{Glossary("Flexbox", "フレックスボックス", 1)}} - - {{Glossary("Flex Container", "フレックスコンテナー", 1)}} - - {{Glossary("Flex Item", "フレックスアイテム", 1)}} - - {{Glossary("Main Axis", "主軸", 1)}} - - {{Glossary("Cross Axis", "交差軸", 1)}} - - {{Glossary("Flex", "フレックス", 1)}} From 3015a72ae661380b2b1dbce499eb4c954c36b356 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 01:30:04 +0900 Subject: [PATCH 214/279] =?UTF-8?q?2024/11/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basic_concepts_of_flexbox/basics1.png | Bin 1984 -> 0 bytes .../basic_concepts_of_flexbox/basics1.svg | 26 ++ .../basic_concepts_of_flexbox/basics2.png | Bin 2486 -> 0 bytes .../basic_concepts_of_flexbox/basics2.svg | 28 ++ .../basic_concepts_of_flexbox/basics3.png | Bin 3251 -> 0 bytes .../basic_concepts_of_flexbox/basics3.svg | 27 ++ .../basic_concepts_of_flexbox/basics4.png | Bin 3240 -> 0 bytes .../basic_concepts_of_flexbox/basics4.svg | 26 ++ .../basic_concepts_of_flexbox/basics5.png | Bin 3503 -> 0 bytes .../basic_concepts_of_flexbox/basics5.svg | 30 ++ .../basic_concepts_of_flexbox/basics6.png | Bin 3331 -> 0 bytes .../basic_concepts_of_flexbox/basics6.svg | 29 ++ .../basic_concepts_of_flexbox/basics7.png | Bin 3862 -> 0 bytes .../basic_concepts_of_flexbox/basics7.svg | 28 ++ .../basic_concepts_of_flexbox/index.md | 345 ++++++++++++++---- 15 files changed, 478 insertions(+), 61 deletions(-) delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.svg delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.svg delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.svg delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.svg delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.svg delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.svg delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.svg diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png deleted file mode 100644 index d5a5f920a496986f4793eeffe076dc551638359b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1984 zcmV;x2S50UP)NF)-8L?V&?$5N`|W6cERVcKJf)SBnDBx9}xx*29opn4Ng zc-Ce?YmRLe7tN8}HH+B|$(nC~Tj)1&D*46`C(L;$J}6CpSQY1DPe-RvGX}M)yR14A zg*@AP5=vozEO07A#X_E;IKmQRjtRQwF~{=^-P$ZZVfT~XvSs^mWSch4FE}EFM%XP5 zG3}3yDDhbE9Ucpu#ui%#S3qH=YgwLcTZt)fq{l;BlofG-(I`yW-Ws2B?V+jhp|3nb zn~Emg%(YbA)O3DvZN)2En_jJj9SzX$=)9kfk)fN5Ewrf~d3Dtj#8Pgkhvr4#_X%^jC&r8WoHfvqaSXJa~xlVU9NQAjj&dmqJ%eo_ei z6oOb-wV&BW-4W%S7tB3hP_XyByKKu^*R0LmCXWT|=M1?d>*1tqdsecfX2nomz<$gsrq;FaN{Lu8sFqIXlZ-6_;#`DI?&3s^bd^ z9ulZRtyo;^r{J}EDeMFk++GT3TWvPqY&ybL3Mk|sfXa++Ebx_5A4heB16(OfEl^F> zwl;*xG48#{h^7g*RelR@^SNTjb&(M``~NZmZEv&fJPX#>NER}zmsD-Xmjo9E(Q1vm&SXH{Z$tQ zBWJNk`zZ*U%6Q2XO9Th9#lysPrZ9~=`-MA5fd_8V!4BR*k1XvtzCbH3DYpz*tP0z0 zZmOA@2*KJhK7ikk8OmbuE;oG7|I|$J!sZ%I3vIB-y*qQ9Vh?yQyi>CI-pUHfS^+b{ z@e;?vA(XNxD#1l8W{X83OsiPT>We5y6w(gHmqJ7Vm01du z5t*KNpNImAGD4D|kSoSjVe)R{r%;Zo!sOk?F>#_GS%?BrfDC7ZjD#p;l>%jiL;;8b zQRqF$A_W-_)jg{)GbjF2b*Q6LJv2a)6YvNC8~(G=z?aox(1K4YRFBZ(N-7rg1{sRR_x7;w1~ z&u#W+fFlE$r$phb=x`)Hg$vmDZ7jDrBl=pYX2fi#$4{{-ToHcraohspa497U5ILQN zPU9P~DMb54xy^NaB7z}B3g-cCls^V|JwAo2UvcN7G2Bi7D4%=?QOiq;8F59-BYZZ4 zDR7UO@EJw9ofV0965yAKQIL^@SH}yV@;4&^g;)5;_0Yl)-hL{pf#DH`L)LZvL~ z-KC-3_!9Bj%Sxg1kMt)%VK!|F(HZeIZ%}R|sSBs#QkY4Bf{Y||ItK0+%1J29m*dxk z(3L2C3Z46tgaR)53klYUneRTYOpL;C8S!4Q?kAyue&-YH7d{AFQ=kA*(+P$&o1{7( z2_6h8!@Hdq`Lhu5=$0adS&^$Jlk6AZD*DBJj`#>4$On9zF-{7R8G(26GJemJfPzq* zXUdt5Pw2H$T_dh{yTqlS1RIU{IBr*hOHJ_mg&`@Nz?P#6F{gtRaHj#U#)21orK40P zM`76K2wt+3Q}2i0pn(+7GyFTmXt!?=LKyFfP=II(<xU^u+r_ z6i}2Al86E-vlJ*JGClD=5e3w~j7b0gvq + + + + + + a + + + b + + + c + + + + + + + + + flex-direction: row での主軸 + + + + \ No newline at end of file diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png deleted file mode 100644 index 73793d400baff48efd0368c3aca615903253b414..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2486 zcmZ{mc~Fz*7RCdJEMh=0nm~jCEtH*)ErEd609Do~AW;M)i6!iyh=yG@5lD{OS;$GLq!fGXbQ}a? zrnen3lt+gzNyQ!HBc4Yfkb3&A4T8M1wm9zL>$0`ARa8_I78WKeE6ZduQ7F{#`*j=+ z=XPWE_3PKcW&GHxxzdj1{AOY2_$sqsbo|rK?fy!x&PRMHV~dlXk(zJzEBt8%(nlOZ z%UY5zk|SXSfkH5!U-nYI27}5xGPyfy4@}#;y6Y#5Ut!_i@+m9B4`#;uPMjpJX5FZ6 z!OlDC#OHp84b=Va8Vvj4YSJ<~OlZ%~?H3^i9Mf3(ZJ(NZ=`+1$B?6TzS!l#knv8-j zN4$q5xdxdY_(sVDt;q83JUNSG#iAnZwRz>~ykK#T^G#GhDe$Jj-Ec@_oh6c}fK@x8*`ue_apt@Lo1MB~ z1`wSKJgO&CBh;O|jfr0UaGV*h6CDkf>n}+kMCnObqDPntLn9Mj_1mfNYmKCl2Y|i_>r#qs5G$R>cr|y^U?VZ+&?cTDq3l>R7(92hi^^z4A;GC8Gr+ zHB6-INnpZSInE1$L$m1Y=3dJ{G4eFNIN&^|ctPtuXZZz-68At$m9Y_B1tYaYW_`u! z{N#+g)1K4~BTZYptr7(`X2iX}+f7K8pRP}Lia=fW7s`z2h ztJXsDr^C=dHq}m#V`#k-Pdh>#K4-$hQoATR|5ScG*E`vy=jn)rwg~Jrfy#jZ3B`S& zGQpD{+(`*iFyn|7%mz;0-=254{APMSu$ewESp0d-_T>7I0=%bOEd^=46Y#oKKcWom z2eYa0s@L!Uo2vzyQyZ(?gE`dG;ayRXOW-eD60n~H=v(%yyJJFCd^o2gcPzRV2K2>v zsq7o`k^4NAL)^e~>{x%@=DeAmvJ}+9Gy{4YBU~zF)-`bic^9;WtMzk4$GDPZze2cU z=z)ykx_FI5ffMgIo!iRl@DH2Z6||Fb0+!;-)1ahmeinm$7E`-kUU#Y(Q(=jcoHmzu z-5>m8m3W`oMi(@vEQX)oL4vZg;jguHic%aRaKAxLaPv%v?7Y!6wFNupKx4PWPP{UA zMF1p(AjMUzUx2$8XoGRl8Phzu>}KlnXaXW_DJ|rQ;_nZN1i*k^AMx2a8lLfi-Et>U zCMTWIEpKuu{1DW=_Be1aq}x2oW}V7CDp|Cc7gUxv+ogfu=6s|Qih%O5$A2_7s2nvm z|Mt}>&?2Av{Q%96pvW2ZsT&c)s6WlI?}!|rjuTeV3(S3+bHS*s1aQAk950i07Q2#` z3T5dZI>TPbGZ{0;W!cxR-JL^i+Ed&<(`bFoTg9?L<2G6${v67bCB4=US#SF4R8g#I zHH;#BZIq^;Xd2Wi8ZtSvNkO^@@j~U#2-;0(Z%c|8@1jSBI;$ z4s5~{C4z81VKkR&Gt=GW;i;|xnm`BM=z_Nd!@cOD+Xc4Jyr<5HG{-vA;dZa0^EL05 zCDqK(M95j%TUd+ph+Ny4;y$tG&3WTCh6U$RAfek`S#zw}Uv=*fk>zJZhj8343h<;+ z`_26HyGp;PtLxOo<^$DDwy6iF%EEf%`^FKYZ#@r;QmdE= zC)Q$AvXf$9y*;rT7|C#3aeXp+6=9{zDVX^g_A>`6)TS?pw22<%$XNERUl_+KL>1|a z4{w*Q0ttecWOR5`%da6SUvuUbBM9=-LUE8)cWQQ6f64vLyi?waze`qyN+;7#B*YZd z`Z?Qml9BFD(Efvi2BsUe7kZ(-B{K|>JzGQ>EWf`AwiiBrcZ2z^EHUmGzQ$KXC7u>v1;8(T8Hxw;HfNS-}&+7^xz)+Zc~O_s^lr#_8v*-Hg$V5tWiX6pQr@r0V2^zg3NZ4G(?av?a`FGj3bDj(2ar4~k z;ib&SvE0##xz+VIBp|i9V5CduAkIfpMAjO-ivj0BrA z#%ASeVDlP%V7%}C1`uf2aANr?cpMGYK2l-I0T5rbZ))l6ot0Y5L$dn6IkU~0?dY+g zZ<|gHOo}2Yj=X|PoowQa6s#_jmQ1s(7x5D@$gY2W+*9a|JF_bN^D2T_Q1LJ;+j2FLQU2QJr)IXW*e+!z^$*(@Ly z9y7KD!$-2QW~5_JMf`ac=t?`9AoT~cqwaYN$PUH`xSnv=#_osKzLA5S-+<%M2)P^) zS*aR!;{q5}`Ak)x#E9V0CE8y;@iB*_AOuB{kL<5k-Ebu$g=Z1cfD0+in9hKUxM5 + + + + + + a + + + b + + + c + + + + + + + + + + + flex-direction: column + + での主軸 + + \ No newline at end of file diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png deleted file mode 100644 index 69f19c1a198cd7d6044263c43d12e9338fef37a8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3251 zcmZ{nc|6oxAIC>olASEKv1HFqj0jn>3^kS+*(ol%2H7K9QAA~FGmIwL#@N$bWQjy% z`6101gfwF&l2l_G!+559@AG;+ujhF^uh;jS^ZlH2zTfXTf1UTqc6PKAIDGUl2m}(a zhg!oypaW>OpK|CRyNB@W&$9=fSbLZa50#IDLtc6|{Cp~ViZ>GK83O`oEBEMb-)P*Wb?u0I!B=R2QswPCSXn~c4Vj*fzYg4oztO-)TQnap0qU@${NLrFPhWR>XEuO^tuH^B7ctZyo4e1(eqL+(GD+KR zBhayLzq{64lLdkJu=duLt_d@%n3aICP6-Rkn>o?O7T*uto;lTW;S!d@?4BEReC16% zaJa9XB%~pHPPevAqzo&EmMj{UunRmXq8sbFae6{x?{x0C9=mL;H(^+1-iEA z$zMJ!W0P7=08%g>DcGp|Pewfm27@MDE`NZIzYPl^z!7`g+Lj$!3hDM+5^-$$`TrlPJ@1lyV3 zMZ1=s6b8HS!tpPsvK;c!t8cIdU(PQni#j0Z)&4Wam-@3@Y5n-SaN33Cx0Cz%)bQu| zXl5f>M63pj)=}6V_@(oBs;};!O@gXCXh1|B{^cWz@!~s5+*z3yO2&+h#ig}4Ux)_0 zHs4LmO5|0Bti^;NW847#iLUq#w3)<5C!oCW!-zQ?uQ*y`e1q#WpNka?h->6pK>7)| zoMhLQtDYA5Oz^45?>|@_9DJgxDuiA*Jd;tbF@N1FLctp&N@>E!xTGiwp7TdOLi;Yexh|c~)ZMotEeAyMg7+3!U3M27+6c=xQle0M5=P|%DcsVBy)iWYfkp$^k zfk}J3NY-C0&ZYKWe6ib?&414#P#_@dJ7zih$F}Nkdm*JNPey^!SrLjMw{W`;JlR-E z6<0+Y{v>7_A%1&w2iYZ|dfCAQL78wX*=SfvBXo{Wt_OL)zd?A;jms(qadr}oR=1eb zAc4iwD@bxIzjk4ezf0l8BBLmJi%RA~rqdg=p0@cP3&_Y@fXCHD6}QN|Z4tSu0n)RnFor0ma*z$iCQ zfM{>M|HKJ)a6(VvEUcfY=O;bz&egT~&P()ZmaurBl)<9-iPo{hLWCn5rtXdp(XxjV z>QoGmSmV>K1^1a}zggh!B@hnp#eW)zD z{(Q%?0T;Ta3FNA(F-Ccu^ep~#Mwt^39zcI6Q#)9@bG6TeCS{lv1%&3szX%e-$elgV z#J}kW+>kx>{heM}4$M^cdk3#h(;9YXA-ar}fUB0Cy2gi`h)MNo}=5gPbnD$YhNjz7^fc%TI(8v2emdd=@vuMkaQ`~z}EVq54F|*u_)w1Wh=MpUVC6t)Ynk5pkzR`rrU`ee|lzpLJSt zHrb4}N9A_)C^XeeSX>8oW$0RR^|V=oUY|tu$&od0$CMxaXqo*93mHgd(N7u!+!byK zNX(#rI=(I-gn?3)oZ`U^ikVBWWUAGUpb^WNWOZe?b_qf-Rrj4yhujgdU3O~IW7VKG zncux8i(6Mes=r*fbHS$_p4*IHJRoR$#vJ_n^xMisO?X3z>FB|Mi#w^DVc*8;&OjvX z^vyzXY7v8r;BW!iz0uZ13@*4I62x~Zf;hxM@X~iDU^yUrb7iDxcyaMyN%Jc`C(_L` zVarjaUq;9uaM*BW3>5bHHD>633)CbKJIJum!WEG|$(03$E?pjPym80#eCM+&H^h|T zCE-ChqQp}8Iz?AkOA{i=QOM`#dLqi_NO=Z&Hqbmr-Z4c^8Y+6F7(F3gI^-o7)}q^x zy)}MS)vIuN$}Dy|i{+z(Y7E%+tvw;RkxjIIk%ymmUD@bU%1i4_Y)8Gl(5&lmf{ej< z%rh8e*pTZz8VQC0yHpF{sQ8XUCTq7@E4bznc(~04mg>Uz*dHug@6`3p0Z*2-0Wx)` zMgWDm$XQ)~Gm`b-38*IUMc-~$DW7`AXEuA0nEXyg#{o#f6`kx=f}=JJvWJqJpPghC_0j9N!N2)|-+voI02u8~i(|;aO60GjVY;i&nz& zOBD>loMk3F06fDH8!h88waaVRu^+81h7$A-vxV6`6@Ei^{SNSjvD= zwtfGw2%l2w$uBzx1KP(GGBNM(qGgTVL^AlF>%OW_xP7VlH8N`hsBLN zN7o3GooCpPV$OHNQdC^=n{W^>Mf)d^c0-w#j0{q-Sh#E2Z+-sBRt7c+at9)Qr38wc zH#e*dLBbycL@}*%ur1qyp5a0Hg4|9c0R^F9#BeS=_!e#CIt5((-0D`_8lrkSHq7Du zR5ENBZ`ZN>+axX_`T5Ctv!GI;{&opRt0bWsDe}sZF-)#@-J;Fk>`_?VXP13hpM8;r zXoiT`Uqn)NbZTk09YqK`W>|K#A~=*yNa^CIs;9le9O$}8*?%x8ov^FT4$DoDf>c{Y z{Clei@fgJW4lD#`wg2zc{|2JtSggnZnWuTXDSkdkuSOaaFkv%QO?5Tb z#K?k|l|5V9y2@WLnlzttVlyMyh0CdC8S{+|JzVYCb=0Ycwrw}t;ebvaLmlN@=1&-o z;sIhW?@N<=T$}*;8so30#H~NGUvv;r+SI}-yNbeOpgG_1R;Z*MFQgb=--~NZ=T$yx z(<9vqs%v;}5u2BeL}I7o4j%?NlcK diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.svg b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.svg new file mode 100644 index 00000000000000..4a90d60dffa649 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.svg @@ -0,0 +1,27 @@ + + + + + + + a + + + b + + + c + + + + + + + flex-direction: row + での交差軸 + + + + + + \ No newline at end of file diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png deleted file mode 100644 index a2cf5f3f5c3444d10847636b0f3d677deb2c3a3d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3240 zcmZ`+2{=@38$S3fnW03DvgZqx2Bkl{Xr#$nLNbHVCPT(BjTmW!Y>8|cyFtjBCdSfd zhA+yVWn|x%QDYffgn#t?-+x`-e_j83-OqW?b3gBO-gEBzJm|RNk~Yz5A|m4O;lrk; zrZ^n#?Af#EzR(x|042j=2G@Q1zo!b}vvfp5%HHFKzF3IJZ4h1Zls@n7;un5L9Vi^= zXW93?rk3b79(sP16!8g+jhx`zfeR==Z)xt2uX1Vw@PY*xt!6%rco^f@mEFI{phbr0 z#d@3YW!smTIU?^VcNJIvSUB^%ibV@<=?cd-Bt~4U`eLkaml3T#JpITOk!?pR4j#-l z=*H02tB2zQV(-f}>{z=Edr(B}?XStAUo=-6P?}110_OrAOjRJyX*-= zsFJXlA*+Y2U>OIE*2-6g$<4(SfiG&ZnC;uvH4Y%8a2y|mI$8s{=@*E=d^ku@!5fV6 zoe33HjDic<{f<6TU2ZAq4Y_@JAx_M>Bx>_K^tNuNyzQjnzRnoX#IP;*OZ|O@atb5E z)z8J=-f)HF-cR#T!uN^2^Hf?JynSez7LHgHJj${z>zmP5{QB7~CvD|lkHjNW?aV!5 zXAj4fB(EQVBrn}Otfm`xSZ8?Hq2jfaju`gMngzA=ludzurXC(EP@k4O{WUP8Vz%`x zwdAdTMMpiLpSm- z`|BF7z@&em%dT}@k`{#45KeFhB*`FUujZnCV-$mplLwkq8lrA1<>ne)R`Z1uNr;R- zvm$3L67}QE+Dh0X9igDe;i?SjmoYLgmH6dE<2$bp3BfKPNoGT8cR*eR``$x^b{$#< zeN0ndQ=Jv+%g#qM1s6qI52@+5i40X|G*`Qj#D3>>m=8D z%2}V6z_G7D-FhbIQ;gTvEeyQkwL5~37h$bIJ78XSM42Pts7P^zhR*^YFx_m1zSE;t4ZLRjrsK|8$5 z^pnjVey87bQ-HaRbGNRy6)J`MXT4yxcJjKiKxJ0$jpoHsz8(lKT9;=~U}ivDaDjg= zzx5ZNqmZW3%4s?g*{66kTRUU}vBrSz8*Jp{!zZytSqvg%-7i#Ox?f878d8~;k ze_@D=VEe|QOvBnFERo)nmNni8wKO|H_kUCX58sAn->AwlJBjVN zngG)-h+JNERxlgCp%4w93e=R`<)PmCgzdR$_Q>1d&zmu;-QcpT`ADbke=(b+=#7O>9CbKj+)>@dKc`IdycdyY z95b2`6(A`7!#B6zh)s#}QUOg<QsVFTm0aYwMo94@wXOeYr$$1O~h;-~O{sX2s zKRe#5Bg5#!L*b*G5Bz_}PMS2)zWTu!_XB+_7XX+WG?YGHUk)zb;_K&y0(>0E3j>vs zFz~>I55TKt#4IuW^9-_*TR*lL;o{SYOQfA&`T+x=Kd(c*xV(adWE}x8;un|#bs13r zm^1y&X_y44ZuBfviMl`48W-Art<8Ree$h@Y-uiMfPu`qbwCzMb`|gBBMwG_bd+JPm z@mANdCJ1T80`K2}d(qDWRe#jEwV}gYH(uXlSuu27_g8k@&U+gS@vqpmM|bWm!8M$C zI-ht3Ra4Oy+`KUdy&lO@Hj%z+oI(!R#yTb>tRvTRbfZ;jP%8x60i4MMH$rxEe=G7C zsJCh{;ugI=;>5|ZKnj(7l|~Rjm4gzO$Vl-yWR02xhQ`z!hc7r&QC? zK*oiJQlY|&{Nk0s9wIe>QS1RVH=ZBdP8i{Stlokl!!h%T2RGv!7vJB(sg3@Er7^&V zgT;21(?2@iF_7{M|3PeYMB>S!(JJah5Qg|y$WWauSOO3|9>hj|MwH7nuS}0*5spKp zARdZ%s^6}2R}x=kN4ED^$oiTvI@z8@_jeyDsb*b6b5>)w?gq#dB`H`MtD_(xnBRE)0oU-{(ZRwzH^PV>Qd&IMBw>M`f!4RLgp8~qK669NRiOyv&@6&hTQRq3+bt5{ z?Cp1}lM*G^E%L-bic5SF^n~~ed&xgIns0B$co*(B08rXM{ z+4hAnLo2}2QGVL*rfnT#R8q!zix#R*gTfHB;0mz$+E79~Y?N-_(!Q%VD9op#aN$Pm z#Vk%c_Gj;-Z1w)e*DazrTUyurtmEU*V(vVY!pjU5m41ODV)@bNE0ZAGsVkIT<>Ord z$1Uq1-T7zT91Dxb=={*WSZz|JlUY?Cz93g3rGb{Ryi{*KLxSrP@=B zz@^F|{txGvCtqhV#qp<9Lg|*o4L|UI){1)qbyKp=eSFKjb#=es)W8KKJ`F`laO7vF rfu`r(2m7%g2xhBn?@!}@#)UUO_ftj)ARoP-CVM5gkvXi`&?)fWF{lD- diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.svg b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.svg new file mode 100644 index 00000000000000..22ba03676fc7c2 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.svg @@ -0,0 +1,26 @@ + + + + + + + a + + + b + + + c + + + + + + + + + flex-direction: column での交差軸 + + + + \ No newline at end of file diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png deleted file mode 100644 index ad26082b21e7b96b8cc116b3c09d90517c121db8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3503 zcmd59u}DwpC~!YEwJ_pd;6299E*yI=%<+gi5o7`jWn)v4`7b+$Ke9*E-fvcnwpA?jASyIb8~Z8EOupO ztt~7p+|kj2!C(vw3=$I)-QC@tot=EBrOJ_YQ@n`gj&GqQjiGZ}&3g~g`59gu|TX8v@TsRz; zPj+%>bldmiH?w}4pZVv8@hMJ&|G|hz%&)xbb)*-1Ur?Py=|OioOZ-E7o63CX=GYMS z!kquIN{M&WXCqZ_33jNRV zz-4gzR~=p`{xPu5=0=7eYWiRBn-|}cM_oA8^aiea2h;rH<2Co<0>c;jc-pC5Ia~Ii zlKa|;S>6{vo#MoI4S{hN^|OXlt?*mn^-6A!sO~hAk16YcqHBo0Z_-d9z}-vO;;U4j z-NqolVdQCgmDiWLLhjmaG|nV``oU{XZ2D!mvR{rYuMJn#@L-Nt>QGbAU-$y8(u=1B ztFMIK-d|NCF}UYoTsNOZ`ZO-s$_Lc%d?o5uKa2dV^0_v$;OX%T?)eOz{#Va{_|29> z>x03_F4GLjX)2!A2+ZFIJeiejaxIqdXOe6TNia-JD1gsQ%}6II!<75XP?p>!xOp21 z>KMSzqoHQF;GsNLQcHwkdXg-pPG1V@AqRDc+(OU;WQH6g!ea-YeymaC>^{@Wn>ir3 zV|f$I^1_z0#0TWe6=HdrnI?F?8&+hP{llk*qN!g?ID;I;kYeFf**^#gze75c(ihp= zzNv26uoHJE*NSA%LPliJWq%+ql%@;Hd3pug`xiOp zybp16-%U{-6htu8Vi@#Nt%wg_Bpe@9Whuq_UE4<2@39gkSBi>f>Xq-b3#lAPL|;8K z_Wt{7_%G;EcQ_ho6l)`_q{<2>`_nw(hCB*R+l9J~BJ7B5Gea>LN()15l^$s1iOGpm zA)ZYZWR%-HQLw+r+YskBe!<)PK_X$6y`>H-3?aiT2t-oXuorrEZr<1sY%wx~o5((} zU6<=Kw>QYor=~1BsiJNOm~E=v0qrA-_|Um_**o&o*;#)X$wq&Vm2Lq($N8)>XrA~< zEMnOWD=q{RV4_?I;g&e92pA}Bf%nuJpZp5p78k0Cl%sj?Df7vgIlQ;{C9YP^;csLo zy7G4~&;mosr3+!jvO$L!WPw?lq0e8Rw4F0z3*21vZe3B-IZIt|ULwq=9Ny_v*s^)N zX<4NOulU?ixnU_h)+c>yd_ORX$L<;*tuFz%;VH5qJa_*W z#S3J4&kZz=cCu{l zfGr55KzRN;SxG^wT&i4x96bzr>kutuYXnP7UC^ z!00ELZw9BtThcFmKaSA%Pl0=l|HhHz2|1y)2i$w|Tj{*Jcq@nQ{XI^^L2JltM0r^o zb%Hxmcd__o@F!Wj?@RStoyW8bPg)Vyymn=q$}rfsy*I?yDb3SzG6!*8A^khqUDqEZ z(@3?_J>Sk{=0EiFfxMLFiI@6ck^I43Y6Ah!jDp;uQfQttgMWa#8L@3fy^u=5UL4#o z^Ynzw$+?i>WT7a1>glM8X8;mvFfB4KKEizte9rqmuu{E#L}nNR9IljNPH@mI{5IAa zM22H6q`-c&m+%ThwK%-O^{2vdwy4z#^-AIOh6HM|Q!h>cIVys|CanIu`;o=U(L&Fa z#-@f!OUO&JsI9Oq*Oq94^&`E|K&axp3-_Y&*llW9P@t1xSj*{o7eJF~CC74tiL4QIyY2D;@{A7p9oR^nLh?vc%}i<^Ii5qmvU8fS;{$ zJ*0xno92&JDMV(DRx4z^K>}DrSkg)XYY0dm=!a{o-+M^_1fNNi7vqM%;&3dmtc1MZ zJXkzR^4&|abBws?wfwZ)JDy^Bz|nv7v@8Q-4ka*t|oHE%Wazp2)&$pe6LWQ1r3kg?`Pyd-=` z(+$nN9nY2My1Iw9whhotz`N^PyjgqZf1o0f-Xkxlb&7; z(Ehwfi8Ux)2o_GBHQ-?koZw`aTM+OLz^erF-;#!d*-3Ijo>`%x$vV zU3P2*>iOp+G|SqX@F4nD2A#jeLwss zCA)Dt=pp{?!&QnWWBJcc-@^Fs2v+&SsBJL{f3W02C@N1O&ag8y5hzg=5EA&HRX*M+ zs+7oOgz7d5UZkc+$KcPFC-tOtlBweACk8O*#SwCF^)hw750H|3G@xir2_AqFdr_Mm ztzw|?9t!LBaq@nB3>BQcphVB6Gbt*J-oP2iibeecQ8L3FA-9gom76@fqXdvE`;*-5 zK~yimD`3Otynyp?8A$=ESfesH7QL+|S4S_5T;k*~oeL!AB%`mD_ZuZ1OUe-`1X~J0 zk<}}2hOaNaoI>f|xAb`xNYYJvMTr3LcSacd zfwFKxWHjp{g#E0*1lECVw%?1FZjOSTd@*nzOfe=x*`rbB&WP1IXvPFpD>%kq6t9#}*Na)F=!V%cg*lW7*W5LeP(=WO3=N z7Zr>n7pt06WPBCtCd9<#@>kNN7UEFr%~MjT)t=0&A|>5vysK6F@~*Y;%i{Ez+9E#{ zR4(qRVt8#cEe8ml!JOEo6Z0ML^nhtTXT!13KO3XUlrJkGqa~jD3eVf9Rde-wEj{pL+Lu zFLlEER;HKL;&j`vhsKa-u#UzGh@{gcdlnD9HD`8t-!Og?HD?5O93E9Mh`);#Urhxa zgcgSJ+7ES=6MCrcj0M4WhcWUEjsF36{Qpx|elP#S<)%JTLUy*O_*5YUChHCpAv%>( zf&A+kOC0NT^04Qp&E)ttG1WP!WEKFGJkpKi+X2Y0KUcN4tPUq)B_54H{ttcqZ_#bL bbRfuo)%%gG8QSFNy + + + + + + a + + + b + + + c + + + + + + + + + flex-direction: row での主軸 + + + + 先頭 + + 末尾 + + \ No newline at end of file diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png deleted file mode 100644 index 00fe14b399ed7a4f81f4d11a6f5e709dc44c94d6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3331 zcmb7{cTf{p9>-AxK?1C-f}t8vdJoM=Z~+M-NE1RpdT)ZPlo;Al3`!ALAxH~L4+#)l zK)R@OB1K39!2m%K3?e0l7LbeH&D_n+{c|&~{eJKJ+Ps<1@4biCmZtotL{D*WaPXU5 zyK2k9aU8{NKjGnImskCouwv#kRAoE$mFbfB%lbV6JB^+UI@9fB7|_{8Q^BgSmU?QL;3> zyh~f#Pi|a|#INLZtyK(ctTI@oed~R*%rV+dXJ;pgL>eC-FDfc}|NebUOiXWYFN48Y zTwH8yY+PMkm6w+X006eOwqP)ry_$uEg}%Q2*|TSjjg1>dx2meDQd3itlat-u-JPAC z0|Ns$whtmABK+EfML9V5w#}{@+97Awih{ffUJLz^H;s1Q*SVeB;o)&2RhoHp)B)~5 znm^(d;ZN5aJL$!vSI+YGjnY1y=y4AH?_|l?hlF!W@Kk-Li4ixxJ)Mw*s8n$gHD0{B zzrtw5WbyDVG!8hX7JyYBKK`xkFoSnkI-%lDtjADU^~Q%68nuQW)C@zm7?i@{-9-Ak zK1m`(lSK8@o_B!E=Qi+sqk1vlKA%^ZyWart8{D|PvFyX6E~S+s^wvnr)+$D)p1XIE z0iLmbAxSkpw8wW3`FgG{i3%!j1OXRzu0v;4rL)2`KQ4?Nd-b~k?l7YP%vm{Ek2X&4YY*>JDGT zBaNE_9DeWwyB*v3nvw?wJ%2j!)*674g~nj3LI}7Z+(i{m`Q;(7LXk`1D))LGk1y{M z`PZ8VJ`EtO&+qhQP-_Q11$fq;qU6b$-YW0?=(~-zpxM-=zP>^cqp_Gj)7^fft)j)` z%`o^-&kSA0l#-9z5Muff;j#Pikm7 zxH_1!gq)igyEubM{NR-+Jl83uXpH%;$;f!!VnkMj+p2&7&jR|Q9ir@s`6%e~FQvLo zfdhK53oPMvM%$IQn85lxugc$*EC0ys7E>5SbdLBo7AW-OcwS}-LF3wz(kwXFUKI%M z&bDD8oc!B%#mA-M{oR-2z!|lwZg@{Q;oZl_(=Q3XT5^`U(*M~1omTOP(HMF#-1ef& zFW1+NnFZSKUEPqtH;zcX{zN>Av^IpFXqv6GVG;Q;7**C-;yx z5w%>eH?kYN_Y`z?cZScT43)HBPRX!t79e0F4oE?Fdv2dB_USi-QXT93n~PU{I_xNC z#;xXYDgCs7)r_PYcWJAmZ4QEbrAh}pN;BE0#?RY%-R@vRJ}Xq}eC-d&7|BgSwE}W|9`u>ig+QAHsKw`H6z1_Mb$Y{O>EmPO zVcGh9`O@B$Qz9J^Pw>X3bcwnIu=4zJuJPhJ7~vRzo*(g)AE8gb zakd&!j@T?Oll(lAtD^NRCyMS-li0NJlv>|>XV$1vKyLdMvsb9lwaRrtT!l2QPN`U< zQvqV@Xgn+yCs|L}L>-1Cmt(s*I}|<~ljG9G=@%+>G2ET1P;SKGK;qn2YWjoT=X3VK z3ZcOLjHZ^MB7J%ZT_WM=>!Z8Kp~9H+FKfg=#zw8vYw|swz_PlB)pN#|=cbf8lTawn zD<28>OhPL(N=ot7SQ^bpR}hd@N(jVCb?1`^GY;C$4^lm+@dN4i&$kFZW}YvBkGw6K z9l$|8;BHwJui9X#U_g)h|4M+ggpIY^RDm^dLR4dm@#PkW&=tTFvHKJ+?nFw5_F%eR z{?#Ygh0}g)lkG}Jc?)@j@WV5K4}xsQRuXPK)cJ<6HLp+|>rfkL&GvWDT=YKI3^;^& zF=sRa+2@3rKs6tdmoE7NQ5i69cqkHxfKH@4a)-250DtH@{yZ($gY#L@6(vkPvLTI! zYAMpQ&Dis4kj8_wG#gMoq!;vT-`ARVdM=Lq(9Ptg>j7aZ#@%laU6JWd=(utln@kJo zhCIkb&8E(8v`&9JvdrUaF4zj6 z73~?~a$^~LV8saqxqgb^eos|JRsp`f_9rvM3HC93KcawH|Z zf*z~8S(XYa-qSE8Z66 zb9`}n!ibql%~ZbUMW-I_C+I$A4T+G(PebTjpk5QiS%oQmoQPq2NWCiyulp9w!VY<@ z{o!KS#r={;1q?S`qEBaE%DHX&*}uM;oK|)LL$?X_so(iPHgu-P9i0NUbC;K6^Nir) zcvt)9r)HIeYTXgfMau|F_4IewyO@d(Z}NJ;N38@uuaH@>bg)Uh$>H^uG(d6En}Ak^ z))vL?wyw6)IQGOTmu7NB9SEbZh`n!19L$U4tqH2N6w`+=pF@lFc1z;Y3&z?avPz@X zA@qm&TZ;(jt$UMjs6ErOQo`~V0^VUJKd>dN)89s)cOo1q`{^)6hYWCx29EN;V9-el zf8^{PJ|Y42Kmy-a7tV}%!_ngkL@+T3rc%V1>l98Pa0KuPY zNt^b4q4uXPTlR%7;Z!`#b>N|rowAI0x` z*KB$74m3kax_;<-yGFJ5Sz?7K`r%||>+Yvv;LCQxR4H}q1c9Z+E7u zOi%BbPqBr4a)bf83yk~Fux7HPbU)GG52~vuV=0^6uFsOdz7=r@4Q@ij|BaeD9>$a; zyA`#d%Go>;en5zd+Buv%GmlD(9KFj9P5D>pTVJA(?ao&Mn){c0xCy$QfLh6beq~Nw z=ZT*%bQyZ^*n_P3O)P^FH1LzFXPJX+f-OH`lTH+f=%V?!Gp~VtfvvPZeShfIuEUA| z + + + + + + ج + + ا + + + ب + + + + + + + + + flex-direction: row での主軸 + + + + 末尾 + + 先頭 + + \ No newline at end of file diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png deleted file mode 100644 index eba412b6af53e7f43d7ee11a260bc64c38a940c5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3862 zcmb_fc{r5o-ycc_GZ|Z!#2Kv^8<^S$rS_x?WDb$>q3=ZUy;TMNv{!w3KXz&hF* z#sB~eM4GlFlHSO#lk;&w&tgO`3)T*i~3WYK;F_E92 zKQ}km-Q7(f5X{ZZK_CznXJ==}%F3#vqvPV@A}A=x!@~oI!(lL(q@<*>vhs@;FMND_ zuvlzhV4!aFtXbk5I(sp)k{tW-hwr;(V$0gh>aYHpT{7jM<=ZxrxUjKvSUs{CT)Hy4 zxJT+--}b_E0s!Y3bTriO`hEM6inh;E;lx?6he+x;uvq{4Hj2(8_HUh>)Lvskj{G4% z2uE#L^TRs51`ihJFArK?p!WBF4^NY`<6{eJ8`5$?;y0aDR-ztvx>;aE&eBDwMJm7_ zO&9x>r5bbM6bWuDJGvXbeCCavx>f1m!Z=vQ^s<2aoYz8v>8eC>JRn|4(pO* z_&lJN0u{CR^1D0{1J^5hPX+vOjwaZiK_C;>)LMBbDSG>QN3Y7`8UW(Kt>fuVo%M%K z)yJz2xgt{URco^6HWXEdzm^H;8|T2rUpN`1vP*p6<-k&|eJrngEG^gNrBg6Si%81Y zZ?XyBUhMa(%hpP@-`#j7$@xc4KSVZeSn#ra9b7Z=CVKRukWSlBqnDf2&g*#VLva2e zK}+|Bh!AzC>X+%Si1wdualCvZsy;MGyOqHuAlaq6wehC4BSPQ< z@;Pqq5`(G=A4==yYMIAy^XqACbQ*mHe1k=oJQkP`zEF;}L8e^s(6&oCCc5LY736gp zlbOaux013iS!Xft*7rha2`8n3OyM#j{%>FdAqvW^9rH7#tmd~SVq%H$oOc5~ZZa1t zsMbDN2vf2WqwQt2mbM)5K    O>}dw_Q>9qXN&7r~o* zQW6qiIvrUn@dUJeDlwkfRjTY=Y(hJe^|fOu>~TX|5ohM^ltC$^gPiM@gK$trBZN)! zWi(UGvJCrkAF_`bCrH+)+iZ3_SXH5aZ2?djzFW!7_GQZKz8Y-(M*as*M`2pTgiJ34 zSOdyvKPcAm5f%4%TBPX+1}W#=PPcOg>+2gNr?Ht_1(J&Lx!QSz=#BBWR=HQ?fR2*b?7_;L=u4&gmL^AI5M9Y@g^6FMHj+kSt?*y znZgm7z&xY&nHTT*5c)7jJC--~(+4AynR+fVXpNt#5!g#<2b?()V6@U{01y z?xVzUd-Oq|4bK{Kk2cOv3FjHi?1AryJJ~n@;S}>W4Xf2oJi3U*Q%`Vr_P=g3{ydcW zIZ)p=UdWBAGHS0KJ3K0x;!o4u?6^k-udW4a&wLM8z^ZJkG4JlK$-$RqDGH!Z**$(3 zt7kh6zwn>GKqyrdV;^M_z6ko{IZ#fDH^AaN2-8JgBdrIk9={8{IO|-uB~0MMfj8dO zL`kXCsf0jP-SC7Kwy8>Q)2{;%1H&zG!gbq58^qyVVqoy|mj2+uamc~c+Q4I*(Q5db zGv3ExreGG#p7pBBeF$`oJO#P5`Glpce4W^FZ=C-n3`LC$>d89Py$^uCNJ zcWeOe!X5xEOnlzyQ9(CqqP|>Lt_uFXP-UWrTOPZjjvMp<{z320X0MNkvOuhAVpEEs z=j5@x6<;{NB;g*+$Id=ZJzC+JO$?X~&r95$nq0Cn(8~||iQ8+s=1UHf4JY=gU{kp- z`SHOC>W`BJoUYg04w}S6Yd8~(`S-~;ECqS8ehS$JZ^yh%EF{Y(dS^~HgrReBb|psb zEk^G`Q}JAAzL2RNvXphW|s~{H`l( zMtX?|^4lPTj;CbQm1#`~`v+(ocV9S*fP;`KhFbp;3F8((c2pC!rtx!V zM$ey0gv3iQ{R7MuZpgW*rSFp41yKoWBumwWK&LBeq5rLQ|A~_n)Lm0l!)(Ve$Y1Ov zCd&I%$kY~kt6AjoK%m1fm@vN1ilwPi{;YGwfo;T(?&LnSI!}Erl#7lypr77%+0#qz zl2^ypz#Js^??*?4;_r%^L> z3hhQR_XB0iv=;jCf7`49^PqB26fPy2qf8-Z)?2j~;-6NG7IuGb)~Q^VGH>CoTbAUY zAWSZp2vT&$U+7h}D732@8zRo7UFD9y6zy%E5E$Z$(6$^evJpbMD_Wdu#|i;`a^JJZ zbUBjnB66CM5;+cd_PG%ZtNu_tySM&_n7V`Yf=R{`NlnIN^VwTh!G^B|?iNyd=ja*V zj{2ZD7_-~lZ9V95gJJrRLyF{H5ZKTOC>`AgYEsK6+eOx4-S(5Fv#jIduSf!qmfye( z#fB>x!}=97g}zvzy9*s!z^z!A9)uyc7sJF9#vs;{nk#0V$0UQ5zVI$&dQDPuy@P34 zu9)K06&!>HiWh%lWI$k*2N)(AQ|w72i}nbOOczZ$yKi#i(b%9yIVR)RD2XD9WMo{3 zRjk|X{foBWY{k;PHTL9|uyer$)intboizHPa>zsmxaVf0CdYn)vEX0}4A+P;NF@H%THwu6o zJg4iK$^JqNbpvO3&D6T9ys<6AdZZn~x7)$0C4ialt1~W$CrU~3uS=-0@n>;(hYz{> zw)|=Q97AR`U1o1>2+UZyJA@#Wd&8gte!@Ct%-tD$On}l7e)BWZ`O^fF#;~ze7l`V8#=5VP8oF@Z9iYrfUvj4n+^HA+sIiNA z+M_qnAv4xhDl@S4{xvggS$U11?exdo70^RTrjW2*{#ONOB?QioI{=+tX`@FwRE6X3 z1Y(UXW+P4c2*a#C&)n*JSH7=p@3miROLTM;a0(M00Oi9pI>Qt4G#%}M3ai#jj>=a4 z$xtV;x18AWGEbldEn@;{Y&lEDbIzW!E;+B=@l&4vbC-?WN z7;d{3fzt0RCOWtQuP7f;|0Jd#RyRXbh2P4sm<;pVmc4u}JMrMBl*0$}*HJR2fuY8! z<-SUiwXUOzn!>jlKJNzHJgh}Aft|bu;tVU5RjqDqB0sEu+%F~h1`V)Tol6T{+ + + + + + + a + + + b + + + c + + + + + + + コンテナーの幅 = 500px + + 分配可能 = 200px + + + + + + \ No newline at end of file diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index d76a6280080b1b..b3a7d2ca292a89 100644 --- a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -2,59 +2,59 @@ title: フレックスボックスの基本概念 slug: Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox l10n: - sourceCommit: 2a968de8857d5a6effe8e92ceaeab8faa38e375e + sourceCommit: 40590706f9ab23242bcd8c8966cc683d7d5b18aa --- {{CSSRef}} -フレキシブルボックスレイアウトモジュールは、通常フレックスボックスと呼ばれ、一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。 +[フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)（通常フレックスボックスと呼ばれる）は、アイテム間の余白を分配するための一次元レイアウトモデルで、数多くの配置機能を含んでいます。この記事ではフレックスボックスの主な機能の概要を説明し、このガイドの残りの部分でさらに詳しく説明します。 フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)が行と列の二次元を同時に制御するモデルであることと対照的です。 ## フレックスボックス 2 つの軸 -フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作では常にこの軸について参照することになるので、最初にその動きを理解しましょう。 +フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。[主軸](#主軸)は {{cssxref("flex-direction")}} プロパティによって定義され、[交差軸](#交差軸)は主軸に垂直に交わる軸です。フレックスボックスを使った操作では常にこの軸について参照することになるので、最初にその動きを理解しましょう。 ### 主軸 -主軸は `flex-direction` によって定義され、4 種類の値をとることができます。 +{{glossary("main axis","主軸")}}は `flex-direction` によって定義され、4 種類の値をとることができます。 - `row` - `row-reverse` - `column` - `column-reverse` -`row` または `row-reverse` を選択した場合、主軸は**インライン要素の並ぶ方向**に沿った軸となります。 +`row` または `row-reverse` を選択した場合、主軸は**インライン方向**に沿った軸となります。 -![flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。](basics1.png) +![flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。](basics1.svg) -`column` または `column-reverse` を選んだ場合は、ページの上から下に向かって**ブロック要素の並ぶ方向**に沿った軸となります。 +`column` または `column-reverse` を選んだ場合は、ページの上から下に向かって**ブロック方向**に沿った軸となります。 -![flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。](basics2.png) +![flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。](basics2.svg) ### 交差軸 -交差軸は主軸に垂直に交わる軸です。したがって、`flex-direction` (主軸) が `row` または `row-reverse` なら、交差軸は列に沿ったものになります。 +{{glossary("cross axis","交差軸")}}は主軸に垂直に交わる軸です。したがって、`flex-direction` (主軸) が `row` または `row-reverse` なら、交差軸は列に沿ったものになります。 -![flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。](basics3.png) +![flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。](basics3.svg) 主軸が `column` または `column-reverse` であれば、交差軸は行の方向になります。 -![flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。](basics4.png) +![flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。](basics4.svg) ## 行の先頭と末尾 -理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。 +フレックスボックスが文書の書字方向を前提としないことも、重要な理解のひとつです。フレックスボックスは、テキストのすべての行が文書の左上から始まり、右側に向かって実行し、新しい行が他の行の下に1行ずつ現れることを想定しているわけではありません。むしろ、他の[論理プロパティや値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)のように、すべての書字方向に対応しています。 -後述する[フレックスボックスと他のレイアウト方法の関係を読む](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods#書字方向)こともできますが、フレックスアイテムが流れる方向を説明するときに、左右や上下の話をしない理由は、以下の説明で理解できると思います。 +後述する[フレックスボックスと書字方向の関係を読む](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods#書字方向)こともできますが、フレックスアイテムが流れる方向を説明するときに、左右や上下の話をしない理由は、以下の説明で理解できると思います。 もし `flex-direction` が `row` で言語が英語の場合、主軸の先頭は左で末尾は右になります。 -![英語の場合、先頭側は左になります。](basics5.png) +![英語の場合、先頭側は左になります。](basics5.svg) 一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。 -![右書きの言語では、先頭側は右になります。](basics6.png) +![右書きの言語では、先頭側は右になります。](basics6.svg) 両言語ともに書字方向が横書きであるため、いずれの場合でも、交差軸の先頭側は上で末尾側が下になります。 @@ -62,20 +62,45 @@ l10n: ## フレックスコンテナー -フレックスボックスを使ってレイアウトされる文書の領域は、**フレックスコンテナー**と呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を `flex` もしくは `inline-flex` に設定します。またこれにより、このコンテナー直下の子要素が**フレックスアイテム**となります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。 +フレックスボックスを使用してレイアウトされた文書の領域を**フレックスコンテナー**と呼びます。{{glossary("flex container","フレックスコンテナー")}}を作成するには、その領域の {{cssxref("display")}} プロパティを `flex` に設定します。そうすると、そのコンテナーの直接の子は**フレックスアイテム**になります。コンテナーそのものをインラインで表示するかブロック整形コンテキストで表示するかは、インラインフレックスコンテナーでは `inline flex` または `inline-flex` を、ブロックレベルフレックスコンテナーでは `block flex` または `flex` を使用して明示的に制御できます。 -- フレックスアイテムは行に沿って並んで表示されます（`flex-direction` プロパティの既定値は `row` です）。 +### 初期値 + +CSS のすべてのプロパティと同様に、いくつかの初期値が定義されており、新しいフレックスコンテナーのコンテンツは次のように動作します。 + +- フレックスアイテムは行に沿って並んで表示されます（{{cssxref("flex-direction")}} プロパティの既定値は `row` です）。 - フレックスアイテムは主軸の先頭側を先頭に並びます。 -- フレックスアイテムは主軸方向に引き伸ばされませんが、収縮する場合があります。 -- フレックスアイテムは、交差軸の大きさを埋めるように引き伸ばされます。 -- {{cssxref("flex-basis")}} プロパティは `auto` に設定されます。つまり、横書きの場合はフレックスアイテムの {{cssxref("width")}} と等しくなり、縦書きの場合はフレックスアイテムの {{cssxref("height")}} と等しくなります。対応する `width`/`height` も `auto` に設定されている場合は、代わりに `flex-basis` の内容が使用されます。 -- {{cssxref("flex-wrap")}} プロパティは `nowrap` に設定されます。つまり、フレックスアイテムは常に 1 行または 1 列のままとなり、それらの `width`/`height` の合計がコンテナ要素の `width`/`height` を超えると、コンテナからはみ出します。 +- フレックスアイテムは主軸方向に引き伸ばされませんが、収縮する場合があります（フレックスアイテムの {{cssxref("flex-grow")}} プロパティの既定値は `0`、 {{cssxref("flex-shrink")}} プロパティの既定値は `1` です）。 +- フレックスアイテムは、交差軸の大きさを埋めるように引き伸ばされます（{{cssxref("align-items")}} プロパティの既定値は `stretch` です）。 +- フレックスアイテムの {{cssxref("flex-basis")}} プロパティの既定値は `auto` です。つまり、横書きの場合はフレックスアイテムの {{cssxref("width")}} と等しくなり、縦書きの場合はフレックスアイテムの {{cssxref("height")}} と等しくなります。対応する `width`/`height` も `auto` に設定されている場合は、代わりに `flex-basis` の `content` の値が使用されます。 +- すべてのアイテムは 1 列に並び（{{cssxref("flex-wrap")}} プロパティの既定値は `nowrap` です）、それらの `width`/`height` の合計がコンテナー要素の `width`/`height` を超えると、コンテナーからはみ出します。 その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより高い場合、すべてのアイテムは交差軸全体の大きさまで引き伸ばされます。 -この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。 +この見え方についての、例を以下に挙げます。 "Play" をクリックすると、この例を MDN Playground で開き、アイテムを編集したり、新しいアイテムを追加して初期のフレックスボックスの動作を試したりすることができます。 + +```html live-sample___the-flex-container +
    +
    One
    +
    Two
    +
    Three
    には追加の
    テキストが
    あります
    +
    +``` + +```css live-sample___the-flex-container +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} -{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` + +{{EmbedLiveSample("the-flex-container")}} ### flex-direction の変更 @@ -83,65 +108,133 @@ l10n: `flex-direction` を `column` に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 `column-reverse` では、さらに先頭と末尾が入れ替わります。 -次の例では、`flex-direction` が `row-reverse` に設定されています。他の値である `row`, `column`, `column-reverse` で何が起こるか確かめてみてください。 +ライブサンプルでは、`flex-direction` が `row-reverse` に設定されています。他の値である `row`, `column`, `column-reverse` で何が起こるか確かめてみてください。 + +```html live-sample___flex-direction +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-direction +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-direction: row-reverse; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}} +{{EmbedLiveSample("flex-direction")}} ## flex-wrap による複数行のフレックスコンテナー -フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。余白の分配はその行の中でのみ発生し、隣の行については参照されません。 +フレックスボックスは 1 次元のモデルですが、フレックスアイテムを複数の行にわたって折り返すことは可能です。その場合、各行を新しいフレックスコンテナーと考えてください。前後の行を参照することなく、各行に余白が分配されます。 -折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として `wrap` を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返されます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるように、アイテムの幅を設定しています。 `flex-wrap` を `wrap` に設定すると、アイテムが折り返します。初期値である `nowrap` に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 `nowrap` はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。 +折り返し動作を発生させるためには、 {{cssxref("flex-wrap")}} プロパティに `wrap` を追加します。これで、アイテムが大きすぎてすべて 1 行に表示できない場合、別の行に折り返されます。次のライブサンプルは、 `width` が指定されたアイテムを含んでいます。アイテムの合計幅はフレックスコンテナーには広すぎます。 `flex-wrap` を `wrap` に設定すると、アイテムは複数行にまたがって折り返されます。これを初期値である `nowrap` に設定すると、コンテナーに合うように収縮します。アイテムが収縮するのは、 `flex-shrink: 1` を含むフレックスボックスの初期値を使用しているからです。 `nowrap` を使用すると、アイテムが縮小できなかったり、収まるほど小さく縮小できなかった場合に[オーバーフロー](/ja/docs/Learn/CSS/Building_blocks/Overflowing_content)が発生します。 -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}} +```html live-sample___flex-wrap +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-wrap +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 200px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; +} +``` + +{{EmbedLiveSample("flex-wrap")}} フレックスアイテムの折り返しについての詳細は、[フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)を参照してください。 ## flex-flow 一括指定プロパティ -`flex-direction` と `flex-wrap` の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が `flex-direction` で、2 つ目の値が `flex-wrap` です。 +`flex-direction` と `flex-wrap` の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。 + +次の例で、1 つ目の値を `flex-direction` に使える値 (`row`, `row-reverse`, `column`, `column-reverse` のいずれか) に変更してみてください。また、2 つ目の値を `wrap` か `nowrap` に変更してみてください。 -以下の例で、1 つ目の値を `flex-direction` に使える値 (`row`, `row-reverse`, `column`, `column-reverse` のいずれか) に変更してみてください。また、2 つ目の値を `wrap` か `nowrap` に変更してみてください。 +```html live-sample___flex-flow +
    +
    One
    +
    Two
    +
    Three
    +
    +``` -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}} +```css live-sample___flex-flow +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 200px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-flow: row wrap; +} +``` + +{{EmbedLiveSample("flex-flow")}} ## フレックスアイテムに適用されるプロパティ -フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。 +それぞれのフレックスアイテムのインラインサイズを制御するために、 3 つのプロパティで直接対象にします。 - {{cssxref("flex-grow")}} - {{cssxref("flex-shrink")}} - {{cssxref("flex-basis")}} -本ページでは、これらのプロパティについて簡単に触れます。[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)のガイドで、より完全な情報を得られます。 +以下でこれらのプロパティを簡単に見ていきますが、より包括的な情報が必要な場合は、[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)を参照してください。 -上述のプロパティについて理解する前に、**分配可能な余白** (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能な余白の分配のしかたを変えるということです。この分配可能な余白についての考え方は、アイテムの位置合わせについて考える時に重要になります。 +上述のプロパティについて理解する前に、**分配可能な余白** (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能な余白の分配のしかたを変えるということです。この分配可能な余白についての考え方は、アイテムの配置について考える時に重要になります。 -たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能な余白が残っています。初期値を変更しなかった場合フレックスボックスは、余白を最後のアイテムの後ろに配置します。 +たとえば、 500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能な余白が残っています。初期値を変更しなかった場合フレックスボックスは、余白を最後のアイテムの後ろに配置します。 -![このフレックスコンテナーは、アイテムを配置した後に分配可能な余白があります。](basics7.png) +![このフレックスコンテナーは、アイテムを配置した後に分配可能な余白があります。](basics7.svg) -そうではなく、アイテムを拡大して余白を埋めたいときには、余っている余白をアイテムに分配する方法が必要となります。それがアイテム自体に設定する `flex` プロパティが提供する機能です。 +そうではなく、アイテムを拡大して余白を埋めたいときには、余っている余白をアイテムに分配する方法が必要となります。アイテム自体に適用されるフレックスプロパティは、利用可能な余白をどのように兄弟フレックスアイテムに分配するかを決定します。 ### flex-basis プロパティ -`flex-basis` は、そのアイテムの寸法を、使用しない余白は分配可能な余白として残すように定義します。このプロパティの初期値は `auto` で、この設定ではブラウザーはアイテムに寸法が設定されているかを確認します。上述の例では、すべてのアイテムが 100 ピクセルの幅に設定されているため、これが `flex-basis` として使われます。 +`flex-basis` は、そのアイテムの寸法を、使用しない余白は分配可能な余白として残すように定義します。このプロパティの初期値は `auto` で、この設定ではブラウザーはアイテムに寸法が設定されているかを確認します。上述の例では、すべてのアイテムが 100 ピクセルの幅に設定されています。これが `flex-basis` として使われます。 アイテムに寸法が設定されていない場合は、その内容の大きさが `flex-basis` として使われます。`display: flex` を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要な余白のみを使用して行の中に整列していたのは、この挙動のためです。 ### flex-grow プロパティ -`flex-grow` プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って `flex-basis` 以上に引き伸ばすことができます。これによって、アイテムが主軸上の分配可能な余白をすべて使うまで引き伸ばされるか、他のアイテムも引き伸ばし可能であれば、分配可能な余白の割合となります。 +`flex-grow` プロパティを正の整数に設定すると、分配可能な余白がある場合、フレックスアイテムは `flex-basis` から主軸に沿って伸びることができます。アイテムがその軸の分配可能な余白をすべて占めるように伸びるか、分配可能な余白の一部だけを占めるように伸びるかは、他のアイテムも伸びることが許可されているかどうか、そしてそれらの `flex-grow` プロパティの値によって決まります。 -先ほどの例で、すべてのアイテムの `flex-grow` に 1 を設定すると、分配可能な余白はアイテム間で均等に分配され、主軸方向にコンテナーを埋めるように引き伸ばされます。 - -flex-grow プロパティは割合で余白を分配するために使うことができます。最初のアイテムの `flex-grow` に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに 2/4 （先ほどの例では 200px 中の 100px）が与えられ、残りの 2 つのアイテムに 1/4 （200px 中の 50px）ずつが与えられます。 +正の値を持つ各アイテムは、 `flex-grow` 値に基づいて分配可能な余白の一部を消費します。先ほどの例で、すべてのアイテムの `flex-grow` に 1 を設定すると、分配可能な余白はアイテム間で均等に分配され、主軸方向にコンテナーを埋めるように引き伸ばされます。最初のアイテムの `flex-grow` に 2 を設定し、ほかのアイテムには 1 を設定した場合、合計が 4 つの部分になります。最初のアイテムに 2 つ分（先ほどの例では 200px 中の 100px）が与えられ、残りの 2 つのアイテムに 1 つ分（200px 中の 50px）ずつが与えられます。 ### flex-shrink プロパティ `flex-grow` プロパティが主軸上の余白の追加を扱う一方で、`flex-shrink` は余白の取りあげ方を制御します。 アイテムを配置するのに十分な余白がコンテナーになく、`flex-shrink` に正の整数が設定されていれば、アイテムは `flex-basis` よりも小さくなります。`flex-grow` と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまり `flex-shrink` により大きな値が設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも早く収縮します。 -実際の収縮幅の計算にはアイテムの最小寸法が考慮されるため、`flex-shrink` の動作は `flex-grow` に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)の記事に書かれています。 +アイテムは {{cssxref("min-content")}} のサイズまで縮小することができます。この最小サイズは、実際に起こる収縮量を計算する際に考慮されるため、 `flex-shrink` は `flex-grow` よりも挙動が安定しないように見えてしまう可能性があります。そのため、そのアルゴリズムがどのように動くかについての詳細は、[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)の記事に書かれています。 > **メモ:** `flex-grow` や `flex-shrink` に指定する値は比率です。一般的には、たとえばあるアイテムを他の `flex: 1 1 200px` に設定したアイテムより 2 倍の比率で拡大させたいときには、 `flex: 2 1 200px` を設定します。しかし、望むならば `flex: 10 1 200px` と `flex: 20 1 200px` という書き方もできます。 @@ -149,9 +242,42 @@ flex-grow プロパティは割合で余白を分配するために使うこと `flex-grow`、`flex-shrink`、`flex-basis` の各プロパティを個別に使うケースは稀であり、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。`flex` 一括指定プロパティは、`flex-grow`、`flex-shrink`、`flex-basis` の順に 3 つの値を設定することができます。 -以下の例では、`flex` 一括指定プロパティの様々な値を試せるようになっています。 最初の値が `flex-grow` であり、正の値を指定することでアイテムが引き伸ばされるようになります。2 番目の値は `flex-shrink` です。正の値によりアイテムが収縮できるようになりますが、これはアイテムの寸法の合計が主軸をあふれる場合にのみ起こります。最後の値が `flex-basis` となり、アイテムが伸縮する際の基準値となります。 +以下のライブサンプルでは、`flex` 一括指定プロパティの様々な値を試せるようになっています。 最初の値が `flex-grow` であり、正の値を指定することでアイテムが引き伸ばされるようになります。2 番目の値は `flex-shrink` です。正の値によりアイテムが収縮できるようになりますが、これはアイテムの寸法の合計が主軸をあふれる場合にのみ起こります。最後の値が `flex-basis` となり、アイテムが伸縮する際の基準値となります。 + +```html live-sample___flex-properties +
    +
    One
    +
    Two
    +
    Three
    +
    +``` -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}} +```css live-sample___flex-properties +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.one { + flex: 1 1 auto; +} + +.two { + flex: 1 1 auto; +} + +.three { + flex: 1 1 auto; +} +``` + +{{EmbedLiveSample("flex-properties")}} また、ほとんどの用途をカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。 @@ -160,53 +286,144 @@ flex-grow プロパティは割合で余白を分配するために使うこと - `flex: none` - `flex: <正の数>` -`flex: initial` はフレックスボックスの初期値にリセットします。これは `flex: 0 1 auto` に設定することと同じです。この場合 `flex-grow` は 0 となるため、アイテムが `flex-basis` よりも大きくなることはありません。`flex-shrink` は 1 なので、必要な場合にはあふれるのではなく収縮します。`flex-basis` の値は `auto` です。アイテムに設定されている主軸方向の寸法か、またはアイテムの内容の寸法がフレックスアイテムの寸法として使用されます。 +`initial` のは [CSS 全般の値](/ja/docs/Web/CSS/CSS_Values_and_Units#css_全般の値)で、プロパティの初期値を表します。 `flex: initial` を設定すると、 3 つの個別指定プロパティの[初期値](#初期値)にリセットされ、`flex: 0 1 auto` と同じになります。この場合 `flex-grow` は `0` となるため、アイテムが `flex-basis` よりも大きくなることはありません。`flex-shrink` は `1` なので、必要な場合にははみ出さずに収縮します。 `flex-basis` の値は `auto` です。アイテムに設定されている主軸方向の寸法か、またはアイテムの内容の寸法がフレックスアイテムの寸法として使用されます。 -`flex: auto` では、`flex: 1 1 auto` に設定することと等しくなります。`flex: initial` とは、アイテムがコンテナーを埋めるように引き伸ばされる点を除いて同じで、必要に応じて収縮もします。 +`flex: auto` を使用すると、 `flex: 1 1 auto` を使用することと同等になります。これは `flex: initial` と似ていますが、アイテムがコンテナーを埋めるように引き伸ばされる点を除きます。 -`flex: none` は、全く伸縮性のない flex アイテムを作成します。これは `flex: 0 0 auto` と同じです。アイテムは伸び縮みせずに、`flex-basis: auto` のフレックスボックスとして配置されます。 +`flex: none` を使用すると、全く伸縮性のないフレックスアイテムを作成します。これは `flex: 0 0 auto` と同じです。アイテムは伸び縮みせずに、`flex-basis` が `auto` のフレックスボックスとして配置されます。 -チュートリアル内では、`flex: 1` や `flex: 2` のような設定をよく目にするでしょう。これは `flex: 1 1 0` を使うのと同様、`flex-basis` が 0 の状態から伸び縮みします。 +チュートリアル内では、`flex: 1` や `flex: 2` のような設定をよく目にするでしょう。これはそれぞれ `flex: 1 1 0` または `flex: 2 1 0` と書くのと同様です。`flex-basis` が `0` の状態から伸び縮みします。 これらの一括指定値について、以下の例で試してみてください。 -{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}} +```html live-sample___flex-shorthands +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-shorthands +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.one { + flex: 1; +} -## アイテム間での位置合わせ、端揃え、余白分配 +.two { + flex: 1; +} -フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間での余白の分配ができる点にあります。 +.three { + flex: 1; +} +``` + +{{EmbedLiveSample("flex-shorthands")}} + +## 配置、位置揃え、アイテム間の自由余白の分配 + +フレックスボックスの主な機能は、主軸と交差軸のアイテムの配置と位置揃え、そしてフレックスアイテム間の余白の分配です。これらのプロパティはアイテムそのものではなく、フレックスコンテナーに設定することに注意してください。 ### align-items -{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。 +{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの配置を行います。 -このプロパティの初期値は `stretch` であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。 +このプロパティの既定値は `stretch` であり、フレックスアイテムは既定ではフレックスコンテナの高さ（`flex-direction` が `column` または `column-reverse` に設定されている場合は幅）に引き伸ばされます。この高さはコンテナー内で最も背の高いアイテムか、フレックスコンテナーそのものに設定されているサイズから決まります。 -アイテムをフレックスコンテナーの先頭側に揃えるためには `align-items` に `flex-start` を設定し、末尾側に揃えるためには `flex-end` を、中央揃えにするには `center` を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。`align-items` に以下の値を設定したときにそれぞれ何が起こるか確認してください。 +アイテムをフレックスコンテナーの先頭側に揃えるためには `align-items` に `flex-start` または単に `start` を設定し、末尾側に揃えるためには `flex-end` または単に `end` を、中央揃えにするには `center` を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。`align-items` に以下の値を設定したときにそれぞれ何が起こるか確認してください。 - `stretch` - `flex-start` - `flex-end` +- `start` +- `end` - `center` - -{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}} +- `baseline` +- `last baseline` + +```html live-sample___align-items +
    +
    One
    +
    Two
    +
    Three
    には追加の
    テキストが
    あります
    +
    +``` + +```css live-sample___align-items +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + width: 500px; + height: 130px; + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: flex-start; +} +``` + +{{EmbedLiveSample("align-items")}} + +`align-items` はフレックスコンテナーに設定し、すべてのフレックスアイテムに影響します。あるフレックスアイテムを他と異なる配置にしたい場合は、 {{cssxref("align-self")}} を設定してください。 ### justify-content -{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり `flex-direction` で設定された方向における位置合わせを行います。初期値は `flex-start` で、コンテナーの先頭側からアイテムが並べられます。`flex-end` を設定することで末尾から、`center` を設定することで中央に並べることもできます。 +{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり `flex-direction` で設定された方向における配置を行います。初期値は `flex-start` で、コンテナーの先頭側からアイテムが並べられます。`flex-end` を設定することで末尾から、`center` を設定することで中央に並べることもできます。 -また、`space-between` を使用して、アイテムを配置したあとの残りの余白のすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけの余白を空けるには、`space-around` を使用します。`space-around` では、コンテナーの両端には、アイテムの間隔の半分の大きさの余白が設けられます。両端にも同じだけの余白を設けるには、`space-evenly` を使用します。この場合はコンテナの両端にフルサイズ (アイテムの間隔と同じ大きさ) の余白が設けられます。 +また、`space-between` を使用して、アイテムを配置したあとの残りの余白のすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけの余白を空けるには、`space-around` を使用します。`space-around` では、コンテナーの両端には、アイテムの間隔の半分の大きさの余白が設けられます。両端にも同じだけの余白を設けるには、`space-evenly` を使用します。この場合はコンテナーの両端にフルサイズ (アイテムの間隔と同じ大きさ) の余白が設けられます。 -例で、以下の `justify-content` の値を試してみましょう。 +ライブサンプルで、以下の `justify-content` の値を試してみましょう。 +- `start` +- `end` +- `left` +- `right` +- `normal` - `flex-start` - `flex-end` - `center` - `space-around` - `space-between` - `space-evenly` +- `stretch` -{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}} +```html live-sample___justify-content +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___justify-content +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + justify-content: flex-start; +} +``` + +{{EmbedLiveSample("justify-content")}} [フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどの用途で役に立つでしょう。 @@ -214,6 +431,12 @@ flex-grow プロパティは割合で余白を分配するために使うこと [`justify-items`](/ja/docs/Web/CSS/justify-items) プロパティは、フレックスボックスレイアウトでは無視されます。 +### place-items と place-content + +[`place-items`](/ja/docs/Web/CSS/place-items) プロパティは `align-items` と `justify-items` の一括指定プロパティです。フレックスコンテナーに設定すると、配置は設定されますが位置ぞろえは設定されず、 `justify-items` はフレックスボックスでは無視されます。 + +別な一括指定プロパティとして [`place-content`](/ja/docs/Web/CSS/place-content) があり、これは {{cssxref("align-content")}} プロパティと `justify-content` プロパティを定義します。 `align-content` プロパティは折り返しのあるフレックスコンテナーにのみ効果があり、[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)で解説しています。 + ## 次のステップ この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事では[フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)を見ていきます。 From 196d2a23c096d14154476d1ce968013bf2a5e458 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Wed, 27 Nov 2024 22:57:57 +0800 Subject: [PATCH 215/279] [zh-cn]: update the translation of HTTP `511` Status (#24670) --- files/zh-cn/web/http/status/511/index.md | 41 ++++++++++++++++++++---- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/files/zh-cn/web/http/status/511/index.md b/files/zh-cn/web/http/status/511/index.md index 93f6ea2dee6f21..228a0a9d4dae40 100644 --- a/files/zh-cn/web/http/status/511/index.md +++ b/files/zh-cn/web/http/status/511/index.md @@ -1,26 +1,53 @@ --- title: 511 Network Authentication Required slug: Web/HTTP/Status/511 +l10n: + sourceCommit: f584f1b27f9f3b78c95122c560f5135866a87eb0 --- {{HTTPSidebar}} -**`511 Network Authentication Required`** 是一种 HTTP 协议的错误状态代码，表示客户端需要通过验证才能使用该网络。 +HTTP **`511 Network Authentication Required`** [服务端错误响应](/zh-CN/docs/Web/HTTP/Status#服务端错误响应)状态码表示客户端需要进行认证才能获得网络访问权限。此状态不是由源服务器生成的，而是由控制网络访问的{{Glossary("Proxy_server", "代理服务器")}}拦截生成的。 -该状态码不是由源头服务器生成的，而是由控制网络访问的拦截代理服务器生成的。 - -网络运营商们有时候会在准许使用网络之前要求用户进行身份验证、接受某些条款，或者进行其他形式的与用户之间的互动（例如在网络咖啡厅或者机场）。他们通常用用户设备的 {{Glossary("MAC")}} 地址来进行识别。 +网络运营商有时会要求用户进行一些身份验证、接受条款或其他互动，才能授予访问权限（例如在网吧或机场）。他们通常使用客户端的媒体访问控制（MAC）地址来识别尚未完成上述操作的用户。 ## 状态 -```plain +```http 511 Network Authentication Required ``` +## 示例 + +### GET 请求的 511 响应 + +在以下示例中，客户端尝试访问网络上的某个资源。该请求未经身份验证，代理服务器返回 `511` 状态码，提示访问者进行登录。`511` 状态码确保非浏览器客户端不会将该响应误解为来自源服务器的响应。浏览器会在 10 秒后通过 {{HTMLelement("meta")}} 标签自动重定向，或者通过点击响应正文中的链接进行跳转： + +```http +GET /document HTTP/1.1 +Host: example.com +``` + +```http +HTTP/1.1 511 Network Authentication Required +Content-Type: text/html + + + + 需要网络身份验证 + + + +

    你需要通过本地网络认证才能获得访问权限。

    + + +``` + ## 规范 {{Specifications}} -## 相关内容 +## 参见 -- {{Glossary("Proxy server")}} +- [HTTP 响应状态码](/zh-CN/docs/Web/HTTP/Status) +- {{Glossary("Proxy server", "代理服务器")}} From 56193a0df69a8c553ad20e18c12492bc26e3bd64 Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Wed, 27 Nov 2024 23:06:20 +0800 Subject: [PATCH 216/279] [zh-cn]: create doc for window fence property (#24644) --- files/zh-cn/web/api/window/fence/index.md | 42 +++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 files/zh-cn/web/api/window/fence/index.md diff --git a/files/zh-cn/web/api/window/fence/index.md b/files/zh-cn/web/api/window/fence/index.md new file mode 100644 index 00000000000000..8946dd55446857 --- /dev/null +++ b/files/zh-cn/web/api/window/fence/index.md @@ -0,0 +1,42 @@ +--- +title: Window：fence 属性 +slug: Web/API/Window/fence +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef +--- + +{{SeeCompatTable}}{{APIRef("Fenced Frame API")}} + +{{domxref("Window")}} 接口的只读属性 `fence` 为当前文档上下文返回一个 {{domxref("Fence")}} 对象实例。 + +`Fence` 对象仅对嵌入在 {{htmlelement("fencedframe")}}（通过 {{domxref("FencedFrameConfig")}} 加载）或 {{htmlelement("iframe")}}（通过不透明 URN 加载）中的文档可用。 + +> [!NOTE] +> 参见 [`` 的工作原理](/zh-CN/docs/Web/API/Fenced_frame_API#fencedframe_的工作原理)了解有关 `FencedFrameConfig` 和不透明 URN 的一些描述。 + +## 值 + +一个 {{domxref("Fence")}} 对象实例，如果文档上下文无法访问 {{domxref("Fence")}} 对象，则为 `null`。 + +## 示例 + +```js +window.fence.reportEvent({ + eventType: "click", + eventData: JSON.stringify({ clickX: "123", clickY: "456" }), + destination: ["buyer", "seller"], +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.com 上的[围栏框架](https://developers.google.com/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.com 上的[隐私沙盒](https://developers.google.com/privacy-sandbox) From ccd056fdc6e8f7dbcbb350e7926b92745910cb0b Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 27 Nov 2024 19:15:55 +0100 Subject: [PATCH 217/279] [es] sync translated content (#24769) es: sync translated content --- files/es/_redirects.txt | 3 ++- files/es/_wikihistory.json | 8 ++++---- .../web/http/headers/{digest => content-digest}/index.md | 3 ++- 3 files changed, 8 insertions(+), 6 deletions(-) rename files/es/web/http/headers/{digest => content-digest}/index.md (98%) diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 808aa78ab3c224..f31c01ed33eb41 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1710,7 +1710,7 @@ /es/docs/Web/API/PositionOptions /es/docs/Web/API/Geolocation/getCurrentPosition /es/docs/Web/API/PushManager/supportedContentEncodings /es/docs/Web/API/PushManager/supportedContentEncodings_static /es/docs/Web/API/RandomSource/Obtenervaloresaleatorios /es/docs/Web/API/Crypto/getRandomValues -/es/docs/Web/API/SubtleCrypto/encrypt /es/docs/Web/HTTP/Headers/Digest +/es/docs/Web/API/SubtleCrypto/encrypt /es/docs/Web/HTTP/Headers/Content-Digest /es/docs/Web/API/UIEvent/pageX /es/docs/Web/API/MouseEvent/pageX /es/docs/Web/API/URL/createObjectURL /es/docs/Web/API/URL/createObjectURL_static /es/docs/Web/API/WebGL_API/Getting_started_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL @@ -2216,6 +2216,7 @@ /es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types /es/docs/Web/HTTP/MIME_types/Common_types /es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME /es/docs/Web/HTTP/MIME_types/Common_types /es/docs/Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x /es/docs/Web/HTTP/Connection_management_in_HTTP_1.x +/es/docs/Web/HTTP/Headers/Digest /es/docs/Web/HTTP/Headers/Content-Digest /es/docs/Web/HTTP/Peticiones_condicionales /es/docs/Web/HTTP/Conditional_requests /es/docs/Web/HTTP/Sesión /es/docs/Web/HTTP/Session /es/docs/Web/HTTP/Status/8080 /es/docs/Web/HTTP/Status/413 diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 6f362a29aaf10f..402959dda439af 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -9562,6 +9562,10 @@ "modified": "2020-10-28T14:39:35.644Z", "contributors": ["noksenberg", "IsraelFloresDGA", "ervin_santos"] }, + "Web/HTTP/Headers/Content-Digest": { + "modified": "2020-10-15T22:27:29.781Z", + "contributors": ["joseluisq"] + }, "Web/HTTP/Headers/Content-Disposition": { "modified": "2020-10-15T21:58:39.489Z", "contributors": ["kbono", "lagwy"] @@ -9594,10 +9598,6 @@ "modified": "2020-10-15T22:29:00.325Z", "contributors": ["IsraelFloresDGA"] }, - "Web/HTTP/Headers/Digest": { - "modified": "2020-10-15T22:27:29.781Z", - "contributors": ["joseluisq"] - }, "Web/HTTP/Headers/ETag": { "modified": "2020-10-15T21:57:09.273Z", "contributors": ["zechworld", "evalenzuela", "stwilberth", "edgarrod71"] diff --git a/files/es/web/http/headers/digest/index.md b/files/es/web/http/headers/content-digest/index.md similarity index 98% rename from files/es/web/http/headers/digest/index.md rename to files/es/web/http/headers/content-digest/index.md index af8a3cef49a3c6..46e5569753441f 100644 --- a/files/es/web/http/headers/digest/index.md +++ b/files/es/web/http/headers/content-digest/index.md @@ -1,6 +1,7 @@ --- title: SubtleCrypto.digest() -slug: Web/HTTP/Headers/Digest +slug: Web/HTTP/Headers/Content-Digest +original_slug: Web/HTTP/Headers/Digest --- {{APIRef("Web Crypto API")}} From 368f576d3a5054a7204de3544c122c46d8ec0d8c Mon Sep 17 00:00:00 2001 From: Arthur Sedlukha Date: Thu, 28 Nov 2024 03:59:12 +0900 Subject: [PATCH 218/279] [ru]: update Web/HTML/Element/head translation (#24311) * [ru]: tag docs sync * Apply suggestions from code review * improve wording --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Leonid Vinogradov --- files/ru/web/html/element/head/index.md | 76 +++++++++++++++++++------ 1 file changed, 59 insertions(+), 17 deletions(-) diff --git a/files/ru/web/html/element/head/index.md b/files/ru/web/html/element/head/index.md index 241a886083c549..2f3a141b4543a6 100644 --- a/files/ru/web/html/element/head/index.md +++ b/files/ru/web/html/element/head/index.md @@ -1,43 +1,85 @@ --- title: ": элемент метаданных документа" slug: Web/HTML/Element/head +l10n: + sourceCommit: 2dc9e66061f63a06320f5c1c554a238e1b25c369 --- {{HTMLSidebar}} -**HTML-элемент ``** содержит машиночитаемую информацию ({{glossary("metadata")}}) о документе, например его [заголовок](/ru/docs/Web/HTML/Element/title), [скрипты](/ru/docs/Web/HTML/Element/script) и [страницы стилей](/ru/docs/Web/HTML/Element/style). +[HTML](/ru/docs/Web/HTML)-элемент **``** содержит машиночитаемую информацию ({{glossary("metadata", "метаданные")}}) о документе, например его [заголовок](/ru/docs/Web/HTML/Element/title), [скрипты](/ru/docs/Web/HTML/Element/script) и [таблицы стилей](/ru/docs/Web/HTML/Element/style). В HTML-документе может быть только один элемент ``. -> **Примечание:** `` в основном содержит информацию для машинной обработки, а не для восприятия человеком. Информацию, видимую человеком, такую как заголовки верхнего уровня и перечисленные авторы, смотрите в элементе {{HTMLElement("header")}}. - -| [Категории контента](/ru/docs/Web/Guide/HTML/Content_categories) | Отсутствуют. | -| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Допустимое содержимое | Если документ является документом {{HTMLElement("iframe")}} с атрибутом [`srcdoc`](/ru/docs/Web/HTML/Element/iframe#srcdoc), или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.Иначе, один или более элементов содержащих метаданные, один из которых является элементом {{HTMLElement("title")}}. | -| Пропуск тегов | Открывающий тег может быть пропущен, если первым, что находится внутри элемента `` является другой элемент. Закрывающий тег может быть пропущен, если первое, что следует за элементом `` не является пробелом или комментарием. | -| Допустимые родители | Элемент {{HTMLElement("html")}} (`` является его первым дочерним элементом). | -| Допустимые ARIA-роли | нет | -| DOM-интерфейс | {{domxref("HTMLHeadElement")}} | +> **Примечание:** `` в основном содержит информацию для машинной обработки, а не для восприятия человеком. Про информацию в человекочитаемом виде, такую как заголовки верхнего уровня и список авторов, смотрите в элементе {{HTMLElement("header")}}. ## Атрибуты -К этому элементу применимы [глобальные атрибуты](/ru/docs/Web/HTML/Общие_атрибуты). +Этот элемент поддерживает [глобальные атрибуты](/ru/docs/HTML/Global_attributes). - `profile` {{deprecated_inline}} - - : {{glossary("URI")}} одного или более профилей метаданных, разделённые {{Glossary("whitespace", "пробелами")}}. + - : {{glossary("URI")}} одного или нескольких профилей метаданных, разделённые {{Glossary("whitespace", "пробелами")}}. -## Пример +## Примеры ```html - + + + Заголовок страницы ``` -## Примечание - -HTML5-совместимые браузеры автоматически создают элемент ``, если его теги пропущены в разметке. [Такое поведение не гарантируется в старых браузерах](https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/). +## Техническая сводка + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Категории контента + Отсутствуют.
    Допустимое содержимое +

    + Если это {{HTMLElement("iframe")}}-документ с атрибутом srcdoc или если информация о заголовке доступна из протокола более высокого уровня (например, тема в электронном письме HTML), то ноль или более элементов, содержащих метаданные. +

    +

    + Иначе, один или более элементов, содержащих метаданные, один из которых является элементом {{HTMLElement("title")}}. +

    +
    Пропуск тегов + Открывающий тег может быть пропущен, если первым, что находится внутри элемента <head>, является другой элемент. Закрывающий тег может быть пропущен, если первое, что следует за элементом <head>, не является пробелом или комментарием. +
    Допустимые родители + Элемент {{HTMLElement("html")}} (<head> является его первым дочерним элементом). +
    Неявная ARIA-роль + Нет соответствующей роли +
    Допустимые ARIA-ролиАтрибут role не допускается
    DOM-интерфейс{{domxref("HTMLHeadElement")}}
    ## Спецификации From 744c7bf8943810e1211e1d22c287c5c65af7e610 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Thu, 28 Nov 2024 10:26:06 +0800 Subject: [PATCH 219/279] [zh-cn]: update the translation of PushMessageData `json()` method (#24800) --- .../web/api/pushmessagedata/json/index.md | 38 +++++++++---------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/files/zh-cn/web/api/pushmessagedata/json/index.md b/files/zh-cn/web/api/pushmessagedata/json/index.md index b69b3899d73df1..0669bb843e829b 100644 --- a/files/zh-cn/web/api/pushmessagedata/json/index.md +++ b/files/zh-cn/web/api/pushmessagedata/json/index.md @@ -1,44 +1,42 @@ --- -title: PushMessageData.json() +title: PushMessageData：json() 方法 slug: Web/API/PushMessageData/json +l10n: + sourceCommit: 3a91caa0ebbc5131ed75afe0e5168cd5bffc0976 --- -{{APIRef("Push API")}}{{SeeCompatTable()}} +{{APIRef("Push API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} -{{domxref("PushMessageData")}} 接口的 **`json()`**方法将推送消息数据提取为 一个 [JSON](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON) 对象。 +{{domxref("PushMessageData")}} 接口的 **`json()`** 方法通过将推送消息数据解析为 [JSON](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON) 字符串并返回结果来提取推送消息数据。 -## Syntax +## 语法 -```js -let massage_Json = PushEvent.data.json(); +```js-nolint +json() ``` -### Parameters +### 参数 -None. +无。 -### Returns +### 返回值 -A [JSON](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON) object. +将推送事件数据解析为 JSON 后的结果。这可以是任何可以用 JSON 表示的内容，例如对象、数组、字符串、数字等。 -## Examples +## 示例 ```js -self.addEventListener("push", function (event) { - var jsonObj = event.data.json(); +self.addEventListener("push", (event) => { + const myData = event.data.json(); - // do something with your JSON + // 对你的数据进行处理 }); ``` -## Specifications +## 规范 {{Specifications}} -## Browser Compatibility +## 浏览器兼容性 {{Compat}} - -## See also - -- [Using the Push API](/zh-CN/docs/Web/API/Push_API/Using_the_Push_API) From 8702050ff817b2ec9145a2d8d425f230c4891907 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Thu, 28 Nov 2024 10:27:11 +0800 Subject: [PATCH 220/279] [zh-cn]: update the translation of Element `clientLeft` property (#24795) Co-authored-by: A1lo --- .../zh-cn/web/api/element/clientleft/index.md | 62 +++++++++++++------ 1 file changed, 42 insertions(+), 20 deletions(-) diff --git a/files/zh-cn/web/api/element/clientleft/index.md b/files/zh-cn/web/api/element/clientleft/index.md index 8d5830065c47d9..3cbac093cdf5fa 100644 --- a/files/zh-cn/web/api/element/clientleft/index.md +++ b/files/zh-cn/web/api/element/clientleft/index.md @@ -1,44 +1,66 @@ --- -title: Element.clientLeft +title: Element：clientLeft 属性 slug: Web/API/Element/clientLeft +l10n: + sourceCommit: d0b23f3f26637aa405ee9ee0a0892fc6e9b742ef --- -{{ APIRef() }} +{{ APIRef("DOM") }} -表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。`clientLeft` 不包括左外边距和左内边距。`clientLeft` 是只读的。 +元素左侧边框的宽度（像素）。如果元素的文本方向为从右到左，并且内容溢出导致渲染了左侧的垂直滚动条，则该值包含垂直滚动条的宽度。`clientLeft` 不包含左外边距或左内边距的值。`clientLeft` 是只读属性。 -从 [Gecko](zh-CN/Gecko) 1.9（[Firefox 3](zh-CN/Firefox_3) [Firefox bug 111207](https://bugzil.la/111207)）开始，基于 Gecko 的应用支持 `clientLeft` 属性。该属性在 Firefox 2 及更早的版本中不被支持。 +> [!NOTE] +> 此属性将会对值取整。如果需要小数值，请使用 {{ domxref("element.getBoundingClientRect()") }}。 -当 [_layout.scrollbar.side_ preference](http://kb.mozillazine.org/Layout.scrollbar.side) （译注：这个属性好像是只在火狐浏览器中才有）被设为 1 或 3，且文本方向被设为从右到左（RTL），则垂直滚动条位于左边，这会影响到 `clientLeft` 属性值的计算。 +> [!NOTE] +> 当元素的属性为 `display: inline` 时，无论元素是否有边框，`clientLeft` 都会返回 `0`。 ## 值 -一个数字。 +数字。 ## 示例 -padding-top +在以下示例中，视口区域具有白色背景和一个 24 像素宽的黑色 `border-left`。`clientLeft` 的值是从外边距（黄色）区域结束到内边距和内容区域（白色）开始的距离：即 24 像素。 -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +### HTML -Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +```html +
    +
    +

    + 对大多数人来说，生活的变化是缓慢的。今天和昨天似乎没有什么不同；明天也可能和今天一样。也许人一生仅仅有那么一两个辉煌的瞬间，甚至一生都可能在平淡无奇中度过。——路遥 +

    +
    +
    +``` -padding-bottom +### CSS -**Left** **Top** **Right** **Bottom** _margin-top_ _margin-bottom_ _border-top_ _border-bottom_ +```css +#container { + margin: 3rem; + background-color: rgb(255 255 204); + border: 4px dashed black; +} -## Specifications +#contained { + margin: 1rem; + border-left: 24px black solid; + padding: 0px 28px; + overflow: auto; + background-color: white; +} +``` -{{Specifications}} - -## Browser compatibility +### 结果 -{{Compat}} +{{EmbedLiveSample("示例", 400, 350)}} -## 备注 +## 规范 -`clientLeft` 首次出现于 MS IE DHTML 对象模型中。 +{{Specifications}} -元素的文本方向被设为从右到左后，其垂直滚动条的位置取决于 [_layout.scrollbar.side_ preference](http://kb.mozillazine.org/Layout.scrollbar.side) +## 浏览器兼容性 -当元素设置 `display: inline` 后，无论是否有边框，`clientLeft` 始终返回 `0` 。 +{{Compat}} From a37ad86302936669dc6ccab636c1dc87a4ad499b Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 28 Nov 2024 10:58:31 +0800 Subject: [PATCH 221/279] [zh-cn] init translation of html attribute step (#24799) --- files/zh-cn/web/html/attributes/step/index.md | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 files/zh-cn/web/html/attributes/step/index.md diff --git a/files/zh-cn/web/html/attributes/step/index.md b/files/zh-cn/web/html/attributes/step/index.md new file mode 100644 index 00000000000000..1117ba001f8e70 --- /dev/null +++ b/files/zh-cn/web/html/attributes/step/index.md @@ -0,0 +1,138 @@ +--- +title: HTML 属性：step +slug: Web/HTML/Attributes/step +l10n: + sourceCommit: 067a40e4ed27ea6e1f3b8bbfec15cd9dc3078f4c +--- + +{{HTMLSidebar}} + +**`step`** 属性是值必须遵循的粒度数值，或关键字 `any`。此属性对数值输入类型有效，包括 {{HTMLElement("input/date", "date")}}、{{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}}、{{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 类型。 + +`step` 设置了点击上下旋转按钮、在范围上左右移动滑块以及验证不同日期类型时的*步进间隔*。如果没有明确指定，`number` 和 `range` 的 `step` 默认为 1，日期/时间输入类型的 `step` 默认为 1 个单位类型（分、周、月、日）。值必须是正数（整数或浮点数）或特殊值 `any`，这意味着不隐含步进，允许任何值（除其他限制外，如 [`min`](/zh-CN/docs/Web/HTML/Attributes/min) 和 [`max`](/zh-CN/docs/Web/HTML/Attributes/max)）。 + +`number` 输入类型的默认步进值为 1，只允许输入整数，*除非*步进基数不是整数。`time` 的默认步进值为 60 秒，值 900 等同于 15 分钟。 + +## 语法 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + step 的默认值 +
    输入类型值示例
    {{HTMLElement("input/date", "date")}}1（天）<input type="date" min="2019-12-25" step="1">
    {{HTMLElement("input/month", "month")}}1（个月）<input type="month" min="2019-12" step="12">
    {{HTMLElement("input/week", "week")}}1（周）<input type="week" min="2019-W23" step="2">
    {{HTMLElement("input/time", "time")}}60（秒）<input type="time" min="09:00" step="900">
    + {{HTMLElement("input/datetime-local", "datetime-local")}} + 60（秒） + <input type="datetime-local" min="2019-12-25T19:30" + step="900"> +
    {{HTMLElement("input/number", "number")}}1 + <input type="number" min="0" step="0.1" max="10"> +
    {{HTMLElement("input/range", "range")}}1<input type="range" min="0" step="2" max="10">
    + +如果未明确设置 `any`，则 `number`、日期/时间输入类型和 `range` 输入类型的有效值等于步进的基础值（[`min`](/zh-CN/docs/Web/HTML/Attributes/min) 值）和步进值的增量，如果指定了 [`max`](/zh-CN/docs/Web/HTML/Attributes/max) 值，则增量最大为 `max`。以下示例的结果是对任何 10 或更大的偶整数都有效： + +```html + +``` + +如果省略了 `step` 值，任何整数均有效，但对像 4.2 这样的浮点数无效，因为 `step` 默认为 1。要使得 4.2 成为有效值： + +- 将 `step` 设置为 `any`、0.1 或 0.2 +- `min` 值以 `.2` 结束，如 0.2、1.2 或 -5.2 + +## 示例 + +### step 中 `min` 的影响 + +即使不包含 `step` 属性，`min` 的值也能定义有效值。这是因为对于 `number` 输入类型，`step` 的默认值是 `1`。 + +在本例中，我们会在无效输入的周围添加一个大红边框： + +```css +input:invalid { + border: solid red 3px; +} +``` + +然后，我们定义一个最小值为 1.2、步长值为 2 的输入： + +```html + +``` + +有效值包括 1.2、3.2、5.2、7.2、9.2、11.2 等。只有整数部分为奇数、小数部分为 0.2 的浮点数才有效。数字旋转器（如果存在）会生成 1.2 或更大的有效浮点数值，增量为 2。 + +{{EmbedLiveSample("step 中 min 的影响","100%",55)}} + +> [!NOTE] +> 当用户输入的数据不符合步进配置时，该值在约束验证中被视为无效，并将匹配 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 伪类。 + +参见[客户端验证](/zh-CN/docs/Web/HTML/Constraint_validation)和 {{domxref("ValidityState.stepMismatch", "stepMismatch")}} 以了解更多信息。 + +## 无障碍考虑 + +提供说明，帮助用户了解如何填写表单和使用各个表单控件。说明任何必需和可选的输入、数据格式以及其他相关信息。使用 `min` 属性时，应确保用户理解这一最低要求。在 {{htmlelement('label')}} 中提供说明可能就足够了。如果在标签之外提供说明，这样可以更灵活地定位和设计，可以考虑使用 [`aria-labelledby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) 或 [`aria-describedby`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`max`](/zh-CN/docs/Web/HTML/Attributes/max) +- [`min`](/zh-CN/docs/Web/HTML/Attributes/min) +- [约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) +- [表单验证](/zh-CN/docs/Learn/Forms/Form_validation) +- {{domxref('validityState.stepMismatch')}} +- {{cssxref(':out-of-range')}} +- {{htmlelement('input')}} +- {{HTMLElement("input/date", "date")}}、{{HTMLElement("input/month", "month")}}、{{HTMLElement("input/week", "week")}}、{{HTMLElement("input/time", "time")}}、{{HTMLElement("input/datetime-local", "datetime-local")}}、{{HTMLElement("input/number", "number")}} 和 {{HTMLElement("input/range", "range")}} 输入类型，{{htmlelement('meter')}} 元素 From 6599fe9a850931fc1abdd94eeda806aa18a1bbb7 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Thu, 28 Nov 2024 11:36:46 +0800 Subject: [PATCH 222/279] [zh-cn]: update the translation of Request `clone()` method (#24777) Co-authored-by: A1lo --- files/zh-cn/web/api/request/clone/index.md | 32 +++++++++++++--------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/files/zh-cn/web/api/request/clone/index.md b/files/zh-cn/web/api/request/clone/index.md index cdbfd2d8692eac..347c3e67d45745 100644 --- a/files/zh-cn/web/api/request/clone/index.md +++ b/files/zh-cn/web/api/request/clone/index.md @@ -1,18 +1,24 @@ --- -title: Request.clone() +title: Request：clone() 方法 slug: Web/API/Request/clone +l10n: + sourceCommit: 5045ba92ac9503b2a00ec85efae4b7d613a64b58 --- -{{APIRef("Fetch")}} +{{APIRef("Fetch API")}}{{AvailableInWorkers}} -{{domxref("Request")}} 接口中的**`clone()`** 方法可以创建一个当前`Request` 对象的副本。 +{{domxref("Request")}} 接口的 **`clone()`** 方法创建当前 `Request` 对象的副本。 -如果响应体{{domxref("Body")}}已经被使用过，那么 `clone()` 会抛出一个 {{jsxref("TypeError")}}。实际上，`clone()` 的主要作用就是支持 {{domxref("Body")}} 对象的多次使用 +与底层 {{domxref("ReadableStream.tee")}} API 类似，克隆的 `Response` 的 {{domxref("Request.body", "body")}} 会根据两个主体中消费速度更快的消费者来触发背压，且未读取的数据会在内部入队到消费速度较慢的主体中，没有任何限制或背压。从数据流构造 `Request` 并将其 `clone` 时要小心。 + +如果请求体已被使用，`clone()` 就会抛出 {{jsxref("TypeError")}}。实际上，`clone()` 存在的主要原因是允许主体对象的多次使用（当它们只能使用一次时）。 + +如果你打算修改请求，可能更倾向于使用 {{domxref("Request")}} 构造函数。 ## 语法 -```js -var newRequest = request.clone(); +```js-nolint +clone() ``` ### 参数 @@ -21,15 +27,15 @@ var newRequest = request.clone(); ### 返回值 -{{domxref("Request")}} 对象，也就是 `Request` 的完整拷贝 +{{domxref("Request")}} 对象，它是调用了 `clone()` 的 `Request` 的完整副本。 ## 示例 -在下面的代码中，我们使用 {{domxref("Request.Request()")}} 构造函数创建了一个新的 request 对象 (请求当前文件夹中的一个图片文件)，然后拷贝了这个 `request` 对象。 +在以下代码片段中，我们使用 {{domxref("Request.Request", "Request()")}} 构造函数创建了一个新的请求（请求同一目录下的一个图像文件），然后克隆了该请求。 ```js -var myRequest = new Request("flowers.jpg"); -var newRequest = myRequest.clone(); // a copy of the request is now stored in newRequest +const myRequest = new Request("flowers.jpg"); +const newRequest = myRequest.clone(); // 请求的副本现已存储在 newRequest 中。 ``` ## 规范 @@ -40,8 +46,8 @@ var newRequest = myRequest.clone(); // a copy of the request is now stored in ne {{Compat}} -## 了解更多 +## 参见 -- [ServiceWorker API](/zh-CN/docs/Web/API/ServiceWorker_API) -- [HTTP access control (CORS)](/zh-CN/docs/Web/HTTP/Access_control_CORS) +- [Service Worker API](/zh-CN/docs/Web/API/Service_Worker_API) +- [HTTP 访问控制（CORS）](/zh-CN/docs/Web/HTTP/CORS) - [HTTP](/zh-CN/docs/Web/HTTP) From a8f2a708bc63b67da8e342a92edaa9cc09b6d379 Mon Sep 17 00:00:00 2001 From: Firefly <45487685+Snoopy1866@users.noreply.github.com> Date: Thu, 28 Nov 2024 23:10:01 +0800 Subject: [PATCH 223/279] [zh-cn]: update the translation of phrase `double struck glyphs` (#24817) --- files/zh-cn/web/css/font-family/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/font-family/index.md b/files/zh-cn/web/css/font-family/index.md index b1b04a3aa23090..db151b2109dcd9 100644 --- a/files/zh-cn/web/css/font-family/index.md +++ b/files/zh-cn/web/css/font-family/index.md @@ -104,7 +104,7 @@ font-family: "Gill Sans Extrabold", sans-serif; - `ui-rounded` - : 默认用户界面的圆体。 - `math` - - : 针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的 double struck glyphs。 + - : 针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的双线体字形。 - `emoji` - : 专门用于呈现 Emoji 表情符号的字体。 - `fangsong` From 304f68090f14ff486f201f30242b6f88b565ec28 Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Thu, 28 Nov 2024 23:15:39 +0800 Subject: [PATCH 224/279] [zh-cn]: create docs for HTMLAnchorElement (#24678) Co-authored-by: A1lo --- .../htmlanchorelement/attributionsrc/index.md | 74 +++++++++++++++ .../api/htmlanchorelement/download/index.md | 10 +- .../web/api/htmlanchorelement/hash/index.md | 18 ++-- .../web/api/htmlanchorelement/host/index.md | 42 +++++++++ .../api/htmlanchorelement/hostname/index.md | 34 +++++++ .../web/api/htmlanchorelement/href/index.md | 12 ++- .../api/htmlanchorelement/hreflang/index.md | 56 ++++++++++++ .../zh-cn/web/api/htmlanchorelement/index.md | 91 +++++++++++++++++++ .../web/api/htmlanchorelement/origin/index.md | 37 ++++---- .../api/htmlanchorelement/password/index.md | 8 +- .../api/htmlanchorelement/pathname/index.md | 6 +- .../web/api/htmlanchorelement/ping/index.md | 43 +++++++++ .../web/api/htmlanchorelement/port/index.md | 45 +++++++++ .../api/htmlanchorelement/protocol/index.md | 10 +- .../htmlanchorelement/referrerpolicy/index.md | 54 ++++++----- .../web/api/htmlanchorelement/rel/index.md | 36 ++++++++ .../api/htmlanchorelement/rellist/index.md | 44 +++++++++ .../web/api/htmlanchorelement/search/index.md | 40 ++++---- .../web/api/htmlanchorelement/target/index.md | 44 +++++++++ .../web/api/htmlanchorelement/text/index.md | 50 ++++++++++ .../api/htmlanchorelement/tostring/index.md | 37 +++++--- .../web/api/htmlanchorelement/type/index.md | 52 +++++++++++ .../api/htmlanchorelement/username/index.md | 2 +- 23 files changed, 745 insertions(+), 100 deletions(-) create mode 100644 files/zh-cn/web/api/htmlanchorelement/attributionsrc/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/host/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/hostname/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/hreflang/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/ping/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/port/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/rel/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/rellist/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/target/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/text/index.md create mode 100644 files/zh-cn/web/api/htmlanchorelement/type/index.md diff --git a/files/zh-cn/web/api/htmlanchorelement/attributionsrc/index.md b/files/zh-cn/web/api/htmlanchorelement/attributionsrc/index.md new file mode 100644 index 00000000000000..2b3cd8ec2bf72d --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/attributionsrc/index.md @@ -0,0 +1,74 @@ +--- +title: HTMLAnchorElement：attributionSrc 属性 +slug: Web/API/HTMLAnchorElement/attributionSrc +l10n: + sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 +--- + +{{APIRef("Attribution Reporting API")}}{{securecontext_header}}{{SeeCompatTable}} + +{{domxref("HTMLAnchorElement")}} 接口的 **`attributionSrc`** 属性用于以编程方式获取和设置 {{htmlelement("a")}} 元素上的 [`attributionsrc`](/zh-CN/docs/Web/HTML/Element/a#attributionsrc) 属性，反映该属性的值。`attributionsrc` 指定你希望浏览器发送 {{httpheader("Attribution-Reporting-Eligible")}} 标头。在服务器端，这用于触发在响应中发送 {{httpheader("Attribution-Reporting-Register-Source")}} 标头，以注册一个[基于导航的归因来源](/zh-CN/docs/Web/API/Attribution_Reporting_API/Registering_sources#基于导航的归因来源)。 + +当浏览器接收到导航响应时，它会存储与基于导航的归因来源相关联的源数据（如 {{httpheader("Attribution-Reporting-Register-Source")}} 响应标头中所提供的数据）。 + +参见[归因报告 API](/zh-CN/docs/Web/API/Attribution_Reporting_API) 以获取更多详细信息。 + +> **备注：** `` 元素不能用作归因触发器，只能用作归因来源。 + +## 值 + +一个字符串。此属性有两个版本可供获取和设置： + +- 空字符串，即 `aElem.attributionSrc=""`。这表示你希望将 {{httpheader("Attribution-Reporting-Eligible")}} 标头发送到 `href` 属性所指向的同一服务器。当你在同一服务器上处理归因来源注册时，这是合适的。 +- 包含一个或多个 URL 的值，例如： + + ```js + aElem.attributionSrc = + "https://a.example/register-source https://b.example/register-source"; + ``` + + 当请求的资源不在你控制的服务器上，或者你只是想在不同的服务器上处理归因来源注册的情况下非常有用。在这种情况下，你可以指定一个或多个 URL 作为 `attributionSrc` 的值。当资源请求发生时，除了资源来源之外，还会向 `attributionSrc` 中指定的 URL 发送 {{httpheader("Attribution-Reporting-Eligible")}} 标头。然后，这些 URL 可以通过回复 {{httpheader("Attribution-Reporting-Register-Source")}} 来注册来源。 + + > [!NOTE] + > 指定多个 URL 意味着可以在同一功能上注册多个归因来源。例如，你可能有不同的营销活动需要衡量其成功效果，这些活动涉及基于不同数据生成不同的报告。 + +## 示例 + +### 设置空的 attributionSrc + +```html + 点击访问我们的商店 +``` + +```js +const aElem = document.querySelector("a"); +aElem.attributionSrc = ""; +``` + +### 设置包含 URL 的 attributionSrc + +```html + 点击访问我们的商店 +``` + +```js +// 对 URL 进行编码，以防它们包含特殊字符 +// 例如“=”，这种字符可能会被错误地解析。 +const encodedUrlA = encodeURIComponent("https://a.example/register-source"); +const encodedUrlB = encodeURIComponent("https://b.example/register-source"); + +const aElem = document.querySelector("a"); +aElem.attributionSrc = `${encodedUrlA} ${encodedUrlB}`; +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [归因报告 API](/zh-CN/docs/Web/API/Attribution_Reporting_API) diff --git a/files/zh-cn/web/api/htmlanchorelement/download/index.md b/files/zh-cn/web/api/htmlanchorelement/download/index.md index 96f40648797ab9..bdb25c1b420bac 100644 --- a/files/zh-cn/web/api/htmlanchorelement/download/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/download/index.md @@ -1,14 +1,16 @@ --- -title: HTMLAnchorElement.download +title: HTMLAnchorElement：download 属性 slug: Web/API/HTMLAnchorElement/download +l10n: + sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 --- {{APIRef("HTML DOM")}} -**`HTMLAnchorElement.download`** 属性是一个{{jsxref("DOMString")}} ，表明链接的资源将被下载，而不是显示在浏览器中。该值表示下载文件的建议名称。如果该名称不是基础操作系统的有效文件名，浏览器将对其进行调整。 +**`HTMLAnchorElement.download`** 属性是一个字符串，表示链接的资源旨在被下载而非在浏览器中显示。如果该属性有值，则指定了在本地文件系统中标记资源时使用的默认文件名。如果名称在底层操作系统中不是有效的文件名，浏览器将会对其进行调整。 > [!NOTE] -> 该值对于下载行为来说不一定是有用的，同时也不能决定下载行为是否发生。 +> 这个值可能不会被用于下载。这个值不能用来确定下载是否会发生。 ## 值 @@ -18,6 +20,6 @@ slug: Web/API/HTMLAnchorElement/download {{Specifications}} -## 浏览器的兼容性 +## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/api/htmlanchorelement/hash/index.md b/files/zh-cn/web/api/htmlanchorelement/hash/index.md index 0658cdf3b17084..4e523870d71e63 100644 --- a/files/zh-cn/web/api/htmlanchorelement/hash/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/hash/index.md @@ -2,14 +2,14 @@ title: HTMLAnchorElement：hash 属性 slug: Web/API/HTMLAnchorElement/hash l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: 3e301467a02808e9fc488d7012f1f49eb66a5980 --- {{ APIRef("HTML DOM") }} -**`HTMLHyperlinkElementUtils.hash`** 属性返回一个字符串，其中包含一个 `'#'`，后面是 URL 的片段标识符。 +**`HTMLAnchorElement.hash`** 属性返回一个字符串，该字符串包含一个 `'#'` 符号，后面跟着 URL 的片段标识符。 -片段没有经过[百分号编码](https://zh.wikipedia.org/wiki/百分号编码)。如果 URL 没有包含片段标识符，这个属性为一个空的字符串，`""`。 +片段是[百分号编码](/zh-CN/docs/Glossary/Percent-encoding)的。如果 URL 没有片段标识符，则此属性包含一个空字符串，即 `""`。 ## 值 @@ -17,19 +17,21 @@ l10n: ## 示例 -### 从锚点链接获取 hash 值 +### 从锚点链接中获取哈希值 -给定 HTML 代码如下： +给定 HTML ```html -示例 + + 示例 + ``` -你可以像这样获取锚点的 hash 值： +你可以像这样获取锚点哈希值： ```js const anchor = document.getElementById("myAnchor"); -anchor.hash; // 返回 '#示例' +anchor.hash; // “#%E7%A4%BA%E4%BE%8B” ``` ## 规范 diff --git a/files/zh-cn/web/api/htmlanchorelement/host/index.md b/files/zh-cn/web/api/htmlanchorelement/host/index.md new file mode 100644 index 00000000000000..778fda2ea6ae22 --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/host/index.md @@ -0,0 +1,42 @@ +--- +title: HTMLAnchorElement：host 属性 +slug: Web/API/HTMLAnchorElement/host +l10n: + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 +--- + +{{ApiRef("HTML DOM")}} + +**`HTMLAnchorElement.host`** 属性是一个字符串，包含主机名，即 _hostname_，并且如果 URL 的*端口号*不为空，则后面会跟一个 `':'` 和 URL 的*端口号*。 + +## 值 + +一个字符串。 + +## 示例 + +```js +const anchor = document.createElement("a"); + +anchor.href = "https://developer.mozilla.org/zh-CN/HTMLAnchorElement"; +anchor.host === "developer.mozilla.org"; + +anchor.href = "https://developer.mozilla.org:443/zh-CN/HTMLAnchorElement"; +anchor.host === "developer.mozilla.org"; +// 不包含端口号，因为 443 是该方案的默认端口 + +anchor.href = "https://developer.mozilla.org:4097/zh-CN/HTMLAnchorElement"; +anchor.host === "developer.mozilla.org:4097"; +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/hostname/index.md b/files/zh-cn/web/api/htmlanchorelement/hostname/index.md new file mode 100644 index 00000000000000..352598fabfea7e --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/hostname/index.md @@ -0,0 +1,34 @@ +--- +title: HTMLAnchorElement：hostname 属性 +slug: Web/API/HTMLAnchorElement/hostname +l10n: + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 +--- + +{{ApiRef("HTML DOM")}} + +**`HTMLAnchorElement.hostname`** 属性是一个包含 URL 域名的字符串。 + +## 值 + +一个字符串。 + +## 示例 + +```js +// 文档中有一个 元素 +const anchor = document.getElementById("myAnchor"); +anchor.hostname; // 返回“developer.mozilla.org” +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/href/index.md b/files/zh-cn/web/api/htmlanchorelement/href/index.md index 9e2732194e3260..7c49199a268c16 100644 --- a/files/zh-cn/web/api/htmlanchorelement/href/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/href/index.md @@ -1,11 +1,13 @@ --- -title: HTMLAnchorElement.href +title: HTMLAnchorElement：href 属性 slug: Web/API/HTMLAnchorElement/href +l10n: + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{ApiRef("HTML DOM")}} -**`HTMLAnchorElement.href`** 属性是一个返回包含整个 URL 的字符串的 {{Glossary("stringifier")}}，且允许 href 被更新。 +**`HTMLAnchorElement.href`** 属性是一个{{Glossary("stringifier", "字符串化器")}}，它返回一个包含完整 URL 的字符串，并且允许更新 `href` 属性。 ## 值 @@ -14,9 +16,9 @@ slug: Web/API/HTMLAnchorElement/href ## 示例 ```js -// 假设 元素在文档内 +// 文档中有一个 元素 const anchor = document.getElementById("myAnchor"); -anchor.href; // 返回 'https://developer.mozilla.org/en-US/HTMLAnchorElement' +anchor.href; // 返回“https://developer.mozilla.org/zh-CN/HTMLAnchorElement” ``` ## 规范 @@ -29,4 +31,4 @@ anchor.href; // 返回 'https://developer.mozilla.org/en-US/HTMLAnchorElement' ## 参见 -- 所属的 {{domxref("HTMLAnchorElement")}} 接口。 +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/hreflang/index.md b/files/zh-cn/web/api/htmlanchorelement/hreflang/index.md new file mode 100644 index 00000000000000..e579dc5e29f822 --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/hreflang/index.md @@ -0,0 +1,56 @@ +--- +title: HTMLAnchorElement：hreflang 属性 +slug: Web/API/HTMLAnchorElement/hreflang +l10n: + sourceCommit: 5948500efb7d63d514966013adc8ed925ce28f69 +--- + +{{ApiRef("HTML DOM")}} + +{{domxref("HTMLAnchorElement")}} 接口的 **`hreflang`** 属性是一个表示链接资源的语言的字符串。 + +它反映 {{HTMLElement("a")}} 元素的 `hreflang` 属性，如果没有 `hreflang` 属性，则为空字符串（`""`）。 + +Web 浏览器和搜索引擎可能会使用此信息来更好地理解链接内容的语言，但它们并不一定要遵循此信息。为 `hreflang` 属性提供的值应遵循 {{RFC(5646, "用于标识语言的标记（也被称为 BCP 47）")}}中定义的格式。如果不符合该格式，则会被忽略。 + +在获取链接资源后，Web 浏览器并不完全依赖于 `hreflang` 属性。相反，它们会使用与资源直接关联的语言信息（例如，通过 HTTP 标头）来确定资源的语言。 + +## 值 + +一个包含语言标签的字符串，如果没有 `hreflang` 属性，则为空字符串（`""`）。 + +## 示例 + +```html +示例链接 +

    +``` + +```css +#exampleLink { + font-size: 1.5rem; +} +``` + +```js +const anchorElement = document.getElementById("exampleLink"); +const pTag = document.querySelector(".hreflang"); +console.log(anchorElement.hreflang); // 输出：“en-IN” +pTag.textContent = anchorElement.hreflang; +``` + +## Result + +{{EmbedLiveSample("示例",100,100)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLLinkElement.hreflang")}} 属性 diff --git a/files/zh-cn/web/api/htmlanchorelement/index.md b/files/zh-cn/web/api/htmlanchorelement/index.md new file mode 100644 index 00000000000000..fe7e17f2cd342a --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/index.md @@ -0,0 +1,91 @@ +--- +title: HTMLAnchorElement +slug: Web/API/HTMLAnchorElement +l10n: + sourceCommit: dcbb1d99185118360cc84b3a0e935e77fe0a03e3 +--- + +{{APIRef("HTML DOM")}} + +**`HTMLAnchorElement`** 接口表示超链接元素，并为操控此类元素的布局和表现提供特殊的属性和方法（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用）。此接口对应于 [``](/zh-CN/docs/Web/HTML/Element/a) 元素；不要与由 [`HTMLLinkElement`](/zh-CN/docs/Web/API/HTMLLinkElement) 表示的 [``](/zh-CN/docs/Web/HTML/Element/link) 元素相混淆。 + +{{InheritanceDiagram}} + +## 实例属性 + +_从其父接口 {{domxref("HTMLElement")}} 继承属性。_ + +- {{domxref("HTMLAnchorElement.attributionSrc")}} {{securecontext_inline}} {{experimental_inline}} + - : 以编程方式获取和设置 {{htmlelement("a")}} 元素上的 [`attributionsrc`](/zh-CN/docs/Web/HTML/Element/a#attributionsrc) 属性，反映该属性的值。`attributionsrc` 指定你希望浏览器发送一个 {{httpheader("Attribution-Reporting-Eligible")}} 标头。在服务器端，这用于触发在响应中发送 {{httpheader("Attribution-Reporting-Register-Source")}} 标头，以注册基于导航的归因来源。 +- {{domxref("HTMLAnchorElement.download")}} + - : 一个字符串，指示链接资源旨在被下载而不是在浏览器中显示。该值表示建议的文件名。如果名称不是底层操作系统的有效文件名，浏览器将对其进行适应调整。 +- {{domxref("HTMLAnchorElement.hash")}} + - : 一个字符串，表示引用 URL 中的片段标识符，如果存在，则包括前导井号 `#`。 +- {{domxref("HTMLAnchorElement.host")}} + - : 一个字符串，表示引用 URL 中的主机名和端口号（如果不是默认端口）。 +- {{domxref("HTMLAnchorElement.hostname")}} + - : 一个字符串，表示引用 URL 中的主机名。 +- {{domxref("HTMLAnchorElement.href")}} + - : 一个字符串，是相对于文档解析 [`href`](/zh-CN/docs/Web/HTML/Element/a#href) HTML 属性的结果，包含链接资源的有效 URL。 +- {{domxref("HTMLAnchorElement.hreflang")}} + - : 一个字符串，反映 [`hreflang`](/zh-CN/docs/Web/HTML/Element/a#hreflang) HTML 属性，指示链接资源的语言。 +- {{domxref("HTMLAnchorElement.origin")}} {{ReadOnlyInline}} + - : 返回一个字符串，包含 URL 的来源，即其协议、域名和端口。 +- {{domxref("HTMLAnchorElement.password")}} + - : 一个字符串，包含域名前指定的密码。 +- {{domxref("HTMLAnchorElement.pathname")}} + - : 一个字符串，包含一个初始的 `/`，后跟 URL 的路径，不包括查询字符串或片段。 +- {{domxref("HTMLAnchorElement.ping")}} + - : 一个由空格分隔的 URL 列表。当链接被点击时，浏览器将向这些 URL 发送带有 PING 正文的 {{HTTPMethod("POST")}} 请求。 +- {{domxref("HTMLAnchorElement.port")}} + - : 一个字符串，表示引用 URL 中的端口组件（如果存在）。 +- {{domxref("HTMLAnchorElement.protocol")}} + - : 一个字符串，表示引用 URL 中的协议组件，包括尾随的冒号（`:`）。 +- {{domxref("HTMLAnchorElement.referrerPolicy")}} + - : 一个字符串，反映 [`referrerpolicy`](/zh-CN/docs/Web/HTML/Element/a#referrerpolicy) HTML 属性，指示应使用哪个来源地址。 +- {{domxref("HTMLAnchorElement.rel")}} + - : 一个字符串，反映 [`rel`](/zh-CN/docs/Web/HTML/Element/a#rel) HTML 属性，指定目标对象与链接对象的关系。 +- {{domxref("HTMLAnchorElement.relList")}} {{ReadOnlyInline}} + - : 返回一个 {{domxref("DOMTokenList")}}（以标记列表的形式），反映 [`rel`](/zh-CN/docs/Web/HTML/Element/a#rel) HTML 属性。 +- {{domxref("HTMLAnchorElement.search")}} + - : 一个字符串，表示引用 URL 中的搜索元素，如果存在，则包括前导问号 `?`。 +- {{domxref("HTMLAnchorElement.target")}} + - : 一个字符串，反映 [`target`](/zh-CN/docs/Web/HTML/Element/a#target) HTML 属性，指示链接资源应在哪里显示。 +- {{domxref("HTMLAnchorElement.text")}} + - : 一个字符串，是 {{domxref("Node.textContent")}} 属性的同义词。 +- {{domxref("HTMLAnchorElement.type")}} + - : 一个字符串，反映 [`type`](/zh-CN/docs/Web/HTML/Element/a#type) HTML 属性，指示链接资源的 MIME 类型。 +- {{domxref("HTMLAnchorElement.username")}} + - : 一个包含域名前指定的用户名的字符串。 + +### 已弃用的属性 + +- `HTMLAnchorElement.charset` {{deprecated_inline}} + - : 表示链接资源的字符编码的字符串。 +- `HTMLAnchorElement.coords` {{deprecated_inline}} + - : 表示逗号分隔的坐标列表的字符串。 +- `HTMLAnchorElement.name` {{deprecated_inline}} + - : 表示锚点名称的字符串。 +- `HTMLAnchorElement.rev` {{deprecated_inline}} + - : 表示 [`rev`](/zh-CN/docs/Web/HTML/Element/a#rev) HTML 属性的字符串，该属性指定链接对象与目标对象的关系。 +- `HTMLAnchorElement.shape` {{deprecated_inline}} + - : 表示活动区域形状的字符串。 + +## 实例方法 + +_从其父接口 {{domxref("HTMLElement")}} 继承方法。_ + +- {{domxref("HTMLAnchorElement.toString()")}} + - : 返回一个包含完整 URL 的字符串。它是 {{domxref("HTMLAnchorElement.href")}} 的同义词，但不能用于修改该值。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 实现此接口的 HTML 元素：{{HTMLElement("a")}} diff --git a/files/zh-cn/web/api/htmlanchorelement/origin/index.md b/files/zh-cn/web/api/htmlanchorelement/origin/index.md index e379221036a5cd..e28d7c47ebd6a4 100644 --- a/files/zh-cn/web/api/htmlanchorelement/origin/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/origin/index.md @@ -1,39 +1,40 @@ --- -title: HTMLHyperlinkElementUtils.origin +title: HTMLAnchorElement：origin 属性 slug: Web/API/HTMLAnchorElement/origin +l10n: + sourceCommit: 59a92ab5609f0a021602f11843f3b00b16e67e6d --- -{{APIRef("URL API")}} +{{APIRef("HTML DOM")}} -**`HTMLHyperlinkElementUtils.origin`** 只读属性是一个 {{domxref("USVString")}} ，其中包含代表 URL 的原始码的 Unicode 序列化，即： +**`HTMLAnchorElement.origin`** 只读属性是一个字符串，包含所表示 URL 的来源的 Unicode 序列化形式。 -- for URL using the `http` or `https`, the scheme followed by `'://'`, followed by the domain, followed by `':'`, followed by the port (the default port, `80` and `443` respectively, if explicitely specified); -- for URL using `file:` scheme, the value is browser dependant; -- for URL using the `blob:` scheme, the origin of the URL following `blob:`. E.g `"blob:https://mozilla.org"` will have `"https://mozilla.org".` +即： -{{AvailableInWorkers}} +- 对于使用 `http` 或 `https` 协议的 URL，协议后跟 `'://'`，然后是域名，再后跟 `':'`，最后是端口号（如果明确指定了端口号，则分别为默认的 `80` 和 `443`）； +- 对于使用 `file:` 协议的 URL，值依赖于浏览器； +- 对于使用 `blob:` 协议的 URL，`blob:` 后跟的 URL 的来源。例如，`"blob:https://mozilla.org"` 的 `origin` 将是 `"https://mozilla.org"`。 -## Syntax +## 值 -```plain -string = object.origin; -``` +一个字符串。 -## Examples +## 示例 ```js -// On this page, returns the origin -var result = window.location.origin; // Returns:'https://developer.mozilla.org' +// 文档中有一个 元素 +const anchor = document.getElementById("myAnchor"); +anchor.origin; // 返回“https://developer.mozilla.org” ``` -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} -## See also +## 参见 -- The {{domxref("HTMLHyperlinkElementUtils")}} mixin it belongs to. +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/password/index.md b/files/zh-cn/web/api/htmlanchorelement/password/index.md index e1686d3513f16c..f0e49500c3d533 100644 --- a/files/zh-cn/web/api/htmlanchorelement/password/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/password/index.md @@ -7,9 +7,9 @@ l10n: {{ApiRef("HTML DOM")}} -**`HTMLAnchorElement.password`** 属性是一个字符串，包含域名前面指定的密码。 +**`HTMLAnchorElement.password`** 属性是一个字符串，包含域名之前指定的密码。 -如果在没有首先设置 [`username`](/zh-CN/docs/Web/API/HTMLAnchorElement/username) 属性的情况下设置，则会静默失败。 +如果未先设置 [`username`](/zh-CN/docs/Web/API/HTMLAnchorElement/username) 属性就尝试设置此属性，则会静默失败。 ## 值 @@ -18,9 +18,9 @@ l10n: ## 示例 ```js -// 假设文档中有一个这样的元素： +// 文档中有一个 元素 const anchor = document.getElementByID("myAnchor"); -anchor.password; // 返回 'flabada' +anchor.password; // 返回“flabada” ``` ## 规范 diff --git a/files/zh-cn/web/api/htmlanchorelement/pathname/index.md b/files/zh-cn/web/api/htmlanchorelement/pathname/index.md index d55be95b189119..f19d1b43b31a61 100644 --- a/files/zh-cn/web/api/htmlanchorelement/pathname/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/pathname/index.md @@ -7,7 +7,7 @@ l10n: {{ApiRef("HTML DOM")}} -**`HTMLAnchorElement.pathname`** 属性是一个字符串，首先为 `'/'`，后面是不包含查询字符串或片段的 URL 路径（如果没有路径，则为空字符串）。 +**`HTMLAnchorElement.pathname`** 属性是一个字符串，包含一个初始的 `'/'`，后跟 URL 的路径，但不包括查询字符串或片段（如果没有路径，则为空字符串）。 ## 值 @@ -16,9 +16,9 @@ l10n: ## 示例 ```js -// 假设文档中有一个这样的元素： +// 文档中有一个 元素 const anchor = document.getElementById("myAnchor"); -anchor.pathname; // 返回 '/zh-CN/docs/HTMLAnchorElement' +anchor.pathname; // 返回“/zh-CN/docs/HTMLAnchorElement” ``` ## 规范 diff --git a/files/zh-cn/web/api/htmlanchorelement/ping/index.md b/files/zh-cn/web/api/htmlanchorelement/ping/index.md new file mode 100644 index 00000000000000..c2f4661c15673c --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/ping/index.md @@ -0,0 +1,43 @@ +--- +title: HTMLAnchorElement：ping 属性 +slug: Web/API/HTMLAnchorElement/ping +l10n: + sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 +--- + +{{ApiRef("HTML DOM")}} + +{{domxref("HTMLAnchorElement")}} 接口的 **`ping`** 属性是一个由空格分隔的 URL 列表。当链接被点击时，浏览器将向这些 URL 发送带有 PING 正文的 {{HTTPMethod("POST")}} 请求。 + +它反映 {{HTMLElement("a")}} 元素的 `ping` 属性。 + +> [!NOTE] +> 此属性在 Firefox 中无效，并且出于隐私和安全考虑，其使用可能会受到限制。 + +## 示例 + +```html +示例链接 +``` + +```js +const anchorElement = document.getElementById("exampleLink"); +console.log(anchorElement.ping); // 输出："https://example-tracking.com https://example-analytics.com" +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLAreaElement.ping")}} 属性 diff --git a/files/zh-cn/web/api/htmlanchorelement/port/index.md b/files/zh-cn/web/api/htmlanchorelement/port/index.md new file mode 100644 index 00000000000000..c3a7d5f378258b --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/port/index.md @@ -0,0 +1,45 @@ +--- +title: HTMLAnchorElement：port 属性 +slug: Web/API/HTMLAnchorElement/port +l10n: + sourceCommit: 354f23773b65bad14192eca53e4a63471061b158 +--- + +{{ApiRef("HTML DOM")}} + +{{domxref("HTMLAnchorElement")}} 接口的 **`port`** 属性是一个字符串，包含 URL 的端口号。如果端口是该协议的默认值，则该属性为空字符串。 + +> [!NOTE] +> 如果 {{domxref("HTMLAnchorElement")}} 对象引用的 URL 不包含明确的端口号（例如，`https://localhost`），或者包含的端口号是 URL 协议部分对应的默认端口号（例如，`https://localhost:443`），那么 `port` 属性将是一个空字符串：`''`。 + +## 值 + +一个字符串。 + +## 示例 + +### 从锚点链接获取端口号 + +```js +// 文档中有一个 元素 +const anchor = document.getElementByID("myAnchor"); +anchor.port; // 返回“” +``` + +```js +// 文档中的另一个 元素 +const anchor = document.getElementByID("myAnchor"); +anchor.port; // 返回“8888” +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/protocol/index.md b/files/zh-cn/web/api/htmlanchorelement/protocol/index.md index d24064211aec7c..da4e08536ab395 100644 --- a/files/zh-cn/web/api/htmlanchorelement/protocol/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/protocol/index.md @@ -1,11 +1,13 @@ --- title: HTMLAnchorElement：protocol 属性 slug: Web/API/HTMLAnchorElement/protocol +l10n: + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{ApiRef("HTML DOM")}} -**`HTMLAnchorElement.protocol`** 属性是一个表示 URL 协议方案的字符串，包含结尾的 `':'`。 +**`HTMLAnchorElement.protocol`** 属性是一个字符串，表示 URL 的协议方案，包括末尾的 `':'`。 ## 值 @@ -13,12 +15,12 @@ slug: Web/API/HTMLAnchorElement/protocol ## 示例 -### 从锚点元素的链接中获取协议 +### 获取锚点链接的协议 ```js // 文档中有一个 元素 const anchor = document.getElementById("myAnchor"); -anchor.protocol; // 返回 'https:' +anchor.protocol; // 返回“https:” ``` ## 规范 @@ -31,4 +33,4 @@ anchor.protocol; // 返回 'https:' ## 参见 -- 所属的 {{domxref("HTMLAnchorElement")}} 接口。 +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.md b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.md index 7050bd7cfaddb1..e1aa08caea7d87 100644 --- a/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.md @@ -1,36 +1,46 @@ --- -title: HTMLAnchorElement.referrer +title: HTMLAnchorElement：referrerPolicy 属性 slug: Web/API/HTMLAnchorElement/referrerPolicy +l10n: + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 --- {{APIRef}} -**`HTMLAnchorElement.referrer`** 属性对应于 HTML 中 {{HTMLElement("a")}} 标签的 [`referrer`](/zh-CN/docs/Web/HTML/Element/a#referrer) 属性，它可以控制用户在点击这个链接时所发出的 HTTP 请求的 Referer 请求头的值。 - -## 语法 - -```js -refStr = anchorElt.referrer; -anchorElt.referrer = refStr; -``` - -### 属性值 - -- `"no-referrer"` 意味着不要发送 Referer 请求头。 -- `"origin"` 意味着所发送的 Referer 请求头的值为当前页面的源，即 `location.origin` 的值。 -- `"unsafe-url"` 意味着所发送的 Referrer 请求头的值为当前页面完整的 url（即 `location.href`）去掉尾部的哈希（即 `location.hash`）之后的值。正如该选项的名字所言（unsafe），此选项是不安全的，它可以将一个 HTTPS 页面的路径信息透露给第三方。 +**`HTMLAnchorElement.referrerPolicy`** 属性反映 {{HTMLElement("a")}} 元素的 HTML [`referrerpolicy`](/zh-CN/docs/Web/HTML/Element/a#referrerpolicy) 属性，该属性定义获取资源时发送哪个来源地址（referrer）。 + +## 值 + +一个字符串；以下值之一： + +- `no-referrer` + - : {{HTTPHeader("Referer")}} 标头将被完全省略。请求中不会发送任何来源地址。 +- `no-referrer-when-downgrade` + - : 当协议安全级别保持不变时（例如，HTTP → HTTP、HTTPS → HTTPS），该 URL 会作为来源地址发送，但不会发送到安全级别较低的目的地（例如，HTTPS → HTTP）。 +- `origin` + - : 在所有情况下，仅将文档的来源作为来源地址发送。`https://example.com/page.html` 文档将发送来源地址 `https://example.com/`。 +- `origin-when-cross-origin` + - : 在执行同源请求时发送完整的 URL，但在其他情况下仅发送文档的来源。 +- `same-origin` + - : 对于[同源策略](/zh-CN/docs/Web/Security/Same-origin_policy)，将会发送来源地址，但跨源请求将不包含任何来源地址信息。 +- `strict-origin` + - : 当协议安全级别保持不变（HTTPS → HTTPS）时仅发送文档的源作为来源地址，但不发送到安全性较低的目的地（HTTPS → HTTP）。 +- `strict-origin-when-cross-origin` (default) + - : 这是用户代理未指定策略时的默认行为。执行同源请求时发送完整的 URL，仅当协议安全级别保持不变（HTTPS → HTTPS）时发送源，并且不向安全性较低的目的地（HTTPS → HTTP）发送任何标头。 +- `unsafe-url` + - : 在执行同源或跨源请求时发送完整的 URL。此策略会将 TLS 保护的资源的来源和路径泄露给不安全的来源。请仔细考虑此设置的影响。 ## 示例 ```js -var elt = document.createElement("a"); -var linkText = document.createTextNode("My link"); +const elt = document.createElement("a"); +const linkText = document.createTextNode("My link"); elt.appendChild(linkText); -elt.href = "https://developer.mozilla.org/en-US/"; -elt.referrer = "no-referrer"; +elt.href = "https://developer.mozilla.org/zh-CN/"; +elt.referrerPolicy = "no-referrer"; -var div = document.getElementById("divAround"); -div.appendChild(elt); // 点击该链接接时不会发送 Referer 请求头 +const div = document.getElementById("divAround"); +div.appendChild(elt); // 点击时，链接将不发送来源地址标头 ``` ## 规范 @@ -43,4 +53,4 @@ div.appendChild(elt); // 点击该链接接时不会发送 Referer 请求头 ## 参见 -- {{domxref("HTMLImageElement.referrerPolicy")}}、{{domxref("HTMLAreaElement.referrerPolicy")}} 和 {{domxref("HTMLIFrameElement.referrerPolicy")}} +- {{domxref("HTMLImageElement.referrerPolicy")}}、{{domxref("HTMLAreaElement.referrerPolicy")}} 和 {{domxref("HTMLIFrameElement.referrerPolicy")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/rel/index.md b/files/zh-cn/web/api/htmlanchorelement/rel/index.md new file mode 100644 index 00000000000000..b3bc10b0198233 --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/rel/index.md @@ -0,0 +1,36 @@ +--- +title: HTMLAnchorElement：rel 属性 +slug: Web/API/HTMLAnchorElement/rel +l10n: + sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 +--- + +{{APIRef("HTML DOM")}} + +**`HTMLAnchorElement.rel`** 属性反映 [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 属性。它是一个字符串，包含由空格分隔的链接类型列表，这些类型指示由 {{HTMLElement("a")}} 元素表示的资源与当前文档之间的关系。 + +## 值 + +一个字符串。 + +## 示例 + +```js +const anchors = document.getElementsByTagName("a"); +for (const anchor of anchors) { + alert(`关系：${anchor.rel}`); +} +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 在 {{HTMLElement("area")}} 和 {{HTMLElement("link")}} 元素上对应的属性是 {{domxref("HTMLAreaElement.rel")}} 和 {{domxref("HTMLLinkElement.rel")}}。 +- 相同的列表，但以标记形式表示：{{domxref("HTMLAnchorElement.relList")}} diff --git a/files/zh-cn/web/api/htmlanchorelement/rellist/index.md b/files/zh-cn/web/api/htmlanchorelement/rellist/index.md new file mode 100644 index 00000000000000..0bcd3fe0230212 --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/rellist/index.md @@ -0,0 +1,44 @@ +--- +title: HTMLAnchorElement：relList 属性 +slug: Web/API/HTMLAnchorElement/relList +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc +--- + +{{APIRef("HTML DOM")}} + +**`HTMLAnchorElement.relList`** 只读属性反映了 [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 属性。它是一个实时的 {{domxref("DOMTokenList")}}，包含表示由 {{HTMLElement("a")}} 元素代表的资源与当前文档之间关系的链接类型。 + +该属性本身是只读的，意味着你不能将其替换为另一个 {{domxref("DOMTokenList")}}，但其内容仍然可以被修改。 + +## 值 + +一个包含字符串的实时 {{domxref("DOMTokenList")}}。 + +## 示例 + +```js +const anchors = document.getElementsByTagName("a"); +for (const anchor of anchors) { + const list = anchor.relList; + console.log( + `在 relList 中发现了包含 ${list.length} 个链接类型的新锚点节点。`, + ); + list.forEach((relValue) => { + console.log(relValue); + }); +} +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 在 {{HTMLElement("area")}} 和 {{HTMLElement("link")}} 元素上对应的属性是 {{domxref("HTMLAreaElement.relList")}} 和 {{domxref("HTMLLinkElement.relList")}}。 +- 完全相同的列表，但以一个由空格分隔的标记组成的字符串形式：{{domxref("HTMLAnchorElement.rel")}} diff --git a/files/zh-cn/web/api/htmlanchorelement/search/index.md b/files/zh-cn/web/api/htmlanchorelement/search/index.md index 67cb4381d3ab95..b28c96a3b27a00 100644 --- a/files/zh-cn/web/api/htmlanchorelement/search/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/search/index.md @@ -1,29 +1,37 @@ --- -title: HTMLHyperlinkElementUtils.search +title: HTMLAnchorElement：search 属性 slug: Web/API/HTMLAnchorElement/search +l10n: + sourceCommit: ab007c32f6ef1f5d426f8ff806c67652692e4108 --- -{{ApiRef("URL API")}} +{{ApiRef("HTML DOM")}} -**`HTMLHyperlinkElementUtils.search`** 属性是一个搜索字符串，也叫做查询字符串，它是一个 {{domxref("USVString")}} ，包含 `'?'` 和随后的 URL 参数。 +**`HTMLAnchorElement.search`** 属性是一个搜索字符串，也称为*查询字符串*，它是一个包含 `'?'` 后跟 URL 参数的字符串。 -## 语法 +现代浏览器提供了 [`URLSearchParams`](/zh-CN/docs/Web/API/URLSearchParams/get#examples) 和 [`URL.searchParams`](/zh-CN/docs/Web/API/URL/searchParams#examples)，以便轻松地从查询字符串中解析出参数。 -```plain -string = object.search; -object.search = string; -``` +## 值 + +一个字符串。 ## 示例 +### 从锚点链接中获取搜索字符串 + ```js -// 让一个 -// -// 元素在文档里 +// 文档中有一个 元素 +const anchor = document.getElementById("myAnchor"); +anchor.search; // 返回“?q=123” +``` -let anchor = document.getElementById("myAnchor"); -let result = anchor.search; -// 返回:'?q=123' +### 使用 URLSearchParams 进行高级解析 + +另外，也可以使用 [`URLSearchParams`](/zh-CN/docs/Web/API/URLSearchParams/get#examples)： + +```js +let params = new URLSearchParams(queryString); +let q = parseInt(params.get("q")); // 返回数字 123 ``` ## 规范 @@ -34,6 +42,6 @@ let result = anchor.search; {{Compat}} -## 相关链接 +## 参见 -- 它属于{{domxref("HTMLHyperlinkElementUtils")}} mixin。 +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/target/index.md b/files/zh-cn/web/api/htmlanchorelement/target/index.md new file mode 100644 index 00000000000000..3ad06aa8ac123d --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/target/index.md @@ -0,0 +1,44 @@ +--- +title: HTMLAnchorElement：target 属性 +slug: Web/API/HTMLAnchorElement/target +l10n: + sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0 +--- + +{{ApiRef("HTML DOM")}} + +{{domxref("HTMLAnchorElement")}} 接口的 **`target`** 属性是一个字符串，用于指示在何处显示链接的资源。 + +它反映 {{HTMLElement("a")}} 元素的 [`target`](/zh-CN/docs/Web/HTML/Element/a#target) 属性。 + +## 值 + +表示目标的字符串，它的值可以是： + +- {{HTMLElement("frame")}} 的名字。 +- [特定值的关键字](/zh-CN/docs/Web/HTML/Element/a#target)之一：`_blank`、`_self`、`_parent` 或 `_top`。 + +## 示例 + +```html +示例 1 +``` + +```js +const link = document.querySelector(".link1"); +console.log(link.target); // 输出：“_blank” +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLBaseElement.target")}} 属性 +- {{domxref("HTMLFormElement.target")}} 属性 +- {{domxref("HTMLAreaElement.target")}} 属性 diff --git a/files/zh-cn/web/api/htmlanchorelement/text/index.md b/files/zh-cn/web/api/htmlanchorelement/text/index.md new file mode 100644 index 00000000000000..1e90c7c3a1a0f2 --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/text/index.md @@ -0,0 +1,50 @@ +--- +title: HTMLAnchorElement：text 属性 +slug: Web/API/HTMLAnchorElement/text +l10n: + sourceCommit: 5d670c42df8ede57e3d6341cb15d8251eb188dc4 +--- + +{{ApiRef("HTML DOM")}} + +{{domxref("HTMLAnchorElement")}} 的 **`text`** 属性表示元素内部的文本。此属性与 {{domxref("Node.textContent")}} 表示的信息相同。 + +## 值 + +一个字符串。 + +## 示例 + +```html +示例链接 +

    +``` + +```css +#exampleLink { + font-size: 1.5rem; +} +``` + +```js +const anchorElement = document.getElementById("exampleLink"); +const pTag = document.querySelector(".text"); +pTag.textContent = `文本属性：${anchorElement.text}`; +``` + +### 结果 + +{{EmbedLiveSample("示例",100,100)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLScriptElement.text")}} 属性 +- {{domxref("HTMLOptionElement.text")}} 属性 diff --git a/files/zh-cn/web/api/htmlanchorelement/tostring/index.md b/files/zh-cn/web/api/htmlanchorelement/tostring/index.md index 9fc44b60fce124..999418664f981e 100644 --- a/files/zh-cn/web/api/htmlanchorelement/tostring/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/tostring/index.md @@ -1,29 +1,36 @@ --- -title: HTMLHyperlinkElementUtils.toString() +title: HTMLAnchorElement：toString() 方法 slug: Web/API/HTMLAnchorElement/toString +l10n: + sourceCommit: b829b2fae917b5b931011ddeb6a0d1b2d2b81c54 --- {{ApiRef("URL API")}} -**`HTMLHyperlinkElementUtils.toString()`** 方法返回一个包含整个 URL 的 {{domxref("USVString")}} 。它是{{domxref("HTMLHyperlinkElementUtils.href")}} 的一个只读版本。 +**`HTMLAnchorElement.toString()`** {{Glossary("stringifier", "字符串化器")}}方法返回一个包含完整 URL 的字符串。它是 {{domxref("HTMLAnchorElement.href")}} 的只读版本。 -## 句法 +## 语法 -```plain -string = object.toString(); +```js-nolint +toString() ``` -## 范例 +### 参数 + +无。 + +### 返回值 + +一个包含元素完整 URL 的字符串。 + +## 示例 + +### 在锚点元素上调用 toString ```js -/* -Let's imagine an - - element is in the document -*/ -var anchor = document.getElementById("myAnchor"); -var result = anchor.toString(); -// Returns: 'https://developer.mozilla.org/zh-CN/docs/HTMLHyperlinkElementUtils/toString' +// 文档中有一个 元素 +const anchor = document.getElementById("myAnchor"); +anchor.toString(); // 返回“https://developer.mozilla.org/zh-CN/docs/HTMLAnchorElement” ``` ## 规范 @@ -36,4 +43,4 @@ var result = anchor.toString(); ## 参见 -- The {{domxref("HTMLHyperlinkElementUtils")}} mixin it belongs to. +- 所属接口 {{domxref("HTMLAnchorElement")}}。 diff --git a/files/zh-cn/web/api/htmlanchorelement/type/index.md b/files/zh-cn/web/api/htmlanchorelement/type/index.md new file mode 100644 index 00000000000000..dc1ad3530c7c3b --- /dev/null +++ b/files/zh-cn/web/api/htmlanchorelement/type/index.md @@ -0,0 +1,52 @@ +--- +title: HTMLAnchorElement：type 属性 +slug: Web/API/HTMLAnchorElement/type +l10n: + sourceCommit: 10346c8cf5dfe6e030bd1cdc32f04461afaa8c64 +--- + +{{ApiRef("HTML DOM")}} + +{{domxref("HTMLAnchorElement")}} 接口的 **`type`** 属性是一个字符串，用于指示链接资源的 MIME 类型。 + +它反映 {{HTMLElement("a")}} 元素的 `type` 属性。 + +## 值 + +一个字符串。 + +## 示例 + +```html +示例链接 +

    +``` + +```css +#exampleLink { + font-size: 1.5rem; +} +``` + +```js +const anchorElement = document.getElementById("exampleLink"); +const pTag = document.querySelector(".type"); +console.log(anchorElement.type); // 输出：“text/html” +pTag.textContent = anchorElement.type; +``` + +{{EmbedLiveSample("示例",100,100)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLLinkElement.type")}} 属性 +- {{domxref("HTMLSourceElement.type")}} 属性 +- {{domxref("HTMLEmbedElement.type")}} 属性 diff --git a/files/zh-cn/web/api/htmlanchorelement/username/index.md b/files/zh-cn/web/api/htmlanchorelement/username/index.md index 27f592fe44bb04..e1eab4f179a0a3 100644 --- a/files/zh-cn/web/api/htmlanchorelement/username/index.md +++ b/files/zh-cn/web/api/htmlanchorelement/username/index.md @@ -20,7 +20,7 @@ l10n: ```js // 假设文档中含有这样的元素： const anchor = document.getElementByID("myAnchor"); -anchor.username; // 返回 'anonymous' +anchor.username; // 返回“anonymous” ``` ## 规范 From e1c0b41f87fbda9416a978e2a9d43ef15053fd3b Mon Sep 17 00:00:00 2001 From: maofu <102353901+Tmaof@users.noreply.github.com> Date: Fri, 29 Nov 2024 09:19:59 +0800 Subject: [PATCH 225/279] zh-cn: correct the description in CSS `float` property (#24780) Co-authored-by: A1lo --- files/zh-cn/web/css/float/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/float/index.md b/files/zh-cn/web/css/float/index.md index 1f193a1a754dd8..03d841f0fcbe71 100644 --- a/files/zh-cn/web/css/float/index.md +++ b/files/zh-cn/web/css/float/index.md @@ -77,7 +77,7 @@ float: unset; ### 浮动元素是如何定位的 -正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到**另外一个浮动的元素**。 +正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处盒子的边界，或者碰到**另外一个浮动的元素**。 在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。 From 147096c65aca0b322152c8789db6507da8772b46 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Fri, 29 Nov 2024 09:27:54 +0800 Subject: [PATCH 226/279] [zh-cn]: update the translation of Range `cloneRange()` method (#24820) --- files/zh-cn/web/api/range/clonerange/index.md | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/files/zh-cn/web/api/range/clonerange/index.md b/files/zh-cn/web/api/range/clonerange/index.md index dac2d75fb36256..6edc8a67257f48 100644 --- a/files/zh-cn/web/api/range/clonerange/index.md +++ b/files/zh-cn/web/api/range/clonerange/index.md @@ -1,36 +1,46 @@ --- -title: Range.cloneRange() +title: Range：cloneRange() 方法 slug: Web/API/Range/cloneRange +l10n: + sourceCommit: f9a4c8569397cb1c4f74026b385f07ff365bf64d --- {{ APIRef("DOM") }} -**`Range.cloneRange()`**方法返回一个 range 对象，并且该对象的范围边界点与被克隆的 range 对象相同。 +**`Range.cloneRange()`** 方法返回一个 {{domxref("Range")}} 对象，其边界点与被克隆的 {{domxref("Range")}} 相同。 -克隆的对象是复制过来的，而非引用，所以这两个对象双方各自做出的改变，都不会影响另一方。 +返回的克隆是按值复制的，而非按引用复制，因此其中一个 {{domxref("Range")}} 的更改不会影响另一个。 ## 语法 -```plain -clone = range.cloneRange(); +```js-nolint +cloneRange() ``` -## Example +### 参数 + +无。 + +### 返回值 + +{{domxref("Range")}} 对象。 + +## 示例 ```js -range = document.createRange(); +const range = document.createRange(); range.selectNode(document.getElementsByTagName("div").item(0)); -clone = range.cloneRange(); +const clone = range.cloneRange(); ``` -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} -## See also +## 参见 -- [The DOM interfaces index](/zh-CN/docs/DOM/DOM_Reference) +- [DOM 接口索引](/zh-CN/docs/Web/API/Document_Object_Model) From 69614e88e60d1627eebc854652221ff71b56f3d5 Mon Sep 17 00:00:00 2001 From: A1lo Date: Fri, 29 Nov 2024 10:47:34 +0800 Subject: [PATCH 227/279] chore(zh-cn): Move CSS examples - Pseudo-classes and pseudo-elements (#24806) --- .../index.md | 236 +++++++++++------- 1 file changed, 140 insertions(+), 96 deletions(-) diff --git a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 6511e82cafca1d..a8012c7ae929ba 100644 --- a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -7,22 +7,22 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements 下一组我们将了解的选择器被称为**伪类**和**伪元素**。这一类选择器的数量众多，通常用于很明确的目的。一旦你了解了如何使用它们，你便可以通过查阅列表来寻找合适的那一项以完成你想要的选择。与之前一样，每个选择器相关的 MDN 页面都将帮助你了解各浏览器的支持情况。 - +
    - + @@ -37,21 +37,55 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。 -伪类就是开头为冒号的关键字： - -```plain -:pseudo-class-name -``` +伪类就是开头为冒号的关键字。例如，`:hover` 就是一个伪类。 ### 简单伪类示例 让我们看下一个简单的示例。如果我们想要让一篇文章中的第一段变大加粗，可为此段加上一个类，然后为那个类添加 CSS，正如下面的示例展示的这样： -{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} +```html live-sample___first-child +
    +

    + 蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。 +

    + +

    + 秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。 +

    +
    +``` + +```css live-sample___first-child +.first { + font-size: 120%; + font-weight: bold; +} +``` + +{{EmbedLiveSample("first-child")}} 不过，这在维护的时候可能会很恼人——要是文档的头部又加上一段的话呢？我们会需要把这个类挪到新加的这段上。假如我们不加类，我们可以使用{{cssxref(":first-child")}}伪类选择器——这将*一直*选中文章中的第一个子元素，我们将不再需要编辑 HTML（编辑 HTML 并不总是可行，也许是因为它是由一个 CMS 生成的）。 -{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}} +```html live-sample___first-child2 +
    +

    + 蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。 +

    + +

    + 秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。 +

    +
    +``` + +```css live-sample___first-child2 +article p:first-child { + font-size: 120%; + font-weight: bold; +} +``` + +{{EmbedLiveSample("first-child2")}} 所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的 HTML 加入类一样。看下 MDN 上的另外几个示例： @@ -66,15 +100,29 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements - [`:hover`](/zh-CN/docs/Web/CSS/:hover)——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。 - [`:focus`](/zh-CN/docs/Web/CSS/:focus)——只会在用户使用键盘控制，选定元素的时候激活。 -{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} +```html live-sample___hover +

    悬停在我上方

    +``` + +```css live-sample___hover +a:link, +a:visited { + color: rebeccapurple; + font-weight: bold; +} + +a:hover { + color: hotpink; +} +``` + +{{EmbedLiveSample("hover")}} ## 伪元素是啥？ -伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号`::`。 +伪元素以类似方式表现。不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。 -```plain -::pseudo-element-name -``` +伪元素开头为双冒号 `::`。比如，`::before` 就是一个伪元素的示例。 > [!NOTE] > 一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。 @@ -83,7 +131,26 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements `::first-line`伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。 -{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} +```html live-sample___first-line +
    +

    + 蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。 +

    + +

    + 秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。 +

    +
    +``` + +```css live-sample___first-line +article p::first-line { + font-size: 120%; + font-weight: bold; +} +``` + +{{EmbedLiveSample("first-line")}} 这表现得就像是``神奇地包在第一个被格式化的行一样，每当行长改变的时候还会更新。 @@ -106,91 +173,68 @@ article p:first-child::first-line { 你能用这些插入一个文本字符串，和在下面的实时示例里那样。试着改变{{cssxref("content")}}属性的文本值，看看输出是怎么改变的。你也能改变`::before`伪元素为`::after`，看到这段文本插入到了元素的末尾而不是开头。 -{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} +```html live-sample___before +

    我的 HTML 页面的盒子中的内容。

    +``` + +```css live-sample___before +.box::before { + content: "这应该显示在其他内容之前。"; +} +``` + +{{EmbedLiveSample("before")}} 从 CSS 插入文本字符串，我们并不会在 Web 浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。 这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。 -{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}} +```html live-sample___after-icon +

    我的 HTML 页面的盒子中的内容。

    +``` + +```css live-sample___after-icon +.box::after { + content: " ➥"; +} +``` + +{{EmbedLiveSample("after-icon")}} 这些伪元素经常用于插入空字符串，其后可以像页面上的其他元素被样式化。 下个示例，我们已经用 `::before`伪元素加入了个空字符串。我们把它设为了`display: block`，以让它可以用 width 和 height 进行样式化。然后我们可以用 CSS 像任何元素那样样式化。你可以摆弄 CSS，改变它的外观和行为。 -{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} - -`::before`和`::after`伪元素与`content`属性的共同使用，在 CSS 中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。[CSS Arrow Please](http://www.cssarrowplease.com/)网站就是一个著名的示例，它帮你用 CSS 生成一个箭头。在你创建你的箭头的时候看下 CSS，你将会看到实际使用的{{cssxref("::before")}}和{{cssxref("::after")}}伪元素。无论什么时候你看到了这些选择器，都要看下{{cssxref("content")}}属性，以了解文档中添加了什么。 - -## 参考节 - -有很多伪类和伪元素，所以有一个用于参考的列表会有用。下面是列出它们的表格，链接到了 MDN 上它们的参考页。把这作为参考，看看你能选中什么。 - -### 伪类 - -| 选择器 | 描述 | -| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{ Cssxref(":active") }} | 在用户激活（例如点击）元素的时候匹配。 | -| {{ Cssxref(":any-link") }} | 匹配一个链接的`:link`和`:visited`状态。 | -| {{ Cssxref(":blank") }} | 匹配空输入值的[``元素](/zh-CN/docs/Web/HTML/Element/input)。 | -| {{ Cssxref(":checked") }} | 匹配处于选中状态的单选或者复选框。 | -| {{ Cssxref(":current") }} | 匹配正在展示的元素，或者其上级元素。 | -| {{ Cssxref(":default") }} | 匹配一组相似的元素中默认的一个或者更多的 UI 元素。 | -| {{ Cssxref(":dir") }} | 基于其方向性（HTML[`dir`](/zh-CN/docs/Web/HTML/Global_attributes/dir)属性或者 CSS[`direction`](/zh-CN/docs/Web/CSS/direction)属性的值）匹配一个元素。 | -| {{ Cssxref(":disabled") }} | 匹配处于关闭状态的用户界面元素 | -| {{ Cssxref(":empty") }} | 匹配除了可能存在的空格外，没有子元素的元素。 | -| {{ Cssxref(":enabled") }} | 匹配处于开启状态的用户界面元素。 | -| {{ Cssxref(":first") }} | 匹配[分页媒体](/zh-CN/docs/Web/CSS/CSS_paged_media)的第一页。 | -| {{ Cssxref(":first-child") }} | 匹配兄弟元素中的第一个元素。 | -| {{ Cssxref(":first-of-type") }} | 匹配兄弟元素中第一个某种类型的元素。 | -| {{ Cssxref(":focus") }} | 当一个元素有焦点的时候匹配。 | -| {{ Cssxref(":focus-visible")}} | 当元素有焦点，且焦点对用户可见的时候匹配。 | -| {{ Cssxref(":focus-within") }} | 匹配有焦点的元素，以及子代元素有焦点的元素。 | -| {{ Cssxref(":future") }} | 匹配当前元素之后的元素。 | -| {{ Cssxref(":hover") }} | 当用户悬浮到一个元素之上的时候匹配。 | -| {{ Cssxref(":indeterminate") }} | 匹配未定态值的 UI 元素，通常为[复选框](/zh-CN/docs/Web/HTML/Element/input/checkbox)。 | -| {{ Cssxref(":in-range") }} | 用一个区间匹配元素，当值处于区间之内时匹配。 | -| {{ Cssxref(":invalid") }} | 匹配诸如``的位于不可用状态的元素。 | -| {{ Cssxref(":lang") }} | 基于语言（HTML[lang](/zh-CN/docs/Web/HTML/Global_attributes/lang)属性的值）匹配元素。 | -| {{ Cssxref(":last-child") }} | 匹配兄弟元素中最末的那个元素。 | -| {{ Cssxref(":last-of-type") }} | 匹配兄弟元素中最后一个某种类型的元素。 | -| {{ Cssxref(":left") }} | 在[分页媒体](/zh-CN/docs/Web/CSS/CSS_paged_media)中，匹配左手边的页。 | -| {{ Cssxref(":link")}} | 匹配未曾访问的链接。 | -| {{ Cssxref(":local-link")}} | 匹配指向和当前文档同一网站页面的链接。 | -| {{ Cssxref(":is", ":is()")}} | 匹配传入的选择器列表中的任何选择器。 | -| {{ Cssxref(":not") }} | 匹配作为值传入自身的选择器未匹配的物件。 | -| {{ Cssxref(":nth-child") }} | 匹配一列兄弟元素中的元素——兄弟元素按照*an+b*形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 | -| {{ Cssxref(":nth-of-type") }} | 匹配某种类型的一列兄弟元素（比如，`

    `元素）——兄弟元素按照*an+b*形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 | -| {{ Cssxref(":nth-last-child") }} | 匹配一列兄弟元素，从后往前倒数。兄弟元素按照*an+b*形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 | -| {{ Cssxref(":nth-last-of-type") }} | 匹配某种类型的一列兄弟元素（比如，`

    `元素），从后往前倒数。兄弟元素按照*an+b*形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 | -| {{ Cssxref(":only-child") }} | 匹配没有兄弟元素的元素。 | -| {{ Cssxref(":only-of-type") }} | 匹配兄弟元素中某类型仅有的元素。 | -| {{ Cssxref(":optional") }} | 匹配不是必填的 form 元素。 | -| {{ Cssxref(":out-of-range") }} | 按区间匹配元素，当值不在区间内的时候匹配。 | -| {{ Cssxref(":past") }} | 匹配当前元素之前的元素。 | -| {{ Cssxref(":placeholder-shown") }} | 匹配显示占位文字的 input 元素。 | -| {{ Cssxref(":playing") }} | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。 | -| {{ Cssxref(":paused") }} | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。 | -| {{ Cssxref(":read-only") }} | 匹配用户不可更改的元素。 | -| {{ Cssxref(":read-write") }} | 匹配用户可更改的元素。 | -| {{ Cssxref(":required") }} | 匹配必填的 form 元素。 | -| {{ Cssxref(":right") }} | 在[分页媒体](/zh-CN/docs/Web/CSS/CSS_paged_media)中，匹配右手边的页。 | -| {{ Cssxref(":root") }} | 匹配文档的根元素。 | -| {{ Cssxref(":scope") }} | 匹配任何为参考点元素的元素。 | -| {{ Cssxref(":valid") }} | 匹配诸如``元素的处于可用状态的元素。 | -| {{ Cssxref(":target") }} | 匹配当前 URL 目标的元素（例如如果它有一个匹配当前[URL 分段](https://en.wikipedia.org/wiki/Fragment_identifier)的元素）。 | -| {{ Cssxref(":visited") }} | 匹配已访问链接。 | - -### 伪元素 - -| 选择器 | 描述 | -| --------------------------------- | ---------------------------------------------------- | -| {{ Cssxref("::after") }} | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 | -| {{ Cssxref("::before") }} | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 | -| {{ Cssxref("::first-letter") }} | 匹配元素的第一个字母。 | -| {{ Cssxref("::first-line") }} | 匹配包含此伪元素的元素的第一行。 | -| {{ Cssxref("::grammar-error") }} | 匹配文档中包含了浏览器标记的语法错误的那部分。 | -| {{ Cssxref("::selection") }} | 匹配文档中被选择的那部分。 | -| {{ Cssxref("::spelling-error") }} | 匹配文档中包含了浏览器标记的拼写错误的那部分。 | +```html live-sample___before-styled +

    我的 HTML 页面的盒子中的内容。

    +``` + +```css live-sample___before-styled +.box::before { + content: ""; + display: block; + width: 100px; + height: 100px; + background-color: rebeccapurple; + border: 1px solid black; +} +``` + +{{EmbedLiveSample("before-styled")}} + +`::before` 和 `::after` 伪元素与 `content` 属性的共同使用，在 CSS 中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。[CSS Arrow Please](https://cssarrowplease.com/) 网站就是一个著名的示例，它帮你用 CSS 生成一个箭头。在你创建你的箭头的时候看下 CSS，你将会看到实际使用的 {{cssxref("::before")}} 和 {{cssxref("::after")}} 伪元素。无论什么时候你看到了这些选择器，都要看下 {{cssxref("content")}} 属性，以了解 HTML 元素中添加了什么。 + +## 总结 + +本文中，我们介绍了特殊的类型选择器——CSS 伪类和伪元素。 + +伪类使得你可以将处于特定状态的元素作为目标，就像你已向 DOM 添加了该状态的类一样。伪元素的作用就像是你已向 DOM 添加了全新的元素，并允许你为其设置样式。`::before` 和 `::after` 伪元素让你可以使用 CSS 将内容插入文档。 + +在下一篇文章中，我们将会学习[关系选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators)。 + +## 参见 + +- [伪类参考](/zh-CN/docs/Web/CSS/Pseudo-classes) +- [伪元素参考](/zh-CN/docs/Web/CSS/Pseudo-elements) {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} From 2394ff1c5dd1e4c1944a4097b24048a8b4506085 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Fri, 29 Nov 2024 10:54:31 +0800 Subject: [PATCH 228/279] [zh-cn]: update the translation of Range `Range()` constructor (#24821) --- files/zh-cn/web/api/range/range/index.md | 37 ++++++++++++++---------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/files/zh-cn/web/api/range/range/index.md b/files/zh-cn/web/api/range/range/index.md index 122f46d1654dcf..7aa2eb8e14f396 100644 --- a/files/zh-cn/web/api/range/range/index.md +++ b/files/zh-cn/web/api/range/range/index.md @@ -1,11 +1,13 @@ --- -title: Range() +title: Range：Range() 构造函数 slug: Web/API/Range/Range +l10n: + sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e --- -{{ APIRef("DOM") }}{{seeCompatTable}} +{{ APIRef("DOM") }} -构造函数 **`Range()`** 返回一个新创建的 {{domxref("Range")}} 对象，新创建的对象属于全局 {{domxref("Document")}} 对象。 +**`Range()`** 构造函数返回一个新创建的 {{domxref("Range")}} 对象，其起始点和结束点是全局 {{domxref("Document")}} 对象。 ## 语法 @@ -13,17 +15,21 @@ slug: Web/API/Range/Range new Range() ``` +### 参数 + +无。 + ## 示例 -在下面的例子中，我们通过构造函数`Range()`创建了一个新的 range，并且使用{{domxref("Range.setStartBefore()")}} 和{{domxref("Range.setEndAfter()")}} 分别设置了起始位置。然后，通过方法{{domxref("window.getSelection()")}}和{{domxref("Selection.addRange()")}}选中了选区 range。 +在这个示例中，我们使用 `Range()` 构造函数创建一个新的范围，并通过 {{domxref("Range.setStartBefore()")}} 和 {{domxref("Range.setEndAfter()")}} 方法设置其起始和结束位置。然后我们使用 {{domxref("window.getSelection()")}} 和 {{domxref("Selection.addRange()")}} 方法选择该范围。 ### HTML ```html -

    First paragraph.

    -

    Second paragraph.

    -

    Third paragraph.

    -

    Fourth paragraph.

    +

    第一段。

    +

    第二段。

    +

    第三段。

    +

    第四段。

    ``` ### JavaScript @@ -31,25 +37,25 @@ new Range() ```js const paragraphs = document.querySelectorAll("p"); -// 创建 Range 对象 +// 创建新的范围 const range = new Range(); -// Range 起始位置在段落 2 +// 从第二个段落开始设置范围 range.setStartBefore(paragraphs[1]); -// Range 结束位置在段落 3 +// 将范围结束于第三个段落 range.setEndAfter(paragraphs[2]); -// 获取 selection 对象 +// 获取窗口的选择范围 const selection = window.getSelection(); -// 添加光标选择的范围 +// 将范围添加到窗口的选择范围中 selection.addRange(range); ``` ### 结果 -{{EmbedLiveSample("示例")}} +{{EmbedLiveSample("示例", 400, 210)}} ## 规范 @@ -61,4 +67,5 @@ selection.addRange(range); ## 参见 -- [The DOM interfaces index](/zh-CN/docs/DOM/DOM_Reference) +- [DOM 接口索引](/zh-CN/docs/Web/API/Document_Object_Model) +- {{domxref("Document.createRange()")}} From 72c1053d6ddb3d981a53a0f939e91f3a24fd2e0f Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Fri, 29 Nov 2024 10:56:40 +0800 Subject: [PATCH 229/279] [zh-cn]: update the translation of CSS `border-right` property (#24797) --- files/zh-cn/web/css/border-right/index.md | 102 ++++++++++++++-------- 1 file changed, 68 insertions(+), 34 deletions(-) diff --git a/files/zh-cn/web/css/border-right/index.md b/files/zh-cn/web/css/border-right/index.md index c6994131b868d2..d79329f6b14bc0 100644 --- a/files/zh-cn/web/css/border-right/index.md +++ b/files/zh-cn/web/css/border-right/index.md @@ -1,60 +1,86 @@ --- title: border-right slug: Web/CSS/border-right +l10n: + sourceCommit: 42c1bb8c259f3f57de9f38600776cf273e3addda --- {{CSSRef}} -CSS 属性 **border-`right`** 是属性{{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, 和{{ Cssxref("border-right-width") }}的三者的缩写。这些属性都是在描述一个元素的右边的边框[`border`](/zh-CN/docs/Web/CSS/border)。 +**`border-right`** [CSS](/zh-CN/docs/Web/CSS) [简写](/zh-CN/docs/Web/CSS/Shorthand_properties)属性用于设置元素右[边框](/zh-CN/docs/Web/CSS/border)的所有属性。 + +{{EmbedInteractiveExample("pages/css/border-right.html")}} + +与所有简写属性一样，`border-right` 始终设置它可以设置的所有属性的值，即使这些属性未被明确指定。它将那些未指定的值设置为默认值。请看下面的代码： ```css -border-right: 1px; -border-right: 2px dotted; -border-right: medium dashed green; +border-right-style: dotted; +border-right: thick green; ``` -> [!NOTE] -> 和 CSS 所有的缩写属性一样，border-`right` 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS 缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子...... -> -> ```css -> border-right-style: dotted; -> border-right: thick green; -> ``` -> -> ......实际上应该是下面这个样子...... -> -> ```css -> border-right-style: dotted; -> border-right: none thick green; -> ``` -> -> ......并且在 border-`right` 之前定义的 {{ Cssxref("border-right-style") }} 的值也会被覆盖。由于{{ Cssxref("border-right-style") }} 的默认值是 none, border-style 的最终结果就是没有边框。 +实际上，它和这个是一样的： + +```css +border-right-style: dotted; +border-right: none thick green; +``` + +在 `border-right` 之前给定的 {{cssxref("border-right-style")}} 的值将被忽略。由于 {{cssxref("border-right-style")}} 的默认值是 `none`，如果没有指定 `border-style` 部分，则不会显示边框。 + +## 组成属性 + +该属性为以下 CSS 属性的简写： + +- {{cssxref("border-right-color")}} +- {{cssxref("border-right-style")}} +- {{cssxref("border-right-width")}} + +## 语法 -{{cssinfo}} +```css +border-right: 1px; +border-right: 2px dotted; +border-right: medium dashed green; -## Syntax +/* 全局值 */ +border-right: inherit; +border-right: initial; +border-right: revert; +border-right: revert-layer; +border-right: unset; +``` -这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。 +简写属性的三个值可以任意顺序指定，也可以省略其中的一个或两个值。 -### Values +### 值 - `` - - : 请参阅 {{ Cssxref("border-right-width") }}. + - : 参见 {{cssxref("border-right-width")}}。 - `` - - : 请参阅 {{ Cssxref("border-right-style") }}. -- `{{cssxref("<color>")}}` - - : 请参阅 {{ Cssxref("border-right-color") }}. + - : 参见 {{cssxref("border-right-style")}}。 +- {{cssxref("<color>")}} + - : 参见 {{cssxref("border-right-color")}}。 + +## 形式定义 + +{{CSSInfo}} -### Formal syntax +## 形式语法 {{csssyntax}} -## Example +## 示例 + +### 应用右侧边框 + +#### HTML ```html -
    This box has a border on the right side.
    +
    这个盒子在右侧有一个边框。
    ``` +#### CSS + ```css div { border-right: 4px dashed blue; @@ -66,12 +92,20 @@ div { } ``` -{{ EmbedLiveSample('Example') }} +#### 结果 -## Specifications +{{EmbedLiveSample('应用右侧边框')}} + +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} + +## 参见 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} From f8d8e03e4c907b63cea413b9470a95cbf696eb5f Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Fri, 29 Nov 2024 08:03:49 +0100 Subject: [PATCH 230/279] [zh-cn] sync translated content (#24835) * zh-cn: sync translated content * Delete Window.updateCommands ref: mdn/content#36996 --------- Co-authored-by: Allo --- files/zh-cn/_redirects.txt | 1 + files/zh-cn/_wikihistory.json | 4 --- files/zh-cn/web/api/window/index.md | 34 +++++++++---------- .../web/api/window/updatecommands/index.md | 32 ----------------- 4 files changed, 17 insertions(+), 54 deletions(-) delete mode 100644 files/zh-cn/web/api/window/updatecommands/index.md diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index d837d5a2ef23c6..55d2e3205f96a3 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1884,6 +1884,7 @@ /zh-CN/docs/Web/API/Window/openDialog /zh-CN/docs/Web/API/Window /zh-CN/docs/Web/API/Window/pageXOffset /zh-CN/docs/Web/API/Window/scrollX /zh-CN/docs/Web/API/Window/pageYOffset /zh-CN/docs/Web/API/Window/scrollY +/zh-CN/docs/Web/API/Window/updateCommands /zh-CN/docs/Web/API/Window /zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /zh-CN/docs/Glossary/Base64 /zh-CN/docs/Web/API/WindowBase64/atob /zh-CN/docs/Web/API/Window/atob /zh-CN/docs/Web/API/WindowBase64/btoa /zh-CN/docs/Web/API/Window/btoa diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index bc33ac5681f823..bd49aacc0df3f3 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -15846,10 +15846,6 @@ "jtyjty99999" ] }, - "Web/API/Window/updateCommands": { - "modified": "2020-10-15T22:09:40.955Z", - "contributors": ["usernameisMan"] - }, "Web/API/Window/visualViewport": { "modified": "2019-03-18T21:36:53.168Z", "contributors": ["eiddie"] diff --git a/files/zh-cn/web/api/window/index.md b/files/zh-cn/web/api/window/index.md index b719ac4f26709a..07d5a400f6d2e7 100644 --- a/files/zh-cn/web/api/window/index.md +++ b/files/zh-cn/web/api/window/index.md @@ -151,22 +151,18 @@ _本接口从 {{domxref("EventTarget")}} 接口继承属性。_ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ -- {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} - - : 为 window 上的特定事件类型注册一个事件处理器。 - {{domxref("Window.atob()")}} - : 解码一个使用 base-64 编码的数据字符串。 - {{domxref("Window.alert()")}} - : 显示一个警告对话框。 -- {{domxref("Window.blur()")}} +- {{domxref("Window.blur()")}} {{deprecated_inline}} - : 将焦点从窗口上移开。 -- {{domxref("btoa", "Window.btoa()")}} +- {{domxref("Window.btoa()")}} - : 从一串二进制数据中创建一个 base-64 编码的 ASCII 字符串。 - {{domxref("Window.cancelAnimationFrame()")}} - : 取消之前使用 {{domxref("Window.requestAnimationFrame")}} 安排的回调。 - {{domxref("Window.cancelIdleCallback()")}} - : 取消之前使用 {{domxref("Window.requestIdleCallback")}} 安排的回调。 -- {{domxref("Window.clearImmediate()")}} - - : 取消使用 `setImmediate()` 设置的重复执行任务。 - {{domxref("Window.clearInterval()")}} - : 取消使用 {{domxref("Window.setInterval()")}} 设置的重复执行任务。 - {{domxref("Window.clearTimeout()")}} @@ -177,8 +173,6 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 显示一个带有用户需要回应的信息对话框。 - {{domxref("Window.createImageBitmap()")}} - : 接受各种不同的图像源，并返回一个 {{jsxref("Promise")}}，经兑现可得到 {{domxref("ImageBitmap")}}。可以选择将图片源裁剪成以 _(sx, sy)_ 为起点的像素矩形，宽度为 sw，高度为 sh。 -- {{domxref("EventTarget.dispatchEvent", "Window.dispatchEvent()")}} - - : 用于触发事件。 - {{domxref("Window.dump()")}} {{Non-standard_Inline}} - : 向控制台中写一条消息。 - {{domxref("Window.fetch()")}} @@ -207,10 +201,8 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 打开“打印”对话框，打印当前文档。 - {{domxref("Window.prompt()")}} - : 返回用户在提示对话框中输入的文本。 -- {{DOMxRef("Window.queryLocalFonts()")}} {{Experimental_Inline}} +- {{DOMxRef("Window.queryLocalFonts()")}} {{Experimental_Inline}} {{SecureContext_Inline}} - : 返回 {{jsxref("Promise")}}，经兑现可得到包含一个代表本地可用字体的 {{domxref("FontData")}} 对象数组。 -- {{domxref("EventTarget.removeEventListener", "Window.removeEventListener()")}} - - : 从 window 上移除一个事件监听器。 - {{domxref("reportError", "Window.reportError()")}} - : 报告一个脚本中的错误，模拟一个未处理的异常。 - {{domxref("Window.requestAnimationFrame()")}} @@ -231,12 +223,8 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 按给定的页数滚动文档。 - {{domxref("Window.scrollTo()")}} - : 将文档滚动至特定坐标。 -- {{domxref("Window.setImmediate()")}} - - : 在浏览器完成其他繁重的任务后执行一个函数。 - {{domxref("Window.setInterval()")}} - : 安排一个函数，在给定的毫秒数过去后执行。 -- {{domxref("Window.setResizable()")}} {{Non-standard_Inline}} - - : 切换用户调整窗口大小的能力。 - {{domxref("Window.setTimeout()")}} - : 安排函数在给定的时间内执行。 - {{domxref("Window.sizeToContent()")}} {{Non-standard_Inline}} @@ -249,8 +237,6 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 显示一个目录选择器，允许用户选择一个目录。 - {{domxref("Window.stop()")}} - : 该方法停止了窗口的加载。 -- {{domxref("Window.updateCommands()")}} {{Non-standard_Inline}} - - : 更新当前 chrome 窗口（用户界面）的命令状态。 ### 已弃用的方法 @@ -258,12 +244,24 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 在窗口历史中后退一步。该方法已被废弃，应该使用 {{domxref("History.back", "history.back()")}} 代替。 - {{domxref("Window.captureEvents()")}} {{Deprecated_Inline}} - : 注册窗口以捕获所有指定类型的事件。 +- {{domxref("Window.clearImmediate()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : 取消使用 `setImmediate()` 设置的重复执行任务。 - {{domxref("Window.forward()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} - : 在窗口历史中前进一步。该方法已被废弃，应该使用 {{domxref("History.forward", "history.forward()")}} 代替。 - {{domxref("Window.releaseEvents()")}} {{Deprecated_Inline}} - : 解除窗口对特定类型事件的捕获。 +- {{domxref("Window.requestFileSystem()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : 允许网站或应用访问沙盒文件系统以供自己使用。 +- {{domxref("Window.setImmediate()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : 在浏览器完成其他繁重的任务后执行一个函数。 +- {{domxref("Window.setResizable()")}} {{Non-standard_Inline}} {{deprecated_inline}} + - : 不执行操作（no-op）。保持对 Netscape 4.x 的向后兼容性。 - {{domxref("Window.showModalDialog()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} - - : 显示一个对话框。 + - : 显示一个模态对话框。 +- {{domxref("Window.webkitConvertPointFromNodeToPage()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : 将 {{domxref("WebKitPoint")}} 从节点坐标系转换到页面坐标系。 +- {{domxref("Window.webkitConvertPointFromPageToNode()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : 将 {{domxref("WebKitPoint")}} 从页面坐标系转换到节点坐标系。 ## 事件 diff --git a/files/zh-cn/web/api/window/updatecommands/index.md b/files/zh-cn/web/api/window/updatecommands/index.md deleted file mode 100644 index 31ed142fbea865..00000000000000 --- a/files/zh-cn/web/api/window/updatecommands/index.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Window.updateCommands() -slug: Web/API/Window/updateCommands ---- - -{{ ApiRef() }}{{Non-standard_header}} - -## 概要 - -更新当前 chrome 窗口（UI）的命令状态。 - -## 语法 - -```plain -window.updateCommands("sCommandName") -``` - -## 参数 - -- `sCommandName` 是一个特定的字符串，它描述了这种更新事件的类型 (我们用到了背景色注明). - -## 记录 - -这将启用或禁用项目（根据需要在命令节点上设置或清除“disabled”属性），或通过在 XUL 命令节点的“state”属性中设置当前状态信息来确保命令状态反映选择的状态。 - -## 规范 - -DOM 0 级。不属于规范。 - -## 浏览器兼容性 - -{{Compat}} From 99d24df984f0615ee28327a32abbcad848b3aa05 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Fri, 29 Nov 2024 15:50:23 +0800 Subject: [PATCH 231/279] [zh-cn]: update the translation of WebSocket `readyState` property (#24823) --- .../web/api/websocket/readystate/index.md | 38 ++++++++----------- 1 file changed, 16 insertions(+), 22 deletions(-) diff --git a/files/zh-cn/web/api/websocket/readystate/index.md b/files/zh-cn/web/api/websocket/readystate/index.md index b3ce90ce65cc90..2e93b5814a77eb 100644 --- a/files/zh-cn/web/api/websocket/readystate/index.md +++ b/files/zh-cn/web/api/websocket/readystate/index.md @@ -1,37 +1,31 @@ --- -title: WebSocket.readyState +title: WebSocket：readyState 属性 slug: Web/API/WebSocket/readyState +l10n: + sourceCommit: fb311d7305937497570966f015d8cc0eb1a0c29c --- -{{APIRef("Web Sockets API")}} +{{APIRef("WebSockets API")}}{{AvailableInWorkers}} -## 概要 - -返回当前 {{domxref("WebSocket")}} 的链接状态，只读。 - -## 语法 - -```plain -var readyState = WebSocket.readyState; -``` +**`WebSocket.readyState`** 只读属性返回 {{domxref("WebSocket")}} 连接的当前状态。 ## 值 -以下其中之一 +一个数字，是 {{domxref("WebSocket")}} 接口定义的四个可能状态常量之一： -- 0 (`WebSocket.CONNECTING`) - - : 正在链接中 -- 1 (`WebSocket.OPEN`) - - : 已经链接并且可以通讯 -- 2 (`WebSocket.CLOSING`) - - : 连接正在关闭 -- 3 (`WebSocket.CLOSED`) - - : 连接已关闭或者没有链接成功 +- `WebSocket.CONNECTING`（0） + - : 套接字已创建，但连接尚未打开。 +- `WebSocket.OPEN`（1） + - : 连接已打开，准备进行通信。 +- `WebSocket.CLOSING`（2） + - : 连接正在关闭中。 +- `WebSocket.CLOSED`（3） + - : 连接已关闭或无法打开。 -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} From 541199922ab35ef40a8e99d35527c61fa53b77b0 Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Fri, 29 Nov 2024 17:00:37 +0800 Subject: [PATCH 232/279] [zh-cn]: create docs for FencedFrameConfig (#24620) Co-authored-by: A1lo --- files/zh-cn/web/api/fenced_frame_api/index.md | 2 +- .../zh-cn/web/api/fencedframeconfig/index.md | 113 ++++++++++++++++++ .../setsharedstoragecontext/index.md | 98 +++++++++++++++ 3 files changed, 212 insertions(+), 1 deletion(-) create mode 100644 files/zh-cn/web/api/fencedframeconfig/index.md create mode 100644 files/zh-cn/web/api/fencedframeconfig/setsharedstoragecontext/index.md diff --git a/files/zh-cn/web/api/fenced_frame_api/index.md b/files/zh-cn/web/api/fenced_frame_api/index.md index 5f2b9ebc208c0b..1eaefa339e2a19 100644 --- a/files/zh-cn/web/api/fenced_frame_api/index.md +++ b/files/zh-cn/web/api/fenced_frame_api/index.md @@ -41,7 +41,7 @@ Web 上[隐私](/zh-CN/docs/Web/Privacy)和[安全](/zh-CN/docs/Web/Security)问 如上所述，你不能通过常规脚本直接控制嵌入在 {{htmlelement("fencedframe")}} 中的内容。 -要设置将在 `` 中显示的内容，使用 API（如[受保护的受众](https://developers.google.com/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.com/privacy-sandbox/private-advertising/shared-storage)）生成一个 {{domxref("FencedFrameConfig")}} 对象，然后通过 Javascript 将该对象设置为 `` 的 {{domxref("HTMLFencedFrameElement.config")}} 属性 +要设置将在 `` 中显示的内容，使用 API（如[受保护的受众](https://developers.google.com/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.com/privacy-sandbox/private-advertising/shared-storage)）生成一个 {{domxref("FencedFrameConfig")}} 对象，然后通过 Javascript 将该对象设置为 `` 的 {{domxref("HTMLFencedFrameElement.config")}} 属性。 以下示例从受保护的受众 API 的广告拍卖中获取一个 `FencedFrameConfig`，然后使用它在 `` 中显示获胜的广告： diff --git a/files/zh-cn/web/api/fencedframeconfig/index.md b/files/zh-cn/web/api/fencedframeconfig/index.md new file mode 100644 index 00000000000000..3fca35e97bd4f5 --- /dev/null +++ b/files/zh-cn/web/api/fencedframeconfig/index.md @@ -0,0 +1,113 @@ +--- +title: FencedFrameConfig +slug: Web/API/FencedFrameConfig +l10n: + sourceCommit: f430d277573ba0b06b1ac33ae8017fd90f170bef +--- + +{{SeeCompatTable}}{{APIRef("Fenced Frame API")}} + +**`FencedFrameConfig`** 接口表示 {{htmlelement("fencedframe")}} 的导航，即其中将显示什么内容。 + +`FencedFrameConfig` 对象无法通过 JavaScript 手动构造。它们由诸如[受保护的受众 API](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience) 之类的来源返回，并被设置为 {{domxref("HTMLFencedFrameElement.config")}} 的值。 + +`FencedFrameConfig` 对象实例具有一个公开的方法，但它也映射到包含无法从 JavaScript 访问的不透明属性的内部配置信息。这包括诸如加载内容的来源和用于广告目的的兴趣组等信息。这是围栏框架如何在尊重用户隐私的同时实现关键用例的关键所在。 + +{{InheritanceDiagram}} + +## 实例方法 + +- {{domxref("FencedFrameConfig.setSharedStorageContext", "setSharedStorageContext()")}} {{experimental_inline}} + - : 将嵌入文档中的数据传递到 `` 的共享存储中。 + +## 示例 + +### 基本用法 + +要设置将在 `` 中显示的内容，使用 API（如[受保护的受众](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience)或[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage)）生成一个 `FencedFrameConfig` 对象，然后设置为 `` 的 `config` 属性值。 + +以下示例从受保护的受众 API 的广告竞价中获取 `FencedFrameConfig`，然后使用它在 `` 中显示竞价成功的广告： + +```js +const frameConfig = await navigator.runAdAuction({ + // 竞价配置 + resolveToConfig: true, +}); + +const frame = document.createElement("fencedframe"); +frame.config = frameConfig; +``` + +> [!NOTE] +> 在调用 `runAdAuction()` 时，必须传入 `resolveToConfig: true` 以获得 `FencedFrameConfig` 对象。如果没有设置，则所得的 {{jsxref("Promise")}} 将兑现为一个只能在 {{htmlelement("iframe")}} 中使用的 URN。 + +### 通过 `setSharedStorageContext()` 传递上下文数据 + +你可以使用[隐私聚合 API](https://developers.google.cn/privacy-sandbox/private-advertising/private-aggregation) 来创建报告，该报告将围栏框架内的事件级数据与嵌入文档的上下文数据相结合。`setSharedStorageContext()` 可用于将从嵌入方传递的上下文数据传递给由[受保护的受众 API](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience) 启动的共享存储 worklet。 + +在下面的示例中，我们将嵌入页面和围栏框架中的数据都存储在[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage)中。 + +在嵌入页面中，我们将使用 `setSharedStorageContext()` 设置一个模拟事件 ID 作为共享存储上下文： + +```js +const frameConfig = await navigator.runAdAuction({ resolveToConfig: true }); + +// 你想要从嵌入方传递给共享存储 worklet 的数据 +frameConfig.setSharedStorageContext("some-event-id"); + +const frame = document.createElement("fencedframe"); +frame.config = frameConfig; +``` + +在围栏框架内，我们使用 {{domxref("Worklet.addModule","window.sharedStorage.worklet.addModule()")}} 添加 worklet 模块，然后使用 {{domxref("WindowSharedStorage.run","window.sharedStorage.run()")}} 将事件级数据发送到共享存储 worklet 中（这与来自嵌入文档的上下文数据无关）： + +```js +const frameData = { + // 数据仅在围栏框架内可用 +}; + +await window.sharedStorage.worklet.addModule("reporting-worklet.js"); + +await window.sharedStorage.run("send-report", { + data: { + frameData, + }, +}); +``` + +在 `reporting-worklet.js` worklet 中，我们从 `sharedStorage.context` 中读取嵌入文档的事件 ID，并从数据对象中读取框架的事件级数据，然后通过[隐私聚合](https://developers.google.cn/privacy-sandbox/private-advertising/private-aggregation)进行报告： + +```js +class ReportingOperation { + convertEventIdToBucket(eventId) { ... } + convertEventPayloadToValue(info) { ... } + + async run(data) { + // 来自于嵌入方的数据 + const eventId = sharedStorage.context; + + // 来自于围栏框架的数据 + const eventPayload = data.frameData; + + privateAggregation.sendHistogramReport({ + bucket: convertEventIdToBucket(eventId), + value: convertEventPayloadToValue(eventPayload) + }); + } +} + +register('send-report', ReportingOperation); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.cn 上的[围栏框架](https://developers.google.cn/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox) diff --git a/files/zh-cn/web/api/fencedframeconfig/setsharedstoragecontext/index.md b/files/zh-cn/web/api/fencedframeconfig/setsharedstoragecontext/index.md new file mode 100644 index 00000000000000..460079b420715b --- /dev/null +++ b/files/zh-cn/web/api/fencedframeconfig/setsharedstoragecontext/index.md @@ -0,0 +1,98 @@ +--- +title: FencedFrameConfig：setSharedStorageContext() 方法 +slug: Web/API/FencedFrameConfig/setSharedStorageContext +l10n: + sourceCommit: 801556b40e45c735bf7f74e6db7d10864173e44a +--- + +{{APIRef("Fenced Frame API")}}{{SeeCompatTable}} + +{{domxref("FencedFrameConfig")}} 接口的 **`setSharedStorageContext()`** 方法用于将嵌入文档中的上下文数据传递到 `` [共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage)中。 + +## 语法 + +```js-nolint +setSharedStorageContext(context) +``` + +### 参数 + +- `context` + - : 一个表示要传递到共享存储中的上下文数据的字符串。一旦设置，它将被存储在 {{domxref("FencedFrameConfig")}} 实例的内部配置中。 + +### 返回值 + +无（`undefined`）。 + +## 示例 + +### 通过 `setSharedStorageContext()` 传递上下文数据 + +你可以使用[隐私聚合 API](https://developers.google.cn/privacy-sandbox/private-advertising/private-aggregation) 来创建报告，该报告将围栏框架内的事件级数据与嵌入文档的上下文数据相结合。`setSharedStorageContext()` 可用于将从嵌入方传递的上下文数据传递给由[受保护的受众 API](https://developers.google.cn/privacy-sandbox/private-advertising/protected-audience) 启动的共享存储 worklet。 + +在下面的示例中，我们将嵌入页面和围栏框架中的数据都存储在[共享存储](https://developers.google.cn/privacy-sandbox/private-advertising/shared-storage)中。 + +在嵌入页面中，我们将使用 `setSharedStorageContext()` 设置一个模拟事件 ID 作为共享存储上下文： + +```js +const frameConfig = await navigator.runAdAuction({ resolveToConfig: true }); + +// 你想要从嵌入方传递给共享存储 worklet 的数据 +frameConfig.setSharedStorageContext("some-event-id"); + +const frame = document.createElement("fencedframe"); +frame.config = frameConfig; +``` + +在围栏框架内，我们使用 {{domxref("Worklet.addModule","window.sharedStorage.worklet.addModule()")}} 添加 worklet 模块，然后使用 {{domxref("WindowSharedStorage.run","window.sharedStorage.run()")}} 将事件级数据发送到共享存储 worklet 中（这与来自嵌入文档的上下文数据无关）： + +```js +const frameData = { + // 数据仅在围栏框架内可用 +}; + +await window.sharedStorage.worklet.addModule("reporting-worklet.js"); + +await window.sharedStorage.run("send-report", { + data: { + frameData, + }, +}); +``` + +在 `reporting-worklet.js` worklet 中，我们从 `sharedStorage.context` 中读取嵌入文档的事件 ID，并从数据对象中读取框架的事件级数据，然后通过隐私聚合（Private Aggregation）进行报告： + +```js +class ReportingOperation { + convertEventIdToBucket(eventId) { ... } + convertEventPayloadToValue(info) { ... } + + async run(data) { + // 来自于嵌入方的数据 + const eventId = sharedStorage.context; + + // 来自于围栏框架的数据 + const eventPayload = data.frameData; + + privateAggregation.sendHistogramReport({ + bucket: convertEventIdToBucket(eventId), + value: convertEventPayloadToValue(eventPayload) + }); + } +} + +register('send-report', ReportingOperation); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- developers.google.cn 上的[围栏框架](https://developers.google.cn/privacy-sandbox/private-advertising/fenced-frame) +- developers.google.cn 上的[隐私沙盒](https://developers.google.cn/privacy-sandbox) From 3ab06a7be53ae18ce5000a9ac9ebe2b335bb167a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 12:26:21 +0900 Subject: [PATCH 233/279] =?UTF-8?q?2024/11/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 206 ++++++++++++++---- 1 file changed, 163 insertions(+), 43 deletions(-) diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md index 8e0dc96f774f75..0dab4428b635fc 100644 --- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -2,38 +2,28 @@ title: フレックスボックスと他のレイアウト方法の関係 slug: Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods l10n: - sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d + sourceCommit: 8a7e911652fcb4a61cc95f458d53f39ad08c0946 --- {{CSSRef}} -この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。 - -> [!NOTE] -> CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。 +この記事では、フレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。 ## ボックス配置モジュール -多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。 - -これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では [Box Alignment 仕様書](https://www.w3.org/TR/css-align-3/)の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿った余白の分配についても扱っています。 - -ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。 - -> "メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。" -> (訳注: [https://www.w3.org/TR/css-flexbox-1/#alignment](https://www.w3.org/TR/css-flexbox-1/#alignment) より引用) +多くの人がフレックスボックスを最初に注目するのは、フレックスコンテナーの中にフレックスアイテムを適切に配置したいときです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。 -このガイドの後の記事「[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。 +フレックスボックスは、元々自分自身で[フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュールで定義していましたが、他のレイアウトメソッドに共通するプロパティや数値は [CSS ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)モジュールで定義しています。このモジュールは、フレックスボックスだけでなく、すべてのレイアウト方式で配置、位置揃え、隙間、溝がどのように動作するのかを詳しく説明しています。ある機能が両方の仕様で定義されている場合、ボックス配置モジュールがフレックスボックスレイアウトモジュールより優先されることに注意してください。 ## 書字方向 -「[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)」の記事で、フレックスボックスが**書字方向対応**であることに触れました。書字方向については CSS の [Writing Modes 仕様書](https://www.w3.org/TR/css-writing-modes-3/)で詳細に記されており、国によって異なる様々な書字方向にどのように CSS が対応しているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。**ブロック**方向と**インライン**方向について理解することが、新しいレイアウト方法の鍵となります。 +「[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)」の記事で、フレックスボックスが**書字方向対応**であることに触れました。書字方向については [CSS 書字方向](/ja/docs/Web/CSS/CSS_writing_modes)モジュールで詳細に記されており、国によって異なる書字方向にどのように CSS が対応しているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。**ブロック**方向と**インライン**方向について理解することが、新しいレイアウト方法の鍵となります。 -コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、[この記事](https://24ways.org/2016/css-writing-modes/)を参照してください。 +コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。 CSS の書字方向モジュールは、テキストを横書き、左書き、右書き、左書き、縦書き、上から下に書く方法を定義します。これは国際化や翻訳のために重要ですが、これらの機能はクリエイティブなデザインにも使用することができます。 ### 書字方向 -Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。 +書字方向仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。 - `horizontal-tb` - `vertical-rl` @@ -41,70 +31,200 @@ Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのため - `sideways-rl` - `sideways-lr` -{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} +```html live-sample___writing-modes +
    +
    One
    +
    Two
    +
    Three
    +
    +``` -`sideways-rl` と `sideways-lr` の対応は現時点では Firefox のみということに注意してください。また `writing-mode` とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については [MDN の書字方向のドキュメント](/ja/docs/Web/CSS/writing-mode)に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。 +```css live-sample___writing-modes +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} -CSS の `writing-mode` プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で `html` 要素に `dir` 属性と `lang` 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS が読み込まれなかったとしても文書を正しく表示することができます。 +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + writing-mode: horizontal-tb; +} +``` -## フレックスボックスと他のレイアウト方法 +{{EmbedLiveSample("writing-modes")}} + +`sideways-rl` と `sideways-lr` の対応は現時点では Firefox のみです。 + +CSS の `writing-mode` プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性と [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性を {{htmlelement("html")}} 要素に指定することで、文書の言語とテキスト方向を指定します。それによって CSS が読み込まれなかったとしても文書を正しく表示することができます。 -フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に[起こることの定義](https://www.w3.org/TR/css-flexbox-1/#flex-containers)が含まれています。例えば `float` 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。 +## フレックスボックスと他のレイアウト方法 -`display: flex` に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。 +一部のプロパティは、コンテンツが標準ブロックレイアウトシステムを使用してレイアウトされることを想定して設計されており、フレックスレイアウトのコンテキストでは適用されません。 `display: flex` に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。 フレックスアイテムについては、ある要素は浮動 (`float`) や解除 (`clear`) が設定されていて、その上で親要素に `display: flex` が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。`inline-block` やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。 次の例では、子要素は浮動設定されており、コンテナーには `display: flex` が設定されています。`display: flex` を削除すると、解除が適用されていないため `.box` が折りたたまれます。再度 `display: flex` を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。 -{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}} +```html live-sample___floats +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___floats +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + float: left; +} +``` + +{{EmbedLiveSample("floats")}} ## フレックスボックスとグリッドレイアウト -[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている `flex` プロパティは無視されるようになります。 - -ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。 +[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)とフレックスボックスは多くのプロパティと値を共有しています。異なるプロパティの場合、フレックスアイテムがグリッドアイテムになると、子要素に割り当てるフレックス値（`flex-end` など）は無視されます。上述のように、両方のレイアウトメソッドで動作するボックス配置モジュールで定義する値は、フレックスボックスのみで定義する値よりも優先されます。 ### フレックスとグリッドの違いは？ フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜところどころ同じことをしているように見える 2 つの仕様がわざわざあるのか？というのはよくある疑問です。 -この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。余白の分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。 - -{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}} +この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、[基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)の記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーであるかのように動作します。余白の分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。 + +```html live-sample___flex-layout +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +``` + +```css live-sample___flex-layout +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; + padding: 1em; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 1em; + flex: 1 1 200px; +} +``` + +{{EmbedLiveSample("flex-layout", "", "300px")}} 同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。 -{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}} +```html live-sample___grid-layout +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +``` + +```css live-sample___grid-layout +.box { + border: 2px dotted rgb(96 139 168); + padding: 1em; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, auto)); +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 1em; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("grid-layout", "", "300px")}} これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。 -場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。 +用途によっては、どちらのレイアウト方法も使用することができます。両方を使いこなせるようになると、どのレイアウトニーズにどの方法が適しているかがわかり、最終的には両方の方法を CSS で使うことになるでしょう。一つの政界や不正解があることはほとんどありません。 + +一般的ななルールとして、フレックスアイテムに幅を設定して、折り返されたフレックスコンテナーの行内のアイテムを、上の行のアイテムの位置と揃えようとしているときには、二次元のグリッドレイアウトを採用すべきでしょう。 -基本的なルールとして、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。 +「小さなコンポーネントにはフレックスボックスを使い、大きなコンポーネントにはグリッドレイアウトを使うべき」というようなルールはありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。 グリッドとフレックスボックスのさらに詳しい比較については「[グリッドレイアウトと他のレイアウト方法との関係](/ja/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)」の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。 ## フレックスボックスと display: contents -{{cssxref("display")}} プロパティの値 `contents` は、仕様書の中で以下のように述べられている新しい値です。 +{{cssxref("display")}} プロパティの値 `contents` は、仕様書の中で以下のように説明されています。 > 「要素自体はボックスを生成しませんが、その子要素や擬似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や擬似要素によって置き換えられたように扱わなければなりません」 > (訳注: [https://www.w3.org/TR/css-display-3/#box-generation](https://www.w3.org/TR/css-display-3/#box-generation) より引用) `display` のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。 -以下の例では、フレックスコンテナーに 3 つの子要素があります。そのうちの 1 つにはさらに 2 つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。 +以下の例では、フレックスコンテナーとその中に 3 つの子要素があります。そのうちの 1 つにはさらに 2 つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。 ここで `display: contents` をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、2 つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。`display: contents` を削除してみると元に戻ることを確認できます。 -レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。 +レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されません。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイル設定までは適用されません。 + +ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。 + +```html live-sample___display-contents +
    +
    One
    +
    Two
    +
    +
    サブアイテム 1
    +
    サブアイテム 2
    +
    +
    +``` + +```css live-sample___display-contents +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 1em; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + padding: 1em; + display: flex; +} + +.nested { + background-color: orange; + display: contents; +} +``` + +{{EmbedLiveSample("display-contents")}} > [!WARNING] -> 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。 - -また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。 - -{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}} - -`display: contents` のブラウザーの対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに `display: contents` に対応しており、Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。 +> 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) および　[`display: contents` considered harmful](https://ericwbailey.design/published/display-contents-considered-harmful/)　を参照してください。 From cdca996931bcd99dcb862784fbb40fd00c2807b0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 13:44:09 +0900 Subject: [PATCH 234/279] =?UTF-8?q?2024/10/30=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 499 +++++++++++++++--- 1 file changed, 432 insertions(+), 67 deletions(-) diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index d44c801ff558c7..c2fd9c6405c656 100644 --- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -2,38 +2,63 @@ title: フレックスコンテナー内のアイテムの配置 slug: Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container l10n: - sourceCommit: 3c7e928f332191b153c40a6ade88fb5815c92b99 + sourceCommit: f11e9200b6f9d5c191051eb7ccbe7ebd44966e43 --- {{CSSRef}} -フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な配置ができる初めての機能であってことが挙げられます。正しい垂直方向の配置が可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて配置や行端揃えのプロパティがどのように働くかを詳しくみていきます。 +フレックスボックスが有用な理由の 1 つは、要素を垂直方向に中央揃えする手軽な方法を提供しているなど、適切な配置が可能になることです。このガイドでは、フレックスボックスの配置と位置揃えのプロパティがどのように動作するのかを、徹底的に見ていきます。 -ボックスを中央寄せするには、`align-items` プロパティを使って交差軸上（今回の場合は縦軸上）の配置をし、`justify-content` プロパティで主軸上（今回の場合は横軸上）の配置をします。 +## フレックスボックスでの配置の使用 -![内部に中央寄せされたボックスを持つコンテナー要素](align1.png) +フレックスボックスには配置と余白を制御するプロパティがいくつか提供されており、 `align-items` と `justify-content` は要素を中央揃えにするための基本的なプロパティです。要素を中央に配置するには、 {{cssxref("align-items")}} プロパティを使用してアイテムを{{glossary("cross axis","交差軸")}}（この場合は縦方向に動作する[ブロック軸](/ja/docs/Glossary/Flow_relative_values)）に配置します。 {{cssxref("justify-content")}} を使用して、主軸（この場合は水平方向に動作するインライン軸）に配置します。 -以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。 +![内部に中央寄せされたボックスを持つコンテナー要素](align1.png) -{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}} +下記のコード例で、コンテナー内または内側の要素のサイズを変更してみてください。内側の要素は常に中央に配置されます。 + +```html live-sample___intro +
    +
    +
    +``` + +```css live-sample___intro +.box { + display: flex; + align-items: center; + justify-content: center; + border: 2px dotted rgb(96 139 168); +} + +.box div { + width: 100px; + height: 100px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("intro")}} ## 配置を制御するプロパティ 本ガイドで扱うプロパティは以下のとおりです。 -- {{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御します。 -- {{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御します。 -- {{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御します。 -- {{cssxref("align-content")}} — 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御します。 -- {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}} — フレックスアイテム間にすき間または溝を生成するために使用します。 +- {{cssxref("justify-content")}}: 全アイテムの主軸上の配置を制御します。 +- {{cssxref("align-items")}}: 全アイテムの交差軸上の配置を制御します。 +- {{cssxref("align-self")}}: 個別のフレックスアイテムごとに交差軸上の配置を制御します。 +- {{cssxref("align-content")}}: 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御します。 +- {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}}: フレックスアイテム間にすき間または溝を生成するために使用します。 また、auto マージンがフレックスボックスでの配置にどのように使えるかについても触れます。 -## 交差軸 +## 交差軸上のアイテムの配置 -`align-items` プロパティと `align-self` プロパティは、交差軸 (cross axis) 上のフレックスアイテムの位置を制御します。 `flex-direction` が `row` のときは列を下り、 `flex-direction` が `column` のときは行方向です。 +フレックスコンテナー内で設定する {{cssxref("align-items")}} プロパティと、フレックスアイテムで設定する {{cssxref("align-self")}} プロパティは、フレックスアイテムの交差軸上の配置を制御します。交差軸は、 {{cssxref("flex-direction")}} が `row` の場合は列に、 `flex-direction` が `column` の場合は行に沿って流れます。 -もっとも単純なフレックスの例で、交差軸上の配置を試してみましょう。`display: flex` をコンテナーに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように引き伸ばされますので、最も高さのあるアイテムが交差軸のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナーの高さまでアイテムが引き伸ばされます。 +基本的なフレックスの例で、交差軸上の配置を使用してみましょう。 `display: flex` をコンテナーに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。既定では、このフレックスアイテムはすべて、最も背の高いアイテムと同じ高さになるように引き伸ばされますので、最も背の高いアイテムが交差軸のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナーの高さまで各アイテムが引き伸ばされます。 ![3 つのアイテムがあり、うち 1 つのアイテムには他よりも高くなる要因となる追加のテキストがある。](align2.png) @@ -43,94 +68,322 @@ l10n: アイテムの配置を制御するために、以下の値を使うことができます。 +- `align-items: stretch` - `align-items: flex-start` - `align-items: flex-end` +- `align-items: start` +- `align-items: end` - `align-items: center` -- `align-items: stretch` - `align-items: baseline` +- `align-items: first baseline` +- `align-items: last baseline` 以下の例では、`align-items` の値は `stretch` に設定されています。他の値についても試し、フレックスコンテナーの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} +```html live-sample___align-items +
    +
    One
    +
    Two
    +
    Three
    には追加の
    テキストが
    あります
    +
    +``` + +```css live-sample___align-items +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: stretch; +} + +.box div { + width: 100px; + height: 100px; + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; +} +``` + +{{EmbedLiveSample("align-items")}} ### `align-self` で個別のアイテムを配置 -`align-items` プロパティは、すべてのアイテムの `align-self` プロパティをまとめて設定します。つまり、 `align-self` プロパティでは 1 つずつ個別のアイテムを対象として指定できます。 `align-self` プロパティには、 `align-items` プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための `auto` を使うことができます。 - -次の例では、フレックスコンテナーには `align-items: flex-start` を設定していて、これはアイテムを交差軸上の始点に揃えます。`first-child` セレクターを使って最初のアイテムを対象として、 `align-self: stretch` を設定しており、また別のアイテムを `selected` クラスで選択して `align-self: center` を設定しています。 `align-items` の値を変更したり、個別のアイテムの `align-self` の値を変更して、どのように動作するかを試してみてください。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} +`align-items` プロパティは、すべてのアイテムの `align-self` プロパティをまとめて設定します。つまり、 {{cssxref("align-self")}} プロパティでは 1 つずつ個別のアイテムを対象として指定できます。 `align-self` プロパティには、 `align-items` プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための `auto` を使うことができます。 + +次のライブサンプルでは、フレックスコンテナーに `align-items: flex-start` が設定されています。これは、アイテムがすべて交差軸の始めに配置されているという意味です。 `first-child` セレクターを使用して、最初のアイテムを `align-self: stretch` に設定します。 `selected` クラスを持つ別のアイテムには `align-self: center` を設定します。 `align-items` の値を変更するか、個々のアイテムの `align-self` の値を変更して、これがどのように動作するのか確認してみてください。 + +```html live-sample___align-self +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +``` + +```css live-sample___align-self +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: flex-start; + height: 200px; +} +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +.box > *:first-child { + align-self: stretch; +} +.box .selected { + align-self: center; +} +``` + +{{EmbedLiveSample("align-self", "", "250px")}} ## 主軸の変更 -ここまでは、 `flex-direction` が `row` で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。 +ここまで、`flex-direction`が既定で`row`に設定されている場合の配置動作について見てきましたが、これは上から下へ書く言語で、横が主軸、縦が交差軸で作業している場合について見てみましょう。 ![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。垂直軸上で配置されている。](align4.png) -`flex-direction` を `column` に変更した場合、`align-items` と `align-self` はアイテムの左右方向での配置を行うようになります。 +同じ書字方向のままで、 `flex-direction` を `column` に変更すると、 `align-items` と `align-self` プロパティではアイテムを上下ではなく左右に配置します。これらのプロパティはアイテムを交差軸に沿って配置することに変わりはありませんが、交差軸はこれで水平になります！ ![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。水平軸上で配置されている。](align5.png) 次の例では `flex-direction: column` を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} - -## 交差軸上の配置 — align-content プロパティ - -ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の配置をしてきました。折り返しのある複数行のフレックスコンテナーがある場合、 `align-content` プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「[フレックス行のパッキング (packing flex lines)](https://drafts.csswg.org/css-flexbox/#align-content-property)」として説明されています。 - -`align-content` が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高くする必要があります。このプロパティはすべてのアイテムを 1 つのセットとして扱い、余白の扱いと、セットに含まれるアイテムの配置について指示します。 +```html live-sample___align-self-column +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +``` + +```css live-sample___align-self-column +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-direction: column; + align-items: flex-start; + width: 200px; +} +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +.box > *:first-child { + align-self: stretch; +} +.box .selected { + align-self: center; +} +``` + +{{EmbedLiveSample("align-self-column", "", "300px")}} + +## `align-content` プロパティによるコンテンツの交差軸への配置 + +これまでは、 1 行のフレックスアイテムを含む{{glossary("flex_container","フレックスコンテナー")}}の中に、アイテムや個々のアイテムを配置することを中心に説明してきました。フレックスアイテムが複数行にまたがる場合、 {{cssxref("align-content")}} プロパティを使用して行間の余白の配分を制御することができます。これは**フレックス行のパック**と呼ばれます。 + +`align-content` が有効に動作するためには、フレックスコンテナーの交差軸の寸法（この場合は高さ）が、アイテムを表示するのに必要な寸法より大きくなければなりません。これはすべてのアイテムに対して一括で動作します。 `align-content` の値は、利用できる余った空間と、その中の一連のアイテム全体の配置を決定します。 `align-content` プロパティには以下の値を設定できます。 - `align-content: flex-start` - `align-content: flex-end` +- `align-content: start` +- `align-content: end` - `align-content: center` - `align-content: space-between` - `align-content: space-around` +- `align-content: space-evenly` - `align-content: stretch` -- `align-content: space-evenly` （フレックスボックス仕様には含まれていない） +- `align-content: normal` （`stretch` として動作） +- `align-content: baseline` +- `align-content: first baseline` +- `align-content: last baseline` 以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 `align-content` の値は `space-between` で、この場合は残る分配可能な余白 (available space) はフレックス行の*間に*分配され、フレックス行自体はコンテナーの交差軸上の始点と末尾に密着して配置されます。 `align-content` プロパティがどのように働くか、ほかの値を設定して確認してください。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} +```html live-sample___align-content +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    +``` + +```css live-sample___align-content +.box { + width: 450px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; + height: 300px; + align-content: space-between; +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 100px; +} + +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +``` + +{{EmbedLiveSample("align-content", "", "380px")}} 列に沿った軸の時にこのプロパティの効果がどのように変わるか、 `flex-direction` を `column` に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分な余白が交差軸上に必要です。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} - -> **メモ:** `space-evenly` はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの対応は、フレックスボックス仕様書に定義されている他の値より遅れています。 +```html live-sample___align-content-column +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    +``` + +```css live-sample___align-content-column +.box { + display: flex; + flex-wrap: wrap; + flex-direction: column; + width: 400px; + height: 300px; + align-content: space-between; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 100px; +} + +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +``` + +{{EmbedLiveSample("align-content-column", "", "380px")}} ## 主軸上での配置 ここまで交差軸上での配置がどのように動くかを見てきましたが、ここでは主軸上での配置について見ていきます。使えるプロパティは `justify-content` の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 `justify-content` では、アイテムを表示するのに必要な分よりも大きい空間がある場合の分配可能な余白の扱いを制御できます。 -コンテナーに `display: flex` を設定した最初の例では、アイテムはコンテナーの始点に一行に整列して表示されます。これは `justify-content` の初期値が `flex-start` であるためです。すべての分配可能な余白はアイテムの後ろに置かれます。 +コンテナーに `display: flex` を設定した最初の例では、アイテムはコンテナーの始点に一行に整列して表示されます。これは `justify-content` の初期値が `normal` であり、これは `start` として動作するためです。すべての分配可能な余白はアイテムの後ろに置かれます。 ![3 つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナー内にある。分配可能な余白はアイテムの後ろに置かれる。](align6.png) -`justify-content` プロパティは `align-content` と同じ値を受け付けます。 +`baseline` の値はこの軸には関連ありません。 `justify-content` プロパティは `align-content` と同じ値を受け付けます。 - `justify-content: flex-start` - `justify-content: flex-end` +- `justify-content: start` +- `justify-content: end` +- `justify-content: left` +- `justify-content: right` - `justify-content: center` - `justify-content: space-between` - `justify-content: space-around` -- `justify-content: space-evenly` (フレックスボックス仕様書には含まれていない) +- `justify-content: space-evenly` +- `justify-content: stretch` （start として動作） +- `justify-content: normal` （stretch として動作し、これは start として動作する） 次の例では、 `justify-content` の値は `space-between` となっています。アイテムを表示した後に余った分配可能な余白は、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と末尾に揃えて並びます。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} - -`flex-direction` が `column` に設定されて主軸がブロック方向となっているとき、`justify-content` はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} +```html live-sample___justify-content +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +``` + +```css live-sample___justify-content +.box { + display: flex; + justify-content: space-between; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content")}} + +`flex-direction` が `column` に設定されて主軸がブロック方向となっているとき、`justify-content` はフレックスコンテナー内の分配可能な余白があれば、アイテム間にその方向にそって余白を分配します。 + +```html live-sample___justify-content-column +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +``` + +```css live-sample___justify-content-column +.box { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 300px; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content-column", "", "380px")}} ## 配置と書字方向 -上述の配置方法において、`flex-start` と `flex-end` はいずれも書字方向に対応したものとなります。`justify-content` の値が `start` で、書字方向が英語のような左書きであれば、アイテムはコンテナーの左端から並べられます。 +上述の配置方法において、`start` と `end` はいずれも書字方向に対応したものとなります。 `justify-content` の値が `start` で、書字方向が英語のような左書きであれば、アイテムはコンテナーの左端から並べられます。 ![3 つのアイテムが左側に並んでいる](basics5.png) @@ -140,25 +393,75 @@ l10n: 以下の例ではフレックスアイテムを右から左に並べるために `direction` プロパティを `rtl` を設定しています。この設定を削除したり `justify-content` の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} - -## 配置と flex-direction - -`flex-direction` プロパティを変更した場合にも、始点は変わります。例えば `row` の代わりに `row-reverse` を設定した場合などがこれにあたります。 - -次の例では、`flex-direction: row-reverse` と `justify-content: flex-end` を設定してアイテムをレイアウトしています。左書きの言語では、すべてのアイテムは左側に並びます。`flex-direction: row-reverse` の値を `flex-direction: row` に変更してみてください。アイテムが右側に移動することがわかります。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} - -こうした動作は少し紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸、行方向の軸に沿ってフレックスアイテムが配置されます。`flex-start` は文の中でテキストが始まる側を示すことになります。 +```html live-sample___justify-content-writing-mode +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +``` + +```css live-sample___justify-content-writing-mode +.box { + direction: rtl; + display: flex; + justify-content: flex-end; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content-writing-mode")}} + +## 配置と `flex-direction` + +`flex-direction` プロパティを変更した場合にも、行の `start` の方向は変わります。例えば `row` の代わりに `row-reverse` を設定した場合などです。 + +この例では、 `flex-direction: row-reverse` と `justify-content: flex-end` で、フレックスコンテナー内でアイテムの向きと位置を定義しています。左書きの言語では、アイテムは左に並びます。 `flex-direction: row-reverse` を `flex-direction: row` に変更してみてください。これでアイテムが右側に移され、視覚的な順序が逆になることがわかります。 + +```html live-sample___justify-content-reverse +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    +``` + +```css live-sample___justify-content-reverse +.box { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content-reverse")}} + +こうした動作は少し紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸、行方向の軸に沿ってフレックスアイテムが配置されます。 `start` と `flex-start` は文の中でテキストの先頭側から始まることになります。 ![左から始まり右で終わることを示す図。](align8.png) -`flex-direction: column` を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は `flex-start` は段落が始まる先頭を示すことになります。 +`flex-direction: column` を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は `start` と `flex-start` は段落が始まる先頭を示すことになります。 ![上から始まり下で終わることを示す図](align10.png) -`flex-direction` を逆方向の値のいずれかに変更すると、軸の末尾側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。 `flex-start` はその軸の末尾側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。 +`flex-direction` を逆方向の値のいずれかに変更すると、軸の末尾側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。 `start` と `flex-start` はその軸の末尾側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。 ![右から始まり左で終わることを示す図](align9.png) @@ -168,24 +471,86 @@ l10n: 主軸上ではアイテムは一つのグループとして扱われるため、`justify-items` プロパティや `justify-self` プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の配置をすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。 -よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは `justify-self` プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。3 つのアイテムが片方にあり、もう一方に 2 つのアイテムがあります。もし仮に `justify-self` をアイテム _d_ に対して使うことができたとすると、意図したものであってもそうでなくても、それに続くアイテム _e_ の配置も変わってしまうでしょう。 +よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは `justify-self` プロパティの使いどころだと思われるでしょう。しかし、以下の図について考えてみましょう。この例では、次の図のように、 3 つのアイテムが片方にあり、もう一方に 2 つのアイテムがあります。もし仮に `justify-self` をアイテム _d_ に対して使うことができたとすると、意図したものであってもそうでなくても、それに続くアイテム _e_ の配置も変わってしまうでしょう。 ![2 つのグループに分かれた 5 つのアイテム。3 つは左側にあり、2 つは右側にある。](align7.png) -4 つめのアイテムに対して `justify-content` ではなく `margin-left` に `auto` を設定すれば、先頭の 3 つから分離できます。auto マージンはマージンの方向に沿った余白をすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央揃えするときと同じです。両側のマージンが取れるだけの余白を取ろうとするために、ブロックが中央に押し出されることになります。 - -以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、`margin-left: auto` を設定した `push` クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} +代わりに、 _d_ のアイテムを CSS マージンによって押しやることができます。 + +このライブサンプルでは、アイテム 4 の {{cssxref("margin-left")}} を `auto` に設定することで、最初の 3 つのアイテムから分離し、その軸にあるすべての余白を消費しています。これは、 {{cssxref("margin")}} で左右を auto にしてブロックを中央に配置する動作と同じ仕組みです。それぞれの辺はできる限りの空間を取ろうとするので、ブロックは中央へ押し込まれます。 + +このライブサンプルでは、フレックスアイテムは基本的なフレックス値で 1 行に並べられており、4 番目のアイテムに設定したクラス `push` は、そのアイテムに `margin-left: auto` を適用しています。 4 番目のアイテムのクラスを取り除くか、別のアイテムにクラスを追加して、どのように動作するのか試してみてください。 + +```html live-sample___auto-margins +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    +``` + +```css live-sample___auto-margins +.box { + display: flex; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +.push { + margin-left: auto; +} +``` + +{{EmbedLiveSample("auto-margins")}} ## アイテム間にすき間を作成 -フレックスのアイテム間にすき間を作るには、{{cssxref("gap")}}、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}の各プロパティを使用します。{{cssxref("column-gap")}} プロパティは、行内のアイテム間にすき間を作成します。{{cssxref("row-gap")}} プロパティは、{{cssxref("flex-wrap")}} が `wrap` に設定されている場合、フレックス行間にすき間を作成します。{{cssxref("gap")}} プロパティは、両方を一緒に設定する一括指定です。 - -{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}} +フレックスのアイテム間にすき間を作るには、{{cssxref("gap")}}、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}の各プロパティを使用します。{{cssxref("column-gap")}} プロパティは、行内のアイテム間にすき間を作成します。{{cssxref("row-gap")}} プロパティは、{{cssxref("flex-wrap")}} が `wrap` に設定されている場合、フレックス行間にすき間を作成します。 + +{{cssxref("gap")}} プロパティは、 `row-gap` と `column-gap` の両方を一緒に設定する一括指定です。 +フレックスアイテム間またはフレックス行間の隙間は方向によって変わります。 {{cssxref("flex-direction")}} プロパティが行を作成する場合、最初の値はフレックス行間の隙間を定義し、 2 つ目の値はそれぞれの行内のアイテム間の隙間を定義します。列の場合（`flex-direction` を `column` または `column-reverse` に設定した場合）、最初の値はフレックスアイテム間の隙間を定義し、 2 つ目の値はフレックス行間の隙間を定義します。 + +```html live-sample___gap +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    +``` + +```css live-sample___gap +.box { + display: flex; + flex-wrap: wrap; + row-gap: 10px; + column-gap: 2em; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + flex: 1; + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("gap")}} ## 関連情報 -- [ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment) +- [ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)モジュール +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール - [フレックスボックスでのボックス配置](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) - [グリッドレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) From f6c3371be24822cb521bc83b17594c3b3464b5e5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 19:24:42 +0900 Subject: [PATCH 235/279] =?UTF-8?q?2024/11/07=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 330 ++++++++++++++---- 1 file changed, 261 insertions(+), 69 deletions(-) diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md index b6ab4c6f1f08a4..0305c35df28b6d 100644 --- a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md +++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md @@ -2,12 +2,12 @@ title: 主軸方向のフレックスアイテムの比率の制御 slug: Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis l10n: - sourceCommit: 883b021c97375f872d0702f0d0747b1373155cef + sourceCommit: 40590706f9ab23242bcd8c8966cc683d7d5b18aa --- {{CSSRef}} -このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる 3 つのプロパティ — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} を見ていきます。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。 +このガイドでは、主軸に沿ってアイテムの寸法と自由度を制御することができる 3 つのプロパティ、 {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} を見ていきます。これらのプロパティがどのようにフレックスアイテムを伸縮させるかについて完全に理解することが、 [CSS フレックスボックス](/ja/docs/Web/CSS/CSS_flexible_box_layout)をマスターするための鍵です。 ## 最初に見てみる @@ -17,7 +17,7 @@ l10n: - `flex-shrink`: このアイテムから縮小できる負の余白はどれくらいか。 - `flex-basis`: 伸長や縮小が発生する前のアイテムの寸法はいくつか。 -プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは `flex-grow` プロパティを `2` に、 `flex-shrink` を `1` に、 `flex-basis` を `auto` に設定します。 +プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティを使用して表します。以下のコードは `flex-grow` プロパティを `2` に、 `flex-shrink` を `1` に、 `flex-basis` を `auto` に設定します。 ```css .item { @@ -25,156 +25,348 @@ l10n: } ``` -すでに[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。 - ## 主軸に合わせて動作する重要概念 -主軸方向の比率を制御するためのフレックスプロパティの機能を見る前に、いくつかの概念を確認しておきましょう。これらは、フレックスアイテムの成長や縮小が起こる前の*自然な*寸法と、余白の概念に関連しています。 +`flex` プロパティを理解するためには、伸縮が起こる前のフレックスアイテムの自然なサイズを知ることが役立ちます。さらに、主軸に沿ったすべてのフレックスアイテムの自然なサイズを組み合わせたものと主軸自体のサイズとの差である自由空間の概念を理解することも重要です。 ### フレックスアイテムの寸法の変更 -フレックスアイテムをレイアウトするための空間を確保するには、まずアイテムの大きさをブラウザーが知る必要があります。絶対的な長さの単位で適用される幅や高さを持たないアイテムは、どのようにして処理されるのでしょうか。 +フレックスアイテムをレイアウトするために利用できる空間を決定するために、ブラウザーはアイテムがどれくらいの大きさから始まるのかを知る必要があります。絶対的な長さの単位で適用される幅や高さを持たないアイテムは、どのようにして計算されるのでしょうか。 -CSS には {{CSSxRef('min-content')}} と {{CSSxRef('max-content')}} という概念があります。これらのキーワードは[長さの単位](/ja/docs/Web/CSS/length)の代わりに使用することができます。 +CSS では、 {{CSSxRef("min-content")}} と {{CSSxRef("max-content")}} キーワードを {{cssxref("length")}} 単位の代わりに使用することができます。一般的に、 `min-content` は要素が最も長い単語を収めることができる最小のサイズであり、 `max-content` は要素が折り返されることなくすべてのコンテンツを収めるために必要なサイズです。 -例えば、以下のライブ例では、テキストの文字列を含む 2 つの段落要素があります。1 つ目の段落の幅は `min-content` となっています。このキーワードに対応しているブラウザーでは、テキストのソフトな折り返しの機会をすべて利用して、はみ出さない範囲で小さくなっているのがわかるはずです。これが、その文字列の最小コンテンツサイズです。基本的には、文字列の中で最も長い単語が大きさを決定します。 +下記の例は、異なる文字列を持つ 2 つの段落要素を格納しています。最初の段落の幅は `min-content` です。テキストが利用利用可能なソフトラップの機会をすべて使用して、はみ出すことなく可能な限り小さくなっていることに注目してください。これがその文字列の `min-content` サイズです。基本的に、文字列の中で最も長い単語がサイズを決定しています。 -2 つ目の段落は、 `max-content` という値を持っているので、逆のことをしています。これは可能な限り大きくして、ソフトな折り返しの機会を与えません。コンテナーが狭すぎるとボックスからあふれてしまいます。 +2 つ目の段落は、 `max-content` の値を持ち、その逆を行います。ソフトラップの機会を取ることなく、コンテンツに合わせて必要なだけ大きくなります。コンテナー内で狭すぎるとはみ出します。 -{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}} +```html live-sample___min-max-content +

    + I am sized with min-content and so I will take all of the soft-wrapping + opportunities. +

    +

    + I am sized with max-content and so I will take none of the soft-wrapping + opportunities. +

    +``` + +```css live-sample___min-max-content +.min-content { + width: min-content; + border: 2px dotted rgb(96 139 168); +} +.max-content { + width: max-content; + border: 2px dotted rgb(96 139 168); +} +``` + +{{EmbedLiveSample("min-max-content", "", "260px")}} この動作と、`min-content` および `max-content` がどのような効果を持つかについては、後述の `flex-grow` と `flex-shrink` の説明で覚えておいてください。 ### 正と負の余白 -これらの特性を説明するには、**正と負の余白**の概念を理解する必要があります。フレックスコンテナーに正の余白がある場合は、コンテナー内にフレックスアイテムを表示するのに必要な空間よりも大きな空間があるということです。たとえば 幅が 500 ピクセルのコンテナーで、{{CSSxRef("flex-direction")}} が `row` であり、幅 100 ピクセルのフレックスアイテムが 3 つあった場合、正の余白が 200 ピクセルあり、コンテナーいっぱいに表示したい場合は、各アイテムに分配することができます。 +**正と負の余白**の概念も理解する必要があります。フレックスコンテナーに正の余白がある場合、コンテナーの中にはフレックスアイテムを表示するのに要求される以上の空間があります。例えば、横幅 `500px` のコンテナーで、 {{CSSxRef("flex-direction")}} を `row` に設定し、横幅 `100px` のフレックスアイテムを 3 つ格納した場合、 `200px` の正の余白があります。コンテナー内を埋め尽くしたい場合は、この正の余白をアイテムの間に分配することができます。 ![アイテムを配置した後で空間が残っていることを表す画像です。](basics7.png) -アイテムの自然な大きさの合計が、フレックスコンテナー内の利用可能な空間よりも大きい場合、負の余白が発生します。上の図のように幅 500 ピクセルのコンテナーがあるものの、3 つのフレックスアイテムの幅がそれぞれ 200 ピクセルであった場合、必要な空間は合計で 600 ピクセルとなり、100 ピクセルの負の余白が発生します。これをアイテムから取り除くことで、コンテナーに合わせることができます。 +フレックスコンテナーに負の余白があるというのは、フレックスコンテナー内で利用できる空間よりも、フレックスアイテムの自然なサイズの合計値の方が大きい場合です。上記の `500px` 幅のコンテナー内で、 3 つのフレックスアイテムの幅が `100px` ではなく `200px` の場合、それらの自然な幅の合計は `600px` となり、 `100px` の負の余白が生じます。この空間をアイテムから除去してコンテナー内に収まるようにしないと、アイテムがはみ出してしまいます。 -![アイテムがコンテナーからあふれてしまう](ratios1.png) +![アイテムがコンテナーからはみ出してしまう](ratios1.png) -フレックスのプロパティを理解するには、この正の余白の分配と負の余白の除去を理解する必要があります。 +フレックス一括指定のプロパティの成分を知るためには、この正の余白の分配と負の余白の除去を理解する必要があります。 -以下の例では、{{CSSxRef("flex-direction")}} を row (行) に設定して作業しているので、アイテムの寸法は常に幅に基づいて決定されます。すべてのアイテムの幅の合計とコンテナーの幅を比較して、正と負の余白を計算します。それぞれの例を `flex-direction: column` で試すこともできます。主軸が列になり、アイテムの高さと、アイテムが入っているコンテナーの高さを比較して、プラスとマイナスの余白を計算する必要が出てきます。 +以下の例では、{{CSSxRef("flex-direction")}} を `row` (行) に設定されているので、アイテムの寸法は幅に基づいて決定されます。すべてのアイテムの幅の合計とコンテナーの幅を比較して、正と負の余白を計算します。それぞれの例を `flex-direction: column` で試すこともできます。主軸が列になり、アイテムの高さと、アイテムが入っているコンテナーの高さを比較して、正と負の余白を計算する必要が出てきます。 -## flex-basis プロパティ +## `flex-basis` プロパティ -{{CSSxRef("flex-basis")}} プロパティは、余白の分配が行われる前のフレックスアイテムの初期の大きさを指定します。このプロパティの初期値は `auto` です。`flex-basis` が `auto` に設定されている場合、ブラウザーはアイテムの初期の大きさを計算するために、まずアイテムの主軸方向の寸法に絶対寸法が設定されているかどうかをチェックします。例えば、アイテムの幅を 200 ピクセルに設定している場合です。この場合、`200px` がこのアイテムのフレックスベースとなります。 +{{CSSxRef("flex-basis")}} プロパティは、正または負の余白を分配する前のフレックスアイテムの初期サイズを指定します。このプロパティの初期値は `auto` です。このプロパティは、 {{cssxref("width")}} および {{cssxref("height")}} プロパティと同じ値を受け入れ、 `content` キーワードも受け入れます。 -アイテムの寸法が自動になっている場合、 `auto` を指定すると内容物の寸法が解決値になります。このとき、 `min-` および `max-content` の寸法に関する知識があると便利です。フレックスボックスでは、アイテムの `max-content` の寸法を `flex-basis` として使用します。次のライブ例でこれを説明します。 +`flex-basis` が `auto` に設定されている場合、アイテムの初期サイズは、主要サイズが設定されていれば、その {{cssxref("length-percentage")}} サイズになります。例えば、あるアイテムに `width: 200px` が設定されている場合、 `200px` がそのアイテムの `flex-basis` になります。パーセント値は、フレックスコンテナーの内部の主要サイズに対する相対値です。 `width: 50%` が設定されている場合、このアイテムの `flex-basis` はコンテナーのコンテンツボックスの幅の半分になります。そのようなサイズが設定されていない場合、つまりアイテムが自動サイズである場合、 `auto` はそのコンテンツのサイズに解決され（上記の [`min-` および `max-content` のサイズ](#フレックスアイテムの寸法の変更)の説明を参照）、 `flex-basis` はアイテムの `max-content` という意味になります。 -この例では、柔軟性のない一連のボックスを作成し、 `flex-grow` と `flex-shrink` の両方を `0` に設定しています。ここでは、主軸方向の寸法として 150 ピクセルの幅を明示的に設定した最初のアイテムが、 `flex-basis` として `150px` を取るのに対し、他の 2 つのアイテムは幅を持たないため、コンテンツの幅に応じたサイズになっていることがわかります。 +この例では、 `flex-grow` と `flex-shrink` の両方を `0` に設定した、柔軟性のないフレックスアイテムが 3 つ含まれています。 最初のアイテムの幅は `150px` で、 `flex-basis` は `150px` に設定されていますが、他の 2 つのアイテムは幅が設定されていないため、コンテンツの幅または `max-content` に応じてサイズが設定されます。 -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}} +```html live-sample___flex-basis +
    +
    One
    +
    Two
    +
    Three
    +
    +``` -`auto` キーワードに加えて、`content` キーワードを `flex-basis` として使用することができます。この場合、アイテムに幅が設定されていても、コンテンツの寸法から `flex-basis` が算出されます。これは新しいキーワードで、ブラウザーの対応も少ないのですが、 `auto` を flex-basis として使用し、アイテムに幅を設定しないようにすることで、自動で寸法が調整されるので、常に同じ効果を得ることができます。 +```css live-sample___flex-basis +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 0 0 auto; +} -余白の分配を行う際に、フレックスボックスでアイテムの寸法を完全に無視したい場合は、 `flex-basis` を `0` に設定します。これは基本的に、フレックスボックスのすべての空間が利用可能であり、それをアイテムに比例して分配することを指示します。この例は、次に紹介する `flex-grow` で見てみましょう。 +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.box :first-child { + width: 150px; +} +``` -## flex-grow プロパティ +{{EmbedLiveSample("flex-basis")}} + +`auto` キーワードとそれ以外の有効な {{cssxref("width")}} 値に加えて、`content` キーワードを `flex-basis` として使用することができます。この場合、`flex-basis`は、アイテムに `width` が設定されていてもコンテンツの寸法に基づきます。これは、設定されている幅を除去し、`flex-basis` として `auto` を使用するのと同じ効果を生み出します。 `max-content` を設定するのと似ていますが、 `content` の値を設定すると、交差軸上の寸法に基づいて {{cssxref("aspect-ratio")}} を計算することができます。 + +余白の分配の際にフレックスアイテムのサイズを完全に無視したい場合は、 `flex-basis` を `0` に設定し、 `flex-grow` に `0` 以外の値を設定します。この値を実際に見ていく前に、 `flex-grow` を学びましょう。 + +## `flex-grow` プロパティ {{CSSxRef("flex-grow")}} プロパティは、**フレックス伸長係数**を指定します。これは、正の余白が分配されたときに、フレックスアイテムがフレックスコンテナー内の他のフレックスアイテムに対してどれだけ伸長するかを決定します。 -すべてのアイテムの `flex-grow` 係数が同じであれば、余白はすべてのアイテムに均等に分配されます。このような場合、ふつうは値に `1` を使用しますが、すべてのアイテムに `flex-grow` の値として `88`、`100`、`1.2` など与えることもできます。これは係数です。係数がすべてのアイテムで等しく、フレックスコンテナー内に正の余白があれば、すべてのアイテムに均等に分配されます。 +すべてのアイテムの `flex-grow` 係数が同じであれば、正の余白はすべてのアイテムに均等に分配されます。この場合、一般的には `flex-grow: 1` を設定しますが、任意の値、例えば `88`、`100`、`1.2` などが設定できます。コンテナー内ですべてのフレックスアイテムに同じ係数が設定され、正の余白がある場合、その余白は均等に分配されます。 -### `flex-grow` と `flex-basis` を組み合わせる +### `flex-grow` と `flex-basis` の組み合わせ `flex-grow` と `flex-basis` がどのように相互作用するかという点については混乱しやすいものです。コンテンツの長さが異なる 3 つのフレックスアイテムに、次のような `flex` ルールを適用した場合を考えてみましょう。 -`flex: 1 1 auto;` +```css +.class { + flex: 1 1 auto; +} +``` + +この場合、 `flex-basis` の値は `auto` で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、使用される `flex-basis` は各アイテムの `max-content` の寸法です。アイテムを配置した後、フレックスコンテナー内には正の余白があります。下記画像では斜線を引いた領域で示されています。斜線を引いた領域は正の余白で、 `flex-grow` 係数に基づいて 3 つのアイテムに分配されます。 + +![3 つのアイテムが幅の半分強を占め、残りの幅は斜線が引かれています。](ratios2.png) + +コンテンツの寸法に等しい `flex-basis` を使用しています。すなわち、利用できる空間全体（フレックスコンテナーの幅）から引き算で分配可能な余白が求められ、残りの余白は 3 つのアイテム間で均等に分配されます。最も大きなアイテムは、もともとより大きなサイズから始まり、他と同じ空間が分配されるので、最も大きなままになります。 -この場合、 `flex-basis` の値は `auto` で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、フレックスボックスはアイテムの `max-content` の寸法を見ていることになります。アイテムを並べると、フレックスコンテナー内に正の余白 (この画像で斜線を引いた部分) ができます。 +![ハッチングされた部分は3つに分割され、それぞれのアイテムに単一の部分が追加されました。](ratios3.png) -![正の余白を斜線で表現している画像](ratios2.png) +元の要素の大きさが異なっていても、3 つのアイテムを同じ大きさにしたいのであれば、 `flex-basis` 成分を `0` にしてください。 + +```css +.class { + flex: 1 1 0; +} +``` + +ここでは、空間分配の計算のために、各アイテムの寸法を `0` に設定しています。これによって、すべての空間が分配に利用できるようになります。すべてのアイテムが同じ `flex-grow` 係数をを持っていますので、それぞれ等しい大きさの空間を取得します。この結果、 3 つの同じ幅のフレックスアイテムができます。 + +このライブサンプルで、 `flex-grow` 係数を 1 から 0 に変更して、動作の違いを確認してみてください。 + +```html live-sample___flex-grow +
    +
    One
    +
    Two
    +
    Three にはもっとコンテンツがあります
    +
    +``` + +```css live-sample___flex-grow +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 0; +} + +.box { + width: 400px; + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` -コンテンツの寸法と同じ `flex-basis` を使用しているので、全体の利用可能な空間（フレックスコンテナーの幅）から分配可能な領域を差し引いた余白を各アイテムに均等に分配しています。より大きなアイテムは、他のアイテムと同じ量の余白が割り当てられますが、もともと寸法が大きいので、結果的にもっと大きくなります。 +{{EmbedLiveSample("flex-grow")}} -![正の余白は、アイテム間に分配される](ratios3.png) +### アイテムに個別の flex-grow 係数を与える -もし本当に実現したいことが 3 つのアイテムを同じ大きさにすることであれば、最初の寸法が異なっていても、これを使用してください。 +`flex-grow`と `flex-basis` を一緒に使用すると、異なる `flex-grow` 係数を設定することで、個々のアイテムの大きさを制御することができます。すべての空間を分配できるように `flex-basis` を `0` にしておくと、それぞれのアイテムに異なる `flex-grow` 係数を割り当てることで、異なる大きさのフレックスアイテムを作成することができます。 -`flex: 1 1 0;` +下記の例では、最初の2つのアイテムには `flex-grow` の係数として `1` を使用し、3つ目には倍の `2` を使用しています。 `flex-basis: 0` をすべてのアイテムに設定すると、利用できる空間は次のように配分されます。 -ここでは、余白の分配の計算上、アイテムの寸法を `0` としています。すべての空間が確保され、すべてのアイテムが同じ `flex-grow` 係数を持っているので、それぞれに同じ量の余白が分配されることになります。最終的には、3 つの同じ幅の伸縮可能なアイテムができあがります。 +1. すべての兄弟フレックスアイテムの `flex-grow` 係数値が一斉に追加されます（この場合合計は 4 です）。 +2. フレックスコンテナー内で正の自由空間をこの合計値で割ります。 +3. 自由空間は個々の値に応じて分配されます。この場合、最初のアイテムは 1 部、 2 つ目は 1 部、 3 つ目は 2 部を取得します。ということは、 3 つ目のアイテムは最初と 2 つ目のアイテムの 2 倍の大きさということになります。 -このライブ例で、 `flex-grow` 係数を 1 から 0 に変更して、動作の違いを確認してみてください。 +```html live-sample___flex-grow-ratios +
    +
    One
    +
    Two
    +
    Three
    +
    +``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}} +```css live-sample___flex-grow-ratios +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 0; +} -### アイテムに個別の flex-grow 要素を与える +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} -`flex-grow` と `flex-basis` の関係を理解すると、アイテムに様々な `flex-grow` 係数を割り当てることで、個々のアイテムの大きさをさらに制御することができるようになります。 `flex-basis` を `0` にして、すべての空間を分配できるようにした場合、3 つのフレックスアイテムにそれぞれ異なる `flex-grow` ファクターを割り当てることができます。以下の例では、次のような値を使用しています。 +.one { + flex: 1 1 0; +} -- 1 番目のアイテムには `1` -- 2 番目のアイテムには `1` -- 3 番目のアイテムには `2` +.two { + flex: 1 1 0; +} -`flex-basis` を `0` とすると、余白は次のように分配されます。まずフレックス伸長係数を合計し、フレックスコンテナー内の正の余白の合計をその数値、この場合は 4 で割ります。それからそれぞれの値に応じて余白を分配します。 — 1 番目のアイテムは 1 つ分、2 番目は 1 つ分、3 番目は 2 つ分になります。つまり、3 番目のアイテムは、1 番目と 2 番目のアイテムの 2 倍の大きさになります。 +.three { + flex: 2 1 0; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}} +{{EmbedLiveSample("flex-grow-ratios")}} -ここでは、どんな正の値も使用できることを覚えておいてください。重要なのは、ある項目と他の項目との比率です。大きな数字を使っても、小数を使っても構いません。 — あなた次第です。試しに、上の例で割り当てられた値を `.25`, `.25`, `.50` に変更してみてください。 — 同じ結果が得られるはずです。 +ここでは、どんな正の値も使用できることを覚えておいてください。重要なのはアイテム間の比率です。大きな数字や小数を使用することができますが、それはあなた次第です。これを検証するために、この例の `flex-grow` の値を `.25`、`.25`、`.50` に変えてみてください。同じ結果になるはずです。 -## flex-shrink プロパティ +## `flex-shrink` プロパティ {{CSSxRef("flex-shrink")}} プロパティでは、**フレックス縮小係数**を指定します。これは、負の余白が分配されたときに、フレックスコンテナー内の他のフレックスアイテムに対して、フレックスアイテムがどれだけ縮小するかを決定します。 -このプロパティは、ブラウザーがフレックスアイテムの `flex-basis` 値を計算して、フレックスコンテナーに収まらない大きさだと判断した場合に対処します。`flex-shrink` に正の値があれば、コンテナーからはみ出さないようにアイテムが縮小されます。 +このプロパティは、フレックスアイテムの `flex-basis` の結合値が大きすぎてフレックスコンテナー内で収まらず、あふれてしまう場合に対処します。アイテムの `flex-shrink` が正の値である限り、アイテムはコンテナー内であふれないように縮小されます。 -つまり、 `flex-grow` が余白を追加する扱いをするのに対し、 `flex-shrink` はボックスがはみ出さずにコンテナーに収まるように空間を縮小する扱いをします。 +`flex-grow` は伸長可能なアイテムに利用できる空間を追加するために使用しますが、 `flex-shrink` は、アイテムがあふれず、コンテナー内で確実に収まるように空間を縮小するために使用します。 -次のライブ例では、3 つのアイテムをフレックスコンテナーに入れています。それぞれに 200 ピクセルの幅を与え、コンテナーの幅は 500 ピクセルにしています。 `flex-shrink` を `0` に設定すると、アイテムは縮小できないので、ボックスからはみ出してしまいます。 +次の例では、 3 つの `200px` 幅のフレックスアイテムが `500px` 幅のコンテナー内にあります。 `flex-shrink` を `0` に設定すると、アイテムは縮小されず、コンテナー内からあふれてしまいます。 -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}} +```html live-sample___flex-shrink +
    +
    One
    +
    Two
    +
    Three にはもっとコンテンツがあります
    +
    +``` -`flex-shrink` の値を `1` に変更すると、すべてのアイテムがボックスに収まるように、各アイテムが同じ量だけ縮小されるのがわかります。これは、すべてのアイテムがボックスに収まるようにするために、最初の幅よりも小さくしたものです。 +```css live-sample___flex-shrink +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 0 0 auto; + width: 200px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` + +{{EmbedLiveSample("flex-shrink")}} + +`flex-shrink` 値を `1` に変更すると、各アイテムは同じ量だけ縮小され、すべてのアイテムがコンテナー内で収まります。それぞれのアイテムから負の余白が比例して除去され、それぞれのフレックスアイテムは最初の幅よりも小さくなります。 ### `flex-shrink` と `flex-basis` の組み合わせ -`flex-shrink` は、`flex-grow` とほとんど同じように動作すると言えるでしょう。しかし、*完全に*同じではない理由が 2 つあります。 +一見、 `flex-shrink` は `flex-grow` と同じように、要素を伸長させるのではなく、縮小させる方法で動作するように見えるかもしれません。しかし、注意すべき重要な違いがいくつかあります。 + +[フレックスベースサイズ](#何がアイテムの基本的な寸法を決定するか)の概念は、フレックスアイテム間で負の余白をどのように配分するかに影響します。負の余白を分配するときは、フレックス縮小係数にフレックスベースサイズを掛けます。これにより、アイテムがどれだけ縮むことができるかに比例して、負の余白が分配されます。例えば、大きなアイテムが顕著に縮小する前に、小さなアイテムがゼロに縮小することはありません。 + +小さなアイテムは `min-content` の寸法未満に縮小されることはありません。これは、使用できるソフトラップの機会をすべて使用した場合の要素の最小寸法です。 -通常は些細な違いですが、仕様に定義されていることは、負の余白に対して `flex-shrink` が行うことが、正の余白に対して `flex-grow` が行うこととまったく同じではない理由の一つです。 +以下の例では、 `min-content` が下限になり、 `flex-basis` が内容物の大きさに解決されていることがわかります。フレックスコンテナーの幅を 700px などに変更してからフレックスアイテムの幅を小さくすると、最初の 2 つのアイテムは折り返されますが、 `min-content` の寸法より小さくなることはありません。ボックスが小さくなると、3 つ目のアイテムが縮小します。 -> 「注：負の余白を分配する際には、フレックス縮小係数にフレックスベースの大きさが乗じられます。これは、アイテムが縮小できる量に比例して負の余白を分配するもので、例えば、大きなアイテムが目に見えて縮小する小さなアイテムが、大きなアイテムが目立って縮小する前にゼロまで縮小してしまうことはありません。」 +```html live-sample___flex-shrink-min-content +
    +
    Item One
    +
    Item Two
    +
    Item Three はもっとコンテンツがあるため、もっと大きくなります
    +
    +``` -2 つ目の理由は、フレックスボックスは、負の余白を除去する際に小さなアイテムがゼロの大きさにまで縮小することを防ぐためです。アイテムは `min-content` の寸法が下限になります。 — 可能な限りすべてのワードラップの機会を利用した後の寸法です。 +```css live-sample___flex-shrink-min-content +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 auto; +} -以下の例では、 `min-content` の下限になり、 `flex-basis` が内容物の大きさに解決されていることがわかります。フレックスコンテナーの幅を 700px などに変更してからフレックスアイテムの幅を小さくすると、最初の 2 つのアイテムは折り返されますが、 `min-content` の寸法より小さくなることはありません。ボックスが小さくなると、3 つ目のアイテムが縮小します。 +.box { + border: 2px dotted rgb(96 139 168); + width: 500px; + display: flex; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}} +{{EmbedLiveSample("flex-shrink-min-content")}} -実際には、縮小の動作は妥当な結果をもたらす傾向があります。通常、内容物が完全に消えてしまったり、ボックスが最小の内容物よりも小さくなってしまったりすることはありません。そのため、上記のルールは、コンテナーに収まるように内容物を縮小する必要がある場合の適切な動作という点で、理にかなっています。 +実際には、この縮小動作は妥当な結果をもたらします。コンテンツが完全に消えてしまったり、コンテンツの最小サイズより小さくなってしまったりするのを防ぎます。上記のルールは、コンテナーに合わせて縮小する必要があるコンテンツには理にかなっています。 ### アイテムに別の `flex-shrink` 要素を与える `flex-grow` と同様に、それぞれのフレックスアイテムに異なる `flex-shrink` 係数を与えることができます。これにより、たとえば、あるアイテムを兄弟アイテムよりも急速に縮小させたり、まったく縮小させないようにしたい場合に、既定の動作を変更することができます。 -次のライブ例では、1 番目のアイテムの `flex-shrink` 係数は 1、2 番目のアイテムは `0` （つまり、まったく縮まない）、3 番目のアイテムは `4` です。したがって、3 番目のアイテムは、1 番目のアイテムよりも急速に縮小します。`flex-grow` と同様に、ここでも小数や大きな数字を使うことができます。最も分かりやすいものを選んでください。 +この例では、最初のアイテムの `flex-shrink` 係数は `1`、 2 つ目のアイテムは `0`（まったく縮小しない）、 3 つ目のアイテムは `4` で、合計の縮小係数は `5` です。したがって、 3 つ目のアイテムは最初のアイテムの約 4 倍の速さで縮小しますが、どちらも `min-content` 幅以下に縮小することはありません。 `flex-grow` と同様に、ここでも小数や大きな数値を使用することができます。 + +```html live-sample___flex-shrink-ratios +
    +
    One
    +
    Two
    +
    Three
    +
    +``` + +```css live-sample___flex-shrink-ratios +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 200px; +} + +.box { + display: flex; + width: 500px; + border: 2px dotted rgb(96 139 168); +} + +.one { + flex: 1 1 auto; +} + +.two { + flex: 1 0 auto; +} + +.three { + flex: 2 4 auto; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}} +{{EmbedLiveSample("flex-shrink-ratios")}} ## フレックスアイテムの寸法の設定をマスターする -フレックスアイテムの寸法の調整の仕組みを理解するには、いくつかの要素を理解する必要があります。このガイドでは、以下の点について説明してきました。 +フレックスアイテムのサイズ調整がどのように動作するのかを理解するには、このガイドで説明した下記の要素を考慮する必要があります。 -## アイテムの基本的な寸法に何が設定されているか +### 何がアイテムの基本的な寸法を決定するか -1. `flex-basis` が `auto` に設定されていて、アイテムに幅が設定されている場合は、その幅に応じた寸法になります。 -2. `flex-basis` が `auto` または `content` （対応しているブラウザーの場合）に設定されている場合は、寸法はアイテムの寸法に基づいて決定されます。 -3. `flex-basis` が長さの単位で、0 ではない場合は、これがアイテムの寸法になります。 -4. `flex-basis` が `0` に設定されている場合は、アイテムの寸法は空間共有の計算には考慮されません。 +- `flex-basis` が `auto` に設定されていて、アイテムに幅が設定されている場合は、その幅に応じた寸法になります。 +- `flex-basis` が `auto` に設定されていて、アイテムの幅が設定されていない場合は、コンテンツのサイズに基づいた寸法になります。 +- `flex-basis` が長さまたはパーセント値の単位で、0 ではない場合は、これがアイテムの寸法になります（`min-content` が下限になります）。 +- `flex-basis` が `0` に設定されている場合は、アイテムの寸法は空間共有の計算には考慮されません。 -### 利用できる余白が残っているか +### 利用できる余白があるか -正の余白がないとアイテムは伸長しませんし、負の余白がないとアイテムは縮小しません。 +アイテムが伸長するのは、正の余白がある場合のみであり、負の余白がないとアイテムは縮小しません。 1. すべてのアイテムの幅（列の場合は高さ）を合計したとき、その合計がコンテナーの幅（または高さ）の合計よりも**小さい**場合は、正の余白があり、`flex-grow` の出番となります。 2. すべてのアイテムの幅（列の場合は高さ）を合計した場合、その合計がコンテナーの幅（または高さ）の合計よりも**大きい**場合は、負の余白があり、`flex-shrink` が効いてきます。 ### 余白を分配する別の方法 -アイテムに余白を追加したくない場合は、「フレックスコンテナー内のアイテムの配置」で説明している配置プロパティを使って、アイテム間やアイテム周辺の余白を処理できることを覚えておいてください。 {{CSSxRef("justify-content")}} プロパティを使用すると、アイテム間やアイテム周辺の余白の分配が可能になります。また、フレックスアイテムに auto のマージンを使用すると、スペースを吸収してアイテム間に隙間を作ることができます。 +アイテムに余白を追加したくない場合は、「フレックスコンテナー内のアイテムの配置」で説明している配置プロパティを使って、アイテム間やアイテム周辺の余白を管理できることを思い出してください。 {{CSSxRef("justify-content")}} プロパティを使用すると、アイテム間やアイテム周辺の余白の分配が可能になります。また、フレックスアイテムに auto のマージンを使用すると、スペースを吸収してアイテム間に隙間を作ることができます。 -自由に使えるフレックスツールがあれば、最初は少し試行錯誤するかもしれませんが、ほとんどの作業が可能であることがわかります。 +これらのフレックスプロパティがすべて利用できるため、最初のうちは少し試行錯誤が必要かもしれませんが、ほとんどのレイアウト課題が可能であることがわかります。 From 10fa13959ad30a039536a1767b8b85842027f0c0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 29 Nov 2024 21:50:05 +0900 Subject: [PATCH 236/279] =?UTF-8?q?2024/08/30=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#24726)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/08/30 時点の英語版に基づき更新 * Update index.md * Update index.md --- .../web/css/flex-basis/firefox-flex-basis.png | Bin 6721 -> 0 bytes files/ja/web/css/flex-basis/index.md | 111 +++++++++++++----- 2 files changed, 83 insertions(+), 28 deletions(-) delete mode 100644 files/ja/web/css/flex-basis/firefox-flex-basis.png diff --git a/files/ja/web/css/flex-basis/firefox-flex-basis.png b/files/ja/web/css/flex-basis/firefox-flex-basis.png deleted file mode 100644 index 8e6c0a8d979a204ee9e3f7893162e0481ee943ef..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6721 zcmch6XH-+&)-D!A0YTsuqzEFthTf$}lOjQ?2!!5yCp1OrC?GYVgepjXrI%2oiiF+? z1f&E4LV!(;l#g@o`R+JpjPu?5@BY|h?=|O|W6U-8-p^dmvto61)bEorkP;CQ-Pd@b zqDMq@6G}vMgX-?BYl{#}N&5Om;;Zpem1LdlCZ*tg9{25%Ytuc?7bZSLMAW|jxNczV zSpu((w;hyTDiINVOC&qDBEB9c>1rFOPEF1JAzWl_qx+RLl_uW`8f_t+d1mFjyBIjpvz|mp*u6KkWHqq(tZR{^V%?--QM{AtQB-#n!(DXpnFGjl$K zE{cWPl{G4o5fVWjp_^1?NJK<0rlF!_5IDb+b1%3+jxLIfn_EzzAVzE3w{Aj579VnT zwG=ANMHc_si~iP*kAT><;{xVvNWpW7L<6 zt;~$eoV#BaX~6EW*7FBV+2f1aau&mZ>OAZ_PZ~fr_=v`wORzELh5qT^M@RNP2QIo3 z$iwc*)ykUFLk}mP7I^&>4he0p+<$&531^abUqULqFufUh{JQ|gWv;oQ#QWT!WP71p zD%G8q-Ac|dp*S%yAb{lv6)X^QoF}PXZoN}?`+}`xut%WpN0DcHi!kWu;Xw5hK&V{# zu$AAoE+os)tQkHLSY?keT@a!e5Wioq`4TYD*VESk#y?5P&{y%yHqV7sXdWcV?nWGP z4`-LswmCe_eWStlcGOE2^SPsaWj7WhnQ`EopEv2&y2s-rNVmIS3w2EX}-Bva$ZujVFjOM91gs zOt-=%RiNjdwYT7f)D$wNYcbcGXk#Q72og$%M^M**x$JHY4I1+AOHcH9v#5Rfxt|Ja(?rp)<| z15*s631MSu1|c$x9R1b4C0YJPW4{qTzi0-YbT59evBpSaamgvsUA`YRv)KEBXl8I^ zNzkcV5icl~YHtW_=#<+tQ zO>2Wdb|T$)7?0g(FC^atU{+;pT6~MfE1qZ01PBU)4B56F=LBE@)zqM+$_+o1>;jke zTF+;CqKtSA%@4m13kN1*==$VrOfbj;%HS4=)yzE8M`)>weTH;@90t|)d$?ojEU6^x zIhVVKYp|LEcwI>t@dBuojb&a&(+qfitPM@9 z-VC=XgX=3tT$q{3FWt^OeNQRILd?QE}JOS9b8}X}RanBW`CdZeKWe-FTZ`ZI2)`g5(+o| zgRUJ87fybpYZ!JX*{L|dol_d#q%(0gi5v;D&f9n>SS(yUOSpyKOFAK90%)ayr*qqb zs4SAt2&EyewIIN5z*a=RPe3B2bTgy0Pb*g@<;x?RJ)(@L{8aae!tSv*OLH?49zM(6 zDRsvrwN0Jf{t_Ml2!v{{r>bUEn`W zcM)=X{chiNSQ1orq7~J<1P9A{O|5*O12r7IX>M@XN0R)!^uu}hwK1C-ACC5NBXz&& z2!MXrq|fVqVXsdocD~^N=bGu1c7)XZtPFpRoYh#b{#3(C7uvZE3&?X7!Ef1>eBASc+c!iG}S-~vju97zo)o|Z*0v_5zHovcej!%UZnzdTbqf!+Y6y} zD#U3y0y2NfrX$WLkzF$NW5ITwE(g4MCHtk&x&^vwzWiOMqwj%))epgJ2MjS42WlNx z%ol`ju}<*lm>GrGlDZ<-y1(e71^wrtB^;v7BP-Ga$zZOma2e4RgLA#<`!wq9&CXtb zuetpgaOo4sh!G|BUCHN7b?K}0D8qfFW+{#9|5?l-GiV2Hbq=@rjNVGCEWY?M9Q2LE$K+cBi)*hT*D?}pxnC2_ge*j z?Z=&^>Yx8w?>hDM)^Kh1w8@~Ho?2sQ*Eovq9~87RHF4SMUsAB$2`Tzr(Ph?j_TgT! z@iDJ@C4UyrlPm0`U7GUaUje!mDZ9wMw6gk}VXHj8xVROs2l;;zlX3&?=ge&oOparI ziD9qw0d-TeXU$teZjc@1!Ij4#Sz{~pN*X~rVR5V-+sBIQYKXm2KBBwpjlB@y z?+IA!_-GfuVp;HnIUu`OS#)L%zF>vYH;%4)_7-Eo66Wey*}9Ha@r?p9&p)?x)oLs3Wa)=!&1xt)v zVWo7ldsMXMJ(3$}@x?}dbHbI6bX@=SiT-Z+0Om4mdyv|90qUXb zm+32=->6^m+br@iJ)r5LfgKVh{vnxRzHQASXv`(rUoxCwO4{DWl%+V3{AD*x`p*S& zX%PtxdY7;F;0QQOTb4!yQn9e0iPPk0V ziB;#bM^B8WdtZa^{(D!~R!&w?K!pYD7mjy&Ao**WCR{xs`Hy!xd%mF(G^ue?7<86a ziG(4CcE`D-Z-23Gr(2yEDk?ZCsTvWj@($rC*I;?TD{N?kX0!8w45fu$VF^zC;<*)X z?6yhy^zHSk6TEm78m5RhB}=OPoqh$_K%5V?6^!D~Y^nPv>_P43@gu0hGvUiSj+HDb z-V!L>=9ye3f7Uqh2x{;#Sky^D%6{~oJ@4*l3f$E*(`N!3I}|BhANVDT;qbqz)C84dg>#f;NG$H^weDl(Cx(1GfrC>69H!R@Lha;rqNZ!&-JC_tL~b@0UkcoZnb_nN=w$T*EX}Z2jNAK{rq?R&y5bjj~AIkpGhg{7Y{@Yo)*Uh<7{sE=l|!o6A25#SLuup!7y7 zDU3w0M}hDRZsGR`bt}VbH=s_4(yV7rf!T9bZt2GIBWSgbK0Xf`ANY%CPnx4t=M{eW zhYhvDe3)rk6JqtSsy21pJ>;~$#Ongc{t;CE*5Uxyyn8t(d}(_*;_NRHW>QKMMNfjF zSrHdo+sWc$mmW#khC3WXuH@Q9O?%X{Z7}Tax`V&_YY0l!^GIx5Klb6=+3)n_R5_j4v}++ z0+V;cW5P4Yxyxwid>it2n0r9#Is(!#Vq4%iX;A0d5qJCP3lh5XV(teR`E*@glcj z(pz@F%U^vfrWmt>z?FiAf~jv-G!{2c(Crt@rhIul;d1a`9%quBOFnX(FS^5x*+oq4 zGXc}CdW7Eqy=}PfGL4}p>Q9kto1lsjmuwDu`P=r~8TKkS%u~c{m{uBjpjkf32KQRw zS*PV&spXx%Qi{hs@x4k(g)6mzY3Ovb{H7*>1QJ z75&;B{KQHNMfmZBLn)*(1R6GQ2J7~fIm*QmHF3`3 zd**F*?o1NoR1&x0m8xIMtK5Fl{bX^cL7}vqOK#TP4jiUd%69-N3=|ScUufm~a+kxCz_=IpI zfes5~KE*V`M^?{lERKM$=>7ngXPto}p+3T}1wzfYX>=%nczon5DHu>L5~>lG@l85E zMHJLALIvne<%nU&zNcLvH=Y5cM@)`^=gP#zitZs)fw(_K-fPHEBN`5Lh9WI&+}4s6t@o-Ww-K|x0U*{x5c-d- z*0z^)fy-Vnxl}x7f=Jc(drQpk3fC%IWL1$KrvOw4U$!t+xT1&_?~oS4w`B7$U!%wS zC8C?tQsS6>;Re3@?L7YiO8>sU{d!iSY`R{VZ{}}R5)cO?@bppPNecwPEYRiBdqydlx$}RYZ;Sq#l*KHKBq1u*=OuPWcbNulrev)9rooe#Uwq} zJQ_UI%IhXpO$rNmYzg6z7Z?D!t2TUM*${SVg6%y+wNlK>Rgc8qpj7r-!bgjs6ME9e z#5JAMpdwfefKwig1r_-T;bpi1l~Ji}$iJ?#g^C2$3T8TnSqwbd zpk&{Oh4DdaLxp!|?q}=D-?M9YC<1XfAM*zsyC0)k8Ki+0<_n)9=+jw0zssE<2Lw_P zJyck_E`9C$DMz&&^}IunSjJ0%spj3}2xH9$R5VmY)$jUsu{v8 zAI8OO&aqZMB)4bx-=)<9R{E^|#Jvx?CM3~=L$wzandU5>F@r;lLCj!riPd(eBd4LZ zupm)E$q|~-Li+{DO8Ls>8L-D4RClQ9kjsk(#fA(2xpemreGmE@Tt@ZWogbra-GK$L z3gNXaF_E1}QKx+9qO1|a z(4-mq5Xd$09AJRCv0`v_Lg?|zoxyY^tP)bRsnpM63Mn8(b^Y#v2ZzH%*B_1ABZu+p z$x>bKf=VX3sMKg24D&Dpb)H6F;Mia2TAJ&GKcO0y4gTkpZvP|uq3*k@TBFzT$_|E| zPS@eY*wA}#9GPo&uGe&35jTqla##STWIYA;#w}FqgX?Djv1-=sbL*Tnk47DD#yY1qjQ>c5M5Ts-Aw9@@#e*T@|HzhuA5V#)ub{r$gwmjA>S|F>%R|1Gl0 z6@jk5h*H#=l^nT$tA9UOI`WRyannXD-5+Sj9c5tjQQ6Q*V4O{kD(JvElAR4K2J z+&9Sj24^M{H55*CH$*W~wI$)3dIz!13w!eT<*2r@6|-+%+QB)_7Uq?~wgQu*X1?yYiXtcx&)}^rnr@ao`5sIKIu}RsD%+LpS9&&iDwIoApU{?M* zH6xVeE5GjxO6mG81Y2P)#5~7`Zn?dXOwqDo_Sj@>Q#l9J3cV~A_5dY?j0YDGJD-U> znfX zF^=o~vhs7R-$Kb*27R1W#i`j^SogD}Hkf)_JyrdMuKacY)D=CL=uj&dYL8et zDf<8s#=_0}tZ0W)CBtJN;alDJ3C<2nLp$6g4V*7z?0}o|%EJwvNYgHCDakATdp=lI zpbZ0t%6lkY9EO(!9lI+Syc!+6Lv!{yLfC^T>U)#LR5QbG2U8ghDbkagN+y=TpsaDR znSlvn1f>_6h<(=Z%Kh zx8+;!eo%6M3su+!_)QJl*H^vSKE8`0H_2WxCp3SK+{^TT5dGQ0Teo0cboEY|DcDJq z@rZtNV54?=*`o6TIk#xttaoQk?UA`o>%cx$l%=k=;Tc{?Wqt^ps{x!NvI9!9jd_MP z#wy~NDhO?^M!jhk8l#hUiCdW!zObpP>w>$aS{R)&?;l8@HnVUmqD1HXZ)T%BEGLklV&qynpE#W_pU*|^49;Idi*ERtLauJ=@m&iD4N=jUViHOY==lgRY#@j Ix#j!+0)01-$^ZZW diff --git a/files/ja/web/css/flex-basis/index.md b/files/ja/web/css/flex-basis/index.md index f480f5dd482631..0ef9c534aa1e38 100644 --- a/files/ja/web/css/flex-basis/index.md +++ b/files/ja/web/css/flex-basis/index.md @@ -2,25 +2,22 @@ title: flex-basis slug: Web/CSS/flex-basis l10n: - sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d + sourceCommit: c63daf697d8f22ba17d4633f018ad7dfa65e4770 --- {{CSSRef}} -**`flex-basis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。 +**`flex-basis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{glossary("flex item","フレックスアイテム")}}の主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。 + +> **メモ:** {{cssxref("flex")}} 一括指定を使用する方が、個別に `flex-grow`、`flex-shrink`、`flex-basis` の宣言を使用するよりも推奨されます。この文書では、一括指定成分の一つである `flex-basis` プロパティについて説明していますので、ここではこれらを別個のものとしています。 {{EmbedInteractiveExample("pages/css/flex-basis.html")}} この例では、3 つすべてのアイテムの {{cssxref("flex-grow")}} と {{cssxref("flex-shrink")}} プロパティがともに `1` に設定されており、フレックスアイテムが初期の `flex-basis` から伸長したり縮小したりできることを示しています。 -このデモでは、最初のアイテムの `flex-basis` を変更します。そして、その `flex-basis` を基準にして伸長したり縮小したりします。つまり、例えば最初のアイテムの `flex-basis` が `200px` の場合、最初は 200px で表示されますが、他のアイテムが最低でも `min-content` の大きさであることを考慮して、利用可能な空間に合わせて縮小されます。 - -下記の図は、 Firefox の [Flexbox インスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)がアイテムがどのような寸法になるのかを理解するのに役立つことを示しています。 +このデモでは最初のフレックスアイテムに設定する `flex-basis` 値を変更し、利用できる空間いっぱいに伸長させたり縮小させたりします。他のフレックスアイテムもサイズが変更され、少なくとも `min-content` のサイズになります。例えば、最初のアイテムの `flex-basis` を `200px` に設定すると、始めは `200px` ですが、利用できる空間に合うように縮小されます。 -![Firefox の Flexbox インスペクターでは、アイテムが縮小された後のサイズが表示されます。](firefox-flex-basis.png) - -> [!NOTE] -> (`auto` 以外の) `flex-basis` と `width` (または `flex-direction: column` の場合は `height`) の両方が要素に設定されていた場合、 `flex-basis` が優先されます。 +もし `flex-basis` が `auto` 以外の値に設定されていて、同じフレックスアイテムに `width` （`flex-direction: column` の場合は `height`）が設定されている場合は、`flex-basis` の値が優先されます。 ## 構文 @@ -55,23 +52,16 @@ flex-basis: unset; - : 以下の単位のいずれかです。 - {{cssxref("<length>")}} は絶対的な値を設定します。 - - {{cssxref("<percentage>")}} は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。 - - `auto` は横書きモードでは [width](https://drafts.csswg.org/css2/#the-width-property) の値、縦書きモードでは [height](https://drafts.csswg.org/css2/#the-height-property) の値を使用します。対応する値も `auto` であった場合、代わりに `content` の値が使用されます。 - - `max-content` は幅の内在的な推奨値を設定します。 - - `min-content` は幅の内在的な最小値を設定します。 - - `fit-content` は、現在の要素のコンテンツに基づいて計算された、 `min-content` と `max-content` の値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。 + - {{cssxref("<percentage>")}} は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。 `flex-basis` のパーセント値はフレックスコンテナーに対して解決されます。フレックスコンテナーのサイズが不定の場合、 `flex-basis` の使用する値は `content` となります。 + - `auto` は横書きモードでは {{cssxref("width")}} の値、縦書きモードでは {{cssxref("height")}} の値を使用します。対応する値も `auto` であった場合、代わりに `content` の値が使用されます。 + - {{cssxref("max-content")}} は幅の内在的な推奨値を設定します。 + - {{cssxref("min-content")}} は幅の内在的な最小値を設定します。 + - {{cssxref("fit-content")}} は、現在の要素のコンテンツに基づいて計算された、 `min-content` と `max-content` の値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。 - `content` - : フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。 - > [!NOTE] - > この値はフレックスボックスレイアウトの初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) または [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。 - > - > - もともと、`flex-basis:auto` は「自身の `width` または `height` プロパティを参照する」という意味でした。 - > - その後 `flex-basis:auto` の意味が自動拡大縮小設定に変わり、また「自身の `width` または `height` プロパティを参照する」キーワードとして "main-size" を導入しました。これは [Firefox バグ 1032922](https://bugzil.la/1032922) で実装しました。 - > - さらに、この変更が [Firefox バグ 1093316](https://bugzil.la/1093316) で戻されて `auto` が再び「自身の `width` または `height` プロパティを参照する」になり、自動拡大縮小設定を行うための `content` キーワードを新たに導入しました (content キーワードの追加は [Firefox バグ 1105111](https://bugzil.la/1105111) で扱っています)。 - ## 公式定義 {{cssinfo}} @@ -84,11 +74,9 @@ flex-basis: unset; ### フレックスアイテムの初期の寸法の設定 -`flex-basis` の様々な値を設定した例です。 - #### HTML -```html +```html live-sample___setting_flex_item_initial_sizes
    • 1: flex-basis test
    • 2: flex-basis test
      • @@ -104,7 +92,7 @@ flex-basis: unset; #### CSS -```css +```css live-sample___setting_flex_item_initial_sizes .container { font-family: arial, sans-serif; margin: 0; @@ -181,6 +169,71 @@ flex-basis: unset; {{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}} +### flex-basis の `0` と `0%` の違い + +この例は `flex-basis` が `0` の場合と `flex-basis` が `0%` の場合との違いを示します。 `flex-direction` が `column` に設定されており、フレックスコンテナーとフレックスアイテムに高さが設定されていない場合です。 `0` は絶対的な長さですが、パーセント値の flex-basis の値は [`content`](#content) の値に解決します。 + +#### HTML + +同じ構造のフレックスコンテナーを 2 つ設置しています。これらのコンテナーは、 `flex-basis` の値以外は同じようにスタイル設定されています。コンテナーはそれぞれ見出しの `
      ` と `
      ` の 2 つの子要素を持っています。 `
      ` 要素はコンテンツとして `
      ` を持っていますが、これはフレックスアイテムとしては設定されませんが、高さは指定されます。 + +```html-nolint live-sample___flex_basis_0_vs_0 +
      +
      見出し
      +
      + flex-basis: 0; +
      +
      +
      +
      +
      見出し
      +
      + flex-basis: 0%; +
      +
      +
      +``` + +#### CSS + +コンテナーを横に並んでいるインラインフレックスコンテナーとしてスタイル設定し、比較しやすくします。 `flex-direction` を `column` に設定します。最初のコンテナーのフレックスアイテムの `flex-basis` 値は `0`、 2 つ目のコンテナーのフレックスアイテムの `flex-basis` 値は `0%` です。どちらのフレックスコンテナーもそのフレックスアイテムも高さは明示的に設定されていませんが、 `section` 要素の高さは `200px` を超えることができず、子要素の高さは `300px` になります。 + +```css live-sample___flex_basis_0_vs_0 +.container { + width: 40vw; + padding: 1rem; + border: 1px dashed blue; + + display: inline-flex; + flex-direction: column; +} + +section { + border: 1px solid red; + + overflow: auto; + min-height: 200px; +} + +.content { + background: wheat; + height: 300px; +} + +.container.basis-0 > * { + flex-basis: 0; +} +.container.basis-0-percent > * { + flex-basis: 0%; +} +``` + +#### 結果 + +{{EmbedLiveSample('flex_basis_0_vs_0', '100%', '400')}} + +最初のコンテナーの中には `flex-basis: 0` が設定されており、 `
      ` 要素の初期主要サイズはゼロで、高さ制限の `200px` まで伸長します。 2 つ目のコンテナーの中では、 `flex-basis: 0%`では、 `
      ` 要素は `300px` の初期主要サイズになります。なぜなら、フレックスコンテナーは高さを設定していないので、パーセント値の flex-basis の値が [`content`](#content) 値に解決されるからです。 + ## 仕様書 {{Specifications}} @@ -191,6 +244,8 @@ flex-basis: unset; ## 関連情報 -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ -- {{cssxref("width")}} +- {{cssxref("flex")}} 一括指定 +- {{cssxref("inline-size")}} +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール From d98cdab0d2cc0996d5373c66b55b0b1861151c96 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 21:17:04 +0900 Subject: [PATCH 237/279] =?UTF-8?q?2024/10/09=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/flex-direction/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/ja/web/css/flex-direction/index.md b/files/ja/web/css/flex-direction/index.md index d05324a0836e8e..29951a995af4c6 100644 --- a/files/ja/web/css/flex-direction/index.md +++ b/files/ja/web/css/flex-direction/index.md @@ -2,7 +2,7 @@ title: flex-direction slug: Web/CSS/flex-direction l10n: - sourceCommit: 1a07a1f7f623d94a8454414d1a4df9add04ddd5e + sourceCommit: 92447fec056cc89b7f28445851bea0c981fcbc12 --- {{CSSRef}} @@ -11,7 +11,7 @@ l10n: {{EmbedInteractiveExample("pages/css/flex-direction.html")}} -なお、 `row` および `row-reverse` の値は、フレックスコンテナーの書字方向に影響されます。 [`dir`](/ja/docs/Web/HTML/Global_attributes#dir) 属性が `ltr` である場合は、 `row` は左から右へ向かう水平軸を表し、また `row-reverse` は右から左へ向かう水平軸を表します。一方、 `dir` 属性が `rtl` である場合は、 `row` は右から左へ向かう水平軸を表し、また `row-reverse` は左から右へ向かう水平軸を表します。 +なお、 `row` および `row-reverse` の値は、フレックスコンテナーの書字方向に影響されます。 [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性が `ltr` である場合は、 `row` は左から右へ向かう水平軸を表し、また `row-reverse` は右から左へ向かう水平軸を表します。一方、 `dir` 属性が `rtl` である場合は、 `row` は右から左へ向かう水平軸を表し、また `row-reverse` は左から右へ向かう水平軸を表します。 ## 構文 @@ -49,7 +49,7 @@ flex-direction: unset; - `column-reverse` - : `column` と同様ですが、 **main-start** および **main-end** の位置が入れ替わります。 -## アクセシビリティの考慮 +## アクセシビリティ `flex-direction` プロパティを `row-reverse` または `column-reverse` の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、スクリーンリーダーの利用者は正しい読み上げ順序でアクセスすることができなくなります。 @@ -72,7 +72,7 @@ flex-direction: unset; #### HTML -```html +```html live-sample___reversing_flex_container_columns_and_rows

      これは Column-Reverse です

      A
      @@ -89,7 +89,7 @@ flex-direction: unset; #### CSS -```css +```css live-sample___reversing_flex_container_columns_and_rows .content { width: 200px; height: 200px; @@ -125,7 +125,7 @@ flex-direction: unset; #### 結果 -{{EmbedLiveSample('フレックスコンテナーの列と行の反転', '', '550')}} +{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}} ## 仕様書 From bac4c34a3321c4f82c29998c25e461f22afea6b4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 29 Nov 2024 21:53:46 +0900 Subject: [PATCH 238/279] =?UTF-8?q?2024/08/13=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0=20(#24728)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/08/13 時点の英語版に基づき更新 * Update index.md * Update index.md --- files/ja/web/css/flex-shrink/index.md | 63 +++++++++++++++++++-------- 1 file changed, 46 insertions(+), 17 deletions(-) diff --git a/files/ja/web/css/flex-shrink/index.md b/files/ja/web/css/flex-shrink/index.md index 999db8ba4be0ea..503173024d3736 100644 --- a/files/ja/web/css/flex-shrink/index.md +++ b/files/ja/web/css/flex-shrink/index.md @@ -2,14 +2,14 @@ title: flex-shrink slug: Web/CSS/flex-shrink l10n: - sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d + sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0 --- {{CSSRef}} -**`flex-shrink`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは `flex-shrink` の数値に従って縮小して収まります。 +**`flex-shrink`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムのフレックス縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーより大きい場合、フレックスアイテムは `flex-shrink` 値に従って[収縮します](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis#flex-shrink_プロパティ)。それぞれのフレックス行の[負の余白](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis#正と負の余白)は、その行の `flex-shrink` 値が `0` より大きいフレックスアイテム間で分配されます。 -使用時は `flex-shrink` は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。 +> **メモ:** {{cssxref("flex")}} 一括指定を使用する方が、個別に `flex-shrink`、{{cssxref("flex-grow")}}、{{cssxref("flex-basis")}} の宣言を使用するよりも推奨されます。この文書では、一括指定成分の一つである `flex-shrink` プロパティについて説明していますので、ここではこれらを別個のものとしています。 {{EmbedInteractiveExample("pages/css/flex-shrink.html")}} @@ -28,10 +28,20 @@ flex-shrink: revert-layer; flex-shrink: unset; ``` -`flex-shrink` プロパティは単一の `` で指定します。 +## 解説 + +`flex-shrink` プロパティはフレックス縮小係数を指定します。これは、フレックスコンテナー内でフレックスアイテムに負の余白が配分されたときに、そのフレックスアイテムが他のフレックスアイテムに対して相対的にどれだけ縮小するかを決定します。 + +このプロパティは、ブラウザーがフレックスアイテムの flex-basis 値を計算し、フレックスコンテナー内で収まらない大きさであることを見つけた場合に対処します。flex-shrink が正の値を持つ限り、アイテムはコンテナー内であふれないように縮小されます。 + +`flex-grow` プロパティは、各アイテムのフレックス伸長係数に比例して、利用できる正の余白を指定するプロパティで、 `flex-grow` プロパティの値のみを考慮します。 `flex-shrink` プロパティは、ボックスがあふれることなくコンテナー内で収まるように、負の余白を除去することを管理します。余白の除去は余白を追加するよりも少し複雑です。フレックス縮小係数はフレックス基本サイズに掛け合わされ、アイテムがどれだけ縮小できるかに比例して負の空間を分配します。これにより、大きなアイテムが顕著に縮小する前に、小さなアイテムが `0px` まで縮小してしまうことを防ぎます。 + +一般的に、 `flex-shrink` は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} プロパティと一緒に使用します。 `flex` 一括指定では、フレックス縮小係数は常に 2 つ目の `` になります。一括指定に 1 つの数値しか記載されていない場合、その値は `flex-grow` 値であると想定されます。 ### 値 +`flex-shrink` プロパティは単一の `` で指定します。 + - `` - : {{cssxref("<number>")}} を参照してください。負の値は無効です。既定値は 1 です。 @@ -47,46 +57,64 @@ flex-shrink: unset; ### フレックスアイテムの縮小係数の設定 +この例は、アイテムの縮小係数に基づいて負の余白がどのように分配されるかを示しています。この例には、 `flex-shrink` 値が 0 より大きい 5 つのフレックスアイテムが含まれており、これらのアイテムの組み合わせ幅は、親フレックスコンテナーの幅よりも大きくなっています。 + #### HTML -```html-nolint -

      全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。

      -

      A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。

      -

      D と E の幅は他より狭くなります。

      +```html live-sample___setting_flex_item_shrink_factor
      A
      B
      C
      -
      D
      -
      E
      +
      D
      +
      E
      ``` #### CSS -```css +各フレックスアイテムの {{cssxref("width")}} は `200px` です。 {{cssxref("flex-basis")}} プロパティは既定で `auto` なので、各アイテムの flex-basis は `200px` になります。これにより、フレックスアイテムの合計幅は `1000px` となり、コンテナー内で使用するサイズの 2 倍になります。すべてのフレックスアイテムは縮小可能で、 `flex-shrink` 値が `0` より大きく設定しています。 最後の 2 つのアイテムはより縮小されるように `flex-shrink` 値が大きく設定されています。 + +```css live-sample___setting_flex_item_shrink_factor #content { display: flex; width: 500px; } #content div { - flex-basis: 120px; - border: 3px solid rgba(0, 0, 0, 0.2); + width: 200px; } .box { flex-shrink: 1; } -.box1 { +.box4 { + flex-shrink: 1.5; +} + +.box5 { flex-shrink: 2; } ``` +```css hidden +#content { + margin: 5px; +} +div { + font-family: monospace; + outline: 1px solid; + line-height: 4em; + text-align: center; +} +``` + #### 結果 -{{EmbedLiveSample('フレックスアイテムの縮小係数の設定', 500, 300)}} +{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 100)}} + +フレックスアイテムは縮小できるので、コンテナー内であふれることはありません。 `500px` の負の余白は、 `flex-shrink` の値に基づいて 5 つのアイテムに分配されます。最初の 3 つのアイテムには `flex-shrink: 1` が設定されています。 D は `flex-shrink: 1.5`、 E は `flex-shrink: 2` を設定しています。 D と E の最終的な幅は他よりも小さくなり、 E は D より小さくなります。 ## 仕様書 @@ -98,5 +126,6 @@ flex-shrink: unset; ## 関連情報 -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール From 50d3d4183d40216ea208ad68f017c68f019f74cf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 22:24:51 +0900 Subject: [PATCH 239/279] =?UTF-8?q?2024/07/02=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/flex-wrap/index.md | 32 ++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/files/ja/web/css/flex-wrap/index.md b/files/ja/web/css/flex-wrap/index.md index 8fe24625dfae91..a63315048b8ee9 100644 --- a/files/ja/web/css/flex-wrap/index.md +++ b/files/ja/web/css/flex-wrap/index.md @@ -2,7 +2,7 @@ title: flex-wrap slug: Web/CSS/flex-wrap l10n: - sourceCommit: 1a07a1f7f623d94a8454414d1a4df9add04ddd5e + sourceCommit: 1f12a4156d4aec63d8466c49a39b1ac76d8a5735 --- {{CSSRef}} @@ -11,7 +11,7 @@ l10n: {{EmbedInteractiveExample("pages/css/flex-wrap.html")}} -他のプロパティや詳細情報については [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)をご覧ください。 +{{cssxref("flex-flow")}} プロパティは、 {{CSSXRef("flex-direction")}} と `flex-wrap` の両プロパティを一括指定することができ、それぞれフレックスコンテナーの主軸及び交差軸を定義します。 ## 構文 @@ -28,18 +28,16 @@ flex-wrap: revert-layer; flex-wrap: unset; ``` -`flex-wrap` プロパティは次の値のリストから選択した単一のキーワードで指定します。 - ### 値 -以下の値を利用することができます。 +`flex-wrap` プロパティは以下の値のリストから選択した単一のキーワードで指定します。 - `nowrap` - - : フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 `cross-start` は、 {{cssxref("flex-direction")}} の値に応じて `start` または `before` と同一になります。 + - : フレックスアイテムは単一行に配置され、フレックスコンテナーからはみ出すこともあります。交差軸の先頭は、 {{cssxref("flex-direction")}} の値に応じて、[インラインの先頭またはブロックの先頭](/ja/docs/Glossary/Flow_relative_values)のどちらかと等しくなります。 - `wrap` - - : フレックスアイテムは複数行に分割されます。 `cross-start` は `flex-direction` の値に応じて `start` または `before` と同一になり、 `cross-end` は、指定された `cross-start` の反対側になります。 + - : フレックスアイテムは複数行に分割されます。交差軸の先頭は、現在の[書字方向](/ja/docs/Web/CSS/CSS_writing_modes)および {{cssxref("flex-direction")}} の値に応じて、[インラインの先頭またはブロックの先頭](/ja/docs/Glossary/Flow_relative_values)のどちらかと等しくなります。 - `wrap-reverse` - - : `wrap` と同様に動作しますが、 `cross-start` と `cross-end` が入れ替わります。 + - : `wrap` と同様に動作しますが、交差軸の先頭と末尾が入れ替わります。 ## 公式定義 @@ -55,7 +53,7 @@ flex-wrap: unset; #### HTML -```html +```html live-sample___setting_flex_container_wrap_values

      This is an example for flex-wrap:wrap

      1
      @@ -78,8 +76,8 @@ flex-wrap: unset; #### CSS -```css -/* Common Styles */ +```css live-sample___setting_flex_container_wrap_values +/* 共通スタイル */ .content, .content1, .content2 { @@ -106,7 +104,7 @@ flex-wrap: unset; background: steelblue; } -/* Flexbox Styles */ +/* フレックスボックススタイル */ .content { display: flex; flex-wrap: wrap; @@ -123,7 +121,7 @@ flex-wrap: unset; #### 結果 -{{ EmbedLiveSample('フレックスコンテナーの_wrap_値の設定', '', '700') }} +{{ EmbedLiveSample('Setting flex container wrap values', '', '700') }} ## 仕様書 @@ -135,6 +133,8 @@ flex-wrap: unset; ## 関連情報 -- {{CSSXRef("flex-flow")}} は `flex-wrap` および {{CSSXRef("flex-direction")}} プロパティの一括指定プロパティです。 -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ -- CSS フレックスボックスガイド: _[フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items)_ +- {{CSSXRef("flex-direction")}} +- {{CSSXRef("flex-flow")}} 一括指定 +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [フレックスアイテムの折り返しをマスターする](/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items) +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール From b39fd2e881abf2da1b84419a8891f69833dd5740 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 22:50:39 +0900 Subject: [PATCH 240/279] =?UTF-8?q?2024/06/05=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/glossary/flow_relative_values/index.md | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 files/ja/glossary/flow_relative_values/index.md diff --git a/files/ja/glossary/flow_relative_values/index.md b/files/ja/glossary/flow_relative_values/index.md new file mode 100644 index 00000000000000..b5e6bccd4b0e14 --- /dev/null +++ b/files/ja/glossary/flow_relative_values/index.md @@ -0,0 +1,35 @@ +--- +title: Flow relative values (フロー関連値) +slug: Glossary/Flow_relative_values +l10n: + sourceCommit: 63249f6b1e89f42e172878c54a2f9674bee50904 +--- + +{{GlossarySidebar}} + +CSS において、**フロー関連値**は、要素のブロック軸とインライン軸に対する方向のキーワード値です。これらの値には、`block-start`、`block-end`、`inline-start`、`inline-end`、`start`、`end` があります。 + +CSS において、{{glossary("physical properties","物理的プロパティ")}}は、要素の物理的な方向と特定の辺の参照に基づいた位置を定義します。 + +一方で、 CSS の{{glossary("logical properties","論理的プロパティ")}}は、ビューポートの物理的な寸法ではなく、文書の書字方向や方向に基づいてスタイルを定義します。論理的プロパティはコンテンツの流れに関連し、ブロック軸とインライン軸に関連する方向キーワードを使用します。 + +## ブロック方向 + +**ブロック軸**とは、ブロックレイアウトにおける要素の積み重ね順序を定義する軸を参照します。段落 ({{htmlelement("p")}})、見出し、div ({{htmlelement("div")}}) などのコンテンツのブロックがウェブページにレイアウトされる方向です。これはブロック方向とも呼ばれます。左書きの言語や右書きの言語では、ブロックの方向はコンテンツの流れの垂直方向で、上から下に進みます。 + +**ブロック先頭** (`block-start`) 方向と**ブロック末尾** (`block-end`) 方向は、それぞれブロック軸に沿ったコンテンツの先頭と 末尾、または "from" 方向と "to" 方向を表し、横書き方向ではブロック先頭が上端 (`top`)、ブロック末尾が下端 (`bottom`) に相当します。 + +## インライン方向 + +**インライン軸**はブロック軸に垂直です。インライン軸は、ブロック内でテキストなどのインラインコンテンツが流れる方向を表します。これはインライン方向とも呼ばれます。英語のような左書きの書字方向では、**インライン方向**は左から右への横方向です。アラビア語やヘブライ語のような右書きの言語では、インライン方向は水平で右から左です。 + +**インライン先頭**と**インライン末尾**は、それぞれインライン軸に沿ったコンテンツの開始端と 終了端を表し、インライン先頭と インライン末尾のプロパティと値は、横書き方向では左右のプロパティと値に相当します。右と左のどちらに相当するかは、書字方向によって異なります。例えば、インライン先頭は左書きの言語では左 (`left`) に、右書きの言語では右 (`right`) に相当します。 + +## 先頭と末尾 + +CSS プロパティの効果には、一次元的なものと二次元的なものがあります。例えば、 {{cssxref("text-align")}} はテキストのインライン方向だけに関係するので、一次元です。文脈上、一次元に制約される場合、フロー関連のキーワードは、先頭 (`start`) または末尾 (`end`) に短縮されます。 + +## 関連情報 + +- [CSS 論理的プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)モジュール +- [論理的プロパティと値の基本概念](/ja/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values) From 31060be3e78983aec1c87aeb60d4a6c6191248db Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 23:05:31 +0900 Subject: [PATCH 241/279] =?UTF-8?q?2024/08/28=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/flex/index.md | 107 +++++++++++++++++++-------------- 1 file changed, 61 insertions(+), 46 deletions(-) diff --git a/files/ja/web/css/flex/index.md b/files/ja/web/css/flex/index.md index 986b003a01d171..285baae1be48b0 100644 --- a/files/ja/web/css/flex/index.md +++ b/files/ja/web/css/flex/index.md @@ -2,12 +2,12 @@ title: flex slug: Web/CSS/flex l10n: - sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d + sourceCommit: e050b876063f44bde9bf011a2dfc94c0d90ca863 --- {{CSSRef}} -**`flex`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、フレックス*アイテム*をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。 +**`flex`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、{{glossary("flex item","フレックスアイテム")}}をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。 {{EmbedInteractiveExample("pages/css/flex.html")}} @@ -23,31 +23,30 @@ l10n: ```css /* キーワード値 */ -flex: auto; -flex: initial; -flex: none; +flex: none; /* 0 0 auto */ /* 単位がない数値を 1 つ指定: flex-grow この場合 flex-basis は 0 と等しくなる*/ -flex: 2; +flex: 2; /* 2 1 0% */ /* 幅または高さを 1 つ指定: flex-basis */ -flex: 10em; +flex: auto; /* 1 1 auto */ +flex: 10em; /* 1 1 10em */ flex: 30%; flex: min-content; /* 値を 2 つ指定: flex-grow | flex-basis */ -flex: 1 30px; +flex: 1 30px; /* 1 1 30px */ /* 値を 2 つ指定: flex-grow | flex-shrink */ -flex: 2 2; +flex: 2 2; /* 2 2 0% */ /* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* グローバル値 */ flex: inherit; -flex: initial; +flex: initial; /* 0 1 auto */ flex: revert; flex: revert-layer; flex: unset; @@ -57,7 +56,7 @@ flex: unset; - **値 1 つの構文:** 値は以下のうちの 1 つです。 - - {{cssxref("<flex-grow>")}} として有効な値の場合、一括指定は `flex: 1 0` と展開されます。 + - {{cssxref("<flex-grow>")}} として有効な値の場合、すべてのブラウザーで、この一括指定は `flex: 1 0%` と展開されます。ただし、仕様書では `flex: 1 0` と展開すべきであるとしています。 - {{cssxref("<flex-basis>")}} として有効な値の場合、一括指定は `flex: 1 1 ` と展開されます。 - キーワード `none` またはグローバルキーワードのいずれか。 @@ -67,8 +66,8 @@ flex: unset; - 2 つ目は以下のいずれかの値でなければなりません。 - - {{cssxref("flex-shrink")}} として有効な値の場合、一括指定は `flex: 0` と展開されます。 - - {{cssxref("flex-basis")}} として有効な値の場合、一括指定は `flex: 1 ` と展開されます。 + - {{cssxref("flex-shrink")}} として有効な値の場合、すべてのブラウザーにおいて、この一括指定は `flex: 0%` と展開されます。 + - {{cssxref("flex-basis")}} として有効な値の場合、この一括指定は `flex: 1 ` と展開されます。 - **値 3 つの構文:** 値は以下の順序でなければなりません。 @@ -78,24 +77,30 @@ flex: unset; ### 値 -- `initial` - - : アイテムは `width` および `height` プロパティによって寸法が決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "`flex: 0 1 auto`" と同等です。 -- `auto` - - : アイテムは `width` および `height` プロパティによって寸法が決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "`flex: 1 1 auto`" と同等です。 -- `none` - - : アイテムは `width` および `height` プロパティによって寸法が決められます。寸法は完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"`flex: 0 0 auto`" と同等です。 - `<'flex-grow'>` - : フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は `1` です。 (初期値は `0`) - `<'flex-shrink'>` - : フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は `1` です。 (初期値は `1`) - `<'flex-basis'>` - - : フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが `0` ならば、自由度として解釈されないように単位をつけなければなりません。省略時の既定値は `0` です。 (初期値は `auto`) + - : フレックスアイテムの {{cssxref("flex-basis")}} を定義します。省略時の既定値は `0%` です。初期値は `auto` です。 +- `none` + - : アイテムは `width` および `height` プロパティによって寸法が決められます。寸法は完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"`flex: 0 0 auto`" と同等です。 + +一般的に望まれるフレックスボックスの効果は、次の `flex` 値を使用して実現できます。 + +- `initial`: フレックスアイテムは伸長しませんが、縮小することができます。これが既定値では `flex: 0 1 auto` に展開されます。アイテムのサイズは、 `flex-direction` に応じて、 `width` または `height` プロパティに従います。負の空白がある場合、アイテムはコンテナー内に収まるように最小サイズまで縮小しますが、フレックスコンテナー内で正の値があってもそれを吸収するために伸長することはありません。 +- `auto`: フレックスアイテムは伸長したり縮小したりします。この値は `flex: 1 1 auto` に展開されます。アイテムは、 `flex-direction` に応じて、その `width` または `height` プロパティに従ってサイズ指定されますが、フレックスコンテナー内で利用できる正の値を吸収するために伸長したり、負の値の場合はコンテナーに合わせて最小サイズまで縮小します。フレックスアイテムは完全に伸縮自在です。 +- `none`: フレックスアイテムは伸長も縮小もしません。この値は `flex: 0 0 auto` に展開されます。アイテムは、フレックスコンテナーの方向に応じて、 `width` または `height` プロパティに従ってサイズ調整されます。フレックスアイテムは完全に柔軟性がありません。 +- `flex: `: フレックスアイテムの主要サイズは設定した数値に比例します。この値は `flex: 1 0` に展開されます。これは `flex-basis` をゼロに設定し、フレックスアイテムを伸縮自在にします。このアイテムは最小の寸法と同じ幅または高さになり、コンテナー内で利用できる正の値は、このアイテムと兄弟フレックスアイテムの成長係数に基づいて比例配分されます。すべてのフレックスアイテムがこのパターンを使用する場合、すべてのアイテムはその数値に比例したサイズになります。 + + > [!WARNING] + > ブラウザーは `flex` 値で `flex-basis` が指定されていない場合、 `flex-basis` 値に `0%` を使用します。これは仕様で言われている `flex-basis` 値の `0` とは異なります。これはフレックスレイアウトに影響を与える場合があります。この効果を[flex-basis の 0 と 0% の違い](/ja/docs/Web/CSS/flex-basis##flex-basis_の_0_と_0_の違い)の例で見てみましょう。 ## 解説 多くの場合、 `flex` には `auto`, `initial`, `none`, または単位のない正の数を設定します。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。 -```html hidden +```html hidden live-sample___description
      auto
      auto
      @@ -127,7 +132,7 @@ flex: unset;
      ``` -```css hidden +```css hidden live-sample___description * { box-sizing: border-box; } @@ -196,43 +201,52 @@ flex: unset; #### HTML -```html +```html-nolint live-sample___setting_flex_auto
      -
      flex: auto (click to toggle raw box)
      -
      flex: initial
      +
      + flex: auto （クリックで `flex: initial` ボックスを削除/追加） +
      +
      flex: initial
      ``` #### CSS -```css -#flex-container { - display: flex; +```css hidden live-sample___setting_flex_auto +body * { + padding: 1rem; + text-select: none; + box-sizing: border-box; font-family: Consolas, Arial, sans-serif; } +``` -#flex-container > div { - padding: 1rem; +```css live-sample___setting_flex_auto +#flex-container { + border: 2px dashed gray; + display: flex; } #flex-auto { + cursor: pointer; + background-color: wheat; + flex: auto; - border: 1px solid #f00; } -#flex-initial { - border: 1px solid #000; +#default { + background-color: lightblue; } ``` #### JavaScript -```js -const flexAuto = document.getElementById("flex-auto"); -const flexInitial = document.getElementById("flex-initial"); -flexAuto.addEventListener("click", () => { - flexInitial.style.display = - flexInitial.style.display === "none" ? "block" : "none"; +```js live-sample___setting_flex_auto +const flexAutoItem = document.getElementById("flex-auto"); +const defaultItem = document.getElementById("default"); +flexAutoItem.addEventListener("click", () => { + defaultItem.style.display = + defaultItem.style.display === "none" ? "block" : "none"; }); ``` @@ -240,14 +254,14 @@ flexAuto.addEventListener("click", () => { このフレックスコンテナーには 2 つのフレックスアイテムがあります。 -- "flex: auto" は `flex` の値が [`auto`](auto) です。 -- "flex: initial" は `flex` の値が [`initial`](#initial) です。 +- `#flex-auto` のアイテムは `flex` 値が [`auto`](#auto) です。 `auto` 値は `1 1 auto` に展開され、つまりアイテムは拡大が許可されます。 +- `#default` アイテムには `flex` 値が設定されていないので、既定値として [`initial`](#initial) 値が設定されます。 `initial` 値は `0 1 auto` に展開され、アイテムは拡大されません。 -"flex: initial" のアイテムは、要求されるだけの幅を取りますが、それ以上空間を取るために伸長されることはありません。残りの空間はすべて "flex: auto" が占めます。 +`#default` アイテムはその幅が要求されるだけの空間を取りますが、それ以上空間を取るために拡大されることはありません。残りの空間はすべて `#flex-auto` アイテムが占めます。 -"flex: auto" をクリックすると、 "flex: initial" の {{cssxref("display")}} プロパティが `none` に設定され、レイアウトから除去されます。 "flex: auto" のアイテムが伸長され、コンテナー内で利用可能な空間をすべて占めます。 +`#flex-auto` アイテムをクリックすると、 `#default` アイテムの {{cssxref("display")}} プロパティが `none` に設定され、レイアウトから除去されます。すると、 `#flex-auto` アイテムがコンテナー内で利用できる空間をすべて占めるように展開されます。もう一度 `#flex-auto` アイテムをクリックすると、 `#default` アイテムがコンテナー内に再び追加されます。 -{{EmbedLiveSample('Setting_flex_auto','100%','100')}} +{{EmbedLiveSample('Setting_flex_auto','100%','150')}} ## 仕様書 @@ -259,5 +273,6 @@ flexAuto.addEventListener("click", () => { ## 関連情報 -- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS フレックスボックスガイド: _[主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [主軸方向のフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール From 67b73f1ab8e6924f1eb4df9ed84b2af7a22301dc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 23:44:08 +0900 Subject: [PATCH 242/279] =?UTF-8?q?2024/11/14=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/transition-timing-function/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/web/css/transition-timing-function/index.md b/files/ja/web/css/transition-timing-function/index.md index 57ce82b6a2227d..22b88da820104b 100644 --- a/files/ja/web/css/transition-timing-function/index.md +++ b/files/ja/web/css/transition-timing-function/index.md @@ -2,7 +2,7 @@ title: transition-timing-function slug: Web/CSS/transition-timing-function l10n: - sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d + sourceCommit: 2c49a844f820f191f98b13130e0075bbeed530f3 --- {{CSSRef}} @@ -15,7 +15,7 @@ l10n: この加速曲線は、トランジションが行われるプロパティごとに 1 つの {{cssxref("<easing-function>")}} を用いて定義されます。 -複数のタイミング関数を指定することができます。それぞれのタイミング関数は、 {{ cssxref("transition-property") }} で指定されたように対応するプロパティに適用され、 `transition-property` のリストとして振るまいます。指定されたタイミング関数が `transition-property` のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。 +複数のイージング関数を指定することができます。それぞれのイージング関数は、 {{ cssxref("transition-property") }} で指定されたように対応するプロパティに適用され、 `transition-property` のリストとして振るまいます。指定されたイージング関数が `transition-property` のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。 ## 構文 @@ -41,7 +41,7 @@ transition-timing-function: steps(5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); -/* 複数のタイミング関数 */ +/* 複数のイージング関数 */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1); /* グローバル値 */ From 0c7536dc81af12bed15ea9e67d33591a7ff9cb2e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 23:51:41 +0900 Subject: [PATCH 243/279] =?UTF-8?q?2024/11/13=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@starting-style/index.md | 36 +++++++++++------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/files/ja/web/css/@starting-style/index.md b/files/ja/web/css/@starting-style/index.md index ad23216cfedada..9b5b0bcc3eefe9 100644 --- a/files/ja/web/css/@starting-style/index.md +++ b/files/ja/web/css/@starting-style/index.md @@ -2,10 +2,10 @@ title: "@starting-style" slug: Web/CSS/@starting-style l10n: - sourceCommit: 1c4eb0bfb5f72a26fcc21a83fac91aa3e66c2fb8 + sourceCommit: 0326d9301650304ef67a56e88b542b160093042e --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} **`@starting-style`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、トランジションさせる要素に設定されるプロパティ群の開始値を定義するために使用します。これらのプロパティは、最初に要素のスタイルが更新されたとき、つまり要素が前回読み込まれたページに最初に表示されたときに設定されるものです。 @@ -37,7 +37,7 @@ l10n: 予期しない動作を避けるため、既定では [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions) は要素の初期スタイル更新時や、 {{CSSxRef("display")}} 型が `none` から別の値に変わった時には発生しません。開始スタイル設定のトランジションを有効にするには、 `@starting-style` ルールが必要です。これは前回状態を持たない要素に開始スタイルを提供し、トランジションするプロパティ値を定義します。 -`@starting-style` は、[最上位レイヤー](/ja/docs/Glossary/Top_layer)に表示される要素（[ポップオーバー](/ja/docs/Web/API/Popover_API)やモーダルダイアログ ({{htmlelement("dialog")}}) など）、 `display: none` に変更される要素、 DOM に追加されたり除去されたりする要素の出現・消滅トランジションを作成する場合に特に有益です。 +`@starting-style` は、{{glossary("top layer","最上位レイヤー")}}に表示される要素（[ポップオーバー](/ja/docs/Web/API/Popover_API)やモーダルダイアログ ({{htmlelement("dialog")}}) など）、 `display: none` に変更される要素、 DOM に追加されたり除去されたりする要素の出現・消滅トランジションを作成する場合に特に有益です。 > **メモ:** `@starting-style` は CSS トランジションにのみ関係します。 [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)を使用してそのような効果を実装する場合、 `@starting-style` は必要ありません。例については [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations)を参照してください。 @@ -221,7 +221,7 @@ btn.addEventListener("click", () => { #### CSS -この例では [`opacity`](/ja/docs/Web/CSS/opacity) と [`transform`](/ja/docs/Web/CSS/transform) （具体的には、水平方向に変倍する座標変換）という 2 つのプロパティをアニメーションさせて、ポップオーバーをフェードイン/フェードアウトさせたり、水平方向に拡大/縮小させたりします。 +この例では {{cssxref("opacity")}} と {{cssxref("transform")}} （具体的には、水平方向に変倍する座標変換）という 2 つのプロパティをアニメーションさせて、ポップオーバーをフェードイン/フェードアウトさせたり、水平方向に拡大/縮小させたりします。 ```css html { @@ -282,17 +282,17 @@ html { } ``` -これを実現するために、これらのプロパティの開始状態にはポップオーバー要素の既定の非表示状態を（`[popover]` で選択して）設定し、終了状態にはポップオーバー要素が開いた状態を（[`:popover-open`](/ja/docs/Web/CSS/:popover-open) 擬似クラスで選択して）設定しています。 +これを実現するために、これらのプロパティの開始状態にはポップオーバー要素の既定の非表示状態を（`[popover]` で選択して）設定し、終了状態にはポップオーバー要素が開いた状態を（{{cssxref(":popover-open")}} 擬似クラスで選択して）設定しています。 -そして、 [`transition`](/ja/docs/Web/CSS/transition) プロパティを設定し、 2 つの状態の間でアニメーションを行います。アニメーションの始める状態には `@starting-style` アットルールを記載して、アニメーションの初期状態を設定しています。 +そして、 {{cssxref("transition")}} プロパティを設定し、 2 つの状態の間でアニメーションを行います。アニメーションの始める状態には `@starting-style` アットルールを記載して、アニメーションの初期状態を設定しています。 -アニメーションする要素は、表示されると[最上位レイヤー](/ja/docs/Glossary/Top_layer)へ移動し、（[`display: none`](/ja/docs/Web/CSS/display) で）非表示になると最上位レイヤーから除去されるため、両方向で確実にアニメーションが動作するように、さらにいくつかの段階が必要になります。 +アニメーションする要素は、表示されると{{glossary("top layer","最上位レイヤー")}}へ移動し、（{{cssxref("display", "display: none")}} で）非表示になると最上位レイヤーから除去されるため、両方向で確実にアニメーションが動作するように、さらにいくつかの段階が必要になります。 -- `display` をトランジション後の要素のリストに追加することで、アニメーションする要素が出現・消滅の両方のアニメーション中に確実に表示される（`display: block` などの `display` の可視値に設定する）ようにします。これがなければ、消滅アニメーションは表示されません。その結果、ポップオーバーはただ消えてしまいます。アニメーションを有効にするために、 [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) 値も一括指定で設定されていることに注意してください。 -- [`overlay`](/ja/docs/Web/CSS/overlay) をトランジション後の要素のリストに追加して、要素を最上位レイヤーから除去するのをアニメーションが終わるまで確実に延期するようにします。これは、このような単純なアニメーションでは大差ありませんが、より複雑なケースでは、これを行わないと、要素がオーバーレイからすばやく除去され、アニメーションが滑らかでなくなったり、効果的でなくなったりすることがあります。この場合も、アニメーションを行うには `transition-behavior: allow-discrete` が必要です。 +- `display` をトランジション後の要素のリストに追加することで、アニメーションする要素が出現・消滅の両方のアニメーション中に確実に表示される（`display: block` などの `display` の可視値に設定する）ようにします。これがなければ、消滅アニメーションは表示されません。その結果、ポップオーバーはただ消えてしまいます。アニメーションを有効にするために、 {{cssxref("transition-behavior", "transition-behavior: allow-discrete")}} 値も一括指定で設定されていることに注意してください。 +- {{cssxref("overlay")}} をトランジション後の要素のリストに追加して、要素を最上位レイヤーから除去するのをアニメーションが終わるまで確実に延期するようにします。これは、このような単純なアニメーションでは大差ありませんが、より複雑なケースでは、これを行わないと、要素がオーバーレイからすばやく除去され、アニメーションが滑らかでなくなったり、効果的でなくなったりすることがあります。この場合も、アニメーションを行うには `transition-behavior: allow-discrete` が必要です。 > [!NOTE] -> また、開いたときにポップオーバーの背後に現れる [`::backdrop`](/ja/docs/Web/CSS/::backdrop) のトランジションも記載し、暗転するアニメーションも提供しています。 `[popover]:popover-open::backdrop` はポップオーバーが開くための背景を選択するために使用します。 +> また、開いたときにポップオーバーの背後に現れる {{cssxref("::backdrop")}} のトランジションも記載し、暗転するアニメーションも提供しています。 `[popover]:popover-open::backdrop` はポップオーバーが開くための背景を選択するために使用します。 #### 結果 @@ -356,10 +356,10 @@ function createColumn() { 「新しい列を作成」ボタンをクリックすると、 `createColumn()` 関数が呼び出されます。これは、ランダムに生成された背景色を持つ {{htmlelement("div")}} 要素と、その `
      ` を閉じるための {{htmlelement("button")}} 要素を作成します。そして、`
    学习前提：前提： 基础电脑知识，安装了基本的软件，，处理文件的基本知识，HTML 基础（学习的基本知识，HTML 基础（学习 HTML 介绍），以及对 CSS 工作原理的了解（学习），以及对 CSS 工作原理的了解（学习 CSS 初步CSS 入门概述）