cssで実装する横スクロール - 未経験のwebサイト制作の勉強

スマホ時のUIで横スクロールのを採用するアプリやWebサイトをよく見かけます。ある程度のコンテンツ数がある場合に横スクロールを採用する事でスマホの様な小さい画面でも1つ1つの画像をある程度大きく見せる事が出来るというメリットがあります。また、シンプルな横スクロールのUIであれば、CSSのみで実装出来るので覚えましょう。

www.tripadvisor.jp

-webkit-overflow-scrolling: touch

本来、はみ出た要素をスクロールで動かすには「overflow: scroll」で良いのですが、「overflow: scroll」ではIOS系のデバイスでスクロールの動きがぎこちなくなるので、代わりに「-webkit-overflow-scrolling: touch」を指定します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cssのみで横スクロール</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
img {
max-width: 100%;
}
h1 {
  text-align:center;
  padding: 10px 0;
}
.content {
  max-width:960px;
	margin: 50px auto 0;
}
.mask {
  width:100%;
}
ul {
  list-style:none;
  display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
li {
width:calc((100% - 30px) / 4);
margin-bottom: 10px;
}
@media screen and (max-width:768px){
.content {
  max-width:960px;
  margin: 50px auto 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
ul {
  display:flex;
	flex-wrap: wrap;
	justify-content:space-around;
	width: 800%;
}
li {
width:calc((100% - 90px) / 8);
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>タイトル</h1>
<div class="content">
<div class="mask">
<ul>
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
<li><img src="img/01.jpg" alt=""></li>
<li><img src="img/02.jpg" alt=""></li>
<li><img src="img/03.jpg" alt=""></li>
<li><img src="img/04.jpg" alt=""></li>
</ul>
</div>
</div>
</header>
</body>
</html>