From bdaf9eadc7f695cc5d61e564e1a4d586de4f4675 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Sat, 27 Jul 2024 17:27:07 -0700 Subject: [PATCH 01/64] ja: Convert noteblocks to GFM Alerts (part 16) 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 16. Note: manual adjustments have also been made to correct some issues, including capitalization, syntax, duplicated keywords and more. --- files/ja/web/css/column-fill/index.md | 3 ++- files/ja/web/css/column-rule/index.md | 3 ++- files/ja/web/css/computed_value/index.md | 3 ++- files/ja/web/css/contain/index.md | 3 ++- files/ja/web/css/container-name/index.md | 3 ++- files/ja/web/css/containing_block/index.md | 3 ++- files/ja/web/css/content-visibility/index.md | 3 ++- files/ja/web/css/counter-increment/index.md | 3 ++- files/ja/web/css/counter-set/index.md | 3 ++- files/ja/web/css/cross-fade/index.md | 3 ++- .../web/css/css_animated_properties/index.md | 9 ++++++--- .../using_css_animations/index.md | 15 ++++++++++----- .../index.md | 3 ++- .../index.md | 3 ++- files/ja/web/css/css_box_alignment/index.md | 6 ++++-- files/ja/web/css/css_box_model/index.md | 3 ++- files/ja/web/css/css_box_sizing/index.md | 6 ++++-- files/ja/web/css/css_cascade/index.md | 3 ++- .../web/css/css_colors/applying_color/index.md | 18 ++++++++++++------ .../container_size_and_style_queries/index.md | 3 ++- .../using_css_counters/index.md | 3 ++- .../block_formatting_context/index.md | 3 ++- .../mastering_wrapping_of_flex_items/index.md | 3 ++- .../ordering_flex_items/index.md | 3 ++- .../index.md | 6 ++++-- .../index.md | 3 ++- .../css_fonts/opentype_fonts_guide/index.md | 9 ++++++--- .../css_fonts/variable_fonts_guide/index.md | 12 ++++++++---- files/ja/web/css/css_functions/index.md | 3 ++- .../basic_concepts_of_grid_layout/index.md | 6 ++++-- .../index.md | 3 ++- .../implementing_image_sprites_in_css/index.md | 3 ++- .../css/css_media_queries/printing/index.md | 3 ++- .../using_media_queries/index.md | 9 ++++++--- .../spanning_balancing_columns/index.md | 3 ++- .../css/css_nesting/using_css_nesting/index.md | 9 ++++++--- .../stacking_context/index.md | 3 ++- .../stacking_context_example_1/index.md | 3 ++- .../stacking_context_example_2/index.md | 3 ++- .../stacking_context_example_3/index.md | 6 ++++-- .../stacking_floating_elements/index.md | 3 ++- .../using_z-index/index.md | 2 +- files/ja/web/css/css_scoping/index.md | 3 ++- files/ja/web/css/css_scroll_snap/index.md | 3 ++- .../web/css/css_syntax/error_handling/index.md | 6 ++++-- files/ja/web/css/css_syntax/index.md | 3 ++- files/ja/web/css/css_transforms/index.md | 3 ++- .../using_css_transforms/index.md | 3 ++- .../using_css_transitions/index.md | 3 ++- .../css/cssom_view/coordinate_systems/index.md | 3 ++- files/ja/web/css/display-inside/index.md | 3 ++- files/ja/web/css/display-listitem/index.md | 3 ++- files/ja/web/css/display-outside/index.md | 3 ++- files/ja/web/css/display/index.md | 12 ++++++++---- .../multi-keyword_syntax_of_display/index.md | 3 ++- files/ja/web/css/easing-function/index.md | 3 ++- files/ja/web/css/field-sizing/index.md | 3 ++- .../css/filter-function/drop-shadow/index.md | 3 ++- .../web/css/filter-function/opacity/index.md | 3 ++- files/ja/web/css/fit-content/index.md | 3 ++- files/ja/web/css/flex-basis/index.md | 6 ++++-- files/ja/web/css/float/index.md | 3 ++- files/ja/web/css/font-optical-sizing/index.md | 3 ++- files/ja/web/css/font-size/index.md | 6 ++++-- files/ja/web/css/font-smooth/index.md | 6 ++++-- files/ja/web/css/font-stretch/index.md | 3 ++- files/ja/web/css/font-style/index.md | 3 ++- .../web/css/font-variant-alternates/index.md | 6 ++++-- .../web/css/font-variation-settings/index.md | 3 ++- .../web/css/gradient/conic-gradient/index.md | 3 ++- .../gradient/repeating-conic-gradient/index.md | 3 ++- .../repeating-linear-gradient/index.md | 3 ++- .../repeating-radial-gradient/index.md | 6 ++++-- files/ja/web/css/grid-area/index.md | 3 ++- files/ja/web/css/grid-auto-columns/index.md | 3 ++- files/ja/web/css/grid-auto-rows/index.md | 3 ++- files/ja/web/css/grid-column-end/index.md | 3 ++- files/ja/web/css/grid-column-start/index.md | 3 ++- files/ja/web/css/grid-column/index.md | 3 ++- files/ja/web/css/grid-row-end/index.md | 3 ++- files/ja/web/css/grid-row-start/index.md | 3 ++- files/ja/web/css/grid-row/index.md | 3 ++- .../ja/web/css/grid-template-columns/index.md | 3 ++- files/ja/web/css/grid-template-rows/index.md | 3 ++- files/ja/web/css/grid-template/index.md | 3 ++- files/ja/web/css/grid/index.md | 3 ++- files/ja/web/css/hex-color/index.md | 3 ++- .../web/css/hue-interpolation-method/index.md | 3 ++- files/ja/web/css/hue/index.md | 3 ++- files/ja/web/css/hyphens/index.md | 9 ++++++--- files/ja/web/css/image-rendering/index.md | 3 ++- files/ja/web/css/image-resolution/index.md | 3 ++- files/ja/web/css/image/image-set/index.md | 3 ++- files/ja/web/css/image/image/index.md | 3 ++- files/ja/web/css/image/index.md | 3 ++- files/ja/web/css/important/index.md | 3 ++- files/ja/web/css/index.md | 2 +- files/ja/web/css/initial_value/index.md | 3 ++- files/ja/web/css/integer/index.md | 3 ++- .../breadcrumb_navigation/index.md | 5 +++-- 100 files changed, 271 insertions(+), 137 deletions(-) diff --git a/files/ja/web/css/column-fill/index.md b/files/ja/web/css/column-fill/index.md index c3538c100fce2f..574f0f37e7362d 100644 --- a/files/ja/web/css/column-fill/index.md +++ b/files/ja/web/css/column-fill/index.md @@ -90,7 +90,8 @@ p.fill-balance { {{Compat}} -> **警告:** 仕様上の未解決の問題により、 `column-fill` にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。 +> [!WARNING] +> 仕様上の未解決の問題により、 `column-fill` にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。 > > 特に、 `column-fill: auto` を使用して連続的に段を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の段をすべての内容物で埋めます。 diff --git a/files/ja/web/css/column-rule/index.md b/files/ja/web/css/column-rule/index.md index 70b5975d422f91..2e88e65ab346d7 100644 --- a/files/ja/web/css/column-rule/index.md +++ b/files/ja/web/css/column-rule/index.md @@ -11,7 +11,8 @@ slug: Web/CSS/column-rule これは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)であり、一回の便利な宣言で個別の `column-rule-*` プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。 -> **メモ:** 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。 +> [!NOTE] +> 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。 ## 構文 diff --git a/files/ja/web/css/computed_value/index.md b/files/ja/web/css/computed_value/index.md index 2caba4f8bf52be..7035d863c5fbd1 100644 --- a/files/ja/web/css/computed_value/index.md +++ b/files/ja/web/css/computed_value/index.md @@ -14,7 +14,8 @@ slug: Web/CSS/computed_value しかしながら、いくつかのプロパティ (`width`, `margin-right`, `text-indent`, `top` など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント値で指定された値はパーセント値で計算された値に変わります。さらに、 `line-height` に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、[使用値](/ja/docs/Web/CSS/used_value)が定義された場合、絶対値になります。 -> **メモ:** DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は[解決値](/ja/docs/Web/CSS/resolved_value)を返しますが、これはプロパティによって[計算値](/ja/docs/Web/CSS/computed_value)であるか[使用値](/ja/docs/Web/CSS/used_value)であるかが変わります。 +> [!NOTE] +> DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は[解決値](/ja/docs/Web/CSS/resolved_value)を返しますが、これはプロパティによって[計算値](/ja/docs/Web/CSS/computed_value)であるか[使用値](/ja/docs/Web/CSS/used_value)であるかが変わります。 ## 仕様書 diff --git a/files/ja/web/css/contain/index.md b/files/ja/web/css/contain/index.md index c80d40f2d90091..405d987a8b6857 100644 --- a/files/ja/web/css/contain/index.md +++ b/files/ja/web/css/contain/index.md @@ -11,7 +11,8 @@ slug: Web/CSS/contain このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。 -> **メモ:** (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。 +> [!NOTE] +> (`paint`, `strict`, `content` のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。 > > 1. 新しい[包含ブロック](/ja/docs/Web/CSS/Containing_block) ({{cssxref("position")}} プロパティが `absolute` または `fixed` である子孫を対象とする)。 > 2. 新しい[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)。 diff --git a/files/ja/web/css/container-name/index.md b/files/ja/web/css/container-name/index.md index 510629c25aa583..0be19f5aa4c298 100644 --- a/files/ja/web/css/container-name/index.md +++ b/files/ja/web/css/container-name/index.md @@ -74,7 +74,8 @@ container-name: unset; 格納コンテキストを作成するには、 CSS で要素に `container-type` プロパティを追加します。 次の例では、カードのメタ情報用と投稿の抜粋用の 2 つのコンテナーを作成しています。 -> **メモ:** これらの宣言のための一括指定構文は {{cssxref("container")}} ページで説明されています。 +> [!NOTE] +> これらの宣言のための一括指定構文は {{cssxref("container")}} ページで説明されています。 ```css .post-meta { diff --git a/files/ja/web/css/containing_block/index.md b/files/ja/web/css/containing_block/index.md index 61902c4ad540c8..718133ad8defe4 100644 --- a/files/ja/web/css/containing_block/index.md +++ b/files/ja/web/css/containing_block/index.md @@ -38,7 +38,8 @@ slug: Web/CSS/Containing_block 3. {{cssxref("filter")}} の値が `none` 以外、または `will-change` の値が `filter` の場合 (Firefox のみで動作)。 4. {{cssxref("contain")}} の値が `paint` の場合 (例 `contain: paint;`) -> **メモ:** ルート要素 ({{HTMLElement("html")}}) が包含ブロックである場合、**初期包含ブロック**と呼ばれる矩形になります。これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。 +> [!NOTE] +> ルート要素 ({{HTMLElement("html")}}) が包含ブロックである場合、**初期包含ブロック**と呼ばれる矩形になります。これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。 ## 包含ブロックからのパーセント値の計算 diff --git a/files/ja/web/css/content-visibility/index.md b/files/ja/web/css/content-visibility/index.md index accc54f7c52bb9..20ca235e09a680 100644 --- a/files/ja/web/css/content-visibility/index.md +++ b/files/ja/web/css/content-visibility/index.md @@ -53,7 +53,8 @@ content-visibility: unset; `content-visibility` を [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)でアニメーションさせる場合、 `content-visibility` に [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) を設定する必要があります。これにより、 `content-visibility` のトランジションが有効になります。 -> **メモ:** 要素の `content-visibility` 値をトランジションさせるとき、 [`display`](/ja/docs/Web/CSS/display#display_のアニメーション) をトランジションさせるときのように、 [`@starting-style`](/ja/docs/Web/CSS/@starting-style) ブロックを使用して、トランジションするプロパティの開始値の集合を提供する必要はありません。これは `content-visibility` が `display` のように要素を DOM から隠すのではなく、要素のコンテンツのレンダリングをスキップするだけだからです。 +> [!NOTE] +> 要素の `content-visibility` 値をトランジションさせるとき、 [`display`](/ja/docs/Web/CSS/display#display_のアニメーション) をトランジションさせるときのように、 [`@starting-style`](/ja/docs/Web/CSS/@starting-style) ブロックを使用して、トランジションするプロパティの開始値の集合を提供する必要はありません。これは `content-visibility` が `display` のように要素を DOM から隠すのではなく、要素のコンテンツのレンダリングをスキップするだけだからです。 ## 公式定義 diff --git a/files/ja/web/css/counter-increment/index.md b/files/ja/web/css/counter-increment/index.md index 3e38749e745f49..c58df07cc2db92 100644 --- a/files/ja/web/css/counter-increment/index.md +++ b/files/ja/web/css/counter-increment/index.md @@ -9,7 +9,8 @@ slug: Web/CSS/counter-increment {{EmbedInteractiveExample("pages/css/counter-increment.html")}} -> **メモ:** カウンターの値は CSS の {{cssxref("counter-reset")}} プロパティを使用して任意の値にリセットすることができます。 +> [!NOTE] +> カウンターの値は CSS の {{cssxref("counter-reset")}} プロパティを使用して任意の値にリセットすることができます。 ## 構文 diff --git a/files/ja/web/css/counter-set/index.md b/files/ja/web/css/counter-set/index.md index 408fe8bcd2798e..012e8d84faa4bb 100644 --- a/files/ja/web/css/counter-set/index.md +++ b/files/ja/web/css/counter-set/index.md @@ -9,7 +9,8 @@ slug: Web/CSS/counter-set {{EmbedInteractiveExample("pages/css/counter-set.html")}} -> **メモ:** カウンターの値は {{cssxref("counter-increment")}} プロパティを使用して増減させることができます。 +> [!NOTE] +> カウンターの値は {{cssxref("counter-increment")}} プロパティを使用して増減させることができます。 ## 構文 diff --git a/files/ja/web/css/cross-fade/index.md b/files/ja/web/css/cross-fade/index.md index 6c1baf27b05031..05de4519923e87 100644 --- a/files/ja/web/css/cross-fade/index.md +++ b/files/ja/web/css/cross-fade/index.md @@ -12,7 +12,8 @@ l10n: ## 構文 -> **警告:** 仕様書と現在の実装とで構文が異なっています。 +> [!WARNING] +> 仕様書と現在の実装とで構文が異なっています。 > 仕様書の構文を先に説明します。 ### 仕様書上の構文 diff --git a/files/ja/web/css/css_animated_properties/index.md b/files/ja/web/css/css_animated_properties/index.md index abb2274bc192f3..2e9f72bc391627 100644 --- a/files/ja/web/css/css_animated_properties/index.md +++ b/files/ja/web/css/css_animated_properties/index.md @@ -9,9 +9,11 @@ l10n: [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)および[トランジション](/ja/docs/Web/CSS/CSS_transitions)**アニメーション可能な**プロパティの概念に頼っており、特に指定しない限り、すべての CSS プロパティはアニメーション可能です。各プロパティのアニメーションの種類は、このプロパティに対する値の[結合](https://drafts.csswg.org/css-values/#combining-values)方法（補間、追加、累積）を決定します。トランジションは補間のみを使用しますが、アニメーションは 3 つの組み合わせ方法をすべてを使用することができます。 -> **メモ:** 各 CSS プロパティのアニメーションの種類は、その「公式定義」表に掲載されています（例: {{CSSXref("color", "", "#公式定義")}}）。 +> [!NOTE] +> 各 CSS プロパティのアニメーションの種類は、その「公式定義」表に掲載されています（例: {{CSSXref("color", "", "#公式定義")}}）。 -> **メモ:** 各 CSS データ型の補間方法は、その「補間」節に記述されています（例: {{CSSXref("<length>", "", "#補間")}}）。 +> [!NOTE] +> 各 CSS データ型の補間方法は、その「補間」節に記述されています（例: {{CSSXref("<length>", "", "#補間")}}）。 ## アニメーションの種類 @@ -21,7 +23,8 @@ l10n: - : このプロパティはアニメーション可能ではありません。アニメーションのキーフレームに掲載されていても処理されず、ビュートランジションのアニメーションにも影響されません。 - > **メモ:** アニメーション可能でないプロパティのみを対象とするアニメーション効果は、アニメーション効果の通常の動作（例えば、 {{DOMXref("Element/animationstart_event", "animationstart")}} イベントを発行する）を示します。 + > [!NOTE] + > アニメーション可能でないプロパティのみを対象とするアニメーション効果は、アニメーション効果の通常の動作（例えば、 {{DOMXref("Element/animationstart_event", "animationstart")}} イベントを発行する）を示します。 - 離散 diff --git a/files/ja/web/css/css_animations/using_css_animations/index.md b/files/ja/web/css/css_animations/using_css_animations/index.md index fe3ffca1d1327c..9a51795f5d16ef 100644 --- a/files/ja/web/css/css_animations/using_css_animations/index.md +++ b/files/ja/web/css/css_animations/using_css_animations/index.md @@ -46,7 +46,8 @@ CSS スタイルでアニメーションのタイミングを定義するため ## 例 -> **メモ:** (2017年以前の) 古いブラウザーでは、接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、`-webkit` 接頭辞を付加したプロパティも含まれています。 +> [!NOTE] +> (2017年以前の) 古いブラウザーでは、接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、`-webkit` 接頭辞を付加したプロパティも含まれています。 ### 文字列がブラウザーのウィンドウを横切る @@ -89,7 +90,8 @@ p {

