「CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方」のご紹介| Webデザイン参考記事まとめアプデ

2018年09月14日(金)

CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方

0

276

174

321

CSSのscroll-snapプロパティを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。今まではJavaScriptの領域でしたが、これからはCSSのみで実装できます。

scroll-snapプロパティの基礎知識と便利な使い方を紹介します。

Practical CSS Scroll Snapping

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

スクロールにスナップさせる「scroll-snapプロパティ」

CSSのscroll-snapプロパティを使用すると、ユーザーがスクロールを終了した後にビューポートを特定の要素または場所にスナップさせることができます。

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方』についてまとめています。

この記事は特にjavascript・アニメーション・Android・SEO・Chrome・Firefox・safari・iOSについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。