はじめに
この実験では、CSS プログラミングの世界に突入し、そのさまざまな機能や機能性を探ります。この実験の目的は、CSS を使って視覚的に魅力的で応答性のある Web ページを作成するための必要なスキルを学習者に備えさせることです。実践的な練習と実験を通じて、学習者は CSS の構文、セレクター、プロパティなどをしっかりと理解するようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSS プログラミングの世界に突入し、そのさまざまな機能や機能性を探ります。この実験の目的は、CSS を使って視覚的に魅力的で応答性のある Web ページを作成するための必要なスキルを学習者に備えさせることです。実践的な練習と実験を通じて、学習者は CSS の構文、セレクター、プロパティなどをしっかりと理解するようになります。
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 でさらに多くの実験を練習できます。