``` -> **メモ:** アニメーションを見るにはページを再読み込みしてください。 +> [!NOTE] +> アニメーションを見るにはページを再読み込みしてください。 {{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}} @@ -142,7 +144,8 @@ p { これはブラウザーに、アニメーションの流れの 75% 経過時点で見出しの左マージンを 25% に、また幅を 150% にするよう設定します。 -> **メモ:** アニメーションを見るにはページを再読み込みしてください。 +> [!NOTE] +> アニメーションを見るにはページを再読み込みしてください。 {{EmbedLiveSample("Adding_another_keyframe","100%","250")}} @@ -244,7 +247,8 @@ p { } ``` -> **メモ:** 詳しくは、 {{cssxref("animation")}} のリファレンスページをご覧ください。 +> [!NOTE] +> 詳しくは、 {{cssxref("animation")}} のリファレンスページをご覧ください。 ### 複数のアニメーションプロパティ値の設定 @@ -374,7 +378,8 @@ function listener(event) { そしてこちらはライブ出力です。 -> **メモ:** アニメーションを見るにはページを再読み込みしてください。 +> [!NOTE] +> アニメーションを見るにはページを再読み込みしてください。 {{EmbedLiveSample('Using_animation_events', '600', '300')}} diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md index 2568f2efb3853c..3117819124a775 100644 --- a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables [ボックス配置仕様書](/ja/docs/Web/CSS/CSS_Box_Alignment)は、様々なレイアウト方式でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方式に共通のボックス配置の共通機能について説明している、中心となる[ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)ページを併せて読んでください。 -> **メモ:** 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。 +> [!NOTE] +> 執筆時点 (2018 年 5 月) では、ブロックレイアウトのボックス配置プロパティへの対応は実際にはありません。この文書では完全性を保つために、仕様がこれらのプロパティをどのように実装することを期待しているかを詳細に説明していますが、仕様やブラウザーの実装が発展するにつれて変更される可能性があります。 ## align-content と justify-content diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md index 8d71b9e815470a..39dd9aa2465425 100644 --- a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md +++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.md @@ -9,7 +9,8 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout 段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置対象物は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。 -> **メモ:** 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。 +> [!NOTE] +> 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。 ## align-content と justify-content diff --git a/files/ja/web/css/css_box_alignment/index.md b/files/ja/web/css/css_box_alignment/index.md index 7186e5b2a43b03..144d93adc27085 100644 --- a/files/ja/web/css/css_box_alignment/index.md +++ b/files/ja/web/css/css_box_alignment/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/CSS_box_alignment CSS ボックス配置 (CSS Box Alignment) モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。 -> **メモ:** ボックス配置がどのように適用されるかは、各レイアウト方式のドキュメントに詳しく記載されています。 +> [!NOTE] +> ボックス配置がどのように適用されるかは、各レイアウト方式のドキュメントに詳しく記載されています。 ## 古い配置方法 @@ -156,7 +157,8 @@ CSS は伝統的に、配置機能がとても制約されていました。{{cs {{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 700)}} -> **メモ:** 初期のグリッドの実装は `-gap` プロパティに `grid-` 接頭辞を付けていました。すべてのブラウザーが接頭辞なしのプロパティに対応していますが、例やチュートリアルでは古いプロパティである {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, {{cssxref("gap", "grid-gap")}} を見かけることがあるかもしれません。接頭辞つきのものは接頭辞なしの物の別名として保持される予定です。 +> [!NOTE] +> 初期のグリッドの実装は `-gap` プロパティに `grid-` 接頭辞を付けていました。すべてのブラウザーが接頭辞なしのプロパティに対応していますが、例やチュートリアルでは古いプロパティである {{cssxref("row-gap", "grid-row-gap")}}, {{cssxref("column-gap", "grid-column-gap")}}, {{cssxref("gap", "grid-gap")}} を見かけることがあるかもしれません。接頭辞つきのものは接頭辞なしの物の別名として保持される予定です。 また、スペース配分キーワードを使用したり、アイテムに余白を設けたりすると、表示される視覚的な溝が大きくなる場合がありますので注意してください。 diff --git a/files/ja/web/css/css_box_model/index.md b/files/ja/web/css/css_box_model/index.md index b41375e2698932..ff94592046efc6 100644 --- a/files/ja/web/css/css_box_model/index.md +++ b/files/ja/web/css/css_box_model/index.md @@ -32,7 +32,8 @@ CSS のボックスは、テキスト、画像、その他の HTML 要素が表 ## リファレンス -> **メモ:** 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの書字方向に関係するフローに関連したプロパティは、[論理的プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)で定義されています。 +> [!NOTE] +> 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの書字方向に関係するフローに関連したプロパティは、[論理的プロパティと値](/ja/docs/Web/CSS/CSS_logical_properties_and_values)で定義されています。 #### ボックスのマージンを制御するプロパティ diff --git a/files/ja/web/css/css_box_sizing/index.md b/files/ja/web/css/css_box_sizing/index.md index c350264aa1ebd0..8bf4063739496f 100644 --- a/files/ja/web/css/css_box_sizing/index.md +++ b/files/ja/web/css/css_box_sizing/index.md @@ -35,7 +35,8 @@ l10n: - {{cssxref("min-width")}} - {{cssxref("width")}} -> **メモ:** CSS ボックスサイズ指定モジュールでは、まだ実装されていない `min-intrinsic-sizing` プロパティを導入しています。 +> [!NOTE] +> CSS ボックスサイズ指定モジュールでは、まだ実装されていない `min-intrinsic-sizing` プロパティを導入しています。 ### データ型と値 @@ -45,7 +46,8 @@ l10n: - {{cssxref("fit-content")}} 値 - {{cssxref("fit-content_function", "fit-content()")}} 関数 -> **メモ:** CSS ボックスサイズ指定モジュールでは、ボックスサイズ指定プロパティにまだ実装されていないサイズ指定値として、`stretch` と `contain` キーワードを導入しています。 +> [!NOTE] +> CSS ボックスサイズ指定モジュールでは、ボックスサイズ指定プロパティにまだ実装されていないサイズ指定値として、`stretch` と `contain` キーワードを導入しています。 ### 関数 diff --git a/files/ja/web/css/css_cascade/index.md b/files/ja/web/css/css_cascade/index.md index 03f8f96c8d6b2e..db0f396f1be40e 100644 --- a/files/ja/web/css/css_cascade/index.md +++ b/files/ja/web/css/css_cascade/index.md @@ -13,7 +13,8 @@ CSS の基本設計原則の一つに、ルールのカスケードがありま 逆のことも起こりえます。プロパティの値を定義する宣言がないこともあります。 CSS カスケードモジュールは、これらの欠落した値を、継承またはプロパティの初期値からどのように設定するかを定義します。 -> **メモ:** ページコンテキストとそのマージンボックスの指定値を探すルールは、[CSS ページモジュール](/ja/docs/Web/CSS/CSS_paged_media)に記述されています。 +> [!NOTE] +> ページコンテキストとそのマージンボックスの指定値を探すルールは、[CSS ページモジュール](/ja/docs/Web/CSS/CSS_paged_media)に記述されています。 ## リファレンス diff --git a/files/ja/web/css/css_colors/applying_color/index.md b/files/ja/web/css/css_colors/applying_color/index.md index 53af55db5e4d4a..d3a0c21d67ac62 100644 --- a/files/ja/web/css/css_colors/applying_color/index.md +++ b/files/ja/web/css/css_colors/applying_color/index.md @@ -207,7 +207,8 @@ th { {{EmbedLiveSample("HSL 関数表記", 300, 260)}} -> **メモ:** 色相の単位を省略した場合は度 (`deg`) と見なされます。 +> [!NOTE] +> 色相の単位を省略した場合は度 (`deg`) と見なされます。 ## 色の活用 @@ -303,7 +304,8 @@ th { } ``` -> **メモ:** こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は `text-decoration: underline wavy #88ff88` をサポートしていないからです。 +> [!NOTE] +> こちらを Safari で表示しようとしても、正常に表示されません。なぜなら、Safari は `text-decoration: underline wavy #88ff88` をサポートしていないからです。 最後に、`.boxRight` クラスで右に描画されるボックス固有のプロパティを記述します。これは、先のボックスの隣に表示されるように、ボックスを右に浮かす設定をしています。そして、以下のように色を設定しています。 @@ -325,7 +327,8 @@ th { {{EmbedLiveSample("例: 色の選択", 525, 275)}} -> **メモ:** macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。 +> [!NOTE] +> macOS では、カラーピッカーウインドウを閉じると色の選択が完了したことになります。 #### HTML @@ -407,7 +410,8 @@ colorPicker.addEventListener( ベースカラーを決める際には、ウェブコンテンツから色を選択できるブラウザー拡張機能が特に便利です。拡張機能の中には、こういった作業を支援するために特別に設計されたものもあります。例えば、ウェブサイトの [ColorZilla](https://www.colorzilla.com/) はウェブから色を選ぶためのスポイトツールの拡張機能 ([Chrome](https://www.colorzilla.com/chrome) / [Firefox](https://www.colorzilla.com/firefox)) を提供しています。また、様々なサイズの領域やページの選択すた領域のピクセルの色の平均を取ることもできます。 -> **メモ:** 色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。 +> [!NOTE] +> 色の平均を取る利点は、一見同じ色に見えるものが、実際には驚くほど多様な数の関連色が協調して使用され、目的の効果を生み出すために混色されていることが多いためです。これらのピクセル内から 1 つだけ選んでしまうと、それだけでは非常に場違いな色になることがあります。 #### パレットを豊かにする @@ -421,7 +425,8 @@ colorPicker.addEventListener( パレットをデザインする際には、これらのツールが典型的に生成する色に加えて、白 (またはほぼ白)、黒 (またはほぼ黒)、グレーの濃淡などの中核となる中性的な色を加える必要があることも念頭に置いてください。 -> **メモ:** 通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。 +> [!NOTE] +> 通常は、可能な限り色の数を少なくした方がはるかに良くなります。ページ上の全てに色を加えるのではなく色をアクセントに使うと、内容が読みやすくなり使った色のインパクトが増します。 ### 色理論に関する参考文献 @@ -438,7 +443,8 @@ colorPicker.addEventListener( 少なくとも[色覚異常](https://ja.wikipedia.org/wiki/色覚異常)についての基礎的な調査はしておいた方が良いでしょう。いくつかの種類がありますが、最も一般的なのは赤緑色覚異常で、赤と緑の色を区別しづらいものです。他にも、特定の色の違いを見分けることができないものから、全く色が見えないものまであります。 -> **メモ:** 最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。 +> [!NOTE] +> 最も重要なルール: 色だけで情報を知る手段を使ってはいけません。例えば、ある操作の成功や失敗を示すために、図形の色を白から緑、失敗を示すために赤に変えた場合、赤緑の色盲のユーザーはサイトを適切に利用できません。代わりにテキストと色を併用すれば、誰もが起こったことを理解できるようになるでしょう。 色覚異常については、以下の記事をご覧ください。 diff --git a/files/ja/web/css/css_containment/container_size_and_style_queries/index.md b/files/ja/web/css/css_containment/container_size_and_style_queries/index.md index 1dc5fc630f04c8..7b622d32731499 100644 --- a/files/ja/web/css/css_containment/container_size_and_style_queries/index.md +++ b/files/ja/web/css/css_containment/container_size_and_style_queries/index.md @@ -361,7 +361,8 @@ output { `unset` または `gibberish` を入力すると、 JavaScript は {{HTMLElement("body")}} の `style` を `--theme: unset` または `--theme: gibberish` に更新します。どちらも色ではありません。どちらも不正な色であり、無視されます。これは初期値が継承され、変更されないことを意味しています。 `style(-theme)` は偽を返し、 `style(-theme: red)` は真を返します。 -> **メモ:** カスタムプロパティを宣言するときは、 `@property` を {{cssxref("@property/syntax", "syntax")}} 記述子とともに使用するようにしてください。そうすれば、ブラウザーは正しく計算値を比較することができます。 +> [!NOTE] +> カスタムプロパティを宣言するときは、 `@property` を {{cssxref("@property/syntax", "syntax")}} 記述子とともに使用するようにしてください。そうすれば、ブラウザーは正しく計算値を比較することができます。 ### 入れ子のクエリー diff --git a/files/ja/web/css/css_counter_styles/using_css_counters/index.md b/files/ja/web/css/css_counter_styles/using_css_counters/index.md index c0b284c675288f..9a68c411954ed2 100644 --- a/files/ja/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/ja/web/css/css_counter_styles/using_css_counters/index.md @@ -113,7 +113,8 @@ counter-reset: reversed(section); {{cssxref("counter-increment")}} に負の値を指定すると、カウンター値が減少します。 -> **メモ:** 逆行ではないカウンターを減少させるには、 {{cssxref("counter-increment")}} を使うこともできます。 +> [!NOTE] +> 逆行ではないカウンターを減少させるには、 {{cssxref("counter-increment")}} を使うこともできます。 > 逆行カウンターを使用する主な利点は、既定の初期値と、 `list-item` カウンターが自動的に逆行カウンターを減少させてくれることです。 ### list-item カウンター diff --git a/files/ja/web/css/css_display/block_formatting_context/index.md b/files/ja/web/css/css_display/block_formatting_context/index.md index f39c922c1b4212..9e7dd03d09b09e 100644 --- a/files/ja/web/css/css_display/block_formatting_context/index.md +++ b/files/ja/web/css/css_display/block_formatting_context/index.md @@ -32,7 +32,8 @@ l10n: - 外部の浮動要素を追いやります。 - [マージンの相殺](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)を抑止します。 -> **メモ:** フレックス／グリッドコンテナー ({{ cssxref("display") }}: flex/grid/inline-flex/inline-grid) は新しいフレックス／グリッド整形コンテキストを確立します。これは、レイアウト以外はブロック整形コンテキストに類似しています。フレックス／グリッドコンテナーの中に利用できる浮動子要素はありませんが、外部の浮動要素を除外したり、マージンの折りたたみを抑制したりすることはできます。 +> [!NOTE] +> フレックス／グリッドコンテナー ({{ cssxref("display") }}: flex/grid/inline-flex/inline-grid) は新しいフレックス／グリッド整形コンテキストを確立します。これは、レイアウト以外はブロック整形コンテキストに類似しています。フレックス／グリッドコンテナーの中に利用できる浮動子要素はありませんが、外部の浮動要素を除外したり、マージンの折りたたみを抑制したりすることはできます。 ## 例 diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 995e564448a971..f01a57d592da5e 100644 --- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -73,7 +73,8 @@ CSS の gap プロパティは `row-gap` と `column-gap` の一括指定で、 次のライブ例では、折り返しのないフレックスコンテナーを使用しています。3 番目のアイテムは他のアイテムよりも内容物が多いのですが、 `visibility: collapse` に設定されているため、フレックスコンテナーはこのアイテムを表示するために必要な高さの*支柱*を保持しています。CSS から `visibility: collapse` を削除したり、値を `visible` に変更したりすると、アイテムが現れ、折り畳まれていないアイテムに空間が再分配されますが、フレックスコンテナーの高さは変わりません。 -> **メモ:** Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。 +> [!NOTE] +> Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。 {{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}} diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md index b09d062e41d208..9dd22291616187 100644 --- a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -44,7 +44,8 @@ l10n: > 「文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の \*-reverse 値をソース順序の修正の代用として利用してはいけません。」 -> **メモ:** 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。 +> [!NOTE] +> 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。 以下の例ではリンクからリンクにタブ移動した際に、どれが強調されているかわかりやすいように focus スタイルを加えています。`flex-direction` を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。 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 5d28bc5965d0bd..8e0dc96f774f75 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 @@ -9,7 +9,8 @@ l10n: この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。 -> **メモ:** CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。 +> [!NOTE] +> CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。 ## ボックス配置モジュール @@ -99,7 +100,8 @@ CSS の `writing-mode` プロパティを文書全体の書字方向を変更す レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。 -> **警告:** 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。 +> [!WARNING] +> 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。 また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。 diff --git a/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md index 957293509ede3f..07211a79c6af42 100644 --- a/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md +++ b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md @@ -55,7 +55,8 @@ slug: Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow マージンの相殺については、[マージンの相殺](/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)の記事で詳しく解説しています。 -> **メモ:** マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。 +> [!NOTE] +> マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。 > > ![](box-model.png) diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md index 23552b6cef8deb..a7e658a1413fe8 100644 --- a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.md @@ -11,7 +11,8 @@ slug: Web/CSS/CSS_fonts/OpenType_fonts_guide 合字や lining 字形 (小文字のように見える 'oldstyle' とは対照的に、均等に並ぶ数字) のような広範な特性セットに加えて、スタイリスティックセット (一緒に使用することを意図した字形のいくつかの特定の異体字を含む場合がある)、代替字形 (文字 'a' の 1 つまたは複数の異体字の場合がある)、あるいは東アジアの言語のための言語固有の変更など、非常に特殊なものもあります。後者の場合、これらの変更は、その言語を適切に表現するために実際に必要なものであり、他のほとんどの OpenType 機能のようなスタイル上の好みよりも重要です。 -> **警告:** フォントの特性を利用するために多くの CSS 属性が定義されていますが、残念ながらその多くは完全には実装されていません。これらはすべて定義されており、ここで紹介されていますが、多くは下位レベルの {{cssxref("font-feature-settings")}} プロパティでのみ動作します。両方の方法で動作するように CSS を記述することは可能ですが、これは面倒なことになります。すべてに `font-feature-settings` を使う場合の問題点は、個々の特性を変更するたびに、文字列全体を再定義しなければならないことです (可変フォントを {{cssxref("font-variation-settings")}} で操作するのと似ています)。 +> [!WARNING] +> フォントの特性を利用するために多くの CSS 属性が定義されていますが、残念ながらその多くは完全には実装されていません。これらはすべて定義されており、ここで紹介されていますが、多くは下位レベルの {{cssxref("font-feature-settings")}} プロパティでのみ動作します。両方の方法で動作するように CSS を記述することは可能ですが、これは面倒なことになります。すべてに `font-feature-settings` を使う場合の問題点は、個々の特性を変更するたびに、文字列全体を再定義しなければならないことです (可変フォントを {{cssxref("font-variation-settings")}} で操作するのと似ています)。 ## フォントの特性の有無の確認 @@ -37,7 +38,8 @@ slug: Web/CSS/CSS_fonts/OpenType_fonts_guide 考慮すべき特性がいくつかあります。ここでは、W3C の仕様書に記載されている主な属性やオプションに沿ってグループ化し、説明しています。 -> **メモ:** 以下の例では、プロパティといくつかの組み合わせ例を、同等の低水準構文とともに示しています。ブラウザーの実装に不整合があるため、完全には一致しないかもしれませんが、多くの場合、一つ目の例は二つ目の例と一致します。表示されている書体は、Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script、Kokoro です (すべて入手可能で無料で使用でき、ほとんどは Google Fonts やその他のサービスで提供されています)。 +> [!NOTE] +> 以下の例では、プロパティといくつかの組み合わせ例を、同等の低水準構文とともに示しています。ブラウザーの実装に不整合があるため、完全には一致しないかもしれませんが、多くの場合、一つ目の例は二つ目の例と一致します。表示されている書体は、Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script、Kokoro です (すべて入手可能で無料で使用でき、ほとんどは Google Fonts やその他のサービスで提供されています)。 ### カーニング ({{cssxref("font-kerning")}}) @@ -122,7 +124,8 @@ OpenType 特性の一般的な使用例の 1 つに、適切なスモールキ {{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}} -> **メモ:** これらのグリフはフォントサンプルからコピーされたもので、散文を意図したものではありません。 +> [!NOTE] +> これらのグリフはフォントサンプルからコピーされたもので、散文を意図したものではありません。 ### フォントの異体字の一括指定 ({{Cssxref("font-variant")}}) diff --git a/files/ja/web/css/css_fonts/variable_fonts_guide/index.md b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md index daabcaad67c88e..2f090165e15f30 100644 --- a/files/ja/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/ja/web/css/css_fonts/variable_fonts_guide/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/CSS_fonts/Variable_fonts_guide **可変フォント** (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、可変フォントの使用を開始するために知っておく必要があるすべての内容を説明します。 -> **メモ:** OS で可変フォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS は可変フォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールで可変フォントを使用できません。 +> [!NOTE] +> OS で可変フォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS は可変フォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールで可変フォントを使用できません。 ## 可変フォント: 何であるか、何が違うのか @@ -78,7 +79,8 @@ font-variation-settings: "wght" 375; 幅 (`wdth` タグで表される) は、文字の幅をどれだけ狭くするか、あるいは広くするか (植字用語でいう condensed または extended) というデザイン上の軸を定義します。これは通常、CSS で {{cssxref("font-stretch")}} プロパティを使用して設定され、値は「通常」(100%) の上または下のパーセント値で表されます。与えられた数値がフォントにエンコードされた範囲外である場合、ブラウザーは許容される最も近い値でフォントをレンダリングしなければなりません。 -> **メモ:** % 記号は `font-variation-settings` を使用する上では不要です。 +> [!NOTE] +> % 記号は `font-variation-settings` を使用する上では不要です。 ```css font-stretch: 115%; @@ -190,7 +192,8 @@ font-variation-settings: "GRAD" 88; } ``` -> **メモ:** この例では、上限の度数に特定の値が設定されていませんが、軸があることを示すことで、ブラウザーが直立かイタリックかを判断できるようになっています (イタリックはオンかオフしかないことを思い出してください)。 +> [!NOTE] +> この例では、上限の度数に特定の値が設定されていませんが、軸があることを示すことで、ブラウザーが直立かイタリックかを判断できるようになっています (イタリックはオンかオフしかないことを思い出してください)。 #### イタリック体のみを含み、直立文字を含まないフォントの例 @@ -216,7 +219,8 @@ font-variation-settings: "GRAD" 88; } ``` -> **メモ:** すべてのブラウザーがフォント指定形式の完全な構文を実装しているわけではないので、慎重にテストしてください。可変フォントに対応しているブラウザーはすべて、形式を format-variations ではなく、ファイル形式だけに設定してもレンダリングされますが (例：`woff2-variations` ではなく `woff2`)、可能であれば適切な構文を使用することをお勧めします。 +> [!NOTE] +> すべてのブラウザーがフォント指定形式の完全な構文を実装しているわけではないので、慎重にテストしてください。可変フォントに対応しているブラウザーはすべて、形式を format-variations ではなく、ファイル形式だけに設定してもレンダリングされますが (例：`woff2-variations` ではなく `woff2`)、可能であれば適切な構文を使用することをお勧めします。 > **メモ:** `font-weight`, `font-stretch`, `font-style` に値の範囲を指定した場合は、適切な属性 (すなわち `font-weight` や `font-stretch`) を使用していると、ブラウザーがその範囲外の軸をレンダリングしようとしないようにしますが、`font-variation-settings` で無効な値を指定した場合には、それを阻止することはできませんので注意して使用してください。 diff --git a/files/ja/web/css/css_functions/index.md b/files/ja/web/css/css_functions/index.md index bbcd8e948595cf..c1684e0245a6e2 100644 --- a/files/ja/web/css/css_functions/index.md +++ b/files/ja/web/css/css_functions/index.md @@ -22,7 +22,8 @@ selector { 関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によっては、複数の引数がカンマで区切られていたり、空白を使用していたりします。 -> **メモ:** CSS 値関数はプロパティ値として使用しますので、擬似クラスと混同しないでください。[関数形式の擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#関数擬似クラス)、[言語擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#言語擬似クラス)、または一部の[ツリー構造擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#ツリー構造擬似クラス)は引数を必要としますが、値関数ではありません。[条件付きアットルール](/ja/docs/Web/CSS/At-rule#conditional_group_rules)も値関数ではありません。括弧はグループ化のために使用しています。 +> [!NOTE] +> CSS 値関数はプロパティ値として使用しますので、擬似クラスと混同しないでください。[関数形式の擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#関数擬似クラス)、[言語擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#言語擬似クラス)、または一部の[ツリー構造擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#ツリー構造擬似クラス)は引数を必要としますが、値関数ではありません。[条件付きアットルール](/ja/docs/Web/CSS/At-rule#conditional_group_rules)も値関数ではありません。括弧はグループ化のために使用しています。 ## 座標変換関数 diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 0bf0cce530134d..9ff31d4a8d98f6 100644 --- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -478,7 +478,8 @@ CSS グリッドレイアウトについて学び、使っていく中で、こ {{ EmbedLiveSample('Positioning_items_against_lines', '230', '450') }} -> **メモ:** Firefox の開発者ツールで[グリッドインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。 +> [!NOTE] +> Firefox の開発者ツールで[グリッドインスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。 ### 線による配置の一括指定 @@ -529,7 +530,8 @@ _グリッドセル_ は、グリッド上の最も小さな単位です。コ } ``` -> **メモ:** グリッドが最初にブラウザーに実装されたとき、 {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} に `grid-` の接頭辞がつき、それぞれ `grid-column-gap`, `grid-row-gap`, `grid-gap` のようになっていました。 +> [!NOTE] +> グリッドが最初にブラウザーに実装されたとき、 {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} に `grid-` の接頭辞がつき、それぞれ `grid-column-gap`, `grid-row-gap`, `grid-gap` のようになっていました。 > > ブラウザーはすべて接頭辞なしの値に対応しましたが、接頭辞付きの版も安全に利用できるよう保守されるでしょう。 diff --git a/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md b/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md index 44be6c68855eeb..30485220c7e078 100644 --- a/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md +++ b/files/ja/web/css/css_grid_layout/grid_layout_using_line-based_placement/index.md @@ -464,7 +464,8 @@ l10n: CSS Grid 仕様書では、{{cssxref("column-gap")}} と {{cssxref("row-gap")}} プロパティを使って、列と行のトラックの間に溝を追加する機能があります。これらは、段組みレイアウトにおける {{cssxref("column-gap")}} プロパティと同様の働きをする間隔を指定します。 -> **メモ:** グリッドがブラウザーに初めて搭載されたとき、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}、{{cssxref("gap")}} プロパティには、それぞれ `grid-` という接頭辞が付けられ、`grid-column-gap`、`grid-row-gap`、`grid-gap` となっていました。 +> [!NOTE] +> グリッドがブラウザーに初めて搭載されたとき、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}、{{cssxref("gap")}} プロパティには、それぞれ `grid-` という接頭辞が付けられ、`grid-column-gap`、`grid-row-gap`、`grid-gap` となっていました。 > > ブラウザーのレンダリングエンジンはこの接頭辞を削除するように更新されていますが、接頭辞付きのバージョンは別名として維持されるため、安全に使用することができます。 diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md index 00312da21e12f5..53cad2bf810782 100644 --- a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md +++ b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/CSS_images/Implementing_image_sprites_in_CSS **画像スプライト**は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1 枚の画像として送信した方が、メモリーや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。 -> **メモ:** HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。 +> [!NOTE] +> HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。 ## 実装 diff --git a/files/ja/web/css/css_media_queries/printing/index.md b/files/ja/web/css/css_media_queries/printing/index.md index 03c3b87e9bc8b2..f7f9cd6645dba5 100644 --- a/files/ja/web/css/css_media_queries/printing/index.md +++ b/files/ja/web/css/css_media_queries/printing/index.md @@ -123,7 +123,8 @@ slug: Web/CSS/CSS_media_queries/Printing ``` -> **メモ:** 古いバージョン Internet Explorer は、非表示の {{HTMLElement("iframe")}} の印刷することができません。 +> [!NOTE] +> 古いバージョン Internet Explorer は、非表示の {{HTMLElement("iframe")}} の印刷することができません。 ## 関連情報 diff --git a/files/ja/web/css/css_media_queries/using_media_queries/index.md b/files/ja/web/css/css_media_queries/using_media_queries/index.md index 14783043b2af37..39092206177bca 100644 --- a/files/ja/web/css/css_media_queries/using_media_queries/index.md +++ b/files/ja/web/css/css_media_queries/using_media_queries/index.md @@ -13,7 +13,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries - {{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの [HTML](/ja/docs/Web/HTML) 要素で `media=` 属性を付けて特定のメディアを対象とする。 - [メディアの状態の検査と監視](/ja/docs/Web/CSS/Media_Queries/Testing_media_queries)をするために、[JavaScript](/ja/docs/Web/JavaScript) で {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用する -> **メモ:** このページの例では説明のために CSS の `@media` を使用していますが、基本構文はすべての種類のメディアクエリーで共通です。 +> [!NOTE] +> このページの例では説明のために CSS の `@media` を使用していますが、基本構文はすべての種類のメディアクエリーで共通です。 ## 構文 @@ -93,7 +94,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries `and` 演算子は、複数のメディア特性を 1 つのメディアクエリーに結合することもできます。一方で `not` 演算子は、メディアクエリーを反転し、基本的に普通の意味とは逆になります。 `only` 演算子は古いブラウザーでスタイルが適用されるのを防止します。 -> **メモ:** 多くの場合、 `all` メディア種別が他のタイプが指定されない場合に既定で使用されます。 +> [!NOTE] +> 多くの場合、 `all` メディア種別が他のタイプが指定されない場合に既定で使用されます。 > しかし、 `not` または `only` 演算子を使用する場合は、メディア種別を明示的に指定する必要があります。 ### 複数の種別または特性の組み合わせ @@ -167,7 +169,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリーを作れるよう構文が拡張されました。 Level 4 はこのようなクエリーを書くために*範囲コンテキスト*を追加しています。例えば、幅について `max-` の特性を使用する場合は、以下のように書くことができます。 -> **メモ:** Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は [`@media` ブラウザー互換性一覧表](/ja/docs/Web/CSS/@media#ブラウザーの互換性)を参照してください。 +> [!NOTE] +> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は [`@media` ブラウザー互換性一覧表](/ja/docs/Web/CSS/@media#ブラウザーの互換性)を参照してください。 ```css @media (max-width: 30em) { ... } diff --git a/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md b/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md index 1b3740d38acdf8..84adea1269f328 100644 --- a/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md +++ b/files/ja/web/css/css_multicol_layout/spanning_balancing_columns/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/CSS_multicol_layout/Spanning_balancing_columns このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。 -> **メモ:** このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。 +> [!NOTE] +> このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。 ## 段抜き diff --git a/files/ja/web/css/css_nesting/using_css_nesting/index.md b/files/ja/web/css/css_nesting/using_css_nesting/index.md index 2ab3fd4ae10b08..e0cddfafb1f3bd 100644 --- a/files/ja/web/css/css_nesting/using_css_nesting/index.md +++ b/files/ja/web/css/css_nesting/using_css_nesting/index.md @@ -13,7 +13,8 @@ CSS 入れ子は、 CSS プリプロセッサーで事前にコンパイルさ このガイドでは、CSSで入れ子を配置するさまざまな方法を示します。 -> **メモ:** 仕様の初期のバージョンでは、 [`&` 入れ子セレクター](/ja/docs/Web/CSS/Nesting_selector)がないと、[型セレクター](/ja/docs/Web/CSS/Type_selectors) を入れ子にすることができませんでした。これは更新され、`&` 入れ子セレクタは必要なくなりました。執筆時点で（2023 年 8 月）、 Firefox は新しいバージョンの仕様に対応していますが、 Chrome と Safariは 古いバージョンの仕様に対応しており、型セレクターの入れ子には `&` 入れ子セレクターを使用する必要があります。 +> [!NOTE] +> 仕様の初期のバージョンでは、 [`&` 入れ子セレクター](/ja/docs/Web/CSS/Nesting_selector)がないと、[型セレクター](/ja/docs/Web/CSS/Type_selectors) を入れ子にすることができませんでした。これは更新され、`&` 入れ子セレクタは必要なくなりました。執筆時点で（2023 年 8 月）、 Firefox は新しいバージョンの仕様に対応していますが、 Chrome と Safariは 古いバージョンの仕様に対応しており、型セレクターの入れ子には `&` 入れ子セレクターを使用する必要があります。 ## 子セレクター @@ -55,7 +56,8 @@ parent child { この例では、 `&` 入れ子セレクターを使用しない場合と使用する場合で、 `