Horizontal Scroll Section
横スクロールするカードセクション。ポートフォリオに。
HTML
<div class="hscroll"> <div class="hcard">01</div> <div class="hcard">02</div> <div class="hcard">03</div> <div class="hcard">04</div> <div class="hcard">05</div> </div>
CSS
.hscroll {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 4px;
scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hcard {
flex-shrink: 0;
width: 100px;
height: 80px;
background: #f5f5f5;
border: 1px solid #eee;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
color: #999;
scroll-snap-align: start;
transition: transform .2s;
}
.hcard:hover {
transform: translateY(-3px);
}