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

【JavaScript】ボックスからはみ出すコンテンツをスクロール表示にする方法（overflowプロパティの使い方）

Webページを作成していると、width や height で指定した要素のボックスからコンテンツがはみ出してしまうことがあります。このような場合には、CSSの overflow プロパティを使用してスクロールバーを追加しましょう。スクロールできるようになることで、訪問者もはみ出したコンテンツ全体を快適に読めるようになります。

overflowプロパティで使える主な値

  • visible：初期値。ボックスからはみ出したコンテンツがそのまま外側に表示されます。
  • hidden：はみ出した部分が切り取られ、表示されません。
  • scroll：コンテンツの量にかかわらず、常にスクロールバーが表示されます。
  • auto：コンテンツがボックスをはみ出した場合にのみ、スクロールバーが自動的に表示されます。

実装サンプル

次のコードは、ボタンをクリックするとJavaScriptで overflow プロパティに scroll を設定し、ボックス内にスクロールバーが表示される例です。実際に動かして挙動を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 450px;
            height: 150px;
            background-color: orange;
            border: 3px solid red;
            margin-left: 20px;
         }
      </style>
   </head>
   <body>
      <p>クリックするとoverflowプロパティでスクロールが設定されます。</p>
      <button type="button" onclick="display()">スクロールを設定</button>
      <div id="box">
         <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
         <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
         <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
         <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
         <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
         <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
      </div>
      <br>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.overflow = "scroll";
         }
      </script>
   </body>
</html>

コードのポイント解説

ボタンがクリックされると、onclick イベントによって display() 関数が呼び出されます。関数内の document.getElementById("box").style.overflow = "scroll" の一行により、idが「box」のdiv要素に対してスクロールバーが有効になります。

なお、常時スクロールバーを表示させたくない場合は、値を "auto" に変更すれば、コンテンツがはみ出したときだけスクロールバーが表示されるようになり、より自然な見た目を実現できます。

  1. JavaScriptで要素の周囲のアウトライン（輪郭線）の色を設定する方法

    JavaScriptで要素の周囲に表示されるアウトライン（輪郭線）の色を変更するには、outlineColorプロパティを使用します。このプロパティは、CSSのoutline-colorと同様の役割を持ち、色名やカラーコード（#5F5F5Fなど）を指定することで、要素の外側に描かれる線の色を自由に設定できます。なお、アウトラインはborder（境界線）とは異なり、レイアウトに影響を与えずに要素の外側に表示されるのが特徴です。以下のコード例では、ボタンをクリックするとdiv要素に太い実線のアウトラインが追加され、その色がグレー（#5F5F5F）に設定されます。サンプルコード<!DOCTYP

  2. JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

    JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。 基本的な動作 通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。 オブジェクト名の繰り返し記述を省略できる 同じオブジェクトの複数のプロパティへ短くアクセスできる 指