blob: af2c366dc742774901c6111fc83214594f659cf6 (
plain)
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
74
75
76
77
78
79
80
|
---
title: CSS オーバーフロー
slug: Web/CSS/CSS_Overflow
tags:
- CSS
- ガイド
- overflow
- スクロールバー
- スクロール
translation_of: Web/CSS/CSS_Overflow
---
{{CSSRef}}
**CSS オーバーフロー**モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。
## インクオーバーフローとスクロール可能なオーバーフロー
CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。 1 つ目は**インクオーバーフロー**と呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出した文字、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。
CSS で時に管理しなければならないオーバーフローを**スクロール可能なオーバーフロー**と呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。
## 基本的な例
次のインタラクティブなデモでは、 `overflow` プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。
{{EmbedInteractiveExample("pages/css/overflow.html")}}
## リファレンス
### CSS プロパティ
- {{CSSxRef("overflow")}}
- {{CSSxRef("overflow-block")}}
- {{CSSxRef("overflow-inline")}}
- {{CSSxRef("overflow-x")}}
- {{CSSxRef("overflow-y")}}
- {{CSSxRef("text-overflow")}}
- {{CSSxRef("block-overflow")}} {{experimental_inline}}
- {{CSSxRef("line-clamp")}} {{experimental_inline}}
- {{CSSxRef("max-lines")}} {{experimental_inline}}
- {{CSSxRef("continue")}} {{experimental_inline}}
### 標準外のプロパティ
- {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}
## 仕様書
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}
</td>
<td>{{Spec2('CSS3 Overflow')}}</td>
<td>
<p>構文を 1 つだけでなく 1 つまたは 2 つのキーワードに変更した</p>
</td>
</tr>
<tr>
<td>
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}
</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
## 関連情報
- スクロールバーの外見を制御する {{CSSxRef("scrollbar-width")}} および {{CSSxRef("scrollbar-color")}} プロパティ
- [スクロール可能なオーバーフローのデバッグ](/ja/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow)の方法
|
