files/ja/web/css/css_columns/handling_overflow_in_multicol/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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