CSSのoverflow-yプロパティとは？縦方向のはみ出し制御方法をサンプルコード付きで解説
CSSの overflow-y プロパティを使うと、コンテンツが要素の上下（垂直方向）の境界からはみ出した場合に、その内容をどのように表示・処理するかを指定できます。横方向の表示を制御する overflow-x と組み合わせることで、ボックス内のスクロール動作を柔軟にカスタマイズ可能です。
以下は、overflow-y プロパティを実装するシンプルなHTMLとCSSのコード例です。
コード例
<!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>Heading</h1>
<div>Overflow property used here. This is a demo text to show the working of CSS overflow-x and overflow-y.</div>
</body>
</html>
実行結果
overflow-yで指定できる主な値
- visible：デフォルト値。はみ出したコンテンツが要素の外側にもそのまま表示されます。
- hidden：はみ出した部分は切り取られ、スクロールバーも表示されません。
- scroll：コンテンツが収まっていても、常に垂直方向のスクロールバーが表示されます。
- auto：コンテンツがはみ出した場合のみ、自動的にスクロールバーが表示されます。
上記のサンプルでは、overflow-x: hidden; で横方向のはみ出しを非表示にし、overflow-y: scroll; で縦方向に常にスクロールバーを表示させています。このように両プロパティを併用することで、水平・垂直それぞれのスクロール挙動を個別に制御できます。
-
CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説
CSS Flexbox（フレックスボックス）モデルは、従来のCSSボックスモデルを改善するために考案されました。Flexboxモデルには、ボックスモデルの主要な要素（margin、padding、border、content）がそのまま含まれていますが、さらに柔軟性が加わり、コンテナ（親要素）の中に子要素を最適な形で配置できるようになっています。 このチュートリアルでは、Flexboxモジュールの基本をわかりやすく解説し、よりレスポンシブなサイト制作に役立てられるようサポートします。 以下は、基本的なFlexboxモデルのデモ用スターターコードです。解説を読みながら、実際にコードを動かして
-
CSSシェイプ入門：正方形からハートまで図形を自由に描く方法
それでは、楽しいCSSシェイプを作っていきましょう！すべてのコードは私のCodepenで確認できます。さっそく始めましょう。 長方形と正方形 すべての図形はdiv要素で囲みます。最も基本的な図形は正方形と長方形です。divはデフォルトで、widthとheightプロパティの値に応じて正方形や長方形として表示されるためです。正方形は幅と高さが等しく、長方形は等しくありません。 .rectangle { width: 2rem; height: 4rem; background-color: violet; } .square { width: 5rem; height