CSS Scroll Snap Typeã®åãæ¢æ±ããäºæž¬å¯èœã§é åçãªã¹ã¯ããŒã«äœéšãåµåºããŸããããã¹ã¯ããŒã«æåã®å¶åŸ¡ãããã²ãŒã·ã§ã³ã®æ¹åããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã«ããããŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã®åŒ·åæ¹æ³ãåŠã³ãŸãã
CSS Scroll Snap TypeïŒå¶åŸ¡ãããã¹ã¯ããŒã«ã«ãããŠãŒã¶ãŒäœéšã®åäž
çµ¶ããé²åãããŠã§ãéçºã®äžçã«ãããŠããŠãŒã¶ãŒäœéšïŒUXïŒã¯æãéèŠã§ããUXãåäžãããããã®ãèŠéããããã¡ãªããã匷åãªããŒã«ã®äžã€ãCSS Scroll Snap Typeã§ãããã®CSSããããã£ã«ãããéçºè ã¯èŠçŽ ã®ã¹ã¯ããŒã«æåãå¶åŸ¡ããæ§ã ãªããã€ã¹ããã©ãããã©ãŒã ã§ãããäºæž¬å¯èœã§çŽæçããã€é åçãªäœéšããŠãŒã¶ãŒã«æäŸããããšãã§ããŸãã
CSS Scroll Snap Typeãšã¯ïŒ
CSS Scroll Snap Typeã¯ããŠãŒã¶ãŒãã¹ã¯ããŒã«ãçµãããšãã«ã¹ã¯ããŒã«ã³ã³ãããã©ã®ããã«æ¯ãèãããå®çŸ©ããŸããã³ã³ãã³ããä»»æã®äœçœ®ã§åæ¢ããã®ãèš±ã代ããã«ãScroll Snap Typeã¯ã¹ã¯ããŒã«ã³ã³ãããã³ã³ãã³ãå ã®ç¹å®ã®äœçœ®ã«ãã¹ãããããããŸããããã«ãããå¶åŸ¡ãããäºæž¬å¯èœãªã¹ã¯ããŒã«äœéšãçãŸããã³ã³ãã³ããã»ã¯ã·ã§ã³ãã¢ã€ãã ã®éäžã§åæ¢ããã®ãé²ããŸãã
ã¹ã¯ããŒã«åŸã«åç»åããã¥ãŒããŒãã«å®ç§ã«æŽåãããã©ãã®ã£ã©ãªãŒãæ³åããŠã¿ãŠãã ããããããã¯ãæç¢ºã«åºåãããã»ã¯ã·ã§ã³ãåžžã«æå®ã®äœçœ®ã«ã¹ãããããã¢ãã€ã«ã¢ããªããããScroll Snap Typeã®åã§ãã
Scroll Snap Typeã䜿çšããçç±
Scroll Snap Typeã¯ãããã€ãã®é åçãªå©ç¹ãæäŸããŸãïŒ
- ãŠãŒã¶ãŒäœéšã®åäžïŒäºæž¬å¯èœã§å¶åŸ¡ãããã¹ã¯ããŒã«ãæäŸããããšã§ããŠãŒã¶ãŒã¯ããç°¡åãã€å¹ççã«ã³ã³ãã³ããããã²ãŒãã§ããŸãã
- ããã²ãŒã·ã§ã³ã®åŒ·åïŒã¹ã¯ããŒã«ã¹ãããã¯ãŠãŒã¶ãŒãã³ã³ãã³ãå ã§ã¬ã€ãããæå³ããã»ã¯ã·ã§ã³ãã¢ã€ãã ã«ç¢ºå®ã«å°éãããŸãã
- å¯èªæ§ã®åäžïŒã³ã³ãã³ããç¹å®ã®äœçœ®ã«ã¹ããããããããšã§ãããã¹ããå®å šã«è¡šç€ºããèªã¿ããããªããç解床ãåäžããŸãã
- ã¢ãã€ã«ãã¬ã³ããªãŒãªãã¶ã€ã³ïŒScroll Snap Typeã¯ãæ£ç¢ºãªã¹ã¯ããŒã«ãé£ããã¢ãã€ã«ããã€ã¹ã§ç¹ã«åœ¹ç«ã¡ãŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒæ£ããå®è£ ããããšãã¹ã¯ããŒã«ã¹ãããã¯éåé害ãæã€ãŠãŒã¶ãŒã®ã¢ã¯ã»ã·ããªãã£ãåäžãããããšãã§ããŸãã
- èŠèŠçãªé åïŒã¹ã ãŒãºãªã¹ãããåäœã¯ãããæŽç·ŽãããèŠèŠçã«é åçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãçã¿åºããŸãã
Scroll Snap Typeã®ããããã£
Scroll Snap Typeã®æ©èœã¯ãäž»ã«2ã€ã®CSSããããã£ã«ãã£ãŠå¶åŸ¡ãããŸãïŒ
- scroll-snap-typeïŒãã®ããããã£ã¯ã¹ã¯ããŒã«ã³ã³ããã«é©çšãããã¹ãããæåã®è»žãšå³æ Œããå®çŸ©ããŸãã
- scroll-snap-alignïŒãã®ããããã£ã¯ã¹ã¯ããŒã«ã³ã³ããå ã®åèŠçŽ ã«é©çšãããã¹ãããããããšãã«èŠçŽ ãã³ã³ããå ã§ã©ã®ããã«æŽåããããæå®ããŸãã
scroll-snap-type
scroll-snap-typeããããã£ã¯ãã¹ããã軞ãšã¹ãããã®å³æ Œãã®2ã€ã®å€ãåãå
¥ããŸãã
ã¹ããã軞
ã¹ããã軞ã¯ãã¹ã¯ããŒã«ãã¹ãããããæ¹åãæ±ºå®ããŸãã以äžã®å€ã®ããããã«ãªããŸãïŒ
- noneïŒã¹ã¯ããŒã«ã¹ããããç¡å¹ã«ããŸãããããããã©ã«ãå€ã§ãã
- xïŒæ°Žå¹³æ¹åã®ã¹ã¯ããŒã«ã¹ããããæå¹ã«ããŸãã
- yïŒåçŽæ¹åã®ã¹ã¯ããŒã«ã¹ããããæå¹ã«ããŸãã
- blockïŒãããã¯æ¬¡å ïŒæšªæžãã¢ãŒãã§ã¯åçŽã瞊æžãã¢ãŒãã§ã¯æ°Žå¹³ïŒã§ã®ã¹ã¯ããŒã«ã¹ããããæå¹ã«ããŸãã
- inlineïŒã€ã³ã©ã€ã³æ¬¡å ïŒæšªæžãã¢ãŒãã§ã¯æ°Žå¹³ã瞊æžãã¢ãŒãã§ã¯åçŽïŒã§ã®ã¹ã¯ããŒã«ã¹ããããæå¹ã«ããŸãã
- bothïŒæ°Žå¹³ãšåçŽã®äž¡æ¹åã§ã¹ã¯ããŒã«ã¹ããããæå¹ã«ããŸãã
ã¹ãããã®å³æ Œã
ã¹ãããã®å³æ Œãã¯ãã¹ã¯ããŒã«ã³ã³ãããã¹ããããã€ã³ãã«ã©ãã ãå³å¯ã«åŸãããæ±ºå®ããŸãã以äžã®å€ã®ããããã«ãªããŸãïŒ
- mandatoryïŒãŠãŒã¶ãŒãã¹ã¯ããŒã«ãçµããåŸãã¹ã¯ããŒã«ã³ã³ããã¯å¿ ãã¹ããããã€ã³ãã«ã¹ãããããŸãã
- proximityïŒãŠãŒã¶ãŒãã¹ã¯ããŒã«ãçµããåŸãã¹ããããã€ã³ãã«ååè¿ããã°ãã¹ã¯ããŒã«ã³ã³ããã¯ã¹ããããã€ã³ãã«ã¹ãããããå ŽåããããŸãã
äŸïŒ
.scroll-container {
scroll-snap-type: y mandatory;
}
ãã®ã³ãŒãã¹ããããã¯ãmandatoryã®å³æ Œãã§åçŽã¹ã¯ããŒã«ã¹ããããæå¹ã«ããŸããã³ã³ããã¯åçŽã«ã¹ã¯ããŒã«ããåŸãåžžã«ã¹ããããã€ã³ãã«ã¹ãããããŸãã
scroll-snap-align
scroll-snap-alignããããã£ã¯ãã¹ããããã€ã³ããã¹ã¯ããŒã«ã³ã³ãããšã©ã®ããã«æŽåããããæå®ããŸããããã¯ã¹ã¯ããŒã«ã³ã³ããå
ã®åèŠçŽ ã«é©çšãããŸãã
ããã¯æ°Žå¹³è»žçšãšåçŽè»žçšã®2ã€ã®å€ãåãå ¥ããŸããå€ã¯ä»¥äžã®ããããã§ãïŒ
- startïŒã¹ãããé åã®éå§èŸºãã¹ã¯ããŒã«ã³ã³ããã®éå§èŸºã«åãããŸãã
- endïŒã¹ãããé åã®çµäºèŸºãã¹ã¯ããŒã«ã³ã³ããã®çµäºèŸºã«åãããŸãã
- centerïŒã¹ãããé åãã¹ã¯ããŒã«ã³ã³ããã®äžå€®ã«é 眮ããŸãã
- noneïŒãã®èŠçŽ ã®ã¹ããããç¡å¹ã«ããŸãã
äŸïŒ
.scroll-item {
scroll-snap-align: start;
}
ãã®ã³ãŒãã¹ããããã¯ãåã¹ã¯ããŒã«ã¢ã€ãã ã®éå§èŸºãã¹ã¯ããŒã«ã³ã³ããã®éå§èŸºã«åãããŸãã
Scroll Snap Typeã®å®çšäŸ
Scroll Snap Typeã¯ããŠãŒã¶ãŒäœéšãåäžãããããã«æ§ã ãªã·ããªãªã§äœ¿çšã§ããŸãã以äžã«ããã€ãã®äŸãæããŸãïŒ
1. ãã«ã¹ã¯ãªãŒã³ ã¹ã¯ããŒã« ãŠã§ããµã€ã
ãã«ã¹ã¯ãªãŒã³ã¹ã¯ããŒã«ãŠã§ããµã€ãã¯äººæ°ã®ãã¶ã€ã³ãã¬ã³ãã§ãããããŒããã©ãªãªãã©ã³ãã£ã³ã°ããŒãžãã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ã§ãã䜿çšãããŸããScroll Snap Typeã䜿çšãããšããŠã§ããµã€ãã®åã»ã¯ã·ã§ã³ãã¹ã¯ããŒã«åŸã«å®ç§ã«ãã¥ãŒã«ã¹ãããããããã«ã§ããŸãã
HTMLïŒ
<div class="scroll-container">
<section class="scroll-section">Section 1</section>
<section class="scroll-section">Section 2</section>
<section class="scroll-section">Section 3</section>
</div>
CSSïŒ
.scroll-container {
height: 100vh; /* viewport height */
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroll-section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
ãã®äŸã§ã¯ãåã»ã¯ã·ã§ã³ããã¥ãŒããŒãå šäœãå ããåçŽæ¹åã«ã¹ããããããã«ã¹ã¯ãªãŒã³ã¹ã¯ããŒã«ãŠã§ããµã€ããäœæããŸãã
2. ç»åã®ã£ã©ãªãŒ
Scroll Snap Typeã¯ãäžåºŠã«1ã€ã®ç»åã衚瀺ããç»åã®ã£ã©ãªãŒãäœæããã®ã«æé©ã§ããã¹ã¯ããŒã«åŸã«åç»åãã®ã£ã©ãªãŒã³ã³ããå ã§å®ç§ã«æŽåããããšãä¿èšŒããŸãã
HTMLïŒ
<div class="gallery-container">
<img class="gallery-item" src="image1.jpg" alt="Image 1">
<img class="gallery-item" src="image2.jpg" alt="Image 2">
<img class="gallery-item" src="image3.jpg" alt="Image 3">
</div>
CSSïŒ
.gallery-container {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.gallery-item {
flex: 0 0 100%; /* Each image takes up 100% of the container width */
width: 100%;
height: auto;
scroll-snap-align: start;
}
ãã®äŸã§ã¯ãåç»åãæ°Žå¹³æ¹åã«ãã¥ãŒã«ã¹ãããããæ°Žå¹³ç»åã®ã£ã©ãªãŒãäœæããŸãã
3. ååã«ã«ãŒã»ã«
Scroll Snap Typeã¯ãèŠèŠçã«é åçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªæ¹æ³ã§ååã玹ä»ããååã«ã«ãŒã»ã«ãäœæããããã«äœ¿çšã§ããŸãããŠãŒã¶ãŒã¯ç°¡åã«ååãã¹ã¯ã€ãã§ããåååãæå®ã®äœçœ®ã«ã¹ãããããŸãã
HTMLïŒ
<div class="carousel-container">
<div class="carousel-item">Product 1</div>
<div class="carousel-item">Product 2</div>
<div class="carousel-item">Product 3</div>
</div>
CSSïŒ
.carousel-container {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.carousel-item {
flex: 0 0 300px; /* Adjust the width as needed */
width: 300px;
height: 200px;
scroll-snap-align: start;
margin-right: 10px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
ãã®äŸã§ã¯ãåååã¢ã€ãã ããã¥ãŒã«ã¹ãããããæ°Žå¹³ååã«ã«ãŒã»ã«ãäœæããŸãã
4. 1ããŒãžããã²ãŒã·ã§ã³
ã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ããŠã§ããµã€ãã§ã¯ãã¹ã¯ããŒã«ã¹ãããã¯ããŒãžã®ç°ãªãã»ã¯ã·ã§ã³éã®ã¹ã ãŒãºã§å¶åŸ¡ãããããã²ãŒã·ã§ã³äœéšãæäŸã§ããŸããã¹ã¯ããŒã«å¯èœãªåã»ã¯ã·ã§ã³ããã¥ãŒã«ã¹ããããããŠãŒã¶ãŒã®çŸåšã®ããŒãžäžã®äœçœ®ãæç¢ºã«ç€ºããŸãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
Scroll Snap Typeã¯UXãåäžãããããšãã§ããŸãããé害ãæã€ãŠãŒã¶ãŒã«æªåœ±é¿ãäžããªãããã«ã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãéèŠã§ãã
- ããŒããŒãããã²ãŒã·ã§ã³ïŒã¹ã¯ããŒã«ã¹ããããæå¹ãªå Žåã§ãããŠãŒã¶ãŒãããŒããŒãã䜿çšããŠã³ã³ãã³ããããã²ãŒãã§ããããã«ããŠãã ãããé©åãªARIA屿§ãšãã©ãŒã«ã¹ç®¡çæè¡ã䜿çšããŸãã
- åãã®æå¶ïŒããäŒçµ±çãªã¹ã¯ããŒã«äœéšã奜ããŠãŒã¶ãŒã®ããã«ãã¹ã¯ããŒã«ã¹ããããç¡å¹ã«ãããªãã·ã§ã³ãæäŸããŠãã ããã
prefers-reduced-motionã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãŠãŒã¶ãŒã®å¥œã¿ãæ€åºããããšãæ€èšããŸãã - æç¢ºãªãã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ïŒããŒããŒããŠãŒã¶ãŒãçŸåšã©ã®èŠçŽ ã«ãã©ãŒã«ã¹ãããããç°¡åã«ç¢ºèªã§ããããã«ããã©ãŒã«ã¹ã€ã³ãžã±ãŒã¿ãæç¢ºã«è¡šç€ºãããããã«ããŠãã ããã
- ã»ãã³ãã£ãã¯HTMLïŒæ¯æŽæè¡ã«æç¢ºãªæ§é ãæäŸããããã«ãã»ãã³ãã£ãã¯HTMLèŠçŽ ïŒäŸïŒ
<article>ã<nav>ã<section>ïŒã䜿çšããŸãã
ãã©ãŠã¶ã®äºææ§
Scroll Snap Typeã¯ãChromeãFirefoxãSafariãEdgeãªã©ã®ææ°ã®ãã©ãŠã¶ã§åºããµããŒããããŠããŸãããã ãããããžã§ã¯ãã«Scroll Snap Typeãå®è£ ããåã«ãCan I use... (caniuse.com) ã®ãããªãŠã§ããµã€ãã§ææ°ã®ãã©ãŠã¶äºææ§æ å ±ã確èªããããšã¯åžžã«è¯ãç¿æ £ã§ãã
Scroll Snap Typeã®ä»£æ¿æ¡
CSS Scroll Snap Typeã¯åŒ·åãªããŒã«ã§ãããç¹ã«å€ããã©ãŠã¶ãããè€éãªã·ããªãªã§åæ§ã®ã¹ã¯ããŒã«å¹æãå®çŸããããã®ä»£æ¿ã¢ãããŒãããããŸãã
- JavaScriptã©ã€ãã©ãªïŒããã€ãã®JavaScriptã©ã€ãã©ãªã¯ã¹ã¯ããŒã«ã¹ãããæ©èœãæäŸããããå€ãã®å¶åŸ¡ãšæè»æ§ãæäŸããŸããäŸãšããŠãfullPage.jsãScrollMagicããããŸãã
- ã«ã¹ã¿ã JavaScriptå®è£ ïŒã¹ã¯ããŒã«ã€ãã³ãããªãã¹ã³ããããã°ã©ã ã§ã¹ã¯ããŒã«äœçœ®ã調æŽããããšã§ãJavaScriptã䜿çšããŠã«ã¹ã¿ã ã®ã¹ã¯ããŒã«ã¹ãããæåãå®è£ ã§ããŸãã
ãããããã®ã·ã³ãã«ããããã©ãŒãã³ã¹ãããã³ãã€ãã£ããªãã©ãŠã¶ãµããŒãã®ãããäžè¬çã«ã¯CSS Scroll Snap Typeã®äœ¿çšã奜ãŸããŸãã
Scroll Snap Typeã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
CSS Scroll Snap Typeãæå€§éã«æŽ»çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- æŠç¥çã«äœ¿çšããïŒã¹ã¯ããŒã«ã¹ããããå€çšããªãã§ãã ããããŠãŒã¶ãŒäœéšãåäžãããããã²ãŒã·ã§ã³ãæ¹åããå Žåã«ã®ã¿é©çšããŸãã
- é©åãªå³æ ŒããéžæããïŒãŠãŒã¹ã±ãŒã¹ã«mandatoryãšproximityã®ã©ã¡ãã®ã¹ããããããé©åãã倿ããŸãã
- èŠèŠçãªæããããæäŸããïŒèŠèŠçãªæãããïŒäŸïŒç¢å°ãããã°ã¬ã¹ã€ã³ãžã±ãŒã¿ïŒã䜿çšããŠãŠãŒã¶ãŒãã¬ã€ãããã³ã³ãã³ããã¹ã¯ããŒã«å¯èœã§ããããšã瀺ããŸãã
- 培åºçã«ãã¹ãããïŒäžè²«æ§ã®ããã¹ã ãŒãºãªã¹ã¯ããŒã«äœéšãä¿èšŒããããã«ãããŸããŸãªããã€ã¹ããã©ãŠã¶ã§å®è£ ããã¹ãããŸãã
- ã¢ã¯ã»ã·ããªãã£ãåªå ããïŒåžžã«ã¢ã¯ã»ã·ããªãã£ãèæ ®ããé害ãæã€ãŠãŒã¶ãŒã®ããã«ä»£æ¿ã®ããã²ãŒã·ã§ã³æ¹æ³ãæäŸããŸãã
- ããã©ãŒãã³ã¹ãèæ ®ããïŒäžè¬çã«ããã©ãŒãã³ã¹ã¯è¯å¥œã§ãããé床ã«è€éãªã¹ã¯ããŒã«ã¹ãããå®è£ ã¯ããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸããæœåšçãªåé¡ãæå°éã«æããããã«ãã³ãŒããšã¢ã»ãããæé©åããŸãã
ã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«Scroll Snap Typeãå®è£ ããéã¯ã以äžãèæ ®ããŠãã ããïŒ
- èšèªãµããŒãïŒãŠã§ããµã€ããå€èšèªããµããŒãããèšèªã®æ¹åïŒå·Šããå³ãŸãã¯å³ããå·ŠïŒã«é¢ä¿ãªãã¹ã¯ããŒã«ã¹ãããã®æåãæ£ããæ©èœããããšã確èªããŠãã ãããæžåæ¹åã«åºã¥ããŠèªåçã«èª¿æŽããã `scroll-snap-align: start` ã®ãããªè«çããããã£ã䜿çšããŸãã
- æåçãªé æ ®ïŒæåçãªéãã«æ³šæããç¹å®ã®å°åã§äžå¿«ãŸãã¯äžé©åãšèŠãªãããå¯èœæ§ã®ããããžã¥ã¢ã«ãã³ã³ãã³ãã®äœ¿çšãé¿ããŠãã ããã
- ããã€ã¹ã®äºææ§ïŒããŸããŸãªããã€ã¹ãç»é¢ãµã€ãºã§ãŠã§ããµã€ãããã¹ããããã¹ãŠã®ãŠãŒã¶ãŒã«äžè²«ããæé©åãããäœéšãä¿èšŒããŠãã ãããå°åã«ãã£ãŠäººæ°ã®ããã€ã¹ã¿ã€ãããããã¯ãŒã¯é床ãç°ãªãå ŽåããããŸãã
- ã¢ã¯ã»ã·ããªãã£åºæºïŒWCAGïŒãŠã§ãã³ã³ãã³ãã»ã¢ã¯ã»ã·ããªãã£ã»ã¬ã€ãã©ã€ã³ïŒãªã©ã®åœéçãªã¢ã¯ã»ã·ããªãã£åºæºãéµå®ããäžçäžã®é害ãæã€ãŠãŒã¶ãŒããŠã§ããµã€ãã«ã¢ã¯ã»ã¹ã§ããããã«ããŠãã ããã
çµè«
CSS Scroll Snap Typeã¯ããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã®ãŠãŒã¶ãŒäœéšãåäžãããããã²ãŒã·ã§ã³ãæ¹åããããã®è²ŽéãªããŒã«ã§ããã¹ã¯ããŒã«ã®æåãæ³šææ·±ãå¶åŸ¡ããããšã§ãããã€ã¹ããã©ãããã©ãŒã ãåãããããäºæž¬å¯èœã§çŽæçããã€é åçãªäœéšããŠãŒã¶ãŒã«æäŸã§ããŸããScroll Snap Typeãå®è£ ããéã«ã¯ãã¢ã¯ã»ã·ããªãã£ãšã°ããŒãã«ãªèæ ®äºé ãå¿ããã«ã誰ããå©çšå¯èœã§ã¢ã¯ã»ã¹ãããããŠã§ããµã€ããç®æããŠãã ããã
CSS Scroll Snap Typeã®åãæŽ»çšããããªãã®ãŠã§ãéçºãããžã§ã¯ããæ¬¡ã®ã¬ãã«ãžãšåŒãäžããŸãããïŒ