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

CSSのoverflow-xプロパティとは？横方向のはみ出しを制御する方法

CSSのoverflow-xプロパティを使うと、要素の内容が左右方向（水平方向）にはみ出した場合の表示方法を制御できます。例えば、はみ出した部分を非表示にしたり、スクロールバーを表示したりすることが可能です。

overflow-xで指定できる主な値

  • visible：初期値。はみ出した内容がそのまま表示されます。
  • hidden：はみ出した部分が切り取られ、非表示になります。
  • scroll：内容がはみ出していなくても、常に横スクロールバーが表示されます。
  • auto：必要な場合のみ、ブラウザが自動的にスクロールバーを表示します。

サンプルコード

以下のコードでは、overflow-x: hidden; と overflow-y: scroll; を組み合わせて、横方向のはみ出しを隠し、縦方向にはスクロールバーを表示しています。

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

実行結果

このコードを実行すると、幅250pxのオレンジ色のボックス内で、横方向にはみ出したテキストは非表示になり、縦方向にはスクロールバーが表示されます。

CSSのoverflow-xプロパティとは？横方向のはみ出しを制御する方法

まとめ

overflow-xプロパティを活用することで、横方向のレイアウト崩れを防ぎ、ユーザーにとって読みやすいデザインを実現できます。特に固定幅のコンテナやレスポンシブ対応の場面で役立つので、overflow-yとの使い分けもあわせて覚えておきましょう。

  1. CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

    CSS Flexbox（フレックスボックス）モデルは、従来のCSSボックスモデルを改善するために考案されました。Flexboxモデルには、ボックスモデルの主要な要素（margin、padding、border、content）がそのまま含まれていますが、さらに柔軟性が加わり、コンテナ（親要素）の中に子要素を最適な形で配置できるようになっています。 このチュートリアルでは、Flexboxモジュールの基本をわかりやすく解説し、よりレスポンシブなサイト制作に役立てられるようサポートします。 以下は、基本的なFlexboxモデルのデモ用スターターコードです。解説を読みながら、実際にコードを動かして

  2. CSSシェイプ入門：正方形からハートまで図形を自由に描く方法

    それでは、楽しいCSSシェイプを作っていきましょう！すべてのコードは私のCodepenで確認できます。さっそく始めましょう。 長方形と正方形 すべての図形はdiv要素で囲みます。最も基本的な図形は正方形と長方形です。divはデフォルトで、widthとheightプロパティの値に応じて正方形や長方形として表示されるためです。正方形は幅と高さが等しく、長方形は等しくありません。 .rectangle { width: 2rem; height: 4rem; background-color: violet; } .square { width: 5rem; height