ja: Convert noteblocks to GFM Alerts (part 17)

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 17. Note: manual adjustments have also been made to correct some issues, including capitalization, syntax, duplicated keywords and more.

files/ja/web/css/layout_cookbook/card/index.md

@@ -21,7 +21,7 @@ slug: Web/CSS/Layout_cookbook/Card
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html)
 
@@ -40,7 +40,8 @@ slug: Web/CSS/Layout_cookbook/Card
 
 暗黙的にグリッドに作成された行は、既定で自動的にサイズ変更されるため、トラックにフッターがある場合は自動的にサイズ変更されます。 したがって、これは追加されたコンテンツに合わせられます。
 
-> **メモ:** 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 Grid Level 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。
+> [!NOTE]
+> 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 Grid Level 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。
 
 ## 有用な代替策またはその他の方法
 

files/ja/web/css/layout_cookbook/center_an_element/index.md

@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/Center_an_element
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html)
 

files/ja/web/css/layout_cookbook/column_layouts/index.md

@@ -29,7 +29,7 @@ slug: Web/CSS/Layout_cookbook/Column_layouts
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html)
 
@@ -47,15 +47,15 @@ slug: Web/CSS/Layout_cookbook/Column_layouts
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html)
 
 コンテナーの {{cssxref("flex-wrap")}} プロパティを `wrap` に設定すると、フレックスボックスを使用して、フレックスアイテムが新しい行に折り返されるレイアウトを作成することもできます。新しい行は行内のみで空間を配分します。 — 以下の例に示すように、新しい行の項目は上の行の項目と整列しません。これがフレックスボックスが一次元と呼ばれている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、両方を同時に制御するようには設計されていません。
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html)
 
@@ -71,7 +71,7 @@ slug: Web/CSS/Layout_cookbook/Column_layouts
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html)
 

files/ja/web/css/layout_cookbook/grid_wrapper/index.md

@@ -15,7 +15,7 @@ slug: Web/CSS/Layout_cookbook/Grid_wrapper
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロードする](https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html)
 

files/ja/web/css/layout_cookbook/index.md

@@ -7,7 +7,8 @@ slug: Web/CSS/Layout_cookbook
 
 CSS レイアウト料理帳は、よくあるレイアウトパターンや、自分のサイトに実装する可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。
 
-> **メモ:** CSS のレイアウトが初めてならば、最初に [CSS レイアウト学習モジュール](/ja/docs/Learn/CSS/CSS_layout)を見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。
+> [!NOTE]
+> CSS のレイアウトが初めてならば、最初に [CSS レイアウト学習モジュール](/ja/docs/Learn/CSS/CSS_layout)を見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。
 
 ## レシピ
 

files/ja/web/css/layout_cookbook/list_group_with_badges/index.md

@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/List_group_with_badges
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html)
 

files/ja/web/css/layout_cookbook/media_objects/index.md

@@ -23,7 +23,7 @@ slug: Web/CSS/Layout_cookbook/Media_objects
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 2700)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロードする](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html)
 
@@ -45,7 +45,7 @@ slug: Web/CSS/Layout_cookbook/Media_objects
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 3000)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html)
 

files/ja/web/css/layout_cookbook/pagination/index.md

@@ -21,7 +21,7 @@ l10n:
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/main/css-cookbook/pagination--download.html)
 

files/ja/web/css/layout_cookbook/split_navigation/index.md

@@ -17,7 +17,7 @@ slug: Web/CSS/Layout_cookbook/Split_Navigation
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html)
 

files/ja/web/css/layout_cookbook/sticky_footers/index.md

