CSS【 overflow 】 ~ はみ出し処理

overflow word on yellow brick wall

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で、画像などの切り抜き表示をすることができます。

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

親要素である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プロパティを使いますが、テキストが画像の下に回り込んでしまう場合があります。

colmun_image5706_01

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

colmun_image5706_01

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です