More than 5 years have passed since last update.

横スクロール

HTML

Posted at 2019-11-29

ポイント
- overflow-x
- white-space:nowrap; ←　これないとカラム落ちみたいになるから、横幅をオーバーできない


<!DOCTYPE html>
<html>
<head>
  <title>Horizontal Scroll</title>
  <style>

    .parent{
      overflow-x:scroll; overflow-y:hidden; width:50px; white-space:nowrap;
    }
    .child{
      display: inline-block;
    }
    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: 90%;

      /* 見た目調整 */
      height: 400px;
      margin: 16px;
      font-size: 48px;
      background: rgba(255, 0, 0, 0.4);
    }

  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      aaa
    </div>
    <div class="child">
        aaa
    </div>
    <div class="child">
      aaa
    </div>

  </div>

</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up