CSSのoverflowプロパティとは？

Webデザインでは、要素のコンテンツが指定した幅や高さを超えてしまうことがあります。そんなときに便利なのが、CSSのoverflowプロパティです。本記事では、overflowの基本的な使い方から、スクロールの制御方法まで詳しく解説します。

---

overflowとは？

overflowは、要素のコンテンツが親要素のサイズを超えた場合に、どのように表示するかを決めるプロパティ です。

基本構文:

selector {
  overflow: 値;
}

---

overflowの主な値

visible（デフォルト）

div {
  overflow: visible;
}

コンテンツがはみ出してもそのまま表示される

hidden（はみ出した部分を非表示）

div {
  overflow: hidden;
}

はみ出した部分を隠す（スクロールできない）

scroll（常にスクロールバーを表示）

div {
  overflow: scroll;
}

はみ出したらスクロールバーを表示（常に表示される）

auto（必要に応じてスクロールバーを表示）

div {
  overflow: auto;
}

必要な場合のみスクロールバーを表示（通常はこちらが便利）

---

overflow-x と overflow-y の指定

overflow には x（横）と y（縦）を個別に制御 できるプロパティもあります。

横スクロールのみ許可

div {
  overflow-x: scroll;
  overflow-y: hidden;
}

横方向にはスクロール可能、縦方向のはみ出しは非表示

縦スクロールのみ許可

div {
  overflow-x: hidden;
  overflow-y: scroll;
}

縦方向にはスクロール可能、横方向のはみ出しは非表示

---

overflowの応用例

スクロール可能なボックスを作る

.scroll-box {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid #ccc;
}

テキストのはみ出しを防ぐ

.text-box {
  width: 200px;
  white-space: nowrap;/*テキストを折り返さず、1行で表示 する。*/
  overflow: hidden;/* ボックスの外にはみ出した部分を非表示 にする。*/
  text-overflow: ellipsis;/*はみ出した部分を ...（省略記号）に変換 する。*/
}

➡ 長すぎるテキストを ... で省略表示

nowrapについての説明はこちらへ

---

まとめ

• overflow は はみ出したコンテンツの処理を決めるプロパティ
• visible（デフォルト）、hidden（非表示）、scroll（スクロール）、auto（自動）を使い分ける
• overflow-x / overflow-y で方向別に制御可能
• text-overflow: ellipsis; を使うとテキストの省略もできる

適切なoverflowの設定を使い、レイアウトの崩れを防ぎつつ、ユーザーが快適に閲覧できるWebページを作りましょう！

CSSのプロパティって何がある？100個以上をご紹介！

この記事はどんなプロパティがあるのかをざっと見ることができる記事になっています。

monmontraining.com

2025.02.04