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
|
---
title: overflow-x
slug: Web/CSS/overflow-x
tags:
- CSS
- CSS Box Model
- CSS Property
- CSS プロパティ
- CSS ボックスモデル
- Reference
- overflow
- 'recipe:css-property'
translation_of: Web/CSS/overflow-x
---
<div>{{CSSRef}}</div>
<p><strong><code>overflow-x</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。</p>
<div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
/* グローバル値 */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;
</pre>
<p><code>overflow-x</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>visible</code></dt>
<dd>内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 {{cssxref("overflow-y")}} が <code>hidden</code>, <code>scroll</code>, <code>auto</code> のいずれかであり、このプロパティが <code>visible</code> である場合は、暗黙に <code>auto</code> に計算します。</dd>
<dt><code>hidden</code></dt>
<dd>水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd>
<dt><code>clip</code> {{experimental_inline}}</dt>
<dd><code>hidden</code> のように、内容が要素のパディングボックスで切り取られます。 <code>clip</code> と <code>hidden</code> の違いは、 <code>clip</code> キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。</dd>
<dt><code>scroll</code></dt>
<dd>水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd>
<dt><code>auto</code></dt>
<dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd>
</dl>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><ul>
<li><code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
<div id="div1">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:scroll</code> — 常にスクロールバーを表示
<div id="div2">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
<div id="div3">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
<li><code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
<div id="div4">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
</div>
</li>
</ul>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">#div1, #div2, #div3, #div4 {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 { overflow-x: hidden;}
#div2 { overflow-x: scroll;}
#div3 { overflow-x: visible;}
#div4 { overflow-x: auto;}
</pre>
<h3 id="Result" name="Result">結果</h3>
<figure>
<p>{{EmbedLiveSample("Examples", "100%", "270")}}</p>
</figure>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<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-x', 'overflow-x')}}</td>
<td>{{Spec2('CSS3 Overflow')}}</td>
<td></td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.overflow-x")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
</ul>
|
