From 18c4336c6793f4784695c2a7b79c571c3fb6e95a Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Sat, 27 Jul 2024 17:26:08 -0700 Subject: [PATCH] ja: Convert noteblocks to GFM Alerts (part 15) This PR converts the noteblocks for the Japanese locale to GFM Alerts syntax, using a [conversion script](https://github.com/queengooborg/mdn-toolkit/blob/main/upgrade-noteblock.js). This is part 15. Note: manual adjustments have also been made to correct some issues, including capitalization, syntax, duplicated keywords and more. --- files/ja/web/css/@media/index.md | 9 ++++++--- files/ja/web/css/@media/orientation/index.md | 3 ++- .../ja/web/css/@media/prefers-reduced-data/index.md | 6 ++++-- .../web/css/@media/prefers-reduced-motion/index.md | 3 ++- files/ja/web/css/@namespace/index.md | 3 ++- files/ja/web/css/@page/index.md | 3 ++- files/ja/web/css/@scope/index.md | 9 ++++++--- files/ja/web/css/@starting-style/index.md | 6 ++++-- files/ja/web/css/_colon_-moz-broken/index.md | 3 ++- files/ja/web/css/_colon_-moz-first-node/index.md | 3 ++- files/ja/web/css/_colon_-moz-last-node/index.md | 3 ++- files/ja/web/css/_colon_-moz-loading/index.md | 3 ++- files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md | 6 ++++-- files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md | 6 ++++-- files/ja/web/css/_colon_active/index.md | 3 ++- files/ja/web/css/_colon_autofill/index.md | 3 ++- files/ja/web/css/_colon_blank/index.md | 3 ++- files/ja/web/css/_colon_checked/index.md | 3 ++- files/ja/web/css/_colon_dir/index.md | 3 ++- files/ja/web/css/_colon_first-child/index.md | 3 ++- files/ja/web/css/_colon_first/index.md | 3 ++- files/ja/web/css/_colon_focus/index.md | 3 ++- files/ja/web/css/_colon_host-context/index.md | 3 ++- files/ja/web/css/_colon_host/index.md | 3 ++- files/ja/web/css/_colon_host_function/index.md | 3 ++- files/ja/web/css/_colon_in-range/index.md | 6 ++++-- files/ja/web/css/_colon_is/index.md | 3 ++- files/ja/web/css/_colon_lang/index.md | 3 ++- files/ja/web/css/_colon_last-child/index.md | 3 ++- files/ja/web/css/_colon_left/index.md | 3 ++- files/ja/web/css/_colon_link/index.md | 3 ++- files/ja/web/css/_colon_nth-last-child/index.md | 3 ++- files/ja/web/css/_colon_nth-last-of-type/index.md | 3 ++- files/ja/web/css/_colon_nth-of-type/index.md | 3 ++- files/ja/web/css/_colon_only-child/index.md | 3 ++- files/ja/web/css/_colon_only-of-type/index.md | 3 ++- files/ja/web/css/_colon_out-of-range/index.md | 3 ++- files/ja/web/css/_colon_right/index.md | 3 ++- files/ja/web/css/_colon_user-invalid/index.md | 3 ++- files/ja/web/css/_colon_user-valid/index.md | 3 ++- files/ja/web/css/_colon_valid/index.md | 3 ++- files/ja/web/css/_colon_visited/index.md | 3 ++- files/ja/web/css/_colon_where/index.md | 3 ++- files/ja/web/css/_doublecolon_after/index.md | 3 ++- files/ja/web/css/_doublecolon_before/index.md | 3 ++- files/ja/web/css/_doublecolon_first-letter/index.md | 3 ++- files/ja/web/css/_doublecolon_first-line/index.md | 3 ++- files/ja/web/css/_doublecolon_marker/index.md | 3 ++- files/ja/web/css/_doublecolon_placeholder/index.md | 3 ++- .../css/_doublecolon_view-transition-group/index.md | 3 ++- files/ja/web/css/animation-composition/index.md | 6 ++++-- files/ja/web/css/animation-duration/index.md | 3 ++- files/ja/web/css/animation-range/index.md | 6 ++++-- files/ja/web/css/animation-timeline/index.md | 6 ++++-- files/ja/web/css/animation-timeline/scroll/index.md | 9 ++++++--- files/ja/web/css/animation-timeline/view/index.md | 6 ++++-- files/ja/web/css/appearance/index.md | 3 ++- files/ja/web/css/background-image/index.md | 3 ++- files/ja/web/css/background-size/index.md | 9 ++++++--- files/ja/web/css/border-bottom-left-radius/index.md | 3 ++- files/ja/web/css/border-bottom-right-radius/index.md | 3 ++- files/ja/web/css/border-bottom-style/index.md | 3 ++- files/ja/web/css/border-bottom-width/index.md | 3 ++- files/ja/web/css/border-image/index.md | 3 ++- files/ja/web/css/border-left-style/index.md | 3 ++- files/ja/web/css/border-left-width/index.md | 3 ++- files/ja/web/css/border-radius/index.md | 3 ++- files/ja/web/css/border-right-style/index.md | 3 ++- files/ja/web/css/border-right-width/index.md | 3 ++- files/ja/web/css/border-top-left-radius/index.md | 3 ++- files/ja/web/css/border-top-right-radius/index.md | 3 ++- files/ja/web/css/border-top-style/index.md | 3 ++- files/ja/web/css/border-top-width/index.md | 3 ++- files/ja/web/css/border-width/index.md | 3 ++- files/ja/web/css/border/index.md | 3 ++- files/ja/web/css/box-align/index.md | 3 ++- files/ja/web/css/box-direction/index.md | 3 ++- files/ja/web/css/box-edge/index.md | 3 ++- files/ja/web/css/box-flex-group/index.md | 3 ++- files/ja/web/css/box-flex/index.md | 3 ++- files/ja/web/css/box-lines/index.md | 3 ++- files/ja/web/css/box-ordinal-group/index.md | 3 ++- files/ja/web/css/box-orient/index.md | 3 ++- files/ja/web/css/box-pack/index.md | 3 ++- files/ja/web/css/box-sizing/index.md | 3 ++- files/ja/web/css/break-after/index.md | 3 ++- files/ja/web/css/break-before/index.md | 3 ++- files/ja/web/css/caret-color/index.md | 3 ++- files/ja/web/css/cascade/index.md | 6 ++++-- files/ja/web/css/clear/index.md | 3 ++- files/ja/web/css/clip-path/index.md | 3 ++- files/ja/web/css/clip/index.md | 3 ++- files/ja/web/css/color_value/color/index.md | 12 ++++++++---- files/ja/web/css/color_value/hsl/index.md | 6 ++++-- files/ja/web/css/color_value/hwb/index.md | 3 ++- files/ja/web/css/color_value/index.md | 3 ++- files/ja/web/css/color_value/lab/index.md | 3 ++- files/ja/web/css/color_value/lch/index.md | 3 ++- files/ja/web/css/color_value/light-dark/index.md | 3 ++- files/ja/web/css/color_value/rgb/index.md | 9 ++++++--- 100 files changed, 248 insertions(+), 124 deletions(-) diff --git a/files/ja/web/css/@media/index.md b/files/ja/web/css/@media/index.md index a860fa26303e04..433c717bed5d0a 100644 --- a/files/ja/web/css/@media/index.md +++ b/files/ja/web/css/@media/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/@media **`@media`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、1 つまたは複数の[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。 -> **メモ:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。 +> [!NOTE] +> JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。 {{EmbedInteractiveExample("pages/tabbed/at-rule-media.html", "tabbed-standard")}} @@ -51,7 +52,8 @@ slug: Web/CSS/@media - `speech` - : 音声合成向けのものです。 -> **メモ:** CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。 +> [!NOTE] +> CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。 > `aural` タイプは `speech` に置き換えられましたが、これも同様です。 ### メディア特性 @@ -145,7 +147,8 @@ _論理演算子_ `not`, `and`, `only` を使うと、複雑なメディアク カンマで区切られたクエリーのリストの中にある場合は、適用された特定のクエリーのみを反転します。 `not` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 - > **メモ:** レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。 + > [!NOTE] + > レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。 - `only` - : クエリー全体が一致する場合にのみスタイルを適用します。 diff --git a/files/ja/web/css/@media/orientation/index.md b/files/ja/web/css/@media/orientation/index.md index 6cd47abb9cb798..50861d3d1f0e4a 100644 --- a/files/ja/web/css/@media/orientation/index.md +++ b/files/ja/web/css/@media/orientation/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/@media/orientation **`orientation`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、{{glossary("viewport", "ビューポート")}} (または[ページ付きメディア](/ja/docs/Web/CSS/Paged_media)ではページボックス) の向きを調べるために使用することができます。 -> **メモ:** この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。 +> [!NOTE] +> この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。 ## 構文 diff --git a/files/ja/web/css/@media/prefers-reduced-data/index.md b/files/ja/web/css/@media/prefers-reduced-data/index.md index 45e675a1f8a9ea..c5f92855d2ca72 100644 --- a/files/ja/web/css/@media/prefers-reduced-data/index.md +++ b/files/ja/web/css/@media/prefers-reduced-data/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/@media/prefers-reduced-data {{CSSRef}}{{SeeCompatTable}} -> **メモ:** この特性は、どのユーザーエージェントも対応しておらず、その仕様が変更される可能性があります。 +> [!NOTE] +> この特性は、どのユーザーエージェントも対応しておらず、その仕様が変更される可能性があります。 **`prefers-reduced-data`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#メディア特性)で、ユーザーがウェブコンテンツのインターネット通信を削減するようリクエストしていることを検出するために使用します。 @@ -22,7 +23,8 @@ slug: Web/CSS/@media/prefers-reduced-data ## 例 -> **メモ:** 現在、この特性を実装しているブラウザーはありませんので、以下の例は動作しません。 +> [!NOTE] +> 現在、この特性を実装しているブラウザーはありませんので、以下の例は動作しません。 この例では、 `montserrat-regular.woff2` フォントファイルは先読みもダウンロードもされません。もしユーザーがデータを削減従っているのであれば、この場合「[システムフォントスタック](https://css-tricks.com/snippets/css/system-font-stack/)」が予備フォントとして機能することになります。 diff --git a/files/ja/web/css/@media/prefers-reduced-motion/index.md b/files/ja/web/css/@media/prefers-reduced-motion/index.md index 0287962ca95aff..f7d1f912ddae16 100644 --- a/files/ja/web/css/@media/prefers-reduced-motion/index.md +++ b/files/ja/web/css/@media/prefers-reduced-motion/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/@media/prefers-reduced-motion **`prefers-reduced-motion`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。 -> **警告:** このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。 +> [!WARNING] +> このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。 ## 構文 diff --git a/files/ja/web/css/@namespace/index.md b/files/ja/web/css/@namespace/index.md index 5ed087a9853ad4..8b0792a9db401f 100644 --- a/files/ja/web/css/@namespace/index.md +++ b/files/ja/web/css/@namespace/index.md @@ -34,7 +34,8 @@ slug: Web/CSS/@namespace [HTML5](/ja/docs/Glossary/HTML5) では、既知の[外来要素](https://html.spec.whatwg.org/#foreign-elements)へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に `xmlns` 属性が存在しなくても XHTML 名前空間 (`http://www.w3.org/1999/xhtml`) に含まれているかのように動作します。また [\](/ja/docs/Web/SVG/Element/svg) および [\](/ja/docs/Web/MathML/Element/math) 要素は、適切な名前空間（`http://www.w3.org/2000/svg` および `http://www.w3.org/1998/Math/MathML`）が割り当てられます。 -> **メモ:** XML では、属性に直接接頭辞を定義しない限り（_例_: `xlink:href`）、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。 +> [!NOTE] +> XML では、属性に直接接頭辞を定義しない限り（_例_: `xlink:href`）、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。 ## 形式文法 diff --git a/files/ja/web/css/@page/index.md b/files/ja/web/css/@page/index.md index 3668587dfa49c5..286ac09ede4a2c 100644 --- a/files/ja/web/css/@page/index.md +++ b/files/ja/web/css/@page/index.md @@ -30,7 +30,8 @@ slug: Web/CSS/@page `@page` アットルールには、 CSS オブジェクトモデルインターフェイスの {{domxref("CSSPageRule")}} からアクセスできます。 -> **メモ:** W3C は、ビューポートに関する {{cssxref("<length>")}} の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。 +> [!NOTE] +> W3C は、ビューポートに関する {{cssxref("<length>")}} の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。 ## 形式文法 diff --git a/files/ja/web/css/@scope/index.md b/files/ja/web/css/@scope/index.md index 11d04952f53569..b72fbdac03fa2a 100644 --- a/files/ja/web/css/@scope/index.md +++ b/files/ja/web/css/@scope/index.md @@ -78,7 +78,8 @@ body スコープルートセレクターである `.article-body` は、ルールセットが適用される DOM ツリーのスコープの上限を定義し、スコープリミットセレクターである `figure` は下限を定義します。その結果、クラスが `article-body` である `
` の中にある {{htmlelement("img")}} 要素のみが選択され、{{htmlelement("figure")}} 要素の中は選択されません。 -> **メモ:** このような上限と下限のあるスコープは、一般に**ドーナツスコープ**と呼ばれています。 +> [!NOTE] +> このような上限と下限のあるスコープは、一般に**ドーナツスコープ**と呼ばれています。 `article-body` クラスを持つ `
` 内の画像をすべて選択したい場合は、スコープリミットセレクターを省略できます。 @@ -108,7 +109,8 @@ body
``` -> **メモ:** 重要なことは、 `@scope` はセレクターのアプリケーションを固有の DOM サブツリーに分離することはできますが、適用されるスタイルをサブツリー内に完全に分離することはできないということです。（例えば {{cssxref("color")}} や {{cssxref("font-family")}} のように）子から継承されるプロパティは、設定するスコープのを超えて継承されます。 +> [!NOTE] +> 重要なことは、 `@scope` はセレクターのアプリケーションを固有の DOM サブツリーに分離することはできますが、適用されるスタイルをサブツリー内に完全に分離することはできないということです。（例えば {{cssxref("color")}} や {{cssxref("font-family")}} のように）子から継承されるプロパティは、設定するスコープのを超えて継承されます。 ### `:scope` 擬似クラス @@ -275,7 +277,8 @@ body これで一番内側の段落は正しく黒く色づけされました。これは、 `.light-theme` のスコープルートからは DOM ツリーの階層が1階層しか離れておらず、 `.dark-theme` のスコープルートからは 2 階層しか離れていないためです。したがって、 light スタイルが勝ちます。 -> **メモ:** スコープの近さはソースの順序を上書きしますが、[重要度](/ja/docs/Web/CSS/important)、[レイヤー](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)、[詳細度](/ja/docs/Web/CSS/Specificity)のような他にも優先度の高い仕様によって上書きされます。 +> [!NOTE] +> スコープの近さはソースの順序を上書きしますが、[重要度](/ja/docs/Web/CSS/important)、[レイヤー](/ja/docs/Learn/CSS/Building_blocks/Cascade_layers)、[詳細度](/ja/docs/Web/CSS/Specificity)のような他にも優先度の高い仕様によって上書きされます。 ## 形式文法 diff --git a/files/ja/web/css/@starting-style/index.md b/files/ja/web/css/@starting-style/index.md index de5e1aefe249be..ad23216cfedada 100644 --- a/files/ja/web/css/@starting-style/index.md +++ b/files/ja/web/css/@starting-style/index.md @@ -291,7 +291,8 @@ html { - `display` をトランジション後の要素のリストに追加することで、アニメーションする要素が出現・消滅の両方のアニメーション中に確実に表示される（`display: block` などの `display` の可視値に設定する）ようにします。これがなければ、消滅アニメーションは表示されません。その結果、ポップオーバーはただ消えてしまいます。アニメーションを有効にするために、 [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) 値も一括指定で設定されていることに注意してください。 - [`overlay`](/ja/docs/Web/CSS/overlay) をトランジション後の要素のリストに追加して、要素を最上位レイヤーから除去するのをアニメーションが終わるまで確実に延期するようにします。これは、このような単純なアニメーションでは大差ありませんが、より複雑なケースでは、これを行わないと、要素がオーバーレイからすばやく除去され、アニメーションが滑らかでなくなったり、効果的でなくなったりすることがあります。この場合も、アニメーションを行うには `transition-behavior: allow-discrete` が必要です。 -> **メモ:** また、開いたときにポップオーバーの背後に現れる [`::backdrop`](/ja/docs/Web/CSS/::backdrop) のトランジションも記載し、暗転するアニメーションも提供しています。 `[popover]:popover-open::backdrop` はポップオーバーが開くための背景を選択するために使用します。 +> [!NOTE] +> また、開いたときにポップオーバーの背後に現れる [`::backdrop`](/ja/docs/Web/CSS/::backdrop) のトランジションも記載し、暗転するアニメーションも提供しています。 `[popover]:popover-open::backdrop` はポップオーバーが開くための背景を選択するために使用します。 #### 結果 @@ -299,7 +300,8 @@ html { {{ EmbedLiveSample("Animating a popover", "100%", "200") }} -> **メモ:** ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、表示トランジションが発生するたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。 +> [!NOTE] +> ポップオーバーは表示されるたびに `display: none` から `display: block` に変化するので、表示トランジションが発生するたびに `@starting-style` スタイルから `[popover]:popover-open` スタイルに遷移します。ポップオーバーが閉じられたとき、その `[popover]:popover-open` 状態から既定の `[popover]` 状態に遷移します。 > **メモ:** {{htmlelement("dialog")}} 要素とその背景の表示・非表示を遷移させる例は、 `` リファレンスページの[ダイアログ要素の遷移](/ja/docs/Web/HTML/Element/dialog#transitioning_dialog_elements)で探すことができます。 diff --git a/files/ja/web/css/_colon_-moz-broken/index.md b/files/ja/web/css/_colon_-moz-broken/index.md index 04a707769d5205..13d98d17826d43 100644 --- a/files/ja/web/css/_colon_-moz-broken/index.md +++ b/files/ja/web/css/_colon_-moz-broken/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-broken **`:-moz-broken`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions) であり、壊れた画像リンクを表している要素に一致します。 -> **メモ:** このセレクターは、主にテーマ開発者が使用することを意図しているものです。 +> [!NOTE] +> このセレクターは、主にテーマ開発者が使用することを意図しているものです。 ## 構文 diff --git a/files/ja/web/css/_colon_-moz-first-node/index.md b/files/ja/web/css/_colon_-moz-first-node/index.md index 378c9cf608043e..6c984cc050e99d 100644 --- a/files/ja/web/css/_colon_-moz-first-node/index.md +++ b/files/ja/web/css/_colon_-moz-first-node/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-first-node **`:-moz-first-node`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、他の要素の最初の子要素であるあらゆる要素を表します。 {{Cssxref(":first-child")}} とは異なり、最初の子要素の前に（ホワイトスペース以外の）テキストがあると一致しません。 -> **メモ:** 要素の先頭にあるホワイトスペースは `:-moz-first-node` の決定において無視されます。 +> [!NOTE] +> 要素の先頭にあるホワイトスペースは `:-moz-first-node` の決定において無視されます。 ## 構文 diff --git a/files/ja/web/css/_colon_-moz-last-node/index.md b/files/ja/web/css/_colon_-moz-last-node/index.md index 7ed22639c3ba9c..f14f43bff046f8 100644 --- a/files/ja/web/css/_colon_-moz-last-node/index.md +++ b/files/ja/web/css/_colon_-moz-last-node/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-last-node **`:-moz-last-node`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、他の要素の最後の子要素であるあらゆる要素を表します。 {{Cssxref(":last-child")}} とは異なり、最後の子要素の後に（ホワイトスペース以外の）テキストがあると一致しません。 -> **メモ:** 要素の末尾にあるホワイトスペースは `:-moz-last-node` の決定において無視されます。 +> [!NOTE] +> 要素の末尾にあるホワイトスペースは `:-moz-last-node` の決定において無視されます。 ## 構文 diff --git a/files/ja/web/css/_colon_-moz-loading/index.md b/files/ja/web/css/_colon_-moz-loading/index.md index 3daa5302709f0e..ea38811efbd477 100644 --- a/files/ja/web/css/_colon_-moz-loading/index.md +++ b/files/ja/web/css/_colon_-moz-loading/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/:-moz-loading **`:-moz-loading`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、読み込みが開始されていないために表示できない要素、例えばまだ到着が開始されていない画像などに一致します。なお、読み込み*中*の画像は、この擬似クラスには一致*しません*。 -> **メモ:** このセレクターは主にテーマ開発者が使用するためのものです。 +> [!NOTE] +> このセレクターは主にテーマ開発者が使用するためのものです。 ## 構文 diff --git a/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md b/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md index 68127a6e14d339..30c6eaa7787dca 100644 --- a/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md +++ b/files/ja/web/css/_colon_-moz-locale-dir_ltr/index.md @@ -7,9 +7,11 @@ slug: Web/CSS/:-moz-locale-dir_ltr **`:-moz-locale-dir(ltr)`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、ユーザーインターフェイスが左から右へ向けて表示される要素に一致します。これは設定の `intl.uidirection.locale` （_`locale`_ は現在のロケール）が "ltr" に設定されていることで特定されます。 -> **メモ:** 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。 +> [!NOTE] +> 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。 -> **警告:** このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。 +> [!WARNING] +> このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。 ## 構文 diff --git a/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md b/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md index 4a272a60fe6a2e..fda39b941fa54e 100644 --- a/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md +++ b/files/ja/web/css/_colon_-moz-locale-dir_rtl/index.md @@ -7,9 +7,11 @@ slug: Web/CSS/:-moz-locale-dir_rtl **`:-moz-locale-dir(rtl)`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 [Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions)であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の `intl.uidirection.locale` （`locale` は現在のロケール）が "rtl" に設定されていることで特定されます。 -> **メモ:** 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。 +> [!NOTE] +> 擬似クラスは、主に拡張機能およびテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。 -> **警告:** このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致しません。 +> [!WARNING] +> このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致しません。 ## 構文 diff --git a/files/ja/web/css/_colon_active/index.md b/files/ja/web/css/_colon_active/index.md index c4a87997facffc..4244ceb9808fd8 100644 --- a/files/ja/web/css/_colon_active/index.md +++ b/files/ja/web/css/_colon_active/index.md @@ -15,7 +15,8 @@ l10n: `:active` 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス （{{cssxref(":link")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるように、他のすべてのリンク関連ルールの後に `:active` ルールを置いてください。 -> **メモ:** 複数ボタンのマウスを使うシステムでは、 CSS 3 は `:active` 擬似クラスは主ボタン、つまり右手用のマウスではふつう最も左のボタンにのみ適用しなければならないと定義しています。 +> [!NOTE] +> 複数ボタンのマウスを使うシステムでは、 CSS 3 は `:active` 擬似クラスは主ボタン、つまり右手用のマウスではふつう最も左のボタンにのみ適用しなければならないと定義しています。 ## 構文 diff --git a/files/ja/web/css/_colon_autofill/index.md b/files/ja/web/css/_colon_autofill/index.md index 552b7e2e0684ad..5dc91519e34249 100644 --- a/files/ja/web/css/_colon_autofill/index.md +++ b/files/ja/web/css/_colon_autofill/index.md @@ -9,7 +9,8 @@ slug: Web/CSS/:autofill {{EmbedInteractiveExample("pages/tabbed/pseudo-class-autofill.html", "tabbed-shorter")}} -> **メモ:** 多くのブラウザーのユーザーエージェントスタイルシートでは、 `:-webkit-autofill` スタイル定義に `!important` を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。 +> [!NOTE] +> 多くのブラウザーのユーザーエージェントスタイルシートでは、 `:-webkit-autofill` スタイル定義に `!important` を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。例えば、 Chrome では内部スタイルシートで次のようになっています。 > > ```css > background-color: rgb(232, 240, 254) !important; diff --git a/files/ja/web/css/_colon_blank/index.md b/files/ja/web/css/_colon_blank/index.md index 40bf7c485f4ce1..00ffbb11e4acac 100644 --- a/files/ja/web/css/_colon_blank/index.md +++ b/files/ja/web/css/_colon_blank/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/:blank {{CSSRef}}{{SeeCompatTable}} -> **メモ:** セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。 +> [!NOTE] +> セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。 > > [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967) を参照してください。 diff --git a/files/ja/web/css/_colon_checked/index.md b/files/ja/web/css/_colon_checked/index.md index db3cd049d7216c..dd4acf1cf7029d 100644 --- a/files/ja/web/css/_colon_checked/index.md +++ b/files/ja/web/css/_colon_checked/index.md @@ -19,7 +19,8 @@ slug: Web/CSS/:checked ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。 -> **メモ:** ブラウザーは `

` の中にあるカスタム要素のインスタンスのみを選択することができます。例えば、 `` に `.dark-theme` クラスが適用されたときに異なる文字色を適用するような場合です。 -> **メモ:** これは、シャドウ DOM の外で使用しても効果はありません。 +> [!NOTE] +> これは、シャドウ DOM の外で使用しても効果はありません。 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-host-context.html", "tabbed-shorter")}} diff --git a/files/ja/web/css/_colon_host/index.md b/files/ja/web/css/_colon_host/index.md index 47f43f13ed2783..e13ad0d7859bcf 100644 --- a/files/ja/web/css/_colon_host/index.md +++ b/files/ja/web/css/_colon_host/index.md @@ -9,7 +9,8 @@ l10n: **`:host`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、その CSS を含む[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。 -> **メモ:** これはシャドウ DOM の外で使われたときには効果がありません。 +> [!NOTE] +> これはシャドウ DOM の外で使われたときには効果がありません。 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-host.html", "tabbed-shorter")}} diff --git a/files/ja/web/css/_colon_host_function/index.md b/files/ja/web/css/_colon_host_function/index.md index d903a794079402..a8f84cd7da0f2f 100644 --- a/files/ja/web/css/_colon_host_function/index.md +++ b/files/ja/web/css/_colon_host_function/index.md @@ -11,7 +11,8 @@ l10n: この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは {{CSSxRef(":host-context", ":host-context()")}} の仕事です。 -> **メモ:** 他にも、 {{CSSxRef(":is", ":is()")}} や {{CSSxRef(":not", ":not()")}} のような関数型擬似クラスは、引数として複合セレクターのリストを受け入れますが、 `:host()` は単一の複合セレクターを受け入れます。さらに、 `:is()` と `:not()` が引数の詳細度しか考慮しないのに対して、 `:host()` の詳細度は擬似クラスの詳細度**および**引数の詳細度の両方です。 +> [!NOTE] +> 他にも、 {{CSSxRef(":is", ":is()")}} や {{CSSxRef(":not", ":not()")}} のような関数型擬似クラスは、引数として複合セレクターのリストを受け入れますが、 `:host()` は単一の複合セレクターを受け入れます。さらに、 `:is()` と `:not()` が引数の詳細度しか考慮しないのに対して、 `:host()` の詳細度は擬似クラスの詳細度**および**引数の詳細度の両方です。 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-host_function.html", "tabbed-shorter")}} diff --git a/files/ja/web/css/_colon_in-range/index.md b/files/ja/web/css/_colon_in-range/index.md index a3de7711e7721b..9fd6eb88d3da0e 100644 --- a/files/ja/web/css/_colon_in-range/index.md +++ b/files/ja/web/css/_colon_in-range/index.md @@ -19,7 +19,8 @@ input:in-range { この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。 -> **メモ:** この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。 +> [!NOTE] +> この擬似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。 ## 構文 @@ -85,7 +86,8 @@ input:out-of-range + label::after { {{EmbedLiveSample('Examples', 600, 140)}} -> **メモ:** 空の `` は範囲外としてカウントされず、 `:out-of-range` 擬似クラスセレクターで選択されることはありません。空の入力を選択するための [`:blank`](/ja/docs/Web/CSS/:blank) 擬似クラスがありますが、この記事を書いている時点では、実験的で対応が十分ではありません。また、 `required` 属性と [`:invalid`](/ja/docs/Web/CSS/:invalid) 擬似クラスを使用すると、入力を必須にするためのより一般的なロジックとスタイルを提供できます (`:invalid` は空白*および*範囲外の入力のスタイルを指定します)。 +> [!NOTE] +> 空の `` は範囲外としてカウントされず、 `:out-of-range` 擬似クラスセレクターで選択されることはありません。空の入力を選択するための [`:blank`](/ja/docs/Web/CSS/:blank) 擬似クラスがありますが、この記事を書いている時点では、実験的で対応が十分ではありません。また、 `required` 属性と [`:invalid`](/ja/docs/Web/CSS/:invalid) 擬似クラスを使用すると、入力を必須にするためのより一般的なロジックとスタイルを提供できます (`:invalid` は空白*および*範囲外の入力のスタイルを指定します)。 ## 仕様書 diff --git a/files/ja/web/css/_colon_is/index.md b/files/ja/web/css/_colon_is/index.md index 97f21a68999990..3b6fa67857e7bb 100644 --- a/files/ja/web/css/_colon_is/index.md +++ b/files/ja/web/css/_colon_is/index.md @@ -9,7 +9,8 @@ l10n: **`:is()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。 -> **メモ:** 元々は `:matches()` （と `:any()`）という名前でしたが、[CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258) で `:is()` に改名されました。 +> [!NOTE] +> 元々は `:matches()` （と `:any()`）という名前でしたが、[CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258) で `:is()` に改名されました。 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}} diff --git a/files/ja/web/css/_colon_lang/index.md b/files/ja/web/css/_colon_lang/index.md index 96e05ce3493fb2..d160b28d282a71 100644 --- a/files/ja/web/css/_colon_lang/index.md +++ b/files/ja/web/css/_colon_lang/index.md @@ -11,7 +11,8 @@ l10n: {{EmbedInteractiveExample("pages/tabbed/pseudo-class-function-lang.html", "tabbed-shorter")}} -> **メモ:** HTML では、言語は [`lang`](/ja/docs/Web/HTML/Global_attributes#lang) 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。 +> [!NOTE] +> HTML では、言語は [`lang`](/ja/docs/Web/HTML/Global_attributes#lang) 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。 ## 構文 diff --git a/files/ja/web/css/_colon_last-child/index.md b/files/ja/web/css/_colon_last-child/index.md index a1ef38b2971e52..2a49393e3f0627 100644 --- a/files/ja/web/css/_colon_last-child/index.md +++ b/files/ja/web/css/_colon_last-child/index.md @@ -17,7 +17,8 @@ p:last-child { {{EmbedInteractiveExample("pages/tabbed/pseudo-class-last-child.html", "tabbed-shorter")}} -> **メモ:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。 +> [!NOTE] +> 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。 ## 構文 diff --git a/files/ja/web/css/_colon_left/index.md b/files/ja/web/css/_colon_left/index.md index f2e401c614b435..1cc5b51c94984e 100644 --- a/files/ja/web/css/_colon_left/index.md +++ b/files/ja/web/css/_colon_left/index.md @@ -16,7 +16,8 @@ slug: Web/CSS/:left そのページが左側か右側かは、文書の主な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば `:left` ページになります。 -> **メモ:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。 +> [!NOTE] +> この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。 ## 構文 diff --git a/files/ja/web/css/_colon_link/index.md b/files/ja/web/css/_colon_link/index.md index ef07400806a499..2ff43a91d67e51 100644 --- a/files/ja/web/css/_colon_link/index.md +++ b/files/ja/web/css/_colon_link/index.md @@ -13,7 +13,8 @@ l10n: `:link` および [`:visited`](/ja/docs/Web/CSS/:visited) 擬似クラスによって定義されたスタイルは、以降のユーザー操作の擬似クラス（{{cssxref(":hover")}} または {{cssxref(":active")}}）によって上書きされる可能性があります。適切にリンクにスタイルを適用するには、 `:link` ルールを他のすべてのリンク関連ルールの前に置き、 _LVHA 順_: `:link` — `:visited` — `:hover` — `:active` で定義されるようにしてください。 `:visited` 擬似クラスと `:link` 擬似クラスは互いに排他的です。 -> **メモ:** 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。 +> [!NOTE] +> 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。 ## 構文 diff --git a/files/ja/web/css/_colon_nth-last-child/index.md b/files/ja/web/css/_colon_nth-last-child/index.md index de847f0c5c6124..d38fc65fb39726 100644 --- a/files/ja/web/css/_colon_nth-last-child/index.md +++ b/files/ja/web/css/_colon_nth-last-child/index.md @@ -17,7 +17,8 @@ slug: Web/CSS/:nth-last-child {{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-last-child.html", "tabbed-shorter")}} -> **メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。 +> [!NOTE] +> この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。 ## 構文 diff --git a/files/ja/web/css/_colon_nth-last-of-type/index.md b/files/ja/web/css/_colon_nth-last-of-type/index.md index e5814f1dcfb223..7723d4a3a4ea11 100644 --- a/files/ja/web/css/_colon_nth-last-of-type/index.md +++ b/files/ja/web/css/_colon_nth-last-of-type/index.md @@ -17,7 +17,8 @@ p:nth-last-of-type(4n) { {{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-last-of-type.html", "tabbed-shorter")}} -> **メモ:** この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。 +> [!NOTE] +> この擬似クラスは、最初から後に向けてではなく*最後*から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。 ## 構文 diff --git a/files/ja/web/css/_colon_nth-of-type/index.md b/files/ja/web/css/_colon_nth-of-type/index.md index 685d2f9a407ff1..523406a49ed2b6 100644 --- a/files/ja/web/css/_colon_nth-of-type/index.md +++ b/files/ja/web/css/_colon_nth-of-type/index.md @@ -73,7 +73,8 @@ p.fancy:nth-of-type(2n + 1) { {{EmbedLiveSample('Basic_example', 250, 250)}} -> **メモ:** このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。 +> [!NOTE] +> このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。 ## 仕様書 diff --git a/files/ja/web/css/_colon_only-child/index.md b/files/ja/web/css/_colon_only-child/index.md index 99f8d92c782e0f..e455c6d5feeb5f 100644 --- a/files/ja/web/css/_colon_only-child/index.md +++ b/files/ja/web/css/_colon_only-child/index.md @@ -16,7 +16,8 @@ p:only-child { {{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-child.html", "tabbed-shorter")}} -> **メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。 +> [!NOTE] +> 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。 ## 構文 diff --git a/files/ja/web/css/_colon_only-of-type/index.md b/files/ja/web/css/_colon_only-of-type/index.md index ab22025a780708..3e193a1710cc54 100644 --- a/files/ja/web/css/_colon_only-of-type/index.md +++ b/files/ja/web/css/_colon_only-of-type/index.md @@ -16,7 +16,8 @@ p:only-of-type { {{EmbedInteractiveExample("pages/tabbed/pseudo-class-only-of-type.html", "tabbed-shorter")}} -> **メモ:** 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。 +> [!NOTE] +> 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。 ## 構文 diff --git a/files/ja/web/css/_colon_out-of-range/index.md b/files/ja/web/css/_colon_out-of-range/index.md index 9782e352eae914..8ca1df9490d1e1 100644 --- a/files/ja/web/css/_colon_out-of-range/index.md +++ b/files/ja/web/css/_colon_out-of-range/index.md @@ -19,7 +19,8 @@ input:out-of-range { この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。 -> **メモ:** この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。 +> [!NOTE] +> この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。 ## 構文 diff --git a/files/ja/web/css/_colon_right/index.md b/files/ja/web/css/_colon_right/index.md index 54d5090e7254e1..0a28d67ee33fdf 100644 --- a/files/ja/web/css/_colon_right/index.md +++ b/files/ja/web/css/_colon_right/index.md @@ -16,7 +16,8 @@ slug: Web/CSS/:right そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。 -> **メモ:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。 +> [!NOTE] +> この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。 ## 構文 diff --git a/files/ja/web/css/_colon_user-invalid/index.md b/files/ja/web/css/_colon_user-invalid/index.md index 45921f0f8dc90f..da7c62cc492ac6 100644 --- a/files/ja/web/css/_colon_user-invalid/index.md +++ b/files/ja/web/css/_colon_user-invalid/index.md @@ -9,7 +9,8 @@ slug: Web/CSS/:user-invalid `:user-invalid` 擬似クラスは、ユーザーがフォームの送信を試みた後、そのフォーム要素を再び操作するまで、 {{CSSxRef(":invalid")}}, {{CSSxRef(":out-of-range")}}, {{CSSxRef(":required")}} で空欄の要素に一致します。 -> **メモ:** この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。 +> [!NOTE] +> この擬似クラスは標準外の `:-moz-ui-invalid` 擬似クラスと同じように動作します。 ## 構文 diff --git a/files/ja/web/css/_colon_user-valid/index.md b/files/ja/web/css/_colon_user-valid/index.md index 310e0fba1ba0c4..961328c50dc1ff 100644 --- a/files/ja/web/css/_colon_user-valid/index.md +++ b/files/ja/web/css/_colon_user-valid/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/:user-valid **`:user-valid`** は CSS の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、[制約検証](/ja/docs/Learn/Forms#constraint_validation)に基づき値の検証が正しく行われた有効なフォーム要素を表します。ただし、 {{cssxref(":valid")}} とは異なり、ユーザーが操作した後にのみ一致します。 -> **メモ:** この擬似クラスは標準外の `:-moz-ui-valid` 擬似クラスと同じように動作します。 +> [!NOTE] +> この擬似クラスは標準外の `:-moz-ui-valid` 擬似クラスと同じように動作します。 この擬似クラスは、以下の基準に則って適用されます。 diff --git a/files/ja/web/css/_colon_valid/index.md b/files/ja/web/css/_colon_valid/index.md index 6de61c93ab791d..d0ccd777a19584 100644 --- a/files/ja/web/css/_colon_valid/index.md +++ b/files/ja/web/css/_colon_valid/index.md @@ -68,7 +68,8 @@ input:valid + span::before { 生成されたコンテンツを相対的に配置できるように `` を `position: relative` に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。 -> **メモ:** これらのラベルを追加するために `::before` を使ったのは、すでに `::after` を "required" ラベルに使っていたからです。 +> [!NOTE] +> これらのラベルを追加するために `::before` を使ったのは、すでに `::after` を "required" ラベルに使っていたからです。 以下で試してみることができます。 diff --git a/files/ja/web/css/_colon_visited/index.md b/files/ja/web/css/_colon_visited/index.md index c432b354d8f5b6..062f04c63ef75f 100644 --- a/files/ja/web/css/_colon_visited/index.md +++ b/files/ja/web/css/_colon_visited/index.md @@ -23,7 +23,8 @@ l10n: - これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 {{domxref("window.getComputedStyle")}} メソッドは嘘をつき、 `:visited` 状態ではない色の値を返します。 - [``](/ja/docs/Web/HTML/Element/link) 要素は `:visited` に一致することはありません。 -> **メモ:** これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector)を参照してください。 +> [!NOTE] +> これらの制限とその理由については、[プライバシーと :visited セレクター](/ja/docs/Web/CSS/Privacy_and_the_:visited_selector)を参照してください。 ## 構文 diff --git a/files/ja/web/css/_colon_where/index.md b/files/ja/web/css/_colon_where/index.md index 426c2ca37934dd..280c7d266011ed 100644 --- a/files/ja/web/css/_colon_where/index.md +++ b/files/ja/web/css/_colon_where/index.md @@ -129,7 +129,8 @@ footer a { しかし、 `:where()` 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされます。 -> **メモ:** この例は GitHub からも見ることができます。 [is-where](https://mdn.github.io/css-examples/is-where/) を参照してください。 +> [!NOTE] +> この例は GitHub からも見ることができます。 [is-where](https://mdn.github.io/css-examples/is-where/) を参照してください。 {{EmbedLiveSample('Examples', '100%', 600)}} diff --git a/files/ja/web/css/_doublecolon_after/index.md b/files/ja/web/css/_doublecolon_after/index.md index 2f521bd8f63e7c..95149d05b37a42 100644 --- a/files/ja/web/css/_doublecolon_after/index.md +++ b/files/ja/web/css/_doublecolon_after/index.md @@ -22,7 +22,8 @@ a::after { {{CSSSyntax}} -> **メモ:** CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。 +> [!NOTE] +> CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::after` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:after` も使用できます。 ## 例 diff --git a/files/ja/web/css/_doublecolon_before/index.md b/files/ja/web/css/_doublecolon_before/index.md index 07a528cf75802f..8c47344400a0fa 100644 --- a/files/ja/web/css/_doublecolon_before/index.md +++ b/files/ja/web/css/_doublecolon_before/index.md @@ -22,7 +22,8 @@ a::before { {{CSSSyntax}} -> **メモ:** CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::before` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:before` も使用できます。 +> [!NOTE] +> CSS3 では[疑似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::before` の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された `:before` も使用できます。 ## 例 diff --git a/files/ja/web/css/_doublecolon_first-letter/index.md b/files/ja/web/css/_doublecolon_first-letter/index.md index 8300708162c54f..f277b7f4e17bf7 100644 --- a/files/ja/web/css/_doublecolon_first-letter/index.md +++ b/files/ja/web/css/_doublecolon_first-letter/index.md @@ -17,7 +17,8 @@ l10n: - 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の `IJ` などです。この場合、連字の両方の文字が `::first-letter` 擬似要素で選択されます。 - {{ cssxref("::before") }} 擬似要素と {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 `::first-letter` は生成されたこのコンテンツの最初の文字に一致します。 -> **メモ:** CSS では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。 +> [!NOTE] +> CSS では[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために、 `::first-letter` の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された `:first-letter` も受け付けます。 > > オランダ語の `IJ` のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。 diff --git a/files/ja/web/css/_doublecolon_first-line/index.md b/files/ja/web/css/_doublecolon_first-line/index.md index 382aea81dc11ed..7e05f1a7797563 100644 --- a/files/ja/web/css/_doublecolon_first-line/index.md +++ b/files/ja/web/css/_doublecolon_first-line/index.md @@ -16,7 +16,8 @@ p::first-line { {{EmbedInteractiveExample("pages/tabbed/pseudo-element-first-line.html", "tabbed-shorter")}} -> **メモ:** CSS3 では `::first-line` という (二重コロン付き) 表記が、[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された `:first-line` も使用できます。 +> [!NOTE] +> CSS3 では `::first-line` という (二重コロン付き) 表記が、[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)と[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された `:first-line` も使用できます。 ## 利用可能なプロパティ diff --git a/files/ja/web/css/_doublecolon_marker/index.md b/files/ja/web/css/_doublecolon_marker/index.md index e0e9576f7bb8c4..1f6986322dd28b 100644 --- a/files/ja/web/css/_doublecolon_marker/index.md +++ b/files/ja/web/css/_doublecolon_marker/index.md @@ -22,7 +22,8 @@ l10n: - {{CSSxRef("content")}} プロパティ - すべての[アニメーション](/ja/docs/Web/CSS/CSS_animations#プロパティ)および[トランジション](/ja/docs/Web/CSS/CSS_transitions#プロパティ)プロパティ -> **メモ:** 仕様書では、将来的にさらなる CSS プロパティに対応する可能性があるとしています。 +> [!NOTE] +> 仕様書では、将来的にさらなる CSS プロパティに対応する可能性があるとしています。 ## 構文 diff --git a/files/ja/web/css/_doublecolon_placeholder/index.md b/files/ja/web/css/_doublecolon_placeholder/index.md index 0f4c5b56cbefae..3938c8da188596 100644 --- a/files/ja/web/css/_doublecolon_placeholder/index.md +++ b/files/ja/web/css/_doublecolon_placeholder/index.md @@ -13,7 +13,8 @@ l10n: セレクターに `::placeholder` を使ったルールを使用できるのは、 {{cssxref("::first-line")}} 擬似要素が適用できる CSS プロパティだけです。 -> **メモ:** 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。 +> [!NOTE] +> 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。 ## 構文 diff --git a/files/ja/web/css/_doublecolon_view-transition-group/index.md b/files/ja/web/css/_doublecolon_view-transition-group/index.md index 6bcee7bdfceacf..3145a0484b3e03 100644 --- a/files/ja/web/css/_doublecolon_view-transition-group/index.md +++ b/files/ja/web/css/_doublecolon_view-transition-group/index.md @@ -28,7 +28,8 @@ html::view-transition-group(*) { 「古い」ビュー状態と「新しい」ビュー状態の両方がある場合、ビュートランジションスタイルシートのスタイルは、この擬似要素の {{cssxref("width")}} と {{cssxref("height")}} を「古い」ビュー状態の境界ボックスのサイズから「新しい」ビュー状態の境界ボックスのサイズにアニメーションさせます。 -> **メモ:** ビュートランジションスタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書の[トランジション擬似要素の設定](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)および[擬似要素スタイルの更新](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)の節を参照してください。 +> [!NOTE] +> ビュートランジションスタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書の[トランジション擬似要素の設定](https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements)および[擬似要素スタイルの更新](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles)の節を参照してください。 さらに、要素の変換は、「古い」ビュー状態の画面空間変換から新しいビュー状態の画面空間変換へアニメーションします。アニメーションしているプロパティの値はトランジションを始める時点に決定されるため、このスタイル設定は動的に生成されます。 diff --git a/files/ja/web/css/animation-composition/index.md b/files/ja/web/css/animation-composition/index.md index 080bb7101d6c42..856c2942e87edc 100644 --- a/files/ja/web/css/animation-composition/index.md +++ b/files/ja/web/css/animation-composition/index.md @@ -30,7 +30,8 @@ animation-composition: revert-layer; animation-composition: unset; ``` -> **メモ:** 複数の値をカンマ区切りで `animation-*` プロパティに指定すると、{{cssxref("animation-name")}}が出現した順にアニメーションに適用されます。アニメーションと合成の数が異なる場合、`animation-composition` プロパティに列挙されている値は、最初の `animation-name` から最後の `animation-name` まで循環し、すべてのアニメーションに `animation-composition` 値が割り当てるまで繰り返されます。より詳しい情報は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定)を参照してください。 +> [!NOTE] +> 複数の値をカンマ区切りで `animation-*` プロパティに指定すると、{{cssxref("animation-name")}}が出現した順にアニメーションに適用されます。アニメーションと合成の数が異なる場合、`animation-composition` プロパティに列挙されている値は、最初の `animation-name` から最後の `animation-name` まで循環し、すべてのアニメーションに `animation-composition` 値が割り当てるまで繰り返されます。より詳しい情報は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定)を参照してください。 ### 値 @@ -70,7 +71,8 @@ animation-composition: unset; - `add` を指定すると、 `0%` のキーフレームの合成効果値は `blur(5px) blur(10px)` になります。 - `accumulate` を指定すると、 `0%` のキーフレームの合成効果値は `blur(15px)` になります。 -> **メモ:** 合成演算は、キーフレーム内で指定することもできます。その場合、指定した合成演算は、まずそのキーフレーム内の各プロパティに対して使用され、次に次のキーフレーム内の各プロパティに対して使用されます。 +> [!NOTE] +> 合成演算は、キーフレーム内で指定することもできます。その場合、指定した合成演算は、まずそのキーフレーム内の各プロパティに対して使用され、次に次のキーフレーム内の各プロパティに対して使用されます。 ## 公式定義 diff --git a/files/ja/web/css/animation-duration/index.md b/files/ja/web/css/animation-duration/index.md index ca5a15f9b8162f..f5a7f590b18d80 100644 --- a/files/ja/web/css/animation-duration/index.md +++ b/files/ja/web/css/animation-duration/index.md @@ -49,7 +49,8 @@ animation-duration: unset; - `animation-fill-mode` が `forwards` または `both` に設定した場合、アニメーションの最後のフレームは `animation-delay` が経過した後に、 `animation-direction` で定義したように表示されます。 - `animation-fill-mode` を `none` に設定すると、アニメーションは目に見える効果はありません。 -> **メモ:** 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は `0s` と等価に解釈するかもしれません。 +> [!NOTE] +> 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は `0s` と等価に解釈するかもしれません。 > **メモ:** `animation-*` プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} に現れる順にアニメーションに適用されます。アニメーションの数と `animation-*` プロパティの値が一致しない場合は、[複数のアニメーションプロパティ値の設定](/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations#複数のアニメーションプロパティ値の設定) を参照してください。 diff --git a/files/ja/web/css/animation-range/index.md b/files/ja/web/css/animation-range/index.md index d9842ccc51e413..4867fb2bc8e449 100644 --- a/files/ja/web/css/animation-range/index.md +++ b/files/ja/web/css/animation-range/index.md @@ -78,12 +78,14 @@ animation-range: entry 10% 90%; `` の値に `` が含まれていない場合、それが `animation-range-start` の値であれば `0%`、`animation-range-end` の値であれば `100%` が既定値になります。 - > **メモ:** 上記の説明からこれらの値が意味していることを視覚化するのはとても難しいです。幸いなことに、 [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) はこれらが意味していることを視覚的に分かりやすく表示してくれます。 + > [!NOTE] + > 上記の説明からこれらの値が意味していることを視覚化するのはとても難しいです。幸いなことに、 [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) はこれらが意味していることを視覚的に分かりやすく表示してくれます。 - ` ` - : 指定したタイムライン範囲の開始から測定された、指定したタイムライン範囲内の指定したパーセント値または距離に等しい組み合わせ値。 -> **メモ:** スクロールポート（詳細は{{glossary("Scroll container", "スクロールコンテナー")}}を参照）とは、名前付きビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされる範囲のことです。既定値では、これはスクロールポートの全範囲ですが、 {{cssxref("view-timeline-inset")}} プロパティを使用して調整することができます。 +> [!NOTE] +> スクロールポート（詳細は{{glossary("Scroll container", "スクロールコンテナー")}}を参照）とは、名前付きビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされる範囲のことです。既定値では、これはスクロールポートの全範囲ですが、 {{cssxref("view-timeline-inset")}} プロパティを使用して調整することができます。 ## 公式定義 diff --git a/files/ja/web/css/animation-timeline/index.md b/files/ja/web/css/animation-timeline/index.md index 9b1121f6ea81d0..1853b4c2613aed 100644 --- a/files/ja/web/css/animation-timeline/index.md +++ b/files/ja/web/css/animation-timeline/index.md @@ -77,7 +77,8 @@ animation-timeline: unset; - : {{cssxref('scroll-timeline-name')}} または {{cssxref('view-timeline-name')}} プロパティ（または {{cssxref('scroll-timeline')}} または {{cssxref('view-timeline')}} 一括指定プロパティ）で前回宣言された名前付きタイムラインを識別する {{cssxref('dashed-ident')}} です。 - > **メモ:** 2 つ以上のタイムラインが同じ名前を持っている場合、カスケード内で最後に宣言されたものが使用されます。また、指定された名前に一致するタイムラインが見つからない場合、アニメーションはタイムラインに関連付けられません。 + > [!NOTE] + > 2 つ以上のタイムラインが同じ名前を持っている場合、カスケード内で最後に宣言されたものが使用されます。また、指定された名前に一致するタイムラインが見つからない場合、アニメーションはタイムラインに関連付けられません。 > **メモ:** [``](/ja/docs/Web/CSS/dashed-ident) 値は `--` で始まる必要があります。これにより、標準 CSS キーワードとの名前の衝突を避けることができます。 @@ -185,7 +186,8 @@ animation-timeline: unset; 下記の CSS では、 `animation-timeline` プロパティで指定されたタイムラインに従って、交互に回転する正方形を定義しています。 この場合、タイムラインは `scroll(block nearest)` によって指定されます。これは、スクロールバーを持つ最も近い祖先要素のブロック方向のスクロールバーを選択することを意味しています。 -> **メモ:** 実は `block` と `nearest` が既定値の引数なので、`scroll()` だけを使用することができました。 +> [!NOTE] +> 実は `block` と `nearest` が既定値の引数なので、`scroll()` だけを使用することができました。 ```css #square { diff --git a/files/ja/web/css/animation-timeline/scroll/index.md b/files/ja/web/css/animation-timeline/scroll/index.md index 041fc301184e27..a03759da7eac17 100644 --- a/files/ja/web/css/animation-timeline/scroll/index.md +++ b/files/ja/web/css/animation-timeline/scroll/index.md @@ -9,7 +9,8 @@ l10n: **`scroll()`** は [CSS 関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{cssxref("animation-timeline")}} と共に使用することができます。 {{cssxref("animation-timeline")}} はスクロール可能な要素 (_scroller_) とスクロールバーの軸を示し、現在の要素をアニメーションさせるための無名スクロール進行タイムラインを提供します。スクロール進行タイムラインは、スクローラーを上下（または左右）にスクロールすることで進行します。スクロール範囲内の位置は進行のパーセント値に変換されます。先頭は 0% で、末尾は 100% です。 -> **メモ:** 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。 +> [!NOTE] +> 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。 > **メモ:** `scroll()` を使用するたびに、[ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) に {{domxref("ScrollTimeline")}} の固有のインスタンスが対応付けられます。 @@ -62,7 +63,8 @@ animation-timeline: scroll(x self); - `x` - : スクロールコンテナーの横軸にあるスクロールバー。 -> **メモ:** スクローラーと軸の値は、任意の順序で指定することができます。 +> [!NOTE] +> スクローラーと軸の値は、任意の順序で指定することができます。 ### 形式文法 @@ -91,7 +93,8 @@ animation-timeline: scroll(x self); 下記の CSS では、`animation-timeline`プロパティで指定されたタイムラインに従って、交互に回転する正方形を定義しています。 この場合、タイムラインは `scroll(block nearest)` によって指定されます。これはスクロールバーを保有する最も近い祖先要素のブロック方向のスクロールバーを選択することを意味しています。 -> **メモ:** 実は `block` と `nearest` は既定値なので、`scroll()` だけを使用することができました。 +> [!NOTE] +> 実は `block` と `nearest` は既定値なので、`scroll()` だけを使用することができました。 ```css #square { diff --git a/files/ja/web/css/animation-timeline/view/index.md b/files/ja/web/css/animation-timeline/view/index.md index 27f51db9bdbeb8..e81cd483599316 100644 --- a/files/ja/web/css/animation-timeline/view/index.md +++ b/files/ja/web/css/animation-timeline/view/index.md @@ -11,7 +11,8 @@ l10n: 関数の引数には、タイムラインの進行が追跡されるスクロールバーの軸と、主体が表示されているとみなされるボックスの位置を調整するインセットを指定します。 -> **メモ:** 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。 +> [!NOTE] +> 示された軸がスクロールバーを持たない場合、アニメーションタイムラインは非アクティブになります（進行がゼロになります）。 > **メモ:** `view()` を使用するたびに、[ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API) に {{domxref("ViewTimeline")}} の固有のインスタンスが対応付けられます。 @@ -68,7 +69,8 @@ animation-timeline: view(x 200px auto); - end - : スクロールポートの末尾からの内方オフセット。 -> **メモ:** 軸とインセットの値は、任意の順序で指定することができます。 +> [!NOTE] +> 軸とインセットの値は、任意の順序で指定することができます。 ### 形式文法 diff --git a/files/ja/web/css/appearance/index.md b/files/ja/web/css/appearance/index.md index 5412b2aa471254..f900909cb8bc5c 100644 --- a/files/ja/web/css/appearance/index.md +++ b/files/ja/web/css/appearance/index.md @@ -13,7 +13,8 @@ l10n: 標準化以前は、このプロパティによって、ボタンやチェックボックスのような要素をウィジェットとして表示できました。しかし、これは誤った機能であると考えられ、現在では標準的なキーワードのみを使用することが推奨されています。 -> **メモ:** ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。 +> [!NOTE] +> ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。 ## 構文 diff --git a/files/ja/web/css/background-image/index.md b/files/ja/web/css/background-image/index.md index a6d1a86a3a7cb5..990c981ab6a5c5 100644 --- a/files/ja/web/css/background-image/index.md +++ b/files/ja/web/css/background-image/index.md @@ -17,7 +17,8 @@ l10n: 指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を `none` 値であるかのように処理します。 -> **メモ:** たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。 +> [!NOTE] +> たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。 ## 構文 diff --git a/files/ja/web/css/background-size/index.md b/files/ja/web/css/background-size/index.md index 6947a7f72edadd..1ed7750cc88a25 100644 --- a/files/ja/web/css/background-size/index.md +++ b/files/ja/web/css/background-size/index.md @@ -84,7 +84,8 @@ background-size: unset; - CSS の {{cssxref("<gradient>")}} には内在的な寸法も内在的な比率もありません。 - {{cssxref("element", "element()")}} 関数によって作成された背景画像では、それを作成する要素の内在的な寸法と比率を使用します。 -> **メモ:** Gecko では、 [`element()`](/ja/docs/Web/CSS/element) 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な内在的な比率を持ちます。これは標準外の動作です。 +> [!NOTE] +> Gecko では、 [`element()`](/ja/docs/Web/CSS/element) 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な内在的な比率を持ちます。これは標準外の動作です。 内在的な寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。 @@ -99,14 +100,16 @@ background-size: unset; - 画像に一方だけ内在的な寸法があり、内在的な比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と内在的な比率を使用して計算されます。 - 画像に一方だけ内在的な寸法があり、内在的な比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。 - > **メモ:** SVG 画像には [`preserveAspectRatio`](/ja/docs/Web/SVG/Attribute/preserveAspectRatio) 属性があり、既定では `contain` と同等です。明示的に `background-size` が設定されると `preserveAspectRatio` が無視されます。 + > [!NOTE] + > SVG 画像には [`preserveAspectRatio`](/ja/docs/Web/SVG/Attribute/preserveAspectRatio) 属性があり、既定では `contain` と同等です。明示的に `background-size` が設定されると `preserveAspectRatio` が無視されます。 - **`background-size` の一方が `auto` でもう一方が `auto` ではない場合:** - 画像に内在的な比率がある場合は、指定された寸法まで変倍されます。指定されていない方の寸法は指定された寸法と内在的な比率を使用して計算されます。 - 画像に内在的な比率がない場合は、指定された寸法まで変倍されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような内在的な寸法がない場合、背景配置領域の適切な寸法になります。 - > **メモ:** 内在的な寸法や比率を持たないベクター画像の背景の変倍は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。 + > [!NOTE] + > 内在的な寸法や比率を持たないベクター画像の背景の変倍は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。 ## 公式定義 diff --git a/files/ja/web/css/border-bottom-left-radius/index.md b/files/ja/web/css/border-bottom-left-radius/index.md index eae96365052990..85a123b2aef534 100644 --- a/files/ja/web/css/border-bottom-left-radius/index.md +++ b/files/ja/web/css/border-bottom-left-radius/index.md @@ -15,7 +15,8 @@ slug: Web/CSS/border-bottom-left-radius 背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -> **メモ:** このプロパティの値が `border-bottom-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 +> [!NOTE] +> このプロパティの値が `border-bottom-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 ## 構文 diff --git a/files/ja/web/css/border-bottom-right-radius/index.md b/files/ja/web/css/border-bottom-right-radius/index.md index fbdb2bde6a4018..72fea9979f275c 100644 --- a/files/ja/web/css/border-bottom-right-radius/index.md +++ b/files/ja/web/css/border-bottom-right-radius/index.md @@ -15,7 +15,8 @@ slug: Web/CSS/border-bottom-right-radius 背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -> **メモ:** このプロパティの値が `border-bottom-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 +> [!NOTE] +> このプロパティの値が `border-bottom-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 ## 構文 diff --git a/files/ja/web/css/border-bottom-style/index.md b/files/ja/web/css/border-bottom-style/index.md index df4abb25fef351..9b617d75ec0e50 100644 --- a/files/ja/web/css/border-bottom-style/index.md +++ b/files/ja/web/css/border-bottom-style/index.md @@ -11,7 +11,8 @@ l10n: {{EmbedInteractiveExample("pages/css/border-bottom-style.html")}} -> **メモ:** 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。 +> [!NOTE] +> 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。 ## 構文 diff --git a/files/ja/web/css/border-bottom-width/index.md b/files/ja/web/css/border-bottom-width/index.md index d45ed3d3513583..8e9d23ad787a88 100644 --- a/files/ja/web/css/border-bottom-width/index.md +++ b/files/ja/web/css/border-bottom-width/index.md @@ -42,7 +42,8 @@ border-bottom-width: unset; - `medium` - `thick` -> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 +> [!NOTE] +> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 ## 公式定義 diff --git a/files/ja/web/css/border-image/index.md b/files/ja/web/css/border-image/index.md index 15879d3ffcc608..91abc5f234d833 100644 --- a/files/ja/web/css/border-image/index.md +++ b/files/ja/web/css/border-image/index.md @@ -11,7 +11,8 @@ l10n: {{EmbedInteractiveExample("pages/css/border-image.html")}} -> **メモ:** 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。仕様では厳密には要求されていませんが、{{cssxref("border-style")}} が `none` または {{cssxref("border-width")}} が `0` の場合、境界画像を描画しないブラウザーもあります。 +> [!NOTE] +> 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。仕様では厳密には要求されていませんが、{{cssxref("border-style")}} が `none` または {{cssxref("border-width")}} が `0` の場合、境界画像を描画しないブラウザーもあります。 ## 構成要素のプロパティ diff --git a/files/ja/web/css/border-left-style/index.md b/files/ja/web/css/border-left-style/index.md index c4f0f9d7e0ad1f..668f6acf622a80 100644 --- a/files/ja/web/css/border-left-style/index.md +++ b/files/ja/web/css/border-left-style/index.md @@ -11,7 +11,8 @@ l10n: {{EmbedInteractiveExample("pages/css/border-left-style.html")}} -> **メモ:** 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。 +> [!NOTE] +> 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。 ## 構文 diff --git a/files/ja/web/css/border-left-width/index.md b/files/ja/web/css/border-left-width/index.md index 8481862f1fdaaa..8fe5e96b7ffb70 100644 --- a/files/ja/web/css/border-left-width/index.md +++ b/files/ja/web/css/border-left-width/index.md @@ -42,7 +42,8 @@ border-left-width: unset; - `medium` - `thick` -> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 +> [!NOTE] +> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 ## 公式定義 diff --git a/files/ja/web/css/border-radius/index.md b/files/ja/web/css/border-radius/index.md index 0b9b59cd511c85..f001b50a3dd239 100644 --- a/files/ja/web/css/border-radius/index.md +++ b/files/ja/web/css/border-radius/index.md @@ -13,7 +13,8 @@ slug: Web/CSS/border-radius `border-radius` プロパティは {{cssxref("border-collapse")}} が `collapse` の table 要素には適用されません。 -> **メモ:** 他の一括指定プロパティと同様、個別のサブプロパティは `border-radius:0 0 inherit inherit` のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。 +> [!NOTE] +> 他の一括指定プロパティと同様、個別のサブプロパティは `border-radius:0 0 inherit inherit` のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。 ## 構成要素のプロパティ diff --git a/files/ja/web/css/border-right-style/index.md b/files/ja/web/css/border-right-style/index.md index f9d1d70d5fee4b..4ed00ee55c7172 100644 --- a/files/ja/web/css/border-right-style/index.md +++ b/files/ja/web/css/border-right-style/index.md @@ -11,7 +11,8 @@ l10n: {{EmbedInteractiveExample("pages/css/border-right-style.html")}} -> **メモ:** 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。 +> [!NOTE] +> 仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。 ## 構文 diff --git a/files/ja/web/css/border-right-width/index.md b/files/ja/web/css/border-right-width/index.md index 4dd1dacff95ad4..f834b250326998 100644 --- a/files/ja/web/css/border-right-width/index.md +++ b/files/ja/web/css/border-right-width/index.md @@ -42,7 +42,8 @@ border-right-width: unset; - `medium` - `thick` -> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 +> [!NOTE] +> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 ## 公式定義 diff --git a/files/ja/web/css/border-top-left-radius/index.md b/files/ja/web/css/border-top-left-radius/index.md index 85fa7d34801aa3..f275f574e65e72 100644 --- a/files/ja/web/css/border-top-left-radius/index.md +++ b/files/ja/web/css/border-top-left-radius/index.md @@ -15,7 +15,8 @@ slug: Web/CSS/border-top-left-radius 背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -> **メモ:** このプロパティの値が `border-top-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 +> [!NOTE] +> このプロパティの値が `border-top-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 ## 構文 diff --git a/files/ja/web/css/border-top-right-radius/index.md b/files/ja/web/css/border-top-right-radius/index.md index bd4feb61f8c9e5..3f384cfc1c8e80 100644 --- a/files/ja/web/css/border-top-right-radius/index.md +++ b/files/ja/web/css/border-top-right-radius/index.md @@ -15,7 +15,8 @@ slug: Web/CSS/border-top-right-radius 画像または単色が背景になっている場合、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -> **メモ:** このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 +> [!NOTE] +> このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 ## 構文 diff --git a/files/ja/web/css/border-top-style/index.md b/files/ja/web/css/border-top-style/index.md index 743201361ce21f..5c5320a564815c 100644 --- a/files/ja/web/css/border-top-style/index.md +++ b/files/ja/web/css/border-top-style/index.md @@ -11,7 +11,8 @@ l10n: {{EmbedInteractiveExample("pages/css/border-top-style.html")}} -> **メモ:** 仕様書では、異なるスタイルの境界線を角でどのように接続するかを定義していません。 +> [!NOTE] +> 仕様書では、異なるスタイルの境界線を角でどのように接続するかを定義していません。 ## 構文 diff --git a/files/ja/web/css/border-top-width/index.md b/files/ja/web/css/border-top-width/index.md index a217162f93231c..988caae951946a 100644 --- a/files/ja/web/css/border-top-width/index.md +++ b/files/ja/web/css/border-top-width/index.md @@ -42,7 +42,8 @@ border-top-width: unset; - `medium` - `thick` -> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 +> [!NOTE] +> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 ## 公式定義 diff --git a/files/ja/web/css/border-width/index.md b/files/ja/web/css/border-width/index.md index 9ad7c9e4021d57..90664e0e6617cc 100644 --- a/files/ja/web/css/border-width/index.md +++ b/files/ja/web/css/border-width/index.md @@ -66,7 +66,8 @@ border-width: unset; - `medium` - `thick` -> **メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 +> [!NOTE] +> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、いずれかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 ## 公式定義 diff --git a/files/ja/web/css/border/index.md b/files/ja/web/css/border/index.md index 64de18bfafb493..ecfb58eaf20703 100644 --- a/files/ja/web/css/border/index.md +++ b/files/ja/web/css/border/index.md @@ -44,7 +44,8 @@ border: unset; `border` プロパティは、以下に挙げる値の 1 ～ 3 つを使用して指定します。値の順序は関係ありません。 -> **メモ:** style が指定されていない場合は境界線は表示されません。 style の既定値が `none` だからです。 +> [!NOTE] +> style が指定されていない場合は境界線は表示されません。 style の既定値が `none` だからです。 ### 値 diff --git a/files/ja/web/css/box-align/index.md b/files/ja/web/css/box-align/index.md index 80380463287286..9d003124e044d1 100644 --- a/files/ja/web/css/box-align/index.md +++ b/files/ja/web/css/box-align/index.md @@ -7,7 +7,8 @@ l10n: {{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}} -> **警告:** このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。 +> [!WARNING] +> このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、より新しい標準で置き換えられました。 **`box-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、交差軸方向に子要素をどう整列させるかを定義します。ボックス内に余分な空間がある場合にかぎり、その効果を確認することができます。 diff --git a/files/ja/web/css/box-direction/index.md b/files/ja/web/css/box-direction/index.md index e3ec3735a3c1e2..4aa6935789c182 100644 --- a/files/ja/web/css/box-direction/index.md +++ b/files/ja/web/css/box-direction/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/box-direction {{CSSRef}}{{Non-standard_header}} -> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった `box-direction` は `flex-direction` に置き換えられたので、 `-moz-box-direction` は XUL でのみ使用されます。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 +> [!WARNING] +> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった `box-direction` は `flex-direction` に置き換えられたので、 `-moz-box-direction` は XUL でのみ使用されます。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 **`box-direction`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。 diff --git a/files/ja/web/css/box-edge/index.md b/files/ja/web/css/box-edge/index.md index bad01265054d9a..ca3d27089d7529 100644 --- a/files/ja/web/css/box-edge/index.md +++ b/files/ja/web/css/box-edge/index.md @@ -75,7 +75,8 @@ box-edge キーワードは ``, ``, ``, ` **メモ:** SVG ビューポートが原点に固定されていない場合、元ボックスは SVG ビューポートに対応しません。 + > [!NOTE] + > SVG ビューポートが原点に固定されていない場合、元ボックスは SVG ビューポートに対応しません。 ## 仕様書 diff --git a/files/ja/web/css/box-flex-group/index.md b/files/ja/web/css/box-flex-group/index.md index d6cd69f6d40017..205c82876ea490 100644 --- a/files/ja/web/css/box-flex-group/index.md +++ b/files/ja/web/css/box-flex-group/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/box-flex-group {{CSSRef}}{{Non-standard_Header}} -> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。 +> [!WARNING] +> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。 **`box-flex-group`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスボックスの子要素をフレックスグループに割り当てます。 diff --git a/files/ja/web/css/box-flex/index.md b/files/ja/web/css/box-flex/index.md index e8a76f7a992a98..8e79b324c32c88 100644 --- a/files/ja/web/css/box-flex/index.md +++ b/files/ja/web/css/box-flex/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/box-flex {{CSSRef}}{{Non-standard_Header}} -> **警告:** このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '`box-flex`' (このプロパティの元になったもの) または '`-webkit-box-flex`' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 +> [!WARNING] +> このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '`box-flex`' (このプロパティの元になったもの) または '`-webkit-box-flex`' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 **`-moz-box-flex`** および **`-webkit-box-flex`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 `-moz-box` または `-webkit-box` が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。 diff --git a/files/ja/web/css/box-lines/index.md b/files/ja/web/css/box-lines/index.md index 3e68dd13f23928..ced1725884e0cc 100644 --- a/files/ja/web/css/box-lines/index.md +++ b/files/ja/web/css/box-lines/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/box-lines {{CSSRef}}{{Non-standard_header}} -> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 +> [!WARNING] +> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 **`box-lines`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。 diff --git a/files/ja/web/css/box-ordinal-group/index.md b/files/ja/web/css/box-ordinal-group/index.md index 49a203468a3ae7..2f99c0d3a870a3 100644 --- a/files/ja/web/css/box-ordinal-group/index.md +++ b/files/ja/web/css/box-ordinal-group/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/box-ordinal-group {{CSSRef}}{{Non-standard_Header}} -> **警告:** これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。 +> [!WARNING] +> これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)を参照してください。 **`box-ordinal-group`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。 diff --git a/files/ja/web/css/box-orient/index.md b/files/ja/web/css/box-orient/index.md index e654280d502389..eb7ecd0dc426e2 100644 --- a/files/ja/web/css/box-orient/index.md +++ b/files/ja/web/css/box-orient/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/box-orient {{CSSRef}}{{Non-standard_header}} -> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 +> [!WARNING] +> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 **`box-orient`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。 diff --git a/files/ja/web/css/box-pack/index.md b/files/ja/web/css/box-pack/index.md index 071dd7c93d9f27..c661806c46bb51 100644 --- a/files/ja/web/css/box-pack/index.md +++ b/files/ja/web/css/box-pack/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/box-pack {{CSSRef}}{{Non-standard_header}} -> **警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 +> [!WARNING] +> これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 **`-moz-box-pack`** および **`-webkit-box-pack`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 `-moz-box` または `-webkit-box` がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に空間がある場合のみ見ることができます。 diff --git a/files/ja/web/css/box-sizing/index.md b/files/ja/web/css/box-sizing/index.md index 00b644f4eea807..4ebe456454dcf4 100644 --- a/files/ja/web/css/box-sizing/index.md +++ b/files/ja/web/css/box-sizing/index.md @@ -18,7 +18,8 @@ slug: Web/CSS/box-sizing `box-sizing: border-box` はブラウザーが {{htmlelement("table")}}, {{htmlelement("select")}}, {{htmlelement("button")}} の各要素、また {{htmlelement("input")}} 要素のうち type が `{{htmlelement("input/radio", "radio")}}`, `{{htmlelement("input/checkbox", "checkbox")}}`, `{{htmlelement("input/reset", "reset")}}`, `{{htmlelement("input/button", "button")}}`, `{{htmlelement("input/submit", "submit")}}`, `{{htmlelement("input/color", "color")}}`, `{{htmlelement("input/search", "search")}}` であるものに対して使用する既定のスタイル付けです。 -> **メモ:** 要素をレイアウトする際には、 `box-sizing` を `border-box` に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 `position: relative` または `position: absolute` を使用する場合、 `box-sizing: content-box` を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。 +> [!NOTE] +> 要素をレイアウトする際には、 `box-sizing` を `border-box` に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 `position: relative` または `position: absolute` を使用する場合、 `box-sizing: content-box` を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。 ## 構文 diff --git a/files/ja/web/css/break-after/index.md b/files/ja/web/css/break-after/index.md index 2358c8ddaef1d9..63e58bfaec636d 100644 --- a/files/ja/web/css/break-after/index.md +++ b/files/ja/web/css/break-after/index.md @@ -106,7 +106,8 @@ break-after: unset; | `avoid` | `avoid` | | `always` | `page` | -> **メモ:** ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。 +> [!NOTE] +> ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。 ## 公式定義 diff --git a/files/ja/web/css/break-before/index.md b/files/ja/web/css/break-before/index.md index 85426929420b0f..a8dd84350a9240 100644 --- a/files/ja/web/css/break-before/index.md +++ b/files/ja/web/css/break-before/index.md @@ -106,7 +106,8 @@ break-before: unset; | `avoid` | `avoid` | | `always` | `page` | -> **メモ:** ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。 +> [!NOTE] +> ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。 ## 公式定義 diff --git a/files/ja/web/css/caret-color/index.md b/files/ja/web/css/caret-color/index.md index d3e5c8cf0ba9ea..4ec31cb121d2cd 100644 --- a/files/ja/web/css/caret-color/index.md +++ b/files/ja/web/css/caret-color/index.md @@ -41,7 +41,8 @@ caret-color: unset; - : ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが `currentcolor`、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 - > **メモ:** ユーザーエージェントは `auto` の値に `currentcolor` (通常はアニメーション可能) を使用することがありますが、 `auto` はトランジションやアニメーションでは補完されません。 + > [!NOTE] + > ユーザーエージェントは `auto` の値に `currentcolor` (通常はアニメーション可能) を使用することがありますが、 `auto` はトランジションやアニメーションでは補完されません。 - {{cssxref("<color>")}} - : キャレットの色です。 diff --git a/files/ja/web/css/cascade/index.md b/files/ja/web/css/cascade/index.md index aef7f59702b4c9..c16cf55ae77267 100644 --- a/files/ja/web/css/cascade/index.md +++ b/files/ja/web/css/cascade/index.md @@ -183,7 +183,8 @@ li { margin-left: 3px; ``` -> **メモ:** ユーザー CSS で定義された宣言は、より高い詳細度を持つかもしれませんが、カスケードアルゴリズムのオリジンと重要性が詳細度アルゴリズムの前に適用されるため、選択されることはありません。カスケードレイヤーで定義された宣言は、コードの後半に来るかもしれませんが、カスケードレイヤーの通常のスタイルが通常の非レイヤーのスタイルより優先順位が低いため、優先順位もありません。 出現の順序\_は、オリジン、重要度、および詳細度の両方が等しい場合にのみ重要である。 +> [!NOTE] +> ユーザー CSS で定義された宣言は、より高い詳細度を持つかもしれませんが、カスケードアルゴリズムのオリジンと重要性が詳細度アルゴリズムの前に適用されるため、選択されることはありません。カスケードレイヤーで定義された宣言は、コードの後半に来るかもしれませんが、カスケードレイヤーの通常のスタイルが通常の非レイヤーのスタイルより優先順位が低いため、優先順位もありません。 出現の順序\_は、オリジン、重要度、および詳細度の両方が等しい場合にのみ重要である。 ## 作成者スタイル: インラインスタイル、レイヤー、優先度 @@ -374,7 +375,8 @@ p { この例では、 `repeatedName` という名前の別個のアニメーション宣言が 3 つ存在します。 `animation: infinite 5s alternate repeatedName` が段落に適用されると、 1 つのアニメーションだけが適用されます。レイヤー化されていない CSS で定義されたキーフレームアニメーションは、オリジンとカスケードレイヤーの優先順位に基づいて、レイヤーのキーフレームアニメーション宣言より優先されます。この例では、要素のフォントサイズのみがアニメーション化されます。 -> **メモ:** 重要なアニメーションはありません。 {{cssxref('@keyframes')}} ブロック内のプロパティ宣言で、値の一部として `!important` を含むものは無視されるからです。 +> [!NOTE] +> 重要なアニメーションはありません。 {{cssxref('@keyframes')}} ブロック内のプロパティ宣言で、値の一部として `!important` を含むものは無視されるからです。 ## スタイルの初期化 diff --git a/files/ja/web/css/clear/index.md b/files/ja/web/css/clear/index.md index a8d27daff57fa2..68082ec93a6ab1 100644 --- a/files/ja/web/css/clear/index.md +++ b/files/ja/web/css/clear/index.md @@ -17,7 +17,8 @@ l10n: 解除されることに関連する浮動要素は、その前の浮動要素と[同一のブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)内の先行する浮動要素です。 -> **メモ:** 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その要素の [`display`](/ja/docs/Web/CSS/display) プロパティの値を [`flow-root`](/ja/docs/Web/CSS/display#flow-root) に設定してください。 +> [!NOTE] +> 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その要素の [`display`](/ja/docs/Web/CSS/display) プロパティの値を [`flow-root`](/ja/docs/Web/CSS/display#flow-root) に設定してください。 > > ```css > #container { diff --git a/files/ja/web/css/clip-path/index.md b/files/ja/web/css/clip-path/index.md index ef905ed7cddb25..6b7d9334a3b502 100644 --- a/files/ja/web/css/clip-path/index.md +++ b/files/ja/web/css/clip-path/index.md @@ -89,7 +89,8 @@ clip-path: unset; - `none` - : クリッピングパスは作成されません。 -> **メモ:** 計算値が **`none`** 以外の場合は、新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)を生成します。これは、 {{cssxref("opacity")}} が `1` 以外の値の場合と同様です。 +> [!NOTE] +> 計算値が **`none`** 以外の場合は、新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)を生成します。これは、 {{cssxref("opacity")}} が `1` 以外の値の場合と同様です。 ## 公式定義 diff --git a/files/ja/web/css/clip/index.md b/files/ja/web/css/clip/index.md index 4f0825e614f3eb..daa9b3286f384d 100644 --- a/files/ja/web/css/clip/index.md +++ b/files/ja/web/css/clip/index.md @@ -23,7 +23,8 @@ clip: unset; ## 構文 -> **メモ:** 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。 +> [!NOTE] +> 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。 ### 値 diff --git a/files/ja/web/css/color_value/color/index.md b/files/ja/web/css/color_value/color/index.md index f827408a1c39dd..1aef3861eff32a 100644 --- a/files/ja/web/css/color_value/color/index.md +++ b/files/ja/web/css/color_value/color/index.md @@ -75,9 +75,11 @@ color(from colorspace c1 c2 c3[ / A]) - `r`, `g`, `b`: `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020` における RGB ベースの色空間のための色チャンネル値 - `x`, `y`, `z`: `xyz`, `xyz-d50`, `xyz-d65` における CIE XYZ ベースの色空間のための色チャンネル値 - > **メモ:** これらの値は通常 `0` と `1` の間ですが、上で説明したように、これらの範囲外であってもかまいません。 + > [!NOTE] + > これらの値は通常 `0` と `1` の間ですが、上で説明したように、これらの範囲外であってもかまいません。 - > **メモ:** XYZ ベースの色空間を指定した `color()` 関数の内部で `r`, `g`, `b` 値を参照したり、RGB ベースの色空間を指定した `color()` 関数の内部で `x`, `y`, `z` 値を参照したり、他にも文字を参照したりすることは無効です。関数内で利用できる元の色チャンネルの値は、指定する色空間の型と一致しなければなりません。 + > [!NOTE] + > XYZ ベースの色空間を指定した `color()` 関数の内部で `r`, `g`, `b` 値を参照したり、RGB ベースの色空間を指定した `color()` 関数の内部で `x`, `y`, `z` 値を参照したり、他にも文字を参照したりすることは無効です。関数内で利用できる元の色チャンネルの値は、指定する色空間の型と一致しなければなりません。 - `alpha`: `0` から `1` までの `` で表される色の透過率。 @@ -114,7 +116,8 @@ color(from hsl(0 100% 50%) xyz x y 0.5) /* 計算後の出力色: color(xyz-d65 0.412426 0.212648 0.5) */ ``` -> **メモ:** 上述したように、出力色が元の色と異なる色モデルを用いている場合、元の色は背景の出力色と同じモデルに変換され、互換性のある（つまり同じチャンネルを使用する）方法で表すことができます。例えば {{cssxref("color_value/hsl", "hsl()")}} の色 `hsl(0 100% 50%)` は、上の最初の例では `color(srgb 1 0 0)` に変換され、 2 つ目の例では `color(xyz 0.412426 0.212648 0.5)` に変換されます。 +> [!NOTE] +> 上述したように、出力色が元の色と異なる色モデルを用いている場合、元の色は背景の出力色と同じモデルに変換され、互換性のある（つまり同じチャンネルを使用する）方法で表すことができます。例えば {{cssxref("color_value/hsl", "hsl()")}} の色 `hsl(0 100% 50%)` は、上の最初の例では `color(srgb 1 0 0)` に変換され、 2 つ目の例では `color(xyz 0.412426 0.212648 0.5)` に変換されます。 この章でこれまで見てきた例では、アルファチャンネルは元の色にも出力色にも明示的に指定されていませんでした。出力色のアルファチャンネルを指定しない場合、既定値として元の色のアルファチャンネルと同じ値が指定されます。元の色のアルファチャンネルを指定しない場合（相対色でない場合）、既定値は `1` です。したがって、上記の例では、原点と出力のアルファチャンネルの値は `1` となります。 @@ -138,7 +141,8 @@ color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc( /* 計算後の出力色: color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */ ``` -> **メモ:** 元の色チャンネルの値は `` 値に解決されるため、通常チャンネルが ``、`` などの値を受け入れるような用途であっても、計算で使用する際には値を追加する必要があります。例えば `` を `` に加えても動作しません。 +> [!NOTE] +> 元の色チャンネルの値は `` 値に解決されるため、通常チャンネルが ``、`` などの値を受け入れるような用途であっても、計算で使用する際には値を追加する必要があります。例えば `` を `` に加えても動作しません。 ### 形式文法 diff --git a/files/ja/web/css/color_value/hsl/index.md b/files/ja/web/css/color_value/hsl/index.md index 9c0099985e8d41..054879e7f48576 100644 --- a/files/ja/web/css/color_value/hsl/index.md +++ b/files/ja/web/css/color_value/hsl/index.md @@ -9,7 +9,8 @@ l10n: **`hsl()`** 関数記法は、 {{glossary("RGB", "sRGB")}} 色を _色相_、_彩度_、_明度_ の成分によって表現します。オプションの _アルファ_ 成分は、その色の透明度を表します。 -> **メモ:** 古い `hsla()` 構文は `hsl()` の別名です。同じ引数を受け付け、同じように動作します。 +> [!NOTE] +> 古い `hsla()` 構文は `hsl()` の別名です。同じ引数を受け付け、同じように動作します。 {{EmbedInteractiveExample("pages/css/function-hsl.html")}} @@ -37,7 +38,8 @@ hsl(120deg 75% 25% / 0.6) - `A` {{optional_inline}} - : {{CSSXref("<alpha-value>")}} またはキーワード `none` であり、数値 `1` が `100%` (完全に不透明) を意味します。 -> **メモ:** この関数記法は sRGB 値にシリアライズされ、赤、緑、青の成分の値はシリアライズの際に丸められる可能性があります。 +> [!NOTE] +> この関数記法は sRGB 値にシリアライズされ、赤、緑、青の成分の値はシリアライズの際に丸められる可能性があります。 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。 diff --git a/files/ja/web/css/color_value/hwb/index.md b/files/ja/web/css/color_value/hwb/index.md index 95abe6c5b51efe..9c77050e0af4db 100644 --- a/files/ja/web/css/color_value/hwb/index.md +++ b/files/ja/web/css/color_value/hwb/index.md @@ -36,7 +36,8 @@ hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */ - : {{CSSXref("<alpha-value>")}} またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。 -> **メモ:** この関数記法は sRGB 値に直列化され、赤、緑、青の成分の値は直列化の際に丸められる可能性があります。 +> [!NOTE] +> この関数記法は sRGB 値に直列化され、赤、緑、青の成分の値は直列化の際に丸められる可能性があります。 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。 diff --git a/files/ja/web/css/color_value/index.md b/files/ja/web/css/color_value/index.md index ef66d5c9bf9ffd..36c4bb07268991 100644 --- a/files/ja/web/css/color_value/index.md +++ b/files/ja/web/css/color_value/index.md @@ -128,7 +128,8 @@ color-mix(in oklch, oklch(none 0.2 10), oklch(60% none 30)) color-mix(in oklch, oklch(60% 0.2 10), oklch(60% 0.2 30)) ``` -> **メモ:** 両方の色から成分が欠落している場合、この成分は補間後に欠落します。 +> [!NOTE] +> 両方の色から成分が欠落している場合、この成分は補間後に欠落します。 #### 異なる色空間からの色の補間: 類似成分 diff --git a/files/ja/web/css/color_value/lab/index.md b/files/ja/web/css/color_value/lab/index.md index 17949cddb3553d..117166da2dc23d 100644 --- a/files/ja/web/css/color_value/lab/index.md +++ b/files/ja/web/css/color_value/lab/index.md @@ -30,7 +30,8 @@ lab(52.2345% 40.1645 59.9971 / .5); - `A` {{optional_inline}} - : {{CSSXref("<alpha-value>")}} またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。 -> **メモ:** 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。 +> [!NOTE] +> 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。 > この場合は特別で、 `100%` は `L` 値では `100`、 `a` 値と `b` 値では `125` となります。 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。 diff --git a/files/ja/web/css/color_value/lch/index.md b/files/ja/web/css/color_value/lch/index.md index bce506024411c7..ffc278d954181d 100644 --- a/files/ja/web/css/color_value/lch/index.md +++ b/files/ja/web/css/color_value/lch/index.md @@ -30,7 +30,8 @@ lch(52.2345% 72.2 56.2 / .5); - `A` {{optional_inline}} - : {{CSSXref("<alpha-value>")}} またはキーワード `none` です。 `1` は `100%` （完全に不透明）に対応します。 -> **メモ:** 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。 +> [!NOTE] +> 通常、 CSS でパーセント値が数値と等価である場合、 `100%` が数値 `1` と等しくなります。 > この場合は特別で、 `100%` は `L` 値では `100`、 `C` 値では `150` となります。 > **メモ:** `none` の効果については[色成分の欠落](/ja/docs/Web/CSS/color_value#色成分の欠落)を参照してください。 diff --git a/files/ja/web/css/color_value/light-dark/index.md b/files/ja/web/css/color_value/light-dark/index.md index 8c420d0f0ebf2c..bd12da4cc7ce96 100644 --- a/files/ja/web/css/color_value/light-dark/index.md +++ b/files/ja/web/css/color_value/light-dark/index.md @@ -108,7 +108,8 @@ code { `light-dark()` 関数を有効にするだけでなく、 `color-scheme` プロパティは文書内のセクションのユーザーの配色を上書きすることができます。ページセクションに明暗の配色のみを使用するように強制するには、 `color-scheme` プロパティを `light` または `dark` に設定するだけです。 -> **メモ:** 一般的にはこのようなことはすべきではありません。ここではデモのために使用しています。ユーザーが環境設定をした場合、通常はユーザーの環境設定を上書きしてはいけません。 +> [!NOTE] +> 一般的にはこのようなことはすべきではありません。ここではデモのために使用しています。ユーザーが環境設定をした場合、通常はユーザーの環境設定を上書きしてはいけません。 ```css .light { diff --git a/files/ja/web/css/color_value/rgb/index.md b/files/ja/web/css/color_value/rgb/index.md index b97b1f3421d1ec..f926182c591417 100644 --- a/files/ja/web/css/color_value/rgb/index.md +++ b/files/ja/web/css/color_value/rgb/index.md @@ -64,7 +64,8 @@ rgb(from R G B[ / A]) > **メモ:** `rgba()` エイリアスも相対色の出力や起点色の指定に使用できます。`rgba()` を使用して相対色を出力する場合、カンマのないモダン構文を使用する必要があります。 -> **メモ:** 完全な可視スペクトルを表現するために、相対 `rgb()` 色関数の出力は `color(srgb)` にシリアライズされます。つまり、{{DOMxRef("HTMLElement.style")}} プロパティまたは {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} メソッドを介して出力色をクエリすると、出力色が [`color(srgb ...)`](/ja/docs/Web/CSS/color_value/color) 値として返されます。 +> [!NOTE] +> 完全な可視スペクトルを表現するために、相対 `rgb()` 色関数の出力は `color(srgb)` にシリアライズされます。つまり、{{DOMxRef("HTMLElement.style")}} プロパティまたは {{DOMxRef("CSSStyleDeclaration.getPropertyValue()")}} メソッドを介して出力色をクエリすると、出力色が [`color(srgb ...)`](/ja/docs/Web/CSS/color_value/color) 値として返されます。 #### 相対色出力チャネル成分の定義 @@ -107,7 +108,8 @@ rgb(from hsl(0 100% 50%) r 80 80) 最終的な出力色は、sRGB 色空間の `rgb(255 80 80)` に相当します：`color(srgb 1 0.313726 0.313726)`。 -> **メモ:** 前述したように、出力色が起点色と異なるカラーモデルを使用している場合、起点色はバックグラウンドで出力色と同じモデルまたは空間に変換され、互換性のある方法で表現されます（つまり、同じチャネルを使用します）。 +> [!NOTE] +> 前述したように、出力色が起点色と異なるカラーモデルを使用している場合、起点色はバックグラウンドで出力色と同じモデルまたは空間に変換され、互換性のある方法で表現されます（つまり、同じチャネルを使用します）。 これまでに見てきた例は、起点および出力において、アルファチャネルが明示的に指定されていません。出力色のアルファチャネルが指定されていない場合、起点色のアルファチャネルと同じ値になります。起点色のアルファチャネルが指定されていない場合（かつそれが相対色でない場合）、デフォルト値は `1` です。したがって、上記の例の起点色および出力色のアルファチャネル値は `1` です。 @@ -127,7 +129,8 @@ rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5) rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1)) ``` -> **メモ:** 起点色のチャネルは `` 値に解決されるため、通常チャネルが ``、``、または他の値タイプを受け入れる場合でも、計算で使用する際には数値を加える必要があります。例えば `` を `` に加えることはできません。 +> [!NOTE] +> 起点色のチャネルは `` 値に解決されるため、通常チャネルが ``、``、または他の値タイプを受け入れる場合でも、計算で使用する際には数値を加える必要があります。例えば `` を `` に加えることはできません。 ### 形式文法