From bc58322a79773ded93b6deb6687b57f8bba3407c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 11:42:52 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handling_overflow_in_multicol/index.md | 45 ++++++++++++---------- 1 file changed, 25 insertions(+), 20 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.md b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.md index 0840b1ef0c..0e5ec26558 100644 --- a/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.md +++ b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.md @@ -1,44 +1,49 @@ --- title: 段組みでのはみ出しの扱い slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +tags: + - CSS + - CSS 段組みレイアウト + - ガイド + - レイアウト translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol --- -
{{CSSRef}}
+{{CSSRef}} -

このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。

+このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容物がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。 -

段ボックス内でのはみ出し

+## 段ボックス内でのはみ出し -

はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が column-width の幅、または column-count で宣言された段数に基づく段の幅よりも広い場合に発生します。

+はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が `column-width` の幅、または `column-count` で宣言された段数に基づく段の幅よりも広い場合に発生します。 -

この場合、内容は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。

+この場合、内容物は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。 -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}} -

+![](image-overflow-multicol.png) -

画像を段ボックスに合うよう縮小したい場合は、 max-width: 100% を設定する標準的なレスポンシブ画像の解決方法で実現することができます。

+画像を段ボックスに合うよう縮小したい場合は、 `max-width: 100%` を設定する標準的なレスポンシブ画像の解決方法で実現することができます。 -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}} -

より多くの段が生成される場合

+## より多くの段が生成される場合 -

印刷のような断片化メディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。

+印刷のような断片化されたメディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。 -

断片化メディアでは、1つの断片 (例えば1ページ) が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、これはスクロールバーが出現することを意味します。

+断片化されたメディアでは、 1 つの断片（例えば 1 ページ）が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、ここでスクロールバーが出現します。 -

以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。

+以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。 -

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}} -

将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。

+将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。 -

垂直メディアクエリの使用

+## 垂直メディアクエリーの使用 -

ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなります。これを防ぐ一つの方法が、十分な高さがあると分かった時に段組みプロパティを適用することです。

+ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなるというものがあります。これを防ぐ一つの方法が、十分な高さがあると分かった時にだけ段組みプロパティを適用することです。 -

以下の例では、 min-height クエリを使用して、段組みプロパティを適用する前に高さを検査します。

+以下の例では、 `min-height` クエリーを使用して、段組みプロパティを適用する前に高さを検査します。 -

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}} -

このシリーズの最後のガイドでは、段組みが断片化仕様でどのように動作するかを見て、段をまたいで内容が分割される方法を制御します。

+このシリーズの最後のガイドでは、[段組みが断片化仕様でどのように動作するか](/ja/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol)を見て、段をまたいで内容が分割される方法を制御します。 -- cgit v1.2.3-54-g00ecf