-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
245 lines (189 loc) · 10.6 KB
/
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
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
---
title: <overflow>
slug: Web/CSS/overflow_value
l10n:
sourceCommit: afaf3aeeffa8408cf0a8a46c3d8fb0d347aad9f5
---
{{CSSRef}}
**`<overflow>`** {{glossary("enumerated", "列挙")}}値型は、{{cssxref("overflow-block")}}、{{cssxref("overflow-inline")}}、{{cssxref("overflow-x")}}、{{cssxref("overflow-y")}} の個別指定プロパティと {{cssxref("overflow")}} 一括指定プロパティのキーワード値を表します。これらのプロパティは、ブロックコンテナー、フレックスコンテナー、グリッドコンテナーに適用されます。
## 構文
```plain
<overflow> = visible | hidden | clip | scroll | auto
```
## 値
列挙型の値 `<overflow>` は、下記の一覧のいずれかの値を使用して指定します。
- `visible`
- : はみ出したコンテンツは切り取られず、要素のパディングボックス外に表示されることがあります。要素ボックスは{{glossary("scroll container", "スクロールコンテナー")}}にはなりません。これが `<overflow>` 列挙型を持つすべてのプロパティの既定値です。
- `hidden`
- : はみ出したコンテンツは要素のパディングボックスで切り取られます。スクロールバーはなく、切り取られたコンテンツは表示されません(つまり、切り取られたコンテンツは非表示になります)が、コンテンツは存在します。ユーザーエージェントはスクロールバーを追加しませんし、タッチ画面をドラッグしたり、マウスのスクロールホイールを使用したりする操作によって、ユーザーが切り取られた領域の外にあるコンテンツを表示することもできません。要素はプログラムによって(例えば、 {{domxref("Element.scrollLeft", "scrollLeft")}} プロパティや {{domxref("Element.scrollTo", "scrollTo()")}} メソッドの値を設定することで)コンテンツをスクロールすることができます。コンテンツは、キーボード操作でもスクロールすることができます。矢印でコンテンツをスクロールすることができ、隠されたコンテンツ内のフォーカス可能な要素へタブ操作をすると、フォーカスされた要素をビューにスクロールさせることができます。この値が設定されている要素ボックスは、スクロールコンテナーになります。
- `clip`
- : はみ出したコンテンツは、 [`overflow-clip-margin`](/ja/docs/Web/CSS/overflow-clip-margin) プロパティを使用して定義した要素の _オーバーフロークリップ辺_ でクリップされます。その結果、コンテンツは要素のパディングボックスから `overflow-clip-margin` の {{cssxref("<length>")}} 値、または設定されていない場合は `0px` だけはみ出します。クリップ領域外にはみ出したコンテンツは表示されず、ユーザーエージェントはスクロールバーを表示させず、プログラムによるスクロールにも対応しません。新しい[整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context)は作成されません。
- `scroll`
- : はみ出したコンテンツは要素のパディングボックスでクリップされ、はみ出したコンテンツはスクロールバーを使用してスクロールして表示することができます。ユーザーエージェントは、コンテンツがはみ出したり切り取られたりするかどうかにかかわらず、 1 つの値だけを設定すると水平方向と垂直方向の��方にスクロールバーを表示します。したがって、このキーワード値を使用することで、コンテンツの変更に伴ってスクロールバーが現れたり消えたりするのを防ぐことができます。プリンターでは、はみ出したコンテンツが出力されることがあります。この値が設定されている要素ボックスは、スクロールコンテナーになります。
- `auto`
- : はみ出したコンテンツは要素のパディングボックスで切り取られ、はみ出したコンテンツはスクロールして表示することができます。 `scroll` とは異なり、ユーザーエージェントはコンテンツがはみ出した場合のみスクロールバーを表示し、既定ではスクロールバーを非表示にします。コンテンツが要素のパディングボックス内に収まる場合、 `visible` と同じように見えますが、新しい整形コンテキストが確立されます。この値が設定された要素ボックスはスクロールコンテナーになります。
> **メモ:** キーワード値 `overlay` は `auto` の古い値の別名です。 `overlay` を指定すると、スクロールバーは空間を占めるのではなく、コンテンツの上に描画されます。
## 例
この例では、 {{cssxref("overflow")}} プロパティの `<overflow>` 列挙値をすべてデモしています。
### HTML
この例の HTML は {{HTMLELement("pre")}} 要素内にいくつかの歌詞を格納しています。 HTML はまた、オーバーフローとスクロールの動作に対するキーボードフォーカスの効果をテストできるようにリンクテキストを格納しています。それぞれの `<overflow>` 列挙値の効果を表示させるために、同じ HTML コードが複数回繰り返されています。
```html
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you
Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true
Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby
<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
```
```html hidden
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you
Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true
Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby
<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you
Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true
Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby
<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you
Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true
Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby
<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you
Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true
Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby
<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
<pre>
Oh, Rubber Duckie, you're the one
You make bath time lots of fun
Rubber Duckie, I'm awfully fond of you
Rubber Duckie, joy of joys
When I squeeze you, you make noise
Rubber Duckie, you're my very best friend, it's true
Oh, every day when I make my way to the tubby
I find a little fella who's cute and yellow and chubby
Rub-a-dub-dubby
<a href="#">Rubber Duckie</a>, you're so fine
And I'm lucky that you're mine
Rubber Duckie, I'm awfully fond of you
</pre>
```
### CSS
デモのため、`<pre>`要素のボックスのサイズは、インラインとブロックの両方向でコンテンツがそのコンテナーから確実にはみ出すように定義されています。繰り返される `<pre>` 要素にはそれぞれ異なる `<overflow>` 値が設定されています。 `clip` 値のデモのために、 {{CSSXref("overflow-clip-margin")}} を追加しています。
```css hidden
pre {
border: 2px dashed red;
margin-bottom: 3em;
}
::before {
font-weight: bold;
color: white;
background: crimson;
display: inline-block;
width: 100%;
padding: 3px 5px;
box-sizing: border-box;
}
```
```css
pre {
block-size: 100px;
inline-size: 295px;
}
pre:nth-of-type(1) {
overflow: hidden;
}
pre:nth-of-type(1)::before {
content: "hidden: ";
}
pre:nth-of-type(2) {
overflow: clip;
overflow-clip-margin: 1em;
}
pre:nth-of-type(2)::before {
content: "clip: ";
}
pre:nth-of-type(3) {
overflow: scroll;
}
pre:nth-of-type(3)::before {
content: "scroll: ";
}
pre:nth-of-type(4) {
overflow: auto;
}
pre:nth-of-type(4)::before {
content: "auto: ";
}
pre:nth-of-type(5) {
overflow: clip;
overflow: overlay;
overflow-clip-margin: 3em;
}
pre:nth-of-type(5)::before {
content: "overlay (対応していない場合は clip): ";
}
pre:nth-of-type(6) {
overflow: visible;
}
pre:nth-of-type(6)::before {
content: "visible: ";
}
```
### 結果
{{EmbedLiveSample("Examples", "500", "800")}}
キーボードフォーカスがオーバーフローやスクロールの動作に与える効果を見るには、例えばこの例のリンクをすべてタブで表示してみてください。 `clip` ボックスはスクロールコンテナーを作成せず、リンクにフォーカスが当たってもリンクが表示されないことに注意してください。常にリンクが表示されている `visible` 値もスクロールコンテナーにはなりません。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- このデータ型を使用するプロパティ: {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow")}}
- [CSS オーバーフローモジュール](/ja/docs/Web/CSS/CSS_overflow)