はじめに
Web制作において、レイアウト崩れやコンテンツのはみ出しに悩んだ経験はありませんか？
そんな時に活躍するのがCSSのoverflowプロパティです。
本記事では、overflowの基本から実践的な使い方、ちょっとしたTipsまで解説します。
使いどころ
overflowは、要素のボックスから内容がはみ出した時の表示方法を指定するプロパティです。
主な使いどころは下記のようなケースです。
- 要素内に収まりきらないテキストや画像の制御
- スクロールバーの表示・非表示の制御
- コンテンツのクリッピング（はみ出し部分を隠す）
- モーダルやサイドバー、カードUIの実装
指定できるプロパティ
overflowは主に以下の4つの値を持ちます。
| 値 | 動作 |
|---|---|
| visible | はみ出した部分もそのまま表示（初期値） |
| hidden | はみ出した部分を隠す |
| scroll | 常にスクロールバーを表示する |
| auto | はみ出した時だけスクロールバーを表示する |
また、縦横別々に指定したい場合は、overflow-x（横）やoverflow-y（縦）を使います。
overflow-x: auto;
overflow-y: hidden;
基本的な使い方
1. 固定サイズのボックスにスクロールをつける
<div class="box">
これはサンプルテキストです。ウェブページのレイアウト確認やCSSの動作検証のために、適当に長い文章をここに入れています。内容が多くなることでスクロールバーの表示や、はみ出し部分の挙動を確認できます。<br>
追加でさらに文章を続けます。たとえば、実際のニュース記事やブログ記事の本文がこのボックスの中に入ることを想定しています。<br>
このようにして、overflowプロパティの効果を簡単にテストできます。<br>
さらに長くしたい場合は、テキストを何度も繰り返すことで実際の動作を再現できます。<br>
</div>
.box {
width: 300px;
height: 100px;
overflow: auto;
background-color: #aaa;
}
はみ出した範囲はスクロールによって表示されます。
2. はみ出した画像を隠す（トリミング）
<div class="img-container">
<img src="sakura.jpg" alt="">
</div>
.img-container {
width: 150px;
height: auto;
overflow: hidden;
}
.img-container img {
width: 200px;
height: auto;
}
画像自体は横200pxで指定しているのですが、親要素に横150px＆overflow: hidden;を指定しているため、トリミングされています。（画像のはみ出し部分が見えなくなります。）
3. 横スクロールだけ許可する
<div class="horizontal-scroll">
<table>
<tr>
<th>項目A</th><th>項目B</th><th>項目C</th><th>項目D</th><th>項目E</th><th>項目F</th>
</tr>
<tr>
<td>データ1</td><td>データ2</td><td>データ3</td><td>データ4</td><td>データ5</td><td>データ6</td><td>データ7</td><td>データ8</td><td>データ9</td><td>データ10</td>
</tr>
<!-- 省略 -->
</table>
</div>
.horizontal-scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
スマートフォンのサイズで見ています。
レスポンシブ対応に便利です。
実践的な使い方
1. position: stickyと組み合わせて“部分だけスクロール固定”
<div class="scroll-box">
<div class="sticky-header">固定ヘッダー</div>
<div class="content">
ここには色々な情報や説明文がたっぷりと記載されています。例えば、新しいサービスの詳細や、使い方の手順、注意点など、ユーザーが知りたいことが盛り込まれています。<br>
スクロールボックスの中に大量のテキストを入れることで、実際のサイトと同じような見た目や動作を確認することができます。<br>
また、複数の段落やリスト、画像などを組み合わせることで、より実践的なUIのテストにも利用できます。<br>
このように、overflowプロパティを使うことで、限られたスペースでも多くの情報を効率よく表示することができ、ユーザー体験の向上にもつながります。<br>
たとえば、製品のレビューやQ&A、長文のコメントセクションなどでも、スクロールボックスを活用することで画面全体がすっきりとまとまります。<br>
最近では、スマートフォンやタブレットといったモバイル端末からのアクセスも増えているため、画面サイズに合わせて柔軟にコンテンツを見せる工夫がますます重要になっています。<br>
overflowの使い方を覚えておけば、ユーザーが必要な情報にすぐアクセスできるようになり、直感的で快適なWeb体験を提供できます。<br>
今後も実際のプロジェクトや学習の中で積極的に活用してみてください。
</div>
</div>
.scroll-box {
height: 200px;
overflow: auto;
border: 1px solid #ccc;
}
.sticky-header {
position: sticky;
top: 0;
background-color: lightsalmon;
z-index: 1;
}
指定した範囲のみヘッダーがついてくるような実装ができました。
2. テキストの省略（ellipsis）とoverflowの組み合わせ
1行で表示しきれない長文タイトルを「…」で省略したいとき。
<span id="title" class="title-ellipsis">
これはサンプルのとても長いタイトルテキストです。通常はこのように省略されて表示されますが、続きを読むボタンをクリックすると全てのテキストが表示される仕組みです。
</span>
<button id="readmore" class="readmore-btn">続きを読む</button>
.title-ellipsis {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
transition: all 0.2s;
}
.title-full {
width: auto;
white-space: normal;
overflow: visible;
text-overflow: unset;
display: inline;
}
.readmore-btn {
color: #007acc;
background: none;
border: none;
cursor: pointer;
font-size: 0.9em;
margin-left: 8px;
}
const title = document.getElementById('title');
const btn = document.getElementById('readmore');
btn.addEventListener('click', function() {
title.classList.remove('title-ellipsis');
title.classList.add('title-full');
btn.style.display = 'none';
});
続きを読むを押すと全文が表示されます。
Tips
-
overflow: hiddenは、子要素のposition: absoluteのはみ出しもカットできます（クリッピング用にも便利） -
親要素に
overflow: autoやhiddenを指定するとBFC（Block Formatting Context）が作られ、float解除にも使える -
overflow: clipも新しく追加された値。hiddenと似ていますがスクロールができません -
スクロールバーの見た目はOSやブラウザによって異なります。カスタマイズしたい場合は
::-webkit-scrollbarなどの擬似要素を使います
最後に
overflowはシンプルながらもレイアウト調整やUI表現に欠かせないプロパティです。
基本だけでなく、overflow-xやoverflow-y、BFC、クリッピングなど応用もぜひ活用してみてください！