「たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方」のご紹介| Webデザイン参考記事まとめアプデ

2018年04月20日(金)

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方

0

269

102

264

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。

スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。

position: stickyの仕様
ブラウザ・サポート状況（Can I use…）

フィーチャー・クエリ（@supports）と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。

まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。

面白い使い方

基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以下、最新版のFirefox、Chrome、Safariあたりで見ていただけると確実に動いていると思います。...

WPJ

デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア。提携するSitePoint.com発の海外先端技術記事や、独自のインタビュー記事などを毎日掲載します。 KADOKAWAが運営。

デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア。提携するSitePoint.com発の海外先端技術記事や、独自のインタビュー記事などを毎日掲載します。 KADOKAWAが運営。WPJの記事『たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方』についてまとめています。

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