CSSのみで横スクロール機能(スクロールバーの変更)
<div class="contents">
<h2>横へスクロール出来ます</h2>
<div class="slide">
<div class="item">
<img src="https://cdn.pixabay.com/photo/2020/04/08/18/44/horse-5018509_640.jpg">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2020/04/10/20/25/cat-5027705_640.jpg">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2020/04/10/20/22/giraffe-5027700_640.jpg">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2020/04/11/21/23/dog-5032072_640.jpg">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2020/04/11/21/51/eurasian-pygmy-owl-5032128_640.jpg">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2020/04/11/20/06/flamingos-5031849_640.jpg">
</div>
</div>
</div>
h2,img{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-size: 100%;
vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
/* ルートのフォントサイズを10pxに設定しておく */
font-size: 62.5%;
}
body {
line-height: 1;
/* ルートのフォントサイズを1.6em(16pxと同等のサイズ)に設定 */
font-size: 1.6em;
}
.contents {
position: relative;
margin: 0 auto;
width: 1000px;
margin-bottom: 32px;
}
.contents h2 {
content: "横に進みます";
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 100%;
font-size: 4rem;
font-family: kazuraki-sp2n, serif;
writing-mode: vertical-lr;
background-color: rgb(255,255,255);
}
.slide {
display: flex;
padding: 30px;
width: calc(100% - 80px);
overflow-x: auto;
}
.item {
flex: 0 0 40%;
background-color: #f4f4f4;
box-shadow: 0 0 5px rgba(0,0,0,.3);
overflow: hidden;
}
.item:not(:last-child) {
margin-right: 20px;
}
.item img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 1000px) {
.contents {
width: 100%;
}
}
@media screen and (max-width: 767px) {
.contents h2 {
font-size: 2.6rem;
}
}
.slide::-webkit-scrollbar {
height: 10px;
}
.slide::-webkit-scrollbar-thumb {
background-color: #ffd700;
border-radius: 10px;
}
.slide::-webkit-scrollbar-track {
background-color: transparent;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-thumb {
background-color: #00a7ff;
border-radius: 10px;
}
body::-webkit-scrollbar-track {
background-color: transparent;
}