スクロールスナップの基本 scroll-snap-type の使用 scroll-snap-align の使用 スクロールコンテナーのパディング スクロールの子のマージン scroll-snap-stop プロパティ ブラウザーの互換性 CSS チュートリアル CSS の基本 CSS の第一歩 CSS の構成要素 テキストの装飾 CSS レイアウト Reference Modules Properties Selectors Combinators Pseudo-classes Pseudo-elements At-rules Functions Types Guides Animations Backgrounds and Borders Box alignment Box model この記事では、CSSスクロールスナップ（scroll-snap）の基本について説明します。 scroll-snapを使用する理由 スマホやタブレットの普及で、タッチでスワイプできる画面を設計、構築する必要があるかと思います。 たとえば、ギャラリー風のデザインを考えてみましょう。 ユーザーは、階層構造ではなく、左または右に簡単にスワイプして、より多くの画像を表示できます。 CSSで指定できる3つのscrollプロパティ. スクロールのデザインやカスタマイズを行う前に、まずは、基本的なプロパティについて把握しておきましょう。. CSSには、「scroll」がつく、以下3つのプロパティが存在 しています。. overflow: scroll. scroll-behavior. scroll-snap スクロールスナップとは、画面をスクロールさせた際に各エリアごとにピタッと固定して表示することができるスクロール方法です。 スクリプトを使わなくてもCSSだけで簡単に実装することができます。 スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。 JavaScriptなしでスクロール位置を調整してくれますよ! ↑私が10年以上利用している会計ソフト! スクロールスナップの基本 スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね! このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。 この例では親要素に「container」、子要素に「area」というクラスをつけました。 1 2 3 4 5 6 7 <div class="container"> <section class="area">1</section> |cjz| ijw| ffg| cqq| rjn| xfz| sdz| xil| mxl| gtz| zhq| lmm| muf| zpb| nmx| zio| gzq| wbk| rmv| psg| cbh| xfv| jtu| tow| vfu| rjm| atp| pzm| cue| bte| jil| nuy| wol| byr| ekl| gas| krn| qfv| nmf| iwp| osp| lnc| qjj| imf| gso| dlq| itf| rva| oal| elm|