【CSS】スクロール表示の基本｜overflow-scrollの使い方
CSSのoverflow-scrollを使うことで、コンテンツが溢れた場合にスクロールバーを表示させることができます。要素内に収められないコンテンツを表示する方法として非常に便利です。
🔹 部分コード
<div class="container">
<div class="content">ここにコンテンツが表示されます。スクロールバーが表示されます。</div>
</div>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
💻 完全動作コード（※このコピペのみでHTMLで動作するコード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロール表示</title>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="content">ここにコンテンツが表示されます。スクロールバーが表示されます。</div>
</div>
</body>
</html>
🧩 応用と活用方法
overflow: scroll;は、コンテンツが要素を越えて表示されるときにスクロールバーを表示するために使用します。これにより、ユーザーは要素内の全コンテンツを見ることができます。
📱 レスポンシブデザイン
レスポンシブデザインでは、スマートフォンやタブレットなどの小さな画面でスクロールバーを表示するために、overflow: scroll;を使用することがよくあります。@mediaクエリを使って、特定の画面サイズで表示を切り替えることも可能です。
スクロールバーは、特に長いリストや複雑なコンテンツが含まれる場合に便利で、要素内の余分なスペースを節約するのに役立ちます。
コピーしました！