スクロールバー付きdivの実装：HTMLとCSSの完全ガイド

2024-04-02

CSSでdivを垂直方向にスクロール可能にする方法

overflowプロパティは、要素の内容がはみ出したときにどのように表示するかを制御します。

.scroll-div {
  overflow: scroll;
}

上記のコードは、scroll-divクラスを持つdiv要素を垂直方向にスクロール可能にします。

補足:

overflow-xプロパティを使って、横方向のスクロールバーを表示することもできます。
overflowプロパティにautoを指定すると、必要に応じてスクロールバーが表示されます。

heightとmax-heightプロパティを使う

heightプロパティは、要素の高さ to を設定します。max-heightプロパティは、要素の最大の高さを設定します。

.scroll-div {
  height: 200px;
  max-height: 400px;
  overflow: auto;
}

上記のコードは、scroll-divクラスを持つdiv要素の高さを200pxに設定し、最大の高さを400pxに設定します。内容が200pxを超えると、垂直方向のスクロールバーが表示されます。

heightプロパティとmax-heightプロパティを同時に使うと、要素の高さ to を制限しつつ、内容がはみ出した場合はスクロールバーを表示することができます。
min-heightプロパティを使って、要素の最小の高さを設定することもできます。

スクロールバーのデザインは、ブラウザによって異なります。
スクロールバーを非表示にすることもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
  <style>
    .scroll-div {
      height: 200px;
      max-height: 400px;
      overflow: auto;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="scroll-div">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Proin eget tortor risus. Donec ullamcorper nulla non metus auctor fringilla. Praesent sed lacus lectus. Maecenas sit amet neque eu lectus faucibus tincidunt. Donec rutrum congue leo eget malesuada. Nam dui ligula, feugiat ac diam sit amet, hendrerit ullamcorper ante. Nulla facilisi. Morbi sit amet massa sit amet lacus egestas convallis.
  </div>
</body>
</html>

実行方法

上記のコードをindex.htmlという名前で保存します。
ブラウザでindex.htmlを開きます。

結果

ブラウザでindex.htmlを開くと、div要素内にスクロールバーが表示されていることを確認できます。

上記のコードは、あくまでもサンプルです。必要に応じて、コードを編集してください。
スクロールバーのデザインを変更したい場合は、CSSを編集してください。

CSSでdivを垂直方向にスクロール可能にする他の方法

positionとtopプロパティを使う

positionプロパティを使って、div要素を相対的に配置し、topプロパティを使って、その位置を調整することができます。

.scroll-div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  overflow: auto;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

positionプロパティにabsoluteを指定すると、div要素を絶対的に配置することができます。
topプロパティは、要素の上端の位置を指定します。
transformプロパティを使って、要素を回転したり、拡大縮小したり、移動したりすることができます。

flexboxレイアウトを使うと、要素を簡単に配置することができます。

.scroll-div {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

flex-directionプロパティは、要素をどのように並べるかを指定します。
justify-contentプロパティは、要素を水平方向にどのように配置するかを指定します。

.scroll-div {
  display: grid;
  overflow: auto;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.scroll-div > * {
  grid-area: 1 / 1;
}