HTML/CSS
初心者でもスッキリ分かる！nth-childとnth-of-typeの基本と実践例
2025.12.15
overflowの使い方まとめ｜テキストや要素のはみ出しを防ぐ方法
2025.08.04
1. はじめに
HTMLでWebサイトを制作しているときに、要素の中のコンテンツがはみ出してしまったことはありませんか？
今回は、はみ出した要素をどのように扱うかを決めるCSSプロパティ「overflow（オーバーフロー）」について、初心者の方にもわかりやすく解説していきます。
2. overflowとは？
overflowは、コンテンツが親要素からはみ出したときに、どのように表示するかを指定するCSSプロパティです。
たとえば、幅200pxのボックスに対して、300px分のテキストが入った場合、そのうちの100px分が「はみ出す」状態になります。
このような「はみ出し」をどのように扱うかを、overflowで指定することができます。
また、例のようにoverflowを使用する際は、親要素であるボックスの幅が固定されている必要がある点にも注意しましょう。
3. overflowの主なプロパティ値と意味
以下がよく使われる値です。
| 値 | 説明 |
|---|---|
| visible | 初期値。はみ出した部分もそのまま表示される（スクロールバーなし） |
| hidden | はみ出した部分は表示されず、見えなくなる |
| scroll | はみ出しの有無にかかわらずスクロールバーが常に表示される |
| auto | はみ出したときだけ自動的にスクロールバーが表示される |
4. 実例コードで動作をチェック
以下のようにHTMLとCSSを記述しoverflowに前章で挙げたプロパティ値をあてた際の動作を見ていきましょう。
HTML
<div class="box">
<p> /* 今回は長い文章の一例として宮沢賢治の「雨ニモマケズ」を載せる */<p>
</div>
CSS
.overfloww_box {
margin: 0 auto;
width: 400px;
height: 200px;
border: 2px dashed #333;
overflow: /* ここに各プロパティ値を当てていく */;
}
visible
雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズイツモシヅカニワラッテヰル一日ニ玄米四合ト味噌ト少シノ野菜ヲタベアラユルコトヲジブンヲカンジョウニ入レズニヨクミキキシワカリソシテワスレズ野原ノ松ノ林ノ蔭小サナ萓ブキノ小屋ニヰテ東ニ病気ノコドモアレバ行ッテ看病シテヤリ西ニツカレタ母アレバ行ッテソノ稲ノ朿ヲ負ヒ南ニ死ニサウナ人アレバ行ッテコハガラナクテモイヽトイヒ北ニケンクヮヤソショウガアレバツマラナイカラヤメロトイヒヒドリノトキハナミダヲナガシサムサノナツハオロオロアルキミンナニデクノボートヨバレホメラレモセズクニモサレズサウイフモノニワタシハナリタイ
overflow: visible;は、はみ出した部分をそのまま表示する設定です。
特に指定しなければ、これが初期値として適用されます。
hidden
雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズイツモシヅカニワラッテヰル一日ニ玄米四合ト味噌ト少シノ野菜ヲタベアラユルコトヲジブンヲカンジョウニ入レズニヨクミキキシワカリソシテワスレズ野原ノ松ノ林ノ蔭小サナ萓ブキノ小屋ニヰテ東ニ病気ノコドモアレバ行ッテ看病シテヤリ西ニツカレタ母アレバ行ッテソノ稲ノ朿ヲ負ヒ南ニ死ニサウナ人アレバ行ッテコハガラナクテモイヽトイヒ北ニケンクヮヤソショウガアレバツマラナイカラヤメロトイヒヒドリノトキハナミダヲナガシサムサノナツハオロオロアルキミンナニデクノボートヨバレホメラレモセズクニモサレズサウイフモノニワタシハナリタイ
overflow: hidden;は、はみ出した部分をカットして表示しない設定です。
この指定をすると、ボックスの外にはみ出た部分は完全に見えなくなります。スクロールもできません。
scroll
雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズイツモシヅカニワラッテヰル一日ニ玄米四合ト味噌ト少シノ野菜ヲタベアラユルコトヲジブンヲカンジョウニ入レズニヨクミキキシワカリソシテワスレズ野原ノ松ノ林ノ蔭小サナ萓ブキノ小屋ニヰテ東ニ病気ノコドモアレバ行ッテ看病シテヤリ西ニツカレタ母アレバ行ッテソノ稲ノ朿ヲ負ヒ南ニ死ニサウナ人アレバ行ッテコハガラナクテモイヽトイヒ北ニケンクヮヤソショウガアレバツマラナイカラヤメロトイヒヒドリノトキハナミダヲナガシサムサノナツハオロオロアルキミンナニデクノボートヨバレホメラレモセズクニモサレズサウイフモノニワタシハナリタイ
overflow: scroll;は、はみ出しがあってもなくても、スクロールバーを常に表示する設定です。
スクロールバーは出ますが、ユーザーが使わない可能性もあるため、少し不自然になることもあります。
雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズイツモシヅカニワラッテヰル一日ニ玄米四合ト味噌ト少シノ野菜ヲタベアラユルコトヲジブンヲカンジョウニ入レズニヨクミキキシワカリソシテワスレズ野原ノ松ノ林ノ蔭小サナ萓ブキノ小屋ニヰテ東ニ病気ノコドモアレバ行ッテ看病シテヤリ西ニツカレタ母アレバ行ッテソノ稲ノ朿ヲ負ヒ南ニ死ニサウナ人アレバ行ッテコハガラナクテモイヽトイヒ北ニケンクヮヤソショウガアレバツマラナイカラヤメロトイヒヒドリノトキハナミダヲナガシサムサノナツハオロオロアルキミンナニデクノボートヨバレホメラレモセズクニモサレズサウイフモノニワタシハナリタイ
white-space: nowrap;等で文章を改行しない場合は横にスクロールする
auto
雨ニモマケズ風ニモマケズ雪ニモ夏ノ暑サニモマケヌ丈夫ナカラダヲモチ慾ハナク決シテ瞋ラズイツモシヅカニワラッテヰル一日ニ玄米四合ト味噌ト少シノ野菜ヲタベアラユルコトヲジブンヲカンジョウニ入レズニヨクミキキシワカリソシテワスレズ野原ノ松ノ林ノ蔭小サナ萓ブキノ小屋ニヰテ東ニ病気ノコドモアレバ行ッテ看病シテヤリ西ニツカレタ母アレバ行ッテソノ稲ノ朿ヲ負ヒ南ニ死ニサウナ人アレバ行ッテコハガラナクテモイヽトイヒ北ニケンクヮヤソショウガアレバツマラナイカラヤメロトイヒヒドリノトキハナミダヲナガシサムサノナツハオロオロアルキミンナニデクノボートヨバレホメラレモセズクニモサレズサウイフモノニワタシハナリタイ
overflow: auto;は、はみ出したときだけ自動でスクロールバーを表示する設定です。
必要がなければスクロールバーは表示されず、はみ出したときだけ表示されるので、見た目がスッキリします。
5. overflow-xとoverflow-yについて
横方向・縦方向だけに指定したいときは、次のようなプロパティもあります
- overflow-x：横方向（X軸）のみ制御
- overflow-y：縦方向（Y軸）のみ制御
投稿一覧に戻る
