- ポイント
- 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>