CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのoverflow: visibleとは？使い方をサンプルコードで解説

CSSのoverflowプロパティに「visible」を指定すると、要素のボックスからはみ出した内容は切り取られずにそのまま表示されます。これがoverflowプロパティの初期値（デフォルト値）です。

実際にどのように表示されるのか、以下のサンプルコードを実行して確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: orange;
            width: 250px;
            height: 30px;
            border: 2px solid blue;
            overflow: visible;
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <div>ここでoverflowプロパティを使用しています。CSS overflow: visibleの動作を示すためのデモテキストです。</div>
   </body>
</html>

出力結果

上記のコードでは、幅250px・高さ30pxのオレンジ色のボックスに対してoverflow: visibleが設定されています。テキストがボックスの高さを超えても、あふれた部分は隠されず、青い枠線の外側にはみ出して表示されます。

CSSのoverflow: visibleとは？使い方をサンプルコードで解説

overflow: visibleのポイント

  • visibleはoverflowプロパティのデフォルト値のため、明示的に指定しなくても同じ挙動になります。
  • はみ出した内容を非表示にしたい場合はhidden、スクロールバーを表示したい場合はscrollやautoを使用します。
  • なお、visible以外の値を指定する場合、縦横どちらか一方だけをvisibleにすることはできません（もう一方も自動的にauto扱いになります）。
  1. CSSのoverflow:hiddenとは？使い方と実装例をわかりやすく解説

    CSSのoverflowプロパティにhidden（非表示）を指定すると、要素のボックスからはみ出したコンテンツが切り取られ、表示されなくなります。スクロールバーも表示されないため、あふれた部分を完全に隠したい場合に便利です。 以下のコードを実行して、overflow: hiddenの動作を確認してみましょう。 サンプルコード <!DOCTYPE html> <html>    <head>       <style>          div {

  2. CSSのoverflowプロパティとは？4つの値の違いと実装例をわかりやすく解説

    CSSのoverflowプロパティは、リサイズせずに小さなコンテナの中へ大きなコンテンツを表示したい場合に便利なプロパティです。あふれたコンテンツをクリップ（切り抜き）したり、スクロールバーを表示して隠れた部分を見られるようにしたり、あるいはコンテナの外側にはみ出したまま描画したりと、柔軟な表示制御が可能になります。まさに「あふれ出す（overflow）」ことから名付けられたプロパティです。 overflowプロパティの構文 overflowプロパティの基本的な書式は以下の通りです。 Selector { overflow: /*値*/ } 指定できる値の一覧 overflowプロパテ