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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: フローレイアウトとオーバーフロー
slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
tags:
- CSS
- overflow
- text-overflow
- ガイド
- フローレイアウト
- レイアウト
- 中級者
- 可視性
translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
---
<p class="summary">コンテナーに収まらない量のコンテンツがある場合、オーバーフローが発生します。どのようにオーバーフローが動作するかを理解することは、 CSS で制約された寸法で要素を扱うのに重要です。このガイドでは、通常フローで作業中にオーバーフローがどのように起こるかを説明します。</p>
<h2 id="What_is_overflow" name="What_is_overflow">オーバーフローとは</h2>
<p>Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:</p>
<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
<p>The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the <code><a href="/ja/docs//Web/CSS/overflow">overflow</a></code> property which has an initial value of <code>visible</code>. This is why we can see the overflow content.</p>
<h2 id="Controlling_overflow" name="Controlling_overflow">オーバーフローの制御</h2>
<p>There are other values that control how overflow content behaves. To hide overflowing content use a value of <code>hidden</code>. This may cause some of your content to not be visible.</p>
<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
<p>Using a value of <code>scroll</code> contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.</p>
<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
<p>Using a value of <code>auto</code> will display the content with no scrollbars if the content fits inside the box. If it doesn’t fit then scrollbars will be added. Comparing the next example with the example for <code>overflow: scroll</code> you should see <code>overflow scroll</code> has horizontal and vertical scrollbars when it only needs vertical scrolling. The <code>auto</code> example below only adds the scrollbar in the direct we need to scroll.</p>
<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
<p>As we have already learned, using any of these values, other than the default of <code>visible,</code> will create a new Block Formatting Context.</p>
<p>Note: In the <a href="https://www.w3.org/TR/css-overflow-3/">Working Draft of Overflow Level 3</a>, there is an additional value <code>overflow: clip</code>. This will act like <code>overflow: hidden</code> however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.</p>
<p>The overflow property is in reality a shorthand for the <code><a href="/ja/docs/Web/CSS/overflow-x">overflow-x</a></code> and <code><a href="/ja/docs/Web/CSS/overflow-y">overflow-y</a></code> properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for <code>overflow-x</code> and therefore the horizontal direction, and the second for <code>overflow-y</code> and the vertical direction. In the below example, I have only specified <code>overflow-y: scroll</code> so we do not get the unwanted horizontal scrollbar.</p>
<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
<h2 id="Flow_Relative_Properties" name="Flow_Relative_Properties">フロー関係のプロパティ</h2>
<p>In the guide to <a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Writing Modes and Flow Layout</a>, we looked at the newer properties of <code>block-size</code> and <code>inline-size</code> which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - <code><a href="/ja/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> and <code><a href="/ja/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. These correspond to <code>overflow-x</code> and <code>overflow-y</code> but the mapping depends on the writing mode of the document.</p>
<p>These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.</p>
<h2 id="Indicating_Overflow" name="Indicating_Overflow">オーバーフローの指示</h2>
<p>In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.</p>
<h3 id="Inline-Axis_Overflow" name="Inline-Axis_Overflow">インライン軸のオーバーフロー</h3>
<p>The <code><a href="/ja/docs/Web/CSS/text-overflow">text-overflow</a></code> property deals with text overflowing in the inline direction. It takes one of two values <code>clip</code>, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. We also have <code>ellipsis</code> which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.</p>
<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
<h3 id="Block-Axis_Overflow" name="Block-Axis_Overflow">ブロック軸のオーバーフロー</h3>
<p>There is also a proposal for a <code>block-overflow</code> property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.</p>
<p>This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.</p>
<h2 id="Summary" name="Summary">まとめ</h2>
<p>Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.</p>
<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
|
