🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSテンプレート：高さ固定＋スクロール表示

📝 使用用途

このテンプレートは、長文やリストなど、縦に長くなる要素を高さ制限し、スクロール表示にしたい場合に使用します。チャット履歴、ログ表示などに最適です。

📘 解説

max-height を使って高さの上限を定め、overflow: auto; を指定することで、要素内に収まらない部分がスクロール可能になります。

✅ デモ

これはスクロール可能なエリアです。

行が増えていくと自動的にスクロールバーが表示されます。

例：1

例：2

例：3

例：4

例：5

例：6

例：7

📄 コード（部分）

<style>
.scroll-box {
  max-height: 150px;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 1rem;
  background-color: #fafafa;
}
</style>

<div class="scroll-box">
  <p>スクロールエリアの中身</p>
</div>

📦 コード（HTML全体）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>高さ固定＋スクロール</title>
  <style>
    .scroll-box {
      max-height: 150px;
      overflow: auto;
      border: 1px solid #ccc;
      padding: 1rem;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
  <div class="scroll-box">
    <p>これはスクロール可能なエリアです。</p>
    <p>内容が増えるとスクロールされます。</p>
    <p>例：1</p>
    <p>例：2</p>
    <p>例：3</p>
    <p>例：4</p>
  </div>
</body>
</html>
コピーしました！

🧩 応用と活用方法

このスクロールボックステンプレートは、様々な場面で活用できます。max-heightの値を調整することで、必要に応じて表示領域の大きさを変更可能です。例えば、モバイル表示用にmax-height: 300px;にしたり、コンパクトなUIではmax-height: 100px;に設定するなど、状況に合わせて柔軟に対応できます。

📱 レスポンシブ対応のポイント

メディアクエリと組み合わせると、デバイスごとに最適な高さを設定できます。例えば、@media (max-width: 768px) { .scroll-box { max-height: 200px; } }のように記述することで、スマホ表示時に高さを調整可能です。

🎨 デザインのカスタマイズ

スクロールバーの見た目を変更したい場合は、::-webkit-scrollbar疑似要素を使用します。例えば.scroll-box::-webkit-scrollbar { width: 8px; }と指定すると、スクロールバーの幅を調整できます。背景色や角丸なども自由にカスタマイズ可能です。

注意点として、overflow: auto;の代わりにoverflow: scroll;を使うと、内容が少ない場合でも常にスクロールバーが表示されます。必要に応じて使い分けると良いでしょう。

このテクニックは、サイドバーのナビゲーションや、ダッシュボードのウィジェット、モーダル内の長文表示など、様々なコンポーネントに応用できます。特にスペースが限られている状況で、コンテンツを効率的に表示したい場合に重宝します。

関連テンプレート