高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
iOS 15.4で追加されたCSS単位「dvh」が高さ100%問題を解決する
iOS 15.4でSafariに様々なアップデートがありましたが dvh という単位が追加されたことがWeb開発において大きな意味を持ちます。 これまでiOS Safariではスクロールを始めるとURLバーが小さくなり画面のサイズが変わるという問題がありました。 そのため高さ100%を「URLバーが大きい状態」と「URLバーが小さい状態」のどちらかで設定する必要があり、現在のURLバーの状態を反映した高さ100%をCSSだけで実現することは難しかったのです。 これを解決するのが dvh です。 結論 これまで height: 100%; や height: 100vh; と記述していた部分を height: 100dvh; と記述すればOK。 これまでの解決策 これまでiOS Safariで高さ100%を実現するためにはいくつかのパターンがありました。 パターン1: 100% パーセントで
BROKEN FLOWER MARKET
BROKEN FLOWER MARKETはジム・ジャームッシュ監督、2005年公開の映画BROKEN FLOWERSだけを取扱う中古DVDのONLINE SHOPです。 ジム・ジャームッシュが監督した映画は他にもたくさんあってどれも興味深いのですが、どの映画の配信サービスのラインアップにBROKEN FLOWERSはなくて、私もしばらく観かえすことはありませんでした。その日どの映画を観るか配信サービスを開いて選ぶことが多いし、そこにない映画はなかなか観なくなるように思います。それは寂しいので、それでBROKEN FLOWERSだけを取扱う中古DVD SHOPを始めようと思った次第です。 あと、ジム・ジャームッシュの他の映画とのオンライン上の情報量の差を埋めるぞということを勝手に考えています。 取り扱うDVDは2種類で日本語版のセルDVDとレンタル落のDVDです。価格は2プライスで セル版D
自主制作特撮映画「オーク」
商品ページ➡︎ https://orksshop.booth.pm/ iPhoneで撮影する自主制作特撮映画「オーク」公開！！ 皆様に楽しんでいただける事を心より願っております！ 是非 #オーク で感想をお寄せください！ Twitter https://twitter.com/orkproject2022 TikTok https://www.tiktok.com/@ork_gowm ◯キャスト 石川翔大(貴島 工役) https://twitter.com/shodai_ishikawa 泰 光(土門 諒役) https://twitter.com/TAIKOHrye 洞内花音(白井 希役) https://twitter.com/h_flower_music 関口秀美(魔女役) https://twitter.com/pix04 田代千日(土門 由美役) 平井孝樹(オー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
