CSS で垂直スクロールスナップをマスターする

はじめに

この実験では、CSS プログラミングの世界に突入し、そのさまざまな機能や機能性を探ります。この実験の目的は、CSS を使って視覚的に魅力的で応答性のある Web ページを作成するための必要なスキルを学習者に備えさせることです。実践的な練習と実験を通じて、学習者は CSS の構文、セレクター、プロパティなどをしっかりと理解するようになります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") css/CSSPreprocessorsGroup -.-> css/nesting("Nesting") subgraph Lab Skills css/selectors -.-> lab-35256{{"垂直スクロールスナップ"}} css/margin_and_padding -.-> lab-35256{{"垂直スクロールスナップ"}} css/borders -.-> lab-35256{{"垂直スクロールスナップ"}} css/width_and_height -.-> lab-35256{{"垂直スクロールスナップ"}} css/display_property -.-> lab-35256{{"垂直スクロールスナップ"}} css/grid_layout -.-> lab-35256{{"垂直スクロールスナップ"}} css/nesting -.-> lab-35256{{"垂直スクロールスナップ"}} end

垂直スクロールスナップ

VM には既に index.html と style.css が用意されています。

このコードは、スクロール中に要素にスナップするスクロール可能なコンテナを作成します。この効果を実現するために、以下の手順がとられます。

display: grid と grid-auto-flow: row を使って垂直レイアウトを作成します。
scroll-snap-type: y mandatory と overscroll-behavior-y: contain を使って垂直スクロール時のスナップ効果を作成します。
scroll-snap-align に start、stop、または center を指定することで、スナップの位置合わせを変更できます。

以下が HTML と CSS のコードです。

<div class="vertical-snap">
  <a href="#"><img src="https://picsum.photos/id/1067/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/122/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/188/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/249/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/257/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/259/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/283/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/288/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/299/640/640" /></a>
</div>

.vertical-snap {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(180px + 1rem);
  padding: 1rem;
  height: 480px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.vertical-snap > a {
  scroll-snap-align: center;
}

.vertical-snap img {
  width: 180px;
  object-fit: contain;
  border-radius: 1rem;
}

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたは垂直スクロールスナップの実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を練習できます。