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

要素のコンテンツが割り当てられた領域より大きくなる場合の対処法【CSS overflow徹底解説】

Web制作をしていると、指定したwidthやheightに対して、要素の中身（テキストや画像など）がはみ出してしまうことがあります。このような「コンテンツが割り当てられたスペースを超える」問題を解決するには、CSSの overflow プロパティを使用します。

overflowプロパティとは

overflow プロパティを使うと、ボックスからあふれたコンテンツの扱いを制御できます。主な値は以下の通りです。

  • visible（初期値）： あふれた内容がそのまま表示されます
  • hidden： あふれた部分は切り取られ、非表示になります
  • scroll： コンテンツの量に関わらず、常にスクロールバーが表示されます
  • auto： コンテンツがあふれた場合にのみスクロールバーが表示されます

実装例

実際に overflow: scroll と overflow: auto を使ったコードを見てみましょう。以下のコードを実行して挙動を確認できます。

<html>
<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">
      This is Demo Content. This is Demo Content. This is Demo Content.
      This is Demo Content. This is Demo Content. This is Demo Content.
      This is Demo Content. This is Demo Content. This is Demo Content.
      This is Demo Content. This is Demo Content. This is Demo Content.
   </div>
   <p>auto の指定例：</p>
   <div class="auto">
      This is Demo Content. This is Demo Content. This is Demo Content.
      This is Demo Content. This is Demo Content. This is Demo Content.
      This is Demo Content. This is Demo Content. This is Demo Content.
      This is Demo Content. This is Demo Content. This is Demo Content.
   </div>
</body>
</html>

実行結果のポイント

overflow: scroll を指定したボックスでは、コンテンツの量に関係なくスクロールバーが常に表示されます。一方、overflow: auto を指定した場合は、コンテンツがボックスからあふれたときにだけスクロールバーが表示されるため、見た目がすっきりします。

用途に応じてこれらの値を使い分けることで、レイアウト崩れを防ぎ、ユーザーにとって読みやすいページを作ることができます。

  1. IPアドレスが「0.0.0.0」と表示される理由とは?意味と対処法を解説

    IPv4(インターネットプロトコル バージョン4)で使用されるIPアドレスは、「0.0.0.0」から「255.255.255.255」までの範囲にあります。このうち「0.0.0.0」は、コンピューターネットワーク上でいくつかの特別な意味を持つアドレスですが、一般的なデバイスのアドレスとして使用することはできません。 プレースホルダーとしての役割 「0.0.0.0」は通常のIPアドレスと同じ構造(4つの数字の組み合わせ)を持っていますが、実際にはプレースホルダー(仮の値)であり、グローバルでもプライベートでもない、通常のアドレスが割り当てられていないことを示すために使われます。例えば、プロ

  2. iPhoneのマイクが機能しないときの対処法まとめ

    iPhoneで通話中に相手に声が聞こえない、またはまったく届かないといったトラブルが起きた場合、iPhone本体のマイクに問題が発生している可能性があります。原因は物理的な故障の場合もあれば、ソフトウェア側の不具合の場合もあります。本記事では、iPhoneのマイクが正常に動作しないときに試したい対処法を、簡単なものから順番に詳しく解説します。修理に出す前に必ず確認しておきましょう。1. iPhoneを再起動するマイクの不調に気づいたら、まず最初に試したいのが再起動です。一時的なシステムの不具合は、再起動だけで解消できるケースが多くあります。サイドボタン(電源ボタン)を長押しし、スライダーが表示