CSSのoverflowプロパティとは？4つの値の違いと実装例をわかりやすく解説

CSSのoverflowプロパティは、リサイズせずに小さなコンテナの中へ大きなコンテンツを表示したい場合に便利なプロパティです。あふれたコンテンツをクリップ（切り抜き）したり、スクロールバーを表示して隠れた部分を見られるようにしたり、あるいはコンテナの外側にはみ出したまま描画したりと、柔軟な表示制御が可能になります。まさに「あふれ出す（overflow）」ことから名付けられたプロパティです。

overflowプロパティの構文

overflowプロパティの基本的な書式は以下の通りです。

Selector {
    overflow: /*値*/
}

指定できる値の一覧

overflowプロパティには主に以下の4つの値を指定できます。

No.	値と説明
1	visible デフォルト値です。コンテンツは切り取られず、要素のボックスからはみ出したまま表示されます。
2	hidden ボックスからあふれた部分のコンテンツを切り取り、切り取られた部分は非表示になります。スクロールバーも表示されません。
3	scroll あふれたコンテンツを切り取りつつ、スクロールバーを常に表示します。スクロール操作で切り取られた部分を閲覧できます。
4	auto コンテンツがあふれた場合にのみ、自動的にスクロールバーを表示します。

それでは、実際のコード例を見ていきましょう。

実装例1：画像コンテナでのoverflow制御

この例では、100px四方のコンテナに画像を配置し、overflow: autoを指定しています。「Remove Scrollbars」ボタンをクリックすると、JavaScriptによってコンテナのサイズが画像サイズに合わせられ、overflowがhiddenに変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}
#containerDiv {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
</div>
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function fitHeight() {
    containerDiv.style.height = imgSelect.height+'px';
    containerDiv.style.width = imgSelect.width+'px';
    containerDiv.style.overflow = 'hidden';
}
</script>
</body>
</html>

実行結果

ボタンをクリックする前の表示：

CSSのoverflowプロパティとは？4つの値の違いと実装例をわかりやすく解説

「Remove Scrollbars」ボタンをクリックした後の表示：

CSSのoverflowプロパティとは？4つの値の違いと実装例をわかりやすく解説

実装例2：テキストコンテナでのoverflow制御

次の例では、高さ110pxのコンテナ内に長いダミーテキストを配置し、overflow: scrollを指定しています。ボタンをクリックすると、overflowの値がhiddenに切り替わり、スクロールバーが消えてあふれたテキストが非表示になります。

<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}
#containerDiv {
    margin: 0 auto;
    height: 110px;
    overflow: scroll;
}
</style></head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</div>
<input type="button" onclick="add()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
function add() {
    document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html>

実行結果

「Remove Scrollbars」ボタンをクリックする前の表示：

CSSのoverflowプロパティとは？4つの値の違いと実装例をわかりやすく解説

「Remove Scrollbars」ボタンをクリックした後の表示：

CSSのoverflowプロパティとは？4つの値の違いと実装例をわかりやすく解説

まとめ

overflowプロパティを使いこなすことで、限られたスペースの中でコンテンツをどのように表示するかを細かく制御できます。visible・hidden・scroll・autoのそれぞれの挙動の違いを理解し、デザインやユーザビリティに応じて適切な値を選択しましょう。また、JavaScriptと組み合わせれば、ユーザーの操作に応じて動的にoverflowの状態を切り替えることも可能です。

CSSのborderショートハンド（一括指定）プロパティの使い方

CSSのletter-spacingで文字間隔を調整する方法

CSSのtext-indentプロパティでテキストのインデントを設定する方法
CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。負
HTML DOM スタイルの overflow プロパティとは？使い方と設定値を解説
HTML ドキュメント内の要素に対して、overflow CSS プロパティの値を取得・変更するには、DOM のスタイルオブジェクトが持つ overflow プロパティを使用します。このプロパティを使うことで、JavaScript から動的に要素のはみ出しコンテンツの表示方法を制御できます。構文（シンタックス）overflow プロパティの基本的な構文は以下のとおりです。overflow の値を取得する場合object.style.overflowoverflow の値を変更する場合object.style.overflow = value設定できる値overflow プロパティには、以下の値