ゼロからのWeb制作 Vol.9|overflowタグ

こんにちは、鈴木です。
今回は、日頃の作業の失敗から学んだことを書いていこうと思います。

目次

  1. overflowタグとは
  2. divタグとfloatタグ

1.overflowタグとは

divタグでレイアウトし、決めた範囲の中にコンテンツを入れていきます。
しかし、コンテンツの量が多くて、divタグからはみ出てしまうことがあります。

そんな時にoverflowタグを使うとはみ出しを修正してくれます。

 

overflowタグには4つの種類があります。


overflow:visible:

決められた領域からはみ出して表示します。
範囲が初期値に戻ります。


overflow:hidden:

はみ出た部分は表示されず隠れます。


overflow:scroll:

はみ出た部分がスクロール形式で表示されます。


overflow:auto:

はみ出た部分が自動で表示されます。
基本はスクロール表示になります。

2.divタグとfloatタグ

サイトにコンテンツを増やす作業をしている時にdivタグとfloatタグを使う機会がありました。
その時の失敗から学んだことについてこれから書こうと思います。

資料22

 

 

 

 

 

左側に画像を入れ、右側に文章を書いていく作業でした。

しかし、下記の画像のように一番下には他のコンテンツ(赤い部分)がもともと入っていました。

資料23

 

 

 

 

 

 

 

この状態でdivタグを作っていき、floatタグでコンテンツを振り分けていきます。

はじめは特に問題なく作業が進みました。

しかし、サイト全体を囲むdivタグの大きさを無視して作業を続けていくと、

資料24

 

 

 

 

 

 

 

上記のように本来一番下にあるべきコンテンツの位置がずれてしまいました。

このようにコンテンツの位置がずれないようにするためには
後から加えていくdivタグのスタイルにoverflow:hidden;

を付け加える必要があります。

overflowtタグを付けたことで本来の形に戻ります。

資料23

 

 

 

 

 

 

 

overflowタグを使うことではみだしたコンテンツを修正してdiv内に収めてくれます。

また、本来一番下にあるコンテンツ(ここだと赤い部分)にclear:both;

を付け加えておけばfloatタグの影響を受けずに済みます。