CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのoverflowプロパティでオーバーフローコンテンツを制御する方法

CSSのoverflowプロパティを使用すると、要素からあふれ出たコンテンツ(オーバーフローコンテンツ)を柔軟に管理できます。このプロパティにより、はみ出した部分を切り取って非表示にしたり、スクロールバーを表示して隠れたコンテンツを閲覧できるようにしたり、あるいはコンテナの外側にそのまま表示させたりすることが可能です。

overflowプロパティの主な値

  • visible(初期値): コンテンツがコンテナの外にはみ出したまま表示される
  • hidden: はみ出した部分が切り取られ、スクロールバーは表示されない
  • scroll: スクロールバーが常に表示され、はみ出したコンテンツをスクロールして閲覧できる
  • auto: コンテンツが収まらない場合にのみスクロールバーが表示される

構文

CSS overflowプロパティの基本構文は以下のとおりです。

Selector {
    overflow: /*値*/;
}

例1:テキストコンテンツのオーバーフロー処理

まずは、長いテキストを含むコンテナにoverflowプロパティを適用する例を見てみましょう。このサンプルでは、ボタンをクリックするとJavaScriptによってoverflowの値が「scroll」から「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プロパティでオーバーフローコンテンツを制御する方法

「Remove Scrollbars」ボタンをクリックした後

CSSのoverflowプロパティでオーバーフローコンテンツを制御する方法

例2:画像コンテンツのオーバーフロー処理

続いて、画像を含むコンテナでのoverflowプロパティの使用例です。このサンプルでは、ボタンをクリックするとコンテナの高さと幅が画像の実際のサイズに合わせて調整され、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/sas/images/sas-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プロパティでオーバーフローコンテンツを制御する方法

「Remove Scrollbars」ボタンをクリックした後

CSSのoverflowプロパティでオーバーフローコンテンツを制御する方法

  1. RGBAを使ったCSSの透明度設定方法をわかりやすく解説

    CSSで要素の透明度を表現する場合、rgba() 関数を使うのが一般的です。RGBにアルファチャンネル（alpha）を加えたこのカラーモデルでは、第4パラメータで色の不透明度（opacity）を細かく指定できます。 RGBAカラーの基本 rgba() は次の4つの値で構成されます。 R（赤）・G（緑）・B（青）：それぞれ0〜255、または0〜100%の数値で指定します。 A（アルファ／透明度）：0.0（完全な透明）〜1.0（完全な不透明）までの小数で指定します。例えば「0.5」なら半透明になります。 通常の rgb() では透明度を扱えませんが、rgba() を使えば背景色だけを半透明にで

  2. CSSのdata-*属性（カスタムデータ属性）の使い方を実例付きで解説

    HTMLのdata-*属性（カスタムデータ属性）を使うと、要素に独自の追加情報を持たせることができます。この記事では、CSSやJavaScriptと組み合わせてdata-*属性を活用する方法を、具体的なコード例とともにわかりやすく解説します。 data-*属性とは？ data-*属性は、「data-」で始まる任意の名前を付けられるHTMLの標準属性です。例えば data-food-type=beverages のように記述することで、表示には影響を与えずに要素へメタ情報を埋め込めます。JavaScriptからは getAttribute() や dataset プロパティで、CSSからは属性セ