セカヤサブログ世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。コピー2022.02.23こんにちは。fixedがスマホ、特にiOSのSafariで動かない問題を回避するための方法を書いていきます。結論(コピペ可)なぜ動かないのか実装・解説まずは画像とテキストを配置するコードはこちら。fixed)するコードはこちら。長方形で切り抜くまとめ結論(コピペ可)最初にコードを載せておきます。実際に動かしてみてください。パララックスになっているのは.Sectionの部分で、.Firstviewと.OtherSectionは要素の重なりで画像が上にきていないかを確認するためのものです。reset.cssにはdestyle.css(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)を使っています。画像はもちろんローカルのものに置き換えても動作します。fixed;とbackground-sizeを同時に指定すると動かなくなる」ことが原因のようです。coverなどを指定することがほとんどだと思うので、困りますね。ちなみにAppleの公式フォーラムでも海外の開発者間で議論がされていましたが、スレッドの最後に「アップルは固定された背景はイケてないと判断した、それが全てだ。アップルは神だ、覚えておけ。」と書き殴られて終わっています。(https://developer.apple.com/forums/thread/99883)(2022/2/22現在)海外の開発者もお怒りのようですね。シリーズ累計500部突破!/今すぐ購入して、Web制作で自由を手にいれる!実装・解説まずは画像とテキストを配置する最初に画像とコンテンツを記述します。後述の「長方形で切り抜く」作業の関係でやや特殊な構造になります。この時点での見た目はこんな感じ。lightgray;}.Sectionが各セクションのまとまりで、その中に「画像(.Section-Image)」と「コンテンツ部分(.Section-Content)」が配置されています。.Section-Imageは単純な背景画像ではなく、positionを使って裏に配置しています。.Section__Innerという要素を一層挟んでいますが、後ほどこの要素が「長方形で切り抜く」要素になります。fixed)する続いて、画像を固定します。fixed;はスクロールしても画像の位置が固定される挙動ですから、それを再現します。この段階での見た目はこんな感じです。本来画像は3種類ありますが、fixedにすることで重なりが一番手前に来ている画像のみ見えます。fixedに変更する。center;}長方形で切り抜くさて、ここからがキモの部分です。「clip」というプロパティを使ってセクションごとに背景を切り抜きます。clip-pathというプロパティもありますが、ブラウザの対応状況の関係で古いほうのclipを使います。注意点は、MDNにも書かれていますがposition:absoluteもしくはfixedの要素にしか効果がありません。プロパティで、要素のどの部分が可視であるかを定義します。持つ要素だけに適用されます。developer.mozilla.orgなので、まずは.Secction__Innerをabsoluteに変更します。positionをrelativeに変更。positionをabsoluteに変更。