cssプロパティoverflowについての説明

こんにちは tanaka です。

今回は、
cssプロパティ
overflow の説明です。

overflowは、
文章が下へはみ出た時

それらをどうするか
決めるプロパティです。

値は4つあります。
 1:visible = はみ出たまま
 2:hidden = はみ出た所だけ消す
 3:scroll  = スクロールバー機能追加
 4:auto  = はみ出た時だけスクロール機能追加


特殊な例として
white-space: nowrap;
で文章が右にはみ出た時も

overflowは、
作用します。

それでは
詳しくみて行きましょう。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssプロパティoverflowの説明

overflowは、
文章が下へはみ出た時

それらをどうするか
決めるプロパティです。

値は4つあります。
 1:visible = はみ出たまま
 2:hidden = はみ出た所だけ消す
 3:scroll  = スクロールバー機能追加
 4:auto  = はみ出た時だけスクロール機能追加

1:visible = はみ出たまま

visibleは、デフォルトです。

visibleは、
記事がはみ出ても
そのまま下へ表示します。

画像blog-overflow01
2:hidden = はみ出た所だけ消す

hiddenは、
はみ出た所は表示せずに
切り取ります。

画像blog-overflow02
3:scroll  = スクロールバー機能追加

scrollは、
ボックスモデルのcontentに
スクロールバー機能を追加します。

content内において
文章をスクロールしてみる事ができます。

画像blog-overflow03
4:auto  = はみ出た時だけスクロール機能追加

autoは、
何かの操作や変更によって
ボックスモデルが小さくなり

文章が下へはみ出た時だけ
スクロール機能が追加されます。

動画像blog-overflow04

まとめ

overflowとは

overflowは、
文章が下へはみ出た時

それらをどうするか
決めるプロパティ。

値は4つ

値は4つ。
 1:visible = はみ出たまま
 2:hidden = はみ出た所だけ消す
 3:scroll  = スクロールバー機能追加
 4:auto  = はみ出た時だけスクロール機能追加

特殊な例(white-space: nowrap)

特殊な例として
white-space: nowrap;
で文章が右にはみ出た時も

overflowは、
作用します。

以上、
overflow
の話でした。

ありがとうございました。

タイトルとURLをコピーしました