아무래도 7note입니다. Twitter의 광고로, 이미지를 옆에 나란히 한 장씩 슬라이드할 수 있는 슬라이드 쇼를 보았으므로, 같은 것을 CSS로 재현해 갑니다.

출처

index.html

<div class="box">
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</div>

style.css

.box {
  width: 300px;  /* 適度な幅を指定 */
  height: 300px; /* 適度な高さを指定 */
  scroll-snap-type: x mandatory; /* スクロールスナップの指定 */
  overflow-x: scroll;            /* はみ出た部分をスクロールできる要素にする */
  display: flex; /* 要素を横並びにする */
}

.box section {
  scroll-snap-align: start; /* スクロールスナップの指定 */
  width: 200px;  /* 適度な幅を指定 */
  height: 200px; /* 適度な高さを指定 */
  text-align: center; /* 文字を左右中央にするため */
  line-height: 200px; /* 文字を上下中央にするため */
  flex: none;         /* 自動伸縮をさせない */
}

.box section + section {
  margin-left: 10px; /* 要素間に余白をとる */
}

.box section:nth-of-type(even) {
  background: #ccc; /* 偶数番の背景色 */
}
.box section:nth-of-type(odd) {
  background: #aaa; /* 奇数番の背景色 */
}

해설

JavaScript를 사용하지 않고 만듭니다.
scroll-snap-type: x mandatory; 가 이번 키가 되는 프로퍼티입니다.
이를 지정하면 요소의 왼쪽 가장자리에 맞게 스크롤 량을 자동으로 조정할 수 있습니다.

나머지는 장식적인 CSS뿐입니다만, flexbox를 사용한 가로 줄무늬와, nth-child로 색 분할을 해 보기 쉽게 하면 완성입니다.

요약

가까이 있는 것을 만드는 방법을 평소부터 의식하고 있습니다.
이런 것을 만들고 싶다고 말했을 때, 즉답으로 "할 수 있어요."라고 대답하면 멋지기 때문에.

그렇지만 단순히 새로운 기술을 익혀보고 싶다는 욕심이 강할 뿐일지도 모릅니다.
분명 이 기사를 읽고 있는 분들도 그런 분이 많을까라고 생각하므로 꼭 다른 기사도 읽어보세요. 실용적인 것부터 어쩔 수 없는 CSS까지 여러가지 쓰고 있습니다↓

참고:
htps : // 이 m / d et al.
htps //w w. 미츠에. 이. jp / k wdd / bg / f ronten d / 202102/02_1740. HTML
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / ue b / Cs / sc 로즈의 pty ぺ

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임