スクロール連動UIはCSSだけで作れる！ 疑似クラス:target-current/before/afterが便利 CSSには、スクロール位置が対象コンテンツの「前か」「後か」を判定するのに役立つものがあります。:target-before、:target-after、:target-currentの3つの疑似クラス、scroll-target-groupプロパティを使うと、今までJavaScriptを必要としていたスクロール連動のインタラクションをCSSだけで実現できます。 この記事ではそれぞれのCSSの使い方と、CSSだけで実装したインタラクションのデモを紹介します。 ※注意：本記事のデモは、Chrome・Edge 142以上でご覧ください。 スクロールに連動させるCSSの基本の使い方 ウェブサイトの「目次」を例に基本的な使い方を説明します。スクロールに連動して目次のスタイルが切り替わ
CSSに便利な機能が追加されます！ スクロールした方向を記憶するクエリで、たとえば下にスクロールしたときにはヘッダも普通に上部に隠れ、その後ページのどこからでも上にスクロールするとヘッダを上からアニメーションで再度表示するといったことがほんの数行のCSSで簡単に実装できるようになります。 Solved by CSS Scroll State Queries by Bramus! スクロールの状態をクエリするCSSのscroll-stateに新しいタイプscrolledが使えるようになります。 スクロールが可能であることを表すscrollableとは異なり、scrolledは、最後にスクロールした方向を記憶します。これを利用することで、「非表示バー」を作成できます。つまり、下にスクロールすると（または下にスクロールした後）、非表示バーは非表示になります。その後、上にスクロールすると、非表示バ
乗りこなせ！ モダンフロントエンド モダンなスクロール関連機能を使いこなそう ［CSS Modern Features no.7］ スクロールに絡む機能の実装 こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。今回のテーマは「スクロール」に関するモダンな機能群です。 ブラウザ上でスクロールに絡む機能を実装しようとすると、考慮すべき点や制約は多くなります。 たとえば、スクロールに応じて何か処理をする場合、JavaScriptによるスクロールの監視が必要です。このスクロールの監視処理は、イベントがトリガーされる回数が非常に多くなりやすく、パフォーマンスへの考慮が必要となります。 他にも、スクロールに応じた計算処理も複雑になりがちです。スクロールコンテナ自体のサイズ・内包コンテンツのサイズ・現在のスクロール位置・関連する要素の座標やサイズ、といった多くの情報に基づいた計算が必
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。 これらを使用すると、これまでJavaScriptなしでは実装できなかったカルーセルをCSSだけで実装できるようになります。その実装方法、CSSで実装したさまざまなカルーセルを紹介します。 Carousels with CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに ::scroll-button()と::scroll-marker()の新しい疑似
scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。 scroll-state() はコンテナクエリの一種であり、コンテナ要素のスクロール状態に応じてスタイルを変更できます。 よくある使い方としては、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。従来は要素が sticky によりスナップされているかどうかを JavaScript を使って判定する必要がありましたが、scroll-state() を使うことで CSS だけで実現できます。 スクロールがスタックされている状態 はじめに con
子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下のような挙動があります。 オーバーレイスクロールバー：スクロールバー自体が幅を持たず、スクロール領域に重なって表示される クラシックス
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは Scroll-driven Animations（スクロール・ドリブン・アニメーション）を使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメーションとは 作り始める前に、まずはスクロールアニメーションについて整理しておきましょう。 メリットと
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. A reading indicator atop a document
Yesterday, as I was browsing my Twitter timeline, a tweet from Chris Coyier popped up, in which he mentioned feedback he got for one of his CSS Tricks experiments. It went as follows: Anecdotal thing: when I had this on @CSS, I had SO MANY reports of people annoyed that when they did "find on page" and ⬆️⬇️ through the results, the smooth scrolling was slow and annoying. Unfortunately, you can't c
カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
