ボックスのはみ出し方を指定するoverflowについて [CSS] | IT SKILL MAP STUDY -- WEBプログラミング知識【実務的なHTML,CSS,JavaScript,JQuery,PHPの知識】

CSSにおけるoverflowプロパティとは

　overflowプロパティとはボックス要素に入りきらない文字、画像をどのように見せるか指定するプロパティです。フレキシブルデザインの場合、あまり気にする必要はありませんが、初期値がはみ出して表示する設定なので、レイアウトが崩れる場合などにこのプロパティをhiddenやscrollに設定します。

　overflow-xやoverflow-yを利用して縦横別々にプロパティを設定することもできます。

/* HTMLの例 */
	
	１２３４５６７８９ＡＢＣＤＥＦＧＨＩＪＫＬＭＮ

/* CSSの例 */

.sample1 {
	width:100px;
	height:50px;
	font-size:20px;
	overflow:visible;
	background:skyblue;
}

/* HTMLの例 */
	
	１２３４５６７８９ＡＢＣＤＥＦＧＨＩＪＫＬＭＮ

/* CSSの例 */

.sample2 {
	width:100px;
	height:50px;
	font-size:20px;
	overflow:scroll;
	background:skyblue;
}

/* HTMLの例 */
	
	１２３４５６７８９ＡＢＣＤＥＦＧＨＩＪＫＬＭＮ

/* CSSの例 */

.sample3 {
	width:100px;
	height:50px;
	font-size:20px;
	overflow:hidden;
	background:skyblue;
}