ITコラム

overflow word on yellow brick wall

ITコラム

2017.05.29

CSS【 overflow 】 ~ はみ出し処理

overflowプロパティは、オーバーフロー(あふれた)部分の処理方法を指定します。
HTML要素にサイズ指定をした場合、コンテンツ(テキストなど)の分量が多いとはみ出てしまいます。そのはみ出た部分について、スクロール処理をするのか、はみ出た分を隠すのか等の処理を指定します。特に指定をしない場合は、はみ出たまま表示されます。
今回は、このようなoverflowプロパティについてまとめたいと思います。

目次

 1.overflowプロパティ
 2.overflow:hidden

1.overflowプロパティ

overflowプロパティの値は、次の通りです。

visible デフォルト値
処理をしない(はみ出たまま表示)
hidden はみ出た部分は非表示
scroll スクロールバーを表示
auto ブラウザの仕様に依存(必要に応じてスクロールバーを表示)

overflowプロパティの値は、継承されません。
また、overflowプロパティは、ブロックレベル要素、テーブルセル、非置換要素でdisplay: inline-blockのもの、に使用できます。
 

overflowプロパティに4つの値を指定すると、それぞれ次のように表示されます。

overflow: visible
デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。

overflow: hidden
はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。

overflow: scroll
スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。

overflow: auto
ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:0}
div#sample p {
	line-height:1.4em;
	margin:0 0 3em;
	padding:0.5em;
	border:solid 1px #AAA;
	width:100%;
	height:60px;
	overflow:visible;}
div#sample p:nth-child(2) {overflow:hidden}
div#sample p:nth-child(3) {overflow:scroll}
div#sample p:nth-child(4) {overflow:auto}

(HTML)
<div id="sample">
  <p style="color:blue;">
    <b>overflow: visible</b>
    デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。
  </p>

  
  <p style="color:red;">
    <b>overflow: hidden</b>
    はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。
  </p>

  <p style="color:blue;">
    <b>overflow: scroll</b>
    スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。
  </p>

  <p style="color:red;">
    <b>overflow: auto</b>
    ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。
  </p>
</div>

▲目次へ戻る

2.overflow:hidden

overflowプロパティにhiddenを指定すると、はみ出た部分は非表示となります。
このoverflow:hiddenは、レイアウト実現の際に色々と便利に使用できます。
 

文字ブロックの高さをそろえる

サイトのアーカイブ一覧など、各記事のタイトルや冒頭のテキストによって行数が変わると、ブロックの高さが不揃いとなってレイアウト的に見辛くなります。
そのような場合に便利に使えるのがoverflow: hiddenです。
ボックスの高さを決めて、はみ出た分はoverflow: hiddenと指定しておくと、各ボックスの高さが揃って見映えが良くなります。
 

クリッピング

overflow: hiddenで、画像などの切り抜き表示をすることができます。

この画像を切り抜いてみます。

親要素であるdiv要素を、border-radius:50%で円形にしました。
このdiv要素に、overflow: hiddenを指定しています。
 
ソースは次の通りです。

(CSS)
.sample {
	width:250px;
	height:250px;
	border-radius:50%;
	overflow:hidden;}
.sample img {
	width:auto;
	position:relative;}

(HTML)
<div class="sample">
  <img src="img/image.jpg">
</div>

 

floatのテキスト

画像等にテキストを回り込ませたい時にfloatプロパティを使いますが、テキストが画像の下に回り込んでしまう場合があります。

overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden;

 
このような場合、回り込ませるテキストに、overflow: hiddenまたはoverflow: autoを指定すると次のように回り込みが解消できます。

overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden;

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
div#sample p {margin:0; overflow:auto;}
.smpbox {width:100px; height:100px; margin:5px 10px 10px 0; text-align:center; float:left;}

(HTML)
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
    <p>
      overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden;
    </p>
  </div>
</div>

overflow:autoで指定していますが、overflow:hiddenでも同じです。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.