scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
スクロール連動アニメーションの実装例 – TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
Web制作者は要チェック！ Chrome 121で新しく追加された6つのCSSの機能
今年もCSSはどんどん進化しそうですね！ 1/24にリリースされたChrome 121に追加された、CSSの新しい機能6つを紹介します。スクロールバーのスタイル、スペルミスや文法的に正しくないテキストをハイライトする疑似要素、SVGのCSSマスキングなど、これからのWeb制作に役立つ機能ばかりです。 New in Chrome 121 Chrome 121 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるハイライトの継承 CSSによるスクロールバーのスタイル font-paletteプロパティでカラーフォントをアニメーション CSSのスペルチェック機能 SVGのCSSマスキングの改善 displayプロパティの新しい値 はじめに 1/24にリリースされたCh
scroll-behaviorでなめらかスクロールが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 06日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 06 日目 scroll-behavior でハッシュ付き URL とかでジャンプするときのスクロールをなめらかアニメーションさせることができます。 使い方 デモ：https://codepen.io/ginpei/pen/OJdrqPR JS でのジャンプにも利く scrollTo() 等でスクリプトからスクロールする際にも利きます。楽ちんですね。 ちなみに実行時オプションで CSS の設定を上書きできます。 アニメーション制御はなし ON/OFF だけです。速度とかはブラウザー次第。 あとブラウザーの気分次第で無視しても良いと仕様に書かれています。そうなんだ。 おしまい 昔はみんな頑張って JavaScript で計算してアニメーションさせてましたね。 参考 scroll-behavior – CSS: カスケーディ
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。 今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。 CSSで実装できる、最新HTMLテクニック・スニペットまとめ iPhone 15 Pro紹介ページのCTAボタン コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。 See the Pen Apple Style CTA Reveal with CSS
CSSで実装できるのか！ iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック
先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。 このスクロール駆動のダイナミックアイランドをCSSで実装するテクニックを紹介します。下記のアニメーションは少しゆっくりめにしています。 ダイナミックアイランド（Dynamic Island）とは、iPhone 14 Proで実装された機能で、カメラのパンチホール部分のスペースを利用して実行しているアプリのアクティビティを表示します。サイズはアプリごとに最適化されます。 参考: iPhone 14 ProのDynamic Islandの使い方 | Appleサポート で、今回のiPhone 15 Proのページにスクロール駆動のダイナミックアイランドが多数実装されています。コ
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA
ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？ このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現できます。また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとWindowsでもmacOSのように滑らかにスクロールさせることができます。 前編である今回の記事では、慣性スクロールを使ったウェブサイトを紹介し、簡単に実装できるライブラリ「Lenis」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは - ICS MEDIA
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
Web制作者は知っておくと便利！ ブラウザにすでにサポートされているCSSの新機能を使ったテクニックのまとめ
CSSのコンテナクエリ（@container）、カスケードレイヤー（@layer）、スクロールスナップ（scroll-snap）、アスペクト比（aspect-ratio）、論理プロパティ（inset-inline）など、覚えておくと便利なCSSのテクニックを紹介します。 これらのCSSの新機能はすべてのブラウザにすでにサポートされています。 6 CSS snippets every front-end developer should know in 2023 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに コンテナクエリの使用方法 scroll-snapによるエクスペリエンスの作り方 CSS Gridによるposition: absolute;の回避方法 簡単に円を実装する方法 カスケードレイヤーの使い方
HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA
HTML制作で気をつけたい スクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経験したことがある人も多いのではないでしょうか？ 不要なスクロール領域ができていた スクロールバーの切り替わりで画面がガタつく これらの問題を防ぐためには、対処法のほかにどんな環境で発生するのかを知っておく必要があります。本記事では、スクロールバーの簡単な説明と、2つのよくある問題と対処法について紹介します。 スクロールバーの簡単な説明と、制作時のポイント よくある問題を紹介する前に、スクロールバーの簡単な説明と、macOSで制作する時の注意点について触れておきたいと思
懐かしのmarquee？テキストを自動スクロールさせる方法と実装例
2023年1月18日 CSS, JavaScript, Webサイト制作, Webデザイン 最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テキストが右から左に自動スクロールするという、かつての「marquee」タグを彷彿させる動きです。今回はこの自動スクロールテキストに注目してみます。 marquee とは かつては marquee というタグが使われ、このタグで囲んだテキストが自動的に右から左に移動しました。現在でもこのタグはChromeをはじめとするブラウザーで実行できますが、すでに非推奨となっています。 このテキストの自動スクロール、少し前からまたちょこちょこ見かけるようになりました。かつては少ないスペースに多くの情報を表示するために使われていたのかなと思いますが、現代ではどちらかというと装飾目的のようです。一部のコンテンツを動かすことで、画面にア
overscroll-behaviorがお手軽！ モーダルUI等のスクロール連鎖を防ぐ待望のCSS - ICS MEDIA
3つ値の具体的な動作は、次のサンプルで確認できます。overscroll-behaviorプロパティがcontainまたはnoneだった場合、背面のコンテンツにスクロールが伝達しないことを確認できます。 加えてcontainは、オーバースクロールの動作を維持します。このサンプルでは、コンテンツを超えて上下にバウンスする効果を確認できます。（次のGIF画像の2番目） 効果が有効かどうかは、OSやブラウザによって異なりますが、モバイルのPull-to-Refreshが有効なブラウザから確認できると思います。 サンプルを別ウインドウで開く コードを確認する（HTML、CSS） どのような使い方ができるのか、作例をいくつか用意しましたのでご紹介します。実装の参考にしてみてください。 画面固定で表示するUIの作例 画面固定で表示されるダイアログとハンバーガーメニューをdialog要素で実装し、ove
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
scroll-snap-*でカルーセルが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 09日目） | Ginpen.com
https://codepen.io/jh3y/pen/xxWyEBQ