【CSS】CSSだけでパララックスを再現する - Qiita
はじめに みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーションが発火します。 今まで、このようなアニメーションを実装するには、JavaScriptを使っていたので大変でした。 しかし、Chrome 115で使えるようになった、scroll-driven animationsを使うと、CSSだけでスクロールに合わせたアニメーションを作れるようになります。 この記事では、そんなscroll-driven animationsを使って、パララックスを再現したので紹介します。 パララックス（parallax）について まずパララックス（parallax）にて解説します。 パララックス（parallax）とは？ パララックスとは、視差効果のことで、 Webサイト
CSSだけでiOS Safariスクロールバー非表示に対処する新しいやり方 - Qiita
iOS safariの暴虐 iOS safariでは、スクロールできる要素に対してスクロールバーを表示しないという正気を疑う挙動をします。 現代は端末幅にあわせてコンテンツの幅を柔軟に調整するのが一般的需要ですから、画面幅によっては運悪くちょうどキリのいいところで文章が切れてしまうことは十分にありえます。そんな場合、ユーザーはその要素がスクロール可能だとはまるで気づきません。 もちろん、iOSを使っている人間はそういう不自由さを受け入れる覚悟があるからApple製品を使っているのです。愛の前では使いにくいことなんて何の障害にもなりません。 しかしサービス運営者としては困りものです。Appleなんか好きでもなんでもなくても、そういう暴虐の限りを尽くした挙動にも対応できなければ「使いにくい」っつって文句言われたり、コンバージョン率が落ちたり、ビジネス的な損失につながるのです。無視したくても無視
"没IE時代" のCSSプロパティが凄い - Qiita
今まで「IE非対応」が壁となり業務での使用を躊躇していたCSSプロパティがいくつもありました。 しかし、ネットや各メディアでも話題になった通り、2022年6月16日、ついにIEのサポートが終了しました（一部OSを除く）。 そこで、IE終了により解き放たれた画期的なCSSプロパティを、個人的メモも兼ねて記載していきたいと思います。 全く新しいレイアウトの形「grid-template」 「grid-template」を初めて知った時は驚きました。 このプロパティを使用すると、以下コードのように視覚的にレイアウトをコントロールすることが可能となります。 See the Pen Untitled by monji (@monji88) on CodePen. これ、かなりやばくないでしょうか？見てわかるようにレイアウトはもちろん、各要素の高さ、幅、marginすらもgrid-templateプロ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