@@ -20,11 +20,12 @@ slug: Web/CSS/Layout_cookbook/Sticky_footers
 
 {{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}
 
-> **注目:**
+> [!CALLOUT]
 >
 > [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html)
 
-> **メモ:** この例と以下の例では、ライブ例がうまくいくように、 wrapper に `min-height: 100%` に設定して使用しています。 また、{{htmlelement("body")}} の {{cssxref("min-height")}} を `100vh` に設定し、それをグリッドコンテナーとして使用することで、ページ全体でこれを実現することもできます。
+> [!NOTE]
+> この例と以下の例では、ライブ例がうまくいくように、 wrapper に `min-height: 100%` に設定して使用しています。 また、{{htmlelement("body")}} の {{cssxref("min-height")}} を `100vh` に設定し、それをグリッドコンテナーとして使用することで、ページ全体でこれを実現することもできます。
 
 ## 行った選択
 

files/ja/web/css/layout_mode/index.md

@@ -15,7 +15,8 @@ slug: Web/CSS/Layout_mode
 - [_フレックスボックスレイアウト_](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)は、滑らかに大きさが変更できる複雑なページのレイアウトに使われます。
 - [_グリッドレイアウト_](/ja/docs/Web/CSS/CSS_grid_layout)は、固定グリッドを基準にした要素配置に使われます。
 
-> **メモ:** レイアウトモードによって、使える [CSS プロパティ](/ja/docs/Web/CSS/Reference)に制限があります。多くは 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。
+> [!NOTE]
+> レイアウトモードによって、使える [CSS プロパティ](/ja/docs/Web/CSS/Reference)に制限があります。多くは 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。
 
 ## 関連情報
 

files/ja/web/css/length/index.md

@@ -15,14 +15,16 @@ l10n:
 
 `<length>` データ型は一つの {{cssxref("&lt;number&gt;")}} とそれに続く以下に挙げる単位の一つから成ります。すべての CSS サイズと同様に、数値と単位リテラルの間に空白は置きません。数値が `0` の場合、長さの単位を指定することはオプションです。
 
-> **メモ:** 負の `<length>` 値を許容するプロパティとそうでないプロパティがあります。
+> [!NOTE]
+> 負の `<length>` 値を許容するプロパティとそうでないプロパティがあります。
 
 長さの[指定値](/ja/docs/Web/CSS/specified_value) (_specified length_) は、その量と単位で表します。長さの[計算値](/ja/docs/Web/CSS/computed_value) (_computed length_) は、指定した長さを絶対長に分解したもので、単位は判別されません。
 
 `<length>` の単位には相対的なものと絶対的なものがあります。相対的な長さは、他の距離から見た長さを表します。単位によって、この距離は特定の文字の大きさであったり、[行の高さ](/ja/docs/Web/CSS/line-height)であったり、{{Glossary("viewport", "ビューポート")}}の大きさであったりします。
 相対的な長さの単位を使用するスタイルシートは、ある出力環境から別の出力環境へ、より簡単に変倍することができます。
 
-> **メモ:** 子要素は親要素に指定した相対値を継承するのではなく、計算値を継承します。
+> [!NOTE]
+> 子要素は親要素に指定した相対値を継承するのではなく、計算値を継承します。
 
 ## 相対的な長さの単位
 
@@ -32,7 +34,8 @@ CSS の相対的な長さの単位は、フォント、コンテナー、ビュ
 
 フォントの長さは、 `<length>` の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性サイズで定義します。
 
-> **メモ:** これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更してもページの縦方向のリズムを維持する、変倍可能なレイアウトを作るためによく使われます。
+> [!NOTE]
+> これらの単位、特に `em` と `rem` は、ユーザーがフォントサイズを変更してもページの縦方向のリズムを維持する、変倍可能なレイアウトを作るためによく使われます。
 
 - `cap`
   - : その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。
@@ -91,17 +94,20 @@ CSS の相対的な長さの単位は、フォント、コンテナー、ビュ
 
     動的ビューポート単位は接頭辞 `dv` で表し、結果として `dv*` ビューポートパーセント値の単位になります。動的ビューポートパーセント値の単位のサイズは、ビューポート自体が変更されなくても安定しません。
 
-    > **メモ:** 動的ビューポートサイズはより細かく制御でき、柔軟性がありますが、動的ビューポートサイズに基づいてビューポートパーセント値の単位を使用すると、ユーザーがページをスクロールしている間にコンテンツのサイズを変更させる可能性があります。これはユーザーインターフェイスの劣化につながり、パフォーマンスヒットを発生させる可能性があります。
+    > [!NOTE]
+    > 動的ビューポートサイズはより細かく制御でき、柔軟性がありますが、動的ビューポートサイズに基づいてビューポートパーセント値の単位を使用すると、ユーザーがページをスクロールしている間にコンテンツのサイズを変更させる可能性があります。これはユーザーインターフェイスの劣化につながり、パフォーマンスヒットを発生させる可能性があります。
 
 - **既定ビューポートサイズ**
 
   - : 既定ビューポートサイズはブラウザーによって定義されます。ビューポートパーセント値の単位の動作結果は、小ビューポートサイズ、大ビューポートサイズ、 2 つの間の中間サイズ、動的ビューポートサイズのいずれかに基づくビューポートパーセント値の単位と同等になる可能性があります。
 
-    > **メモ:** 例えば、あるブラウザーは既定で高さのビューポートパーセント値の単位 (`vh`) を実装しているかもしれませんが、これは大ビューポートパーセント値の高さ単位 (`lvh`) と同じです。といった具合に、ブラウザーインターフェイスが展開されている間、全ページ表示のコンテンツが見えなくなる可能性があります。
+    > [!NOTE]
+    > 例えば、あるブラウザーは既定で高さのビューポートパーセント値の単位 (`vh`) を実装しているかもしれませんが、これは大ビューポートパーセント値の高さ単位 (`lvh`) と同じです。といった具合に、ブラウザーインターフェイスが展開されている間、全ページ表示のコンテンツが見えなくなる可能性があります。
 
 ビューポートパーセント値の長さは、 `<length>` を初期[包含ブロック](/ja/docs/Web/CSS/Containing_block)のサイズに対するパーセント値で定義し、この値は{{Glossary("viewport", "ビューポート")}}またはページ領域、つまり文書内の可視部分のサイズに基づいています。初期包含ブロックの高さや幅が変更されると、それに基づいてサイズ調整される要素はそれに応じて変倍されます。下記のように、ビューポートサイズのそれぞれに対応するビューポートパーセント値の長さの単位が変化します。
 
-> **メモ:** ビューポートの長さは {{cssxref("@page")}} 宣言ブロックでは無効になります。
+> [!NOTE]
+> ビューポートの長さは {{cssxref("@page")}} 宣言ブロックでは無効になります。
 
 - `vh`
 
@@ -183,7 +189,8 @@ CSS の相対的な長さの単位は、フォント、コンテナー、ビュ
 
 高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。
 
-> **メモ:** たくさんのユーザーが、テキストが読みやすくなるよう{{Glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、（`em` や `rem` のような）相対的な単位が適しています。
+> [!NOTE]
+> たくさんのユーザーが、テキストが読みやすくなるよう{{Glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、（`em` や `rem` のような）相対的な単位が適しています。
 
 - `px`
   - : 1 ピクセルです。画面表示では、伝統的に端末の 1 ピクセル (ドット) を表します。しかし、*プリンター*や*高解像度の画面*では、 CSS の 1 ピクセルが端末の複数ピクセルになることがあります。 `1px` = `1in / 96` です。

files/ja/web/css/list-style-image/index.md

@@ -11,7 +11,8 @@ slug: Web/CSS/list-style-image
 
 {{EmbedInteractiveExample("pages/css/list-style-image.html")}}
 
-> **メモ:** このプロパティはリスト項目、つまり、`{{cssxref("display")}}: list-item;` が指定された要素に対して適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
+> [!NOTE]
+> このプロパティはリスト項目、つまり、`{{cssxref("display")}}: list-item;` が指定された要素に対して適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
 
 ## 構文
 

files/ja/web/css/list-style-position/index.md

@@ -11,7 +11,8 @@ slug: Web/CSS/list-style-position
 
 多くの場合、一括指定の {{cssxref("list-style")}} を使ったほうが便利です。
 
-> **メモ:** このプロパティはリスト項目に対して適用されます。つまり、 `{{cssxref("display")}}: list-item;` が指定された要素です。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素が該当します。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
+> [!NOTE]
+> このプロパティはリスト項目に対して適用されます。つまり、 `{{cssxref("display")}}: list-item;` が指定された要素です。[既定では](https://www.w3.org/TR/html5/rendering.html#lists)、 {{HTMLElement("li")}} 要素が該当します。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。
 
 なお、 `list-style-position: inside` を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については [Firefox バグ 36854](https://bugzil.la/36854) をご覧ください。
 

files/ja/web/css/list-style/index.md

@@ -9,7 +9,8 @@ slug: Web/CSS/list-style
 
 {{EmbedInteractiveExample("pages/css/list-style.html")}}
 
-> **メモ:** このプロパティはリスト項目、すなわち `{{cssxref("display")}}: list-item;` の要素に適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists) {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。
+> [!NOTE]
+> このプロパティはリスト項目、すなわち `{{cssxref("display")}}: list-item;` の要素に適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists) {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。
 
 ## 構成要素のプロパティ