CSS【 overflow 】～はみ出し処理

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. overflowプロパティ

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

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

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

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

　
ソースは次の通りです。

<!-- 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: autoを指定すると次のように回り込みが解消できます。

　
ソースは次の通りです。

<!-- 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でも同じです。

▲目次へ戻る