aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/css_flexible_box_layout
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-09-14 23:03:58 +0900
committerGitHub <noreply@github.com>2021-09-14 23:03:58 +0900
commit57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02 (patch)
tree1474a1556c2a424b38813183bab570529ff39c90 /files/ja/web/css/css_flexible_box_layout
parent192e9f4e82a2ad89ac985e715d63b70be9bf5996 (diff)
downloadtranslated-content-57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02.tar.gz
translated-content-57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02.tar.bz2
translated-content-57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02.zip
Web/CSS以下の文書内のリンクURLを正規化 (#2368)
- /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正
Diffstat (limited to 'files/ja/web/css/css_flexible_box_layout')
-rw-r--r--files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html6
-rw-r--r--files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html2
-rw-r--r--files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html6
3 files changed, 7 insertions, 7 deletions
diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
index 7e8574e143..725f3b0e12 100644
--- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
+++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -126,7 +126,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain
<p><strong>注</strong>: <code>space-evenly</code> はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。</p>
</div>
-<p>上述の値についての詳細とブラウザー対応状況については <a href="/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p>
+<p>上述の値についての詳細とブラウザー対応状況については <a href="/ja/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p>
<h2 id="Aligning_content_on_the_main_axis" name="Aligning_content_on_the_main_axis">主軸上での位置合わせ</h2>
@@ -210,9 +210,9 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Contain
<p>この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 <code>align-content</code> と <code>justify-content</code> プロパティに <code>space-evenly</code> が導入されていることも紹介しました。</p>
-<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p>
+<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p>
-<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="https://developer.mozilla.org/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p>
+<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p>
<h2 id="See_Also" name="See_Also">関連情報</h2>
diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
index ef3f6ed3d9..6841280981 100644
--- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
+++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
@@ -3,7 +3,7 @@ title: フレックスアイテムの折り返しのマスター
slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
---
-<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p>
+<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p>
<h2 id="Making_things_wrap" name="Making_things_wrap">折り返しを行う</h2>
diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html
index 1eeaa99bbb..7ec4dbc572 100644
--- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html
+++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html
@@ -66,7 +66,7 @@ translation_of: >-
<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p>
-<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p>
+<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/ja/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p>
<p>CSS の <code>writing-mode</code> プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で <code>html</code> 要素に <code>dir</code> 属性と <code>lang</code> 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。</p>
@@ -84,7 +84,7 @@ translation_of: >-
<h2 id="Flexbox_and_Grid_Layout" name="Flexbox_and_Grid_Layout">フレックスボックとグリッドレイアウト</h2>
-<p><a href="/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p>
+<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p>
<p>ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。</p>
@@ -106,7 +106,7 @@ translation_of: >-
<p>経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。</p>
-<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p>
+<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p>
<h2 id="Flexbox_and_display_contents" name="Flexbox_and_display_contents">フレックスボックスと display: contents</h2>