【CSS】要素がはみ出たときの表示を指定する overflow

目次

overflowプロパティとは

本来なら子要素は親要素の大きさをはみ出すことの無いようにすべきですが、はみ出した時の表示を指定するプロパティとしてoverflowプロパティが用意されています。

値は「visible(初期値)」「hidden」「scroll」を指定できます。

はみ出た要素を隠す(hidden)

次の例では、水色の箱#boxの中にpタグでテキストを入れてみました。



このように、テキストが長すぎて#boxからはみ出しているのが分かります。

↓ここで親要素の#boxにoverflow: hidden;を指定すると、はみ出た部分が隠れて表示されなくなりました。


ちなみに、隠れた部分は完全にないものとして扱われるため、次の要素はすぐ下に表示されます。

はみ出た要素をスクロールさせる(scroll)

overflowプロパティの値には「scroll」も指定でき、ある一定の大きさの範囲内にコンテンツを収めたいときによく使います。

例えば、これまでの例と同じように親要素にoverflow: scroll;を指定すると、親要素のサイズに収まりきらなかったテキストがスクロールして見れるようになります。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

縦・横どちらかのバーのみを表示する

また、上の例では横方向のバーも表示されていますが、この場合は縦方向のスクロールのみなので、横方向のバーは消してしまいましょう。どうするかというと、overflowではなく、overflow-y: scroll;とすればOKです。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ちなみに、yは数学でいうy軸のyなので、縦方向を指しています。つまり、縦方向にスクロールさせる、という意味になります。逆に言うと、横方向にだけスクロールさせたいときは、overflow-x: scroll;とすればOKです。