UX Collective | Medium 日本語 フォロー iOS Safariでウェブサイトを拡張するCSSハック ウェブサイトは、iOS Safariユーザー向けの簡単なCSSトリックを通じて、ハードカバーの本に似た、より高級感のある雰囲気を作り出すことができます。デフォルトでは、iOS Safariはウェブサイトのコンテンツをステータスバーとタブバーの後ろまで拡張し、bodyの背景色を表示します。これは、背景色が指定されていない場合、単調な白い拡張として表示される可能性があります。これを改善するために、bodyにCSSの背景色を適用することで、拡張部分をヘッダーとフッターに合わせ、より統一感のある外観を作り出すことができます。しかし、この方法では、上下の拡張部分が同じ色を共有することを強制されるため、常に理想的とは限りません。より高度な解決策としては、上下の拡張部分に別々の固定要素を作成し、異なるヘッダーとフッターの色に合わせることが考えられますが、これは複雑になる可能性があります。より実用的なアプローチは、.top要素のみを使用する、よりシンプルなハックを実装することです。これにより、下の拡張部分はbodyの色を継承することができ、微妙で目立たないユーザーエクスペリエンスを提供します。著者はこれらのテクニックをmacOSおよびiOSバージョン26でテストしましたが、将来のアップデートでその有効性に影響が出る可能性があることに注意しています。最終的に、これらのCSSトリックは、ウェブサイトを単なるコンテンツ配信から、より魅力的な体験へと昇華させることを目指しています。 The CSS hack that extends your website on iOS Safari uxdesign.cc UX Collective | Medium 日本語 RSS thenote.app
.top要素のみを使用する、よりシンプルなハックを実装することです。これにより、下の拡張部分はbodyの色を継承することができ、微妙で目立たないユーザーエクスペリエンスを提供します。著者はこれらのテクニックをmacOSおよびiOSバージョン26でテストしましたが、将来のアップデートでその有効性に影響が出る可能性があることに注意しています。最終的に、これらのCSSトリックは、ウェブサイトを単なるコンテンツ配信から、より魅力的な体験へと昇華させることを目指しています。