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

CSSのoverflowプロパティとは？ボックスの内容がはみ出す場合のブラウザの動作を指定する方法

CSSにはoverflowというプロパティが用意されており、ボックスの内容がボックス自体のサイズより大きくなった場合に、ブラウザがどのように表示すべきかを指定することができます。

このプロパティには、以下の値を設定できます。

値説明
visible内容が包含要素の境界線からはみ出して表示されます。これが初期値です。
hiddenはみ出した内容は包含要素の境界線で切り取られ、スクロールバーは表示されません。
scroll包含要素のサイズは変化せず、内容をスクロールして確認できるようスクロールバーが常に表示されます。
autoscrollと目的は同じですが、スクロールバーは内容が実際にはみ出した場合にのみ表示されます。

コード例

以下のコードを実行して、overflowプロパティの動作を確認してみましょう。

<html>
   <head>
   </head>
   <style>
      .scroll{
         display:block;
         border: 2px solid green;
         padding:10px;
         margin-top:10px;
         width:300px;
         height:50px;
         overflow:scroll;
      }
      .auto{
         display:block;
         border: 2px solid green;
         padding:10px;
         margin-top:10px;
         width:300px;
         height:50px;
         overflow:auto;
      }
   </style>
   <body>
      <p>scroll値の例：</p>
      <div class = "scroll">
         要素ボックスから内容がはみ出した場合に
         スクロールバーがどのように動作するかを
         確認するために、ここに多くの内容を記述しています。
         水平方向と垂直方向の両方のスクロールバーが表示されます。
      </div>
      <br />
      <p>auto値の例：</p>
      <div class = "auto">
         要素ボックスから内容がはみ出した場合に
         スクロールバーがどのように動作するかを
         確認するために、ここに多くの内容を記述しています。
         水平方向と垂直方向の両方のスクロールバーが表示されます。
      </div>
   </body>
</html>

まとめ

overflowプロパティを使いこなすことで、コンテンツがボックスからはみ出す場合の表示を柔軟に制御できます。常にスクロールバーを表示したい場合はscroll、必要なときだけ表示したい場合はautoを選択するのが一般的です。また、はみ出した部分を完全に非表示にしたい場合はhiddenを、あえてはみ出して表示させたいデザインの場合はvisibleを使用します。

  1. Google Chrome（グーグルクローム）とは？特徴・使い方・入手方法を徹底解説

    Google Chromeとは Google Chromeは、Googleが開発した無料のウェブブラウザで、インターネット上のウェブページへアクセスするために使われています。2022年3月時点で世界シェア62%以上を誇り、最も選ばれているウェブブラウザです。 また、Google Chromeはクロスプラットフォーム対応のブラウザでもあります。パソコン、スマートフォン、タブレットなど、さまざまなデバイスやOS向けのバージョンが提供されており、Statistaによると、特にAndroid版が最も利用率が高く、2022年1月時点で世界のウェブブラウザ市場シェアの36%以上を占めています。 Goog

  2. C＃のSortedListクラスにおけるIsReadOnlyプロパティの使い方と意味を解説

    C＃のSortedListクラスのIsReadOnlyプロパティとは？IsReadOnlyプロパティは、SortedListオブジェクトが読み取り専用かどうかを示すbool型（true / false）の値を取得するためのプロパティです。読み取り専用の場合は「True」、要素の追加や削除が可能な通常の状態であれば「False」が返されます。このプロパティを活用することで、コレクションに対して変更操作を行う前に、その操作が許可されているかどうかを事前に確認できます。SortedListの作成と要素の追加まず、SortedListのインスタンスを作成します。SortedList s = new S