fixedを使って、背景を固定してパララックスのような動きをすることがあるかと思います。fixedはスマホで動きません。coverを同時に使うとバグって動かなくなる」となっているようです。これは公式でバグとして認識されているみたいです。バグだからと言って実装しないわけにはいかないので、やっていきましょう。間違いとまではいきませんが、擬似要素を使った方法には欠点が多く使える状況が限定的で実際のWebサイト制作には正直使えない....多くのブログで紹介されている擬似要素を使った方法のコードはこちら。-1を使うことで擬似的に背景として扱っています。cover;}一見すると背景固定表示ができているように見えますが、実制作で使う際の欠点は主に3点。fixedの背景はページ全体をついて回るので、ページ全体に影響を及ぼす背景色を使っているコンテンツの一部にといった使い方はできないページ内に複数背景固定があった場合は、それぞれがついてくる状態なので使い物にならないページ内に一箇所だけ、かつ、背景色と一緒に使わない、かつ、ページ全体への影響を気にしないという状況だったら使えるかも。いや、そんなのめんどくさい!jsで細かく制御すればいけなくない場面も多いですが、工数どんだけかかるの?ってお話になっちゃいます。詳しくは実際に使ってみるととてもわかります。私が色々試した結果、ネットではどんだけ調べても出てこなかったのでぜひ試してみてください。PC時は、普段どおりの背景固定を使ってください。2022年5月:picture要素とsouce要素を使ったレスポンシブイメージを使えばPC,SPどちらもいけます。picture要素に書き換えました)「__attachment」からなるdivの塊をHTML上に書いておきます。noneとかで消しておいてください。</div></div>CSSはこちら。重要な部分だけ解説しますので、細かい値は調整する際に試してみてください。hogeには、表示したい高さを指定します。fixedを使って画面に固定させます。}}一番大事なのが、clipの部分。hiddenはぶっちゃけ意味なかったような....気が...ちょうど使ってた案件で必要だったので入れただけなので必要なければ消してください。hiddenが効きません。hiddenと同じ挙動をさせます。0)」は要素を矩形にトリミングする方法です。fixedでも問題なくトリミングが可能です。注意点この方法では、コード中のdivにtransformを使うと動かなくなります。transformを使ったアニメーションの際は、今回の方法ではなくabsoluteを使いましょう。まとめこの方法だったら、背景固定がページ内に複数あっても使えますし、背景色の影響も受けませんし、必要なdivの中で動作が完結するのでページへの影響もありません。終わってみると単純な仕組みでした。URLをコピーしました!URLをコピーしました!コメットキャットアニメとラノベとゲームが大好き。趣味で小説家になろうやアニメ、ガジェットについて、のんびりと個人ブログを運営中。Catブログは適格販売により収入を得ています。