CSS overflowとは？はみ出し部分の表示を指定する方法

CSSのoverflowとは？

overflowの基本的な意味

cssのoverflowとはcssの主要プロパティの一つです。overflowは指定した要素の指定範囲からはみ出た部分の表示方法を指定することができます。

overflowプロパティ

overflowの基本

".class名"or”要素名”｛overflow:値;}

".class名”や”要素名”でoverflowを適用するHTML要素を指定します。overflowはHTML要素がブロックの指定範囲をはみ出してしまう場合、はみ出た部分をどのように表示するのかを指定するプロパティです。

値の部分では、はみ出た部分を表示するvisible,スクロールバー内に表示するscroll,はみ出た部分を非表示にするhidden,はみ出た部分をwebブラウザに適した表示方法で自動で表示するautoなどがあります。

overflowの4つの値の意味

overflow4つの値の図解

overflowプロパティではvisible、scroll、hidden、autoという4つの値を取り扱います。

visible

コンテンツ内容が要素の指定範囲に収まらない場合、はみ出して表示されます。

scroll

overflow:scroll;の表示例

コンテンツ内容が要素の指定範囲からはみ出る場合は、スクロールバーで表示されます。はみ出た部分は下にスクロールすると表示されます。

hidden

overflow:scroll;の表示例

コンテンツ内容が要素の指定範囲からはみ出る場合は、はみ出た部分を非表示にする。

auto

overflow:auto;の表示例

overflowプロパティでautoを指定すると、webブラウザがコンテンツに合わせ自動で最適な表示をしてくれます。Google Choromeを使用した場合は、はみ出した部分をスクロールバーで表示します。

overflowの使い方

overflowを使い方をご紹介しました。実際にoverflowプロパティを使ってwebブラウザでの表示を確認しましょう。

overflow:visible;で指定

overflow:visibleを指定する

上記例のソースコード

<body>
<div class="test1">
こんにちは。こんにちは。こんにちは。こんにちは。
こんにちは。こんにちは。こんにちは。こんにちは。
</div>
<body>

<body>

こんにちは。こんにちは。こんにちは。こんにちは。

</div>

<body>

.test1{
	overflow:visible;
        width:100px;
	height:100px;
	border:dotted 5px blue;
}

.test1{

overflow:visible;

width:100px;

height:100px;

border:dotted 5px blue;

}

HTMLファイルでは、基本的な文章を<div>要素で挟んで書きます。class指定でtest1に指定します。今回文章は"こんにちは。"を8回書きました。
cssファイルでは、class名の"test1"を指定します。
はみ出た部分を表示するoverflow:visible;に指定します。
width:100px;で要素の横幅表示範囲を100pxに指定します。
height:100px;で要素の縦幅表示範囲を100pxに指定します。
border:dotted 5px blue;で枠線の線の種類を点線で太さは5px,色は青に指定します。

scroll

overflowでscrollを指定する

上記例のソースコード

<body>
 <div class="test2">
こんにちは。こんにちは。こんにちは。こんにちは。
こんにちは。こんにちは。こんにちは。こんにちは。
</div>
</body>

<body>

こんにちは。こんにちは。こんにちは。こんにちは。

</div>

</body>

.test2{
	overflow:scroll;
        width:100px;
	height:100px;
	border:dotted 5px blue;
}

.test2{

overflow:scroll;

width:100px;

height:100px;

border:dotted 5px blue;

}

HTMLファイルでは、基本的な文章を<div>要素で挟んで書きます。class指定でtest2に指定します。今回文章は"こんにちは。"を8回書きました。
cssファイルでは、class名の"test2"を指定します。
はみ出た部分を表示するoverflow:scroll;に指定します。
width:100px;で要素の横幅表示範囲を100pxに指定します。
height:100px;で要素の縦幅表示範囲を100pxに指定します。
border:dotted 5px blue;で枠線の線の種類を点線で太さは5px,色は青に指定します。

hidden

overflowでhiddenを指定

上記例のソースコード

<body>
<div class="test3">
こんにちは。こんにちは。こんにちは。こんにちは。
こんにちは。こんにちは。こんにちは。こんにちは。
</div>
</body>

<body>

こんにちは。こんにちは。こんにちは。こんにちは。

</div>

</body>

.test3{
	overflow:hidden;
        width:100px;
	height:100px;
	border:dotted 5px blue;
}

.test3{

overflow:hidden;

width:100px;

height:100px;

border:dotted 5px blue;

}

HTMLファイルでは、基本的な文章を<div>要素で挟んで書きます。class指定でtest3に指定します。今回文章は"こんにちは。"を8回書きました。
cssファイルでは、class名の"test3"を指定します。
はみ出た部分を表示するoverflow:hidden;に指定します。
width:100px;で要素の横幅表示範囲を100pxに指定します。
height:100px;で要素の縦幅表示範囲を100pxに指定します。
border:dotted 5px blue;で枠線の線の種類を点線で太さは5px,色は青に指定します。

auto

overflowでautoを指定する

上記例のソースコード

<body>
<div class="test4">
こんにちは。こんにちは。こんにちは。こんにちは。
こんにちは。こんにちは。こんにちは。こんにちは。
</div>
</body>

<body>

こんにちは。こんにちは。こんにちは。こんにちは。

</div>

</body>

.test4{
	overflow:auto;
        width:100px;
	height:100px;
	border:dotted 5px blue;
}

.test4{

overflow:auto;

width:100px;

height:100px;

border:dotted 5px blue;

}

HTMLファイルでは、基本的な文章を<div>要素で挟んで書きます。class指定でtest2に指定します。今回文章は"こんにちは。"を8回書きました。
cssファイルでは、class名の"test2"を指定します。
はみ出た部分を表示するoverflow:auto;に指定します。
width:100px;で要素の横幅表示範囲を100pxに指定します。
height:100px;で要素の縦幅表示範囲を100pxに指定します。
border:dotted 5px blue;で枠線の線の種類を点線で太さは5px,色は青に指定します。