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
|
---
title: 要素のはみ出し（オーバーフロー）
slug: Learn/CSS/Building_blocks/Overflowing_content
tags:
- Beginner
- Block Formatting Context
- CSS
- Data Loss
- Learn
- overflow
translation_of: Learn/CSS/Building_blocks/Overflowing_content
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
<p><font><font>このレッスンでは、CSS のもう1つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td>
</tr>
<tr>
<th scope="row">目的:</th>
<td>オーバーフローとその管理方法を理解する。</td>
</tr>
</tbody>
</table>
<h2 id="What_is_overflow" name="What_is_overflow">オーバーフロー (overflow) とは？</h2>
<p><font><font>CSS のすべてがボックスであり、 </font></font>{{cssxref("width")}} <font><font>と </font></font>{{cssxref("height")}}<font><font>（または </font></font>{{cssxref("inline-size")}} や<font><font> </font></font>{{cssxref("block-size")}}<font><font>) の値を与えることにより、これらのボックスのサイズを制御できることを見てきました。</font><font>オーバーフローはボックス内のコンテンツが多すぎる場合に発生し、快適に収まらないという状態です。</font><font>CSS はこのオーバーフローを管理するためのさまざまなツールを提供しますが、早めに理解しておくと役立つ概念でもあります。</font><font>CSS を書いていると、とりわけ CSS によるレイアウトを深く理解していくにつれ、オーバーフローによく出くわします。</font></font></p>
<h2 id="CSS_tries_to_avoid_data_loss" name="CSS_tries_to_avoid_data_loss">CSS のデータ損失の回避</h2>
<p>オーバーフローが発生した場合の CSS の既定の動作を示す2つの例を見てみましょう。</p>
<p>1つめの例です。まずブロックに <code>height</code> でボックスの高さを制限します。そしてそのスペースよりも多くのコンテンツを追加します。コンテンツはボックスからはみ出し、下の段落にかぶさってしまいます。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
<p>2つめに、インラインとして制限されているボックス内の単語の例です。ボックスは単語が収まらないほど小さいため、ボックスからはみ出てしまいます。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
<p><font>CSS のこの既定のアプローチは、コンテンツをかなり乱雑にオーバーフローさせているように感じられるかもしれません。</font><font>追加のコンテンツを非表示にしたり、ボックスを大きくさせたりしないのはなぜなのでしょう。</font></p>
<p>CSS は可能な限りコンテンツを隠しません。これをやってしまうと、通常は問題となりうるデータ損失が発生するためです。CSS はこのようにコンテンツが消えることを懸念します。コンテンツが消失したことに気付かない可能性があるのは問題だからです。見ている人は消えたことに気付かないかもしれません。フォーム上の送信ボタンが消えてしまい、フォームが完了できない場合それは大きな問題です。代わりに CSS は目に見える方法でオーバーフローしようとします。あなたもしくは訪問者がコンテンツが重なっているという状況に気づき、修正が必要であることを知ることができます。</p>
<p>ボックスを <code>width</code> または <code>height</code> で制御している場合、CSS は<font>オーバーフローの可能性が管理されていると想定します。</font>一般にボックスにテキストがある場合、ブロックのサイズを制御することは問題になりがちです。例えば、想定していたよりも多くのテキストになってしまったか、フォントサイズを大きくした場合などです。 </p>
<p><font>次のいくつかのレッスンでは、オーバーフローを起こしにくいサイジング方法を見ていきます。</font><font>固定サイズが必要な場合は、オーバーフローの動作を制御することもできます。</font><font>読み進めましょう。</font></p>
<h2 id="The_overflow_property" name="The_overflow_property">overflow プロパティ</h2>
<p>{{cssxref("overflow")}} プロパティは要素のオーバーフローを制御し、ブラウザにどのように動作させるかを伝えます。既定値は <code>visible</code> のため、オーバーフロー時にコンテンツは表示されます。</p>
<p>オーバーフロー時にコンテンツをトリミングしたい場合、<code>overflow: hidden</code> をボックスに指定します。これは文字通り、はみ出たものを見えなくします。これにより内容が隠れてしまうことが起こりうるため、コンテンツが非表示になっても問題にならない場合にのみに限定した方がいいでしょう。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
<p>コンテンツのオーバーフロー時にスクロールバーを表示したいこともあるでしょう。 <code>overflow: scroll</code> を指定すればコンテンツがオーバーフローしない場合でも、ブラウザーはスクロールバーを表示します。コンテンツに応じてスクロールバーが表示されたり消えたりするのを防ぐため、これが必要な場合があります。</p>
<p><strong><font><font>下のボックスからコンテンツの一部を削除すると、スクロールするものがなくてもスクロールバー（または少なくともトラック部品）が残っていることがわかります。</font></font></strong></p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
<p>上記の例では <code>y</code> 軸のスクロールバーだけがあればいいのですが、横スクロールバーも表示されてしまいます。{{cssxref("overflow-y")}} プロパティを使えば、<code>y</code> 軸のみのスクロールバーを指定できます。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
<p>{{cssxref("overflow-x")}} を使用して、x 軸のみのスクロールバーを表示できますが、文字が見切れてしまうことの回避策としては推奨されません。小さなボックスで長い文字列を処理する場合は、{{cssxref("word-break")}} や {{cssxref("overflow-wrap")}} を検討してください。<a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a> で説明した方法のいくつかは、さまざまな量のコンテンツに適切に対応するボックスを作成するのに役立つ場合があります。</p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
<p><code>scroll</code> にしておけばコンテンツが少ないとしても、それとは関係なくスクロールバーは常に表示されます。</p>
<div class="blockIndicator note">
<p><strong>注</strong>: <code>overflow</code> プロパティでは x と y の2つの値を渡すことができることに注意してください。2つのキーワードが指定されている場合、ひとつめは <code>overflow-x</code>、2つめは <code>overflow-y</code> として適用されます。それ以外の場合は <code>overflow-x</code> と <code>overflow-y</code> の両方に同じ値が設定されます。例えば、<code>overflow: scroll hidden</code> とした場合は、<code>overflow-x</code> は <code>scroll</code>、<code>overflow-y</code> は <code>hidden</code> となります。</p>
</div>
<p>コンテンツがボックスに収まらない場合にのみ、スクロールバーを表示する場合は <code>overflow: auto</code> を使用します。<font>この場合、スクロールバーを表示するかどうかはブラウザーによります。</font><font>通常、デスクトップブラウザはコンテンツがオーバーフローする場合にのみそうします。</font></p>
<p><strong>以下の例では、ボックスに収まるまでコンテンツを削除していくとスクロールバーが消えます。</strong></p>
<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
<h2 id="Overflow_establishes_a_Block_Formatting_Context" name="Overflow_establishes_a_Block_Formatting_Context">オーバーフローとブロック整形コンテキスト</h2>
<p>CSS には <strong>ブロック整形コンテキスト</strong> (BFC = Block Formatting Context) の概念があります。<font>これは今のところあまり気にする必要はありませんが、</font><code>scroll</code> や <code>auto</code> などのオーバーフローの設定で BFC が作成されることを知っておくと便利です。結果として <code>overflow</code> の値を変更したボックスのコンテンツは、独自のミニレイアウトになります。コンテナの外側の物は中に突っ込むことができず、ボックスから周囲のレイアウトに突き出すこともできません。これによってボックスにはすべてのコンテンツが含まれており、かつ、ページ上の他のアイテムと重ならないという、一貫したスクロール体験を生み出します。</p>
<h2 id="Unwanted_overflow_in_web_design" name="Unwanted_overflow_in_web_design">オーバーフローの望ましくないウェブデザイン</h2>
<p>モダンなレイアウト手法（<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a> モジュールで説明）では、オーバーフローを管理します。これらの方法は、ウェブページ上にどれだけのコンテンツが存在するかについての仮定や依存関係なしに大きく機能します。</p>
<p>しかし過去には開発者は多くの場合、固定された高さを使用して、実際には互いに関係のないボックスの底を揃えようとしました。<font>それは脆く、レガシーなアプリケーションでは、コンテンツが他のコンテンツに重なってしまっているのを見かけることがあります。</font><font>それによってオーバーフローが起きていることがわかります。</font><font>理想としては、ボックスサイズの固定に依存しないようにレイアウトを調整します。</font></p>
<p>サイトを開発するときは、常にオーバーフローの問題に留意する必要があります。大量のコンテンツと少量のコンテンツを含むデザインをテストし、テキストのフォントサイズを大きくし、CSS が堅牢に対処できていると確認する必要があります。オーバーフローの値を変更してコンテンツを非表示にしたりスクロールバーを追加したりするのは、特別な場合（例えばスクロールが本当に必要な場合など）にのみ使うべきです。</p>
<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2>
<p>このレッスンで吸収すべきことはたくさんあります！ あなたは最も重要な情報を覚えていますか？ あなたの理解度を確認するには、<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p>
<h2 id="Summary" name="Summary">まとめ</h2>
<p><font>この短いレッスンではオーバーフローの概念を紹介しました。CSS はオーバーフローしたコンテンツが見えなくなることによる、データ損失の回避を試みることを理解しました。潜在的なオーバーフローを管理できること、また、問題のあるオーバーフローを引き起こしてしまわないかを確認する必要があることもわかりました。</font></p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
<ol>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a>
<ul>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li>
</ul>
</li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li>
<li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li>
</ol>
|